Web Authors Must Ask Themselves the Following Questions
Total Page：16
File Type：pdf, Size：1020Kb
WebSmart V1.2
User Guide
Raymar Technologies 14 Charter Road Chippenham SN15 2RA Introduction WebSmart simplifies the creation and maintenance of web sites, so that even a grown-up can do it. Web authors must ask themselves the following questions: How much time do I want to spend being creative? How much time do I want to spend merely cranking handles? WebSmart takes care of much of the handle cranking, and frees you to concentrate on content and presentation. If you : want to create a web site very quickly want to keep your web site up to date one it has been created. don’t want to spend valuable time learning about and becoming proficient with all the underlying technical issues want your web site to look professional and to include lots of helpful features then WebSmart is for you.
This user guide is for use by clients of Raymar Technologies. Raymar Technologies will have installed some expert software into your web site built one web page (the Home Page) which will be mostly blank. supplied you with a CD-Rom containing an executable called websmart.exe given you a password for gaining access to the expert software.
It is our experience that many web sites don’t achieve their potential because as they grow beyond a few pages the designer in increasingly distracted from the ‘big picture’ coping with increasing technicalities.
Raymar Technologies doesn’t claim that web design is easy. Artistic flair, planning and organisation, and the ability to use words concisely are vital skills. WebSmart provides the environment where appropriate design skills are rapidly developed, because the user is not distracted by unnecessary detail.
We do claim to help make the design experience more enjoyable and very much cheaper in both time and resources. Tutorial This document is in tutorial form, using WebSmart to add material (which can later be easisly removed) to you web site. Merely follow the steps and you will gain an appreciation of how WebSmart works how web sites are put together.
Step 1 – Getting to your home page. ► Start your web browser, Internet Explorer version 5 (or later) or Netscape Navigator version 6 (or later) are recommended, and browse to http:/www.
Step 2 – Getting into the WebSmart management page. WebSmart web site management is accessed from a secret gateway in the site’s home page.
► Type ! on the keyboard. The page name will change to Entering WebSmart Site Manager and you will be asked to enter your password. Enter the password you have been given and click enter. The page name will change Site Manager. This page gives access to all the tools you require when managing your web site. It is to be noted that whilst you are working on your web site the pages visible to visitors remains unaltered. It is only when you click the link Publish the web site that the publicly visible web site is updated with your alterations.
Step 3 – Adding some text to the centre column of the home page. ► Click the B link in the entry for page name index. The page name will change to Home Page, and you will see a preview copy of your home page. Web page previews show how a page will look when you next publish your web site. Web site previews contain four icons near the top right. These are labelled, from left to right, left – this icon allows you to alter the left-hand column of your web page centre – this icon allows you to alter the centre column of your web page right – this icon allows you to alter the right-hand column of your web page site manager – this icon returns you to the Site Manager.
► Click icon centre. A page name Column Editor will appear. The left side will be annotated The colunm contains the following item(s):, and below is a line showing add more ….. and a green button. The add more line allows you to add a further item into the list of items which comprise the centre column. ► Move the mouse over the add more green button. A list of options will appear. ► Move the cursor over option main heading and click. A box labelled CREATING A HEADING will appear. Enter the text ‘Welcome to My Home Page’ and click enter changes. A new entry will appear above ………... in the left hand column, giving brief details of the entry you have just completed. ► Move the mouse over the add more green button, and this time click option insert vertical gap, leave the value at 10 pixels and click enter changes. A corresponding entry will be added to the list in the left hand column. ► Repeat the process selecting option text. In the text box enter: “If you need to find anything on the web, the best place to go is the” leaving the follow with: option checked for space., and click enter changes. ► Repeat the process selecting option link. Click Change to an external link (http//....) and enter: “http://www.google.co.uk” in the box below. In box visible legend enter: “Google UK” Again leavine the follow with: option checked for space., and click enter changes. ► Make a further text insertion, and in the text box enter: “search engine.” This time check the follow with: option a new line before entering.
Step 3 is now complete. Click update the page in the right hand column, and you web page will re-appear. You can try it out by clicking the Google UK link, and a new browser window will open to the Google UK web site.
☼ You can mix text of different colours and links into a single sentence using the follow with: space option for each segment. ☼ When you insert a link to an external web site, it causes a new browser window to open, allowing you to keep control of your own web site. ☼ When large quantities of text are to be entered, it can usually be copied from a source document in another window, and pasted into the text entry fields. Text can even be copied from other browser windows.
Step 4 Creating a new pages. The internet is composed of a network of interconnected web pages. You are free to browse from page to page in your own web site and from web site to web site any way you wish. It your job as a web author’s job to make your web site attractive and interesting enough to provide a satisfactory experience, thus captivating very flighty browsers, who soon lose interest if things get dull. This is in contrast with a book or a video, where you are more or less are forced to follow the thread with little opportunity for digression.
Before building your web site it is well worth spending some time planning your own web site structure, and writing it down as a ‘story board’. This shows how all your pages will relate to each other. It pays to do this early on, as it is more difficult (but not impossible!) chop and change later on. The web site could be structured as follows:
Home Page |------Holidays | |------Holidays in the UK | |------Holidays in France | |------Holidays in Spain | |------Photo Album | |------Highly Recommended | |------Restaurants | |------Hotels | |------Beaches | |------Attractions |------Useful Information
☼ It is very easy to add extra pages into this kind of structure, and no page is very far from the home page. ☼ The same kind of structure can be used successfully in most web sites.
► Return to the site manager using the fourth icon at the top of your home page, and click button Insert new page. Form creating a new page will appear. ►Enter page name “holidays” and title: “My Holidays” ☼ Page name is the kind of name that computers like to use. It may only be 12 characters long, and should contain only lower case letters a-z and, underscore _ and numbers 0-9 ☼ Page title will be visible to your users on the navigation bar. (This is where the line where the legend Home Page). It may contain any 24 characters. ►Ignoring the next two fields, click enter. The Site Map Editor page will appear. Ingnore this page for the present and click Return to Site Manager .
Repeat this process, creating a page with page name=”uk” and title=”Holidays in UK”. On entering the Site Map Editor, will be noted that the site map shows the new page is a ‘child’ of the Home Page. ► Click My Holidays, and the new page will be come its ‘child’ instead. ☼ The Site Map allows you to clearly see how your pages relate to each other, and allows you to change these relationships. ☼ The Site Map controls how the navigation bar works. When a ‘child’ of the home page is on display, the navigation bar will display two page names. As you progress down successive generations more and more page names appear on the navigation bar.
Step 5 Creating inter-page links Return to Site Manager, click home page body button, and select the left-hand column. ► Select and click horizontal alignment, check bulleted, enter an Indent Amount value of 5 and enter. ► Select and click link, select link to internal page “holidays”, enter visible legend “My Holidays” and click enter. ► repeat the two steps above, this time with an Indent Amount of 14 and link to internal page = uk with visible legend = UK Holidays. Click update the page, and You may care to add the final link from My Holidays to UK Holidays. ► Browse to My Holidays, edit the left column and insert button. Select colourway:=cyan, link to internal page UK Holidays and enter visible legend:=UK Holidays. Click enter changes and update the page. Step 5 is now complete. You can now browse between the Home Page and the two other pages (and back again, using the navigation bar). ☼ Navigation from page to page is very easy. Some web sites provide an array of ‘buttons’ or ‘tabs’ on every page allowing you to browse to almost any other page. This may be useful if your web connection is very, very slow, but it has its down sides: It becomes increasingly difficult (ie expensive!) to maintain links to every other page as the web site gets bigger You eventually run out of room to add extra buttons or tabs, and you have to re- design every single page. Some folk prefer to explore their own way around, and the less choices given on each page the easier it is to do a ‘grand tour’.
Step 6 Adding a web site map page. As more and more pages are added to your web site, it is helpful to provide a map showing how the pages relate to one another. WebSmart allows the map appearing in the Site Map Editor to be reproduced on publicly viewable web pages.
► Create a new page with page name = __sitemap and title = Web Site Map View any page, and note that at the bottom left, just below the horizontal rule, a new link Site Map now appears. ☼ This link is automatically added to all pages when a page with the special name __sitemap is created. ☼ You will note that when creating this page you did not visit the Site Map Editor. Any page whose name begins with _ is omitted from the site map. This declutters ‘service’ pages from the site map.
► Select insert a new code insert into the centre column of page Site Map. From the select code: menu select “sitemap.txt” and click enter changes. On returning to the preview page the centre column will now show the web site map. ☼ The site map allows you to go directly to any page.
Step 7 – Legal Issues Your web site is your intellectual property, which you should attempt to protect against theft. Because of the modern preoccupation with claiming damages through litigation, or the thereat of litigation, you need to indemnify yourself by publicly stating the terms and conditions appropriate to your web site.
► Return to the Site Manager and click Enter Site Parameters. In the field Official name of owner in copyright notice enter the name of your organisation. Click enter. ► From the Site Manager create a page called ‘__conditions’, with a title ‘Conditions of Use’. View any page, and note that at the right, just below the horizontal rule, new legend ©2004
► Select insert a new code insert into the centre column of page Conditions of Use. From the select code: menu select “conditions.txt” and click enter changes. On returning to the preview page the centre column will now contain a comprehensive conditions of use statement. The statement quotes the name of your organisation at appropriate points in the text. ☼ The presence of the © in every page, and the Conditions of Use page don’t guarantee anything. However if your web site maintains a ‘professional’ look, would- be abusers may consider you can afford a decent lawyer, and will think twice.
Step 8 – Getting a Response from Your Public There are occasions when the you need to solicit a response from visitors, or you may wish to enable visitors to send a message to the web site owner or to the Webmaster. However, it is not recommended to publish E-mail addresses on the Internet because automated Internet ‘web crawlers’ will ‘harvest’ such information for their own purposes. WebSmart provides a much safer alternative. It allows you to store your contact E- mail addresses invisibly within your web site. When Response Forms are completed, they are processed internally, being automatically routed to the recipient(s) you have designated.
► From the Site Manager click Enter site parameters. ► Click button add new email at the bottom of the page. An additional section appears in Site Parameters page. ► In field New E-mail target: enter a short name which will be used to the recipent. ► In field New E-mail address enter the recipent’s E-mail address. ► Click button add new target. The new E-mail details will be listed at the bottom of the page. ► Repeat the process for all other possible recipents, so that further E-mail addresses are added to the list. Ensure you include an E-mail address for your web master ¶ Click the enter button to return to the Site Manager.
►Create a new page = __contact, with a title ‘Contact the Web Master’. ► Create another new page = _acknowledge, with a title=Thank You for Your Message. View any page, and note that at the bottom left, just below the Site Map link a new link Contact the Webmaster now appears. ☼ This link is automatically added to all pages when a page with the special name __contact is created.
► Select insert reponse form into the centre column of page Contact the Webmaster. Check the names of the people who are to receive a copy of the completed reponsse form, enter _acknowledge in field name of acknowledgement page:, text “A message to the Webmaster” in field subject of E-mail: and click enter. On updating the page you will note that the page now contains two fields and a send button, allowing a user to enter contact details and a message. The response form can be tried straight away: ►Enter an E-mail address and a message and click send. Page ‘_acknowledge’ will be displayed. The recipient(s) will receive an E-mail containg details from the response form. ☼ If you wish add some additional text on pages __contact and _acknowledge explaing the process to the user,
Step 9 – Photographs Digital cameras are very useful for publishing images to a web site. Most digital cameras include bundeled PC interface, which often has a means of performing a certain amount of photo editing, such a adjusting brightness, contrast and colour saturation and trimming off unwanted material. Digital images are generally of sufficient quality for printing to a colour printers, which typically require about 600 dots per inch to produce an acceptable photograph. For web site use this amount of detail is quite excessive, monitor screens usually displaying about 72 pixels (dots) per inch. This reduced quality requirement is fortunate, because the file size of a full quality photograph is around 1Megabyte, which would take about 3 minutes to receive from a web page if you are connected using a 56Kilobytes/second modem. ☼ If you have broadband it is difficult to appreciate what happens when web pages get too big. It is instructive to browse to your web site via a modem now and again, just to see if any pages need to be reduced in size.
Furthermore, a photo produced on a digital cameras is typically 1800 pixels wide and 1200 pixels high. Since may web users own monitors set to 800 pixels wide and 600 pixels high, the dimensions of the photo need to be reduced to fit neatly on a web page. Although tedious, this process of reduction further decreases the file size. As a result of these processes, the size of a typical web-compatible photograph should be below 30Kilobytes (which takes a more respectable 5 seconds to receive via a 56K modem.
WebSmart deals with you photographs automatically, so having been made aware of the issues relating to publishing photographs on the web, you can now forget all about them! In Step 9 we will choose any photograph from your PC (it will be called
► Copy file websmart.exe from the WebSmart CD-Rom to a folder in your PC. Right-click the copy and click Create Shortcut. Rename the new file WebSmart and drag it to your desktop. ☼ The purpose of WebSmart is to copy photos and images from your PC to your web site. All you have to do it point to where a file lives on your PC, and WebSmart will do the rest!
► Double-click WebSmart on your desktop. A light blue window will appear. ►Click the connect button and a log-on dialogue box will appear. Enter you web site domain name and the password supplied by Raymar Technologies and click OK. A set of six buttons will appear. exit allows you to close WenSmart when you have finished finished takes you back to the log-on dialogue box. This allows you to work with several different web sites. masthead lets you change the masthead image, located at the top of every page in your web site. left transfers photos and images to your web site ready for use in the left-hand column of any page. centre transfers photos and images to your web site ready for use in the centre column of any page. right transfers photos and images to your web site ready for use in the right-hand column of any page. ► Choose which column you wish to publish you photo to, and click the appropriate button (left, centre, or right). A file selector dialogue box will appear. The bottom field, files of type: will read ‘gif files (*.gif). Use the down-arrow to select ‘jpg files (*.jpg). This is the type of file produced by digital cameras. ► Move the folder containing you photograph and select it by clicking open. A dialogue box will appear, asking What do you want to call this image in your website? As with page names, the names should consist of lower cales letters a-z, 0-9 and _. There is no need to add .jpg on the end - WebSmart takes care of all that. ► Enter a name and click OK. The photograph will be transferred to your web site. This may take several minutes if you are connected via a 56K modem. Eventually the message Load successful will appear. ►Click continue to return to the options list. You may now exit from WebSmart if you have no more images to transfer. ► From your web site Site Manager page edit the chosen column of page Holidays, and select insert an image. Using the drop-down menu find the name you have given to your photograph, click enter changes and return to the page preview. ☼ Your photograph will now appear in the appropriate column. Simple as that!
Step 10 – Graphic Images New web designers will rapidly develop a vital skill - the careful selection and use of graphics. Graphics can brighten up a web site, relieving the monotony of unbroken text content, and can also be used as links to other pages. When used in this way, they are usually arranged to change in some way as the cursor passes over them. This is called a roll- over image. Given the opportunity, you will imagine the ‘perfect’ image for a particular job and create that image using a graphic design package such as PhotoShop or Fireworks. With unlimited resources (cash!) you will commission a professional Graphic Artist to produce a really stunning image. It may be worth engaging a professional (Such as Raymar Technologies) to create your web site's masthead image. It should'nt be too expensive, and can set the tone for the whole web site. In time you will build up your own library of ‘stock’ images obtained royalty free from the web or royalty free from magazine cover discs. ► Browse to http://www.raymar.org.uk/ws/html/images.htm, move the cursor over the first Our Diary image in the left hand column, right click, and select Save Picture As … A File dialogue box will appear. Save the image to a folder in your PC. ► Repeat the process with the second Our Diary image in the left hand column. You now have a matched pair of images for creating a rollover. ► Start programme websmart.exe, click Connect, enter your web site URL and password and click OK. The options menu will appear. ► Click left, locate the first image in your PC and click Open. In the 'naming' dialogue box ensure the name is set to "ourdiary" and click OK. The image file will be loaded to your web site. Click continue. ► Repeat the second image in your PC and repeat the process, naming the image "ourdiary_ov". ► Browse to your web site, gain access to the Site Manager, and create a new page "diary" with title=Our Diary. ► Select your Home Page, enter the left column editor, move the cursor over the add more … button and select rollover. A Creating a Rollover form will appear. ► In the menu Select a link to an internal page: select "diary". In the menu select normal image: select "ourdiary". In the menu select rollover image: select "ourdiary_ov". Eveter "Our Diary" in the alternate text: box (alternate text puts text into the light yellow information box that appears when you move the cursor over an image in a web page), click enter changes and update the page. A rollover image will have appeared in your page. Moving the cursor over it makes it change colour. clicking it takes you to page "Our Diary" ► Websmart.exe can be used to load a new masthead image by selecting button masthead. The masthead image must be in GIF format, and must have a width of 780 pixels. The usual heght for a masthead image is around 60 pixels, but this is not vritical, Raymar Technologies will be pleased to create an image to your requirements.
Step 11 - Page Layout and Appearance Page layout can be improved by: inserting vertical spaces between items in each column using the Vertical gap item. This items defaults to 10 pixels (a reasonable gap – not too large), but changed be set to any value. changing column item alignment for centre-aligned (the default) to left aligned. This is done using the Horizontal alignment item and selecting left aligned. creating a left indent. This is done using the Horizontal alignment item, clicking indent and entering an indent amount value. breaking long paragraphs up using bullet points. This is done using the Horizontal alignment item, clicking bulleted and entering an indent amount value. The appearance of all pages can be changed as follows: ► Create a page called “temporary”. In the right hand column insert a Code Module item, selecting “configure.txt” from the dropdown menu. Click enter changes and update the page. A panel will now be visible in the right hand column. the top three rows of buttons allow the tint of area surrounding the centre column to be adjusted. the second three rows of buttons allow the tint of the centre column to be adjusted. Colour adjustments control colour by allowing the amount relative amounts of red, green and blue to be changed. Clicking a “-“ button reduces the amount, the minimum value being 00. Clicking a “+” increases the amount, the maximum value being FF (the value is expressed in Hexadecimal code, where as well as numbers 0 to 9 are used, by letters A, B, C, D, E and F are used, representing decimal values 10, 11, 12, 13, 14 and 15 respectively. Equal values of red, green and blue produce a grey scale (00,00,00 = black, 88,88,88=mid grey and FF,FF,FF= white. Mixtures where less red is present produce shades of cyan. Mixtures where less green is present produce shades of magenta. Mixtures where less blue is present produce shades of yellow. It is to be noted that hexadecimal colour values are understood by graphics packages, so it is simple to coordinate column colours with colours present in a masthead image created using such a package.
The third three rows of buttons adjust the vertical indent between the navigation panel (which runs across the top of each page, below the masthead image) and the three columns. A more pleasing effect is gained if the three columns have different top margins. ► When colour and column position a finalised, click the Save page setting button. Page “temporary” may then be deleted by selecting its Head button in the Site Manager, clicking the delete this page link and entering “d” in the dialogue box which appears.
Step 12 – Getting Your Web Site Found Many web browsers search for web sites using Google or Yahoo. Having published your web site, search engines will eventually (in a few months) find you and store away your details. Your site will be listed for anyone who searches on words (termed key words), which appear in your web site. Your rating with search engines depends to some extent on the uniqueness of your content. If your web site quotes the name of a town or county in some of its pages, then looking up the location in a search engine may give you some rating. (Not, however, very high up on the list). If you have a very specialist web site, such as "lepidoptry" only 80 or 90 web sites will be listed, so you are likely to appear be in one of the first ten pages of results. However, most web designers have to work a little harder to appear in the first ten pages of any search. You can help some search engines by suggesting a list categories each of your web pages fall in to, and by suggesting some key words. ► From the Site Manager page select the head button for each page. ► Enter some text in field Meta tags description to describe the nature or purpose of the page. For instance, an Estate agent may enter: Choose property for sale or houses to rent - Property Auctions - Residential and commercial listings from UK auctioneers and real estate agents . ► Enter some text in field Comma delimited meta keys to supply key some of the words someone might enter into a search engine search string when looking for pages like yours. For instance, the Estate agent may enter: property, properties, sale, UK, rent, estate agents, real estate, houses, homes, commercial, lettings As the legend implies, key words should be separated by commas. It is possible to "submit" your web site to search engines yourself, to speed up the process of "getting found". If you are really serious you can engage a specialist consultant to promote your web site. However, it is almost self-evident that only a very few of the millions of web sites can appear in the first few pages of any search, so good results could prove expensive.
Step 13 - Making Changes A powerful feature of WebSmart is the ability to make changes to your web site. ☼ You may have noticed that when editing a column in one of your web pages, not only can you insert new entries on the end, but existing entries may be altered or deleted, and new entries may be inserted in any position. It is also possible to copy, cut and paste all or part of a list if entries in a column. WebSmart maintains a hidden paste buffer, which is cleared when you enter from your online home page. ► To commence selecting an item or a range of items, move the cursor over the button for first item to be selected and click Select from. A red bar will appear to the right of the button. ► Compete the selection of a range by moving the cursor over the button for last item to be selected and click Select to. The red bar will now extend from the first item to the last item. ► The selection range items need not be a adjacent. Items within the selected range can be omitted by clicking their Select toggle option. This also allows items outside the selected range to be included. ► Having made a selection, the items may be copied to the paste buffer by clicking the copy selection button on the right of the editor page, or they may be removed from the list and copied to the paste buffer by clicking the cut selection button. ► The contents of the paste buffer may be pasted into an column in any page by selecting the Paste before option associated with any item in a column and with the add more…. button. ☼ If you prefer to have a set of navigation buttons down the left column of each page, it would be a good idea to set them up on a 'template page', from where they can be copy and pasted to all other pages.
Step 14 - Publishing Your Changes Visitors to your web site will not see the changes you are making until you are ready to publish. There are really two separate copies of your web site: The online copy, which your visitors can see. The offline copy, in which you are doing your changes.
You can prove this for yourself by moving from the offline copy (which shows your changes) to the online copy (which doesn't) by clicking the Online view button in the Site Manager page.
When all your changes are complete, click the Publish button in the Site Manager page. This will transfer the offline copy to the online copy.
Step 15 - Custom-Built Facilities WebSmart makes provision for adding customising features into your web site through items called Code modules. Technically complex Code modules are built by specialist web designers, such as Raymar Technologies, and made accessible to you using the drop-down menu associated with the Code module option. An eaxmple is the diary facility: ► Edit the centre column of page diary. Insert a main heading item with the legend "Our Diary", followed by a 10 pixel gap. ► Moving the cursor over the add more … button click Code module, select "diary.txt" from the select item: menu, click enter changes and then update the page. The page will now contain a diary. ► Type % on the keyboard and a DIARY EDITOR page will appear. ► Add entries by clicking the Add a new entry button. ☼ As new diary entries are added they are automatically sorted into date order. ► When the diary is up to date click button submit changes. You will be transferred back to your home page. When moving to the "diary" page you will note that your entries have been added. (You may need to click the browser Refresh button, to view the changes - most web browsers try to save you time by 'remembering' web pages from last time, a process known as 'cacheing'.
☼ Code modules can be used for creating specialist data entry forms, performing online calculations and producing automatic estimates etc. Although they may be quite complex internally, they are simply added by you using the Code module option. You are, of course, free to add further features on a page containing code modules, allowing you to add any explanation your users may require and to obtain a pleasing page layout. Step 16 - Online Data Storage and Data Search Facilities When small alterations need to be made to your web site, they are easily accomplished using the Websmart Site Manager facilities. However, the need often arises to handle relatively large amounts of information. For this purpose web designers such as Raymar Technologies are able to integrate online database facilities into you WebSmart web site. Such facilities often include application software running on you PC providing: bulk-loading of data from data sources within your PC an update facility, allowing a web site database to be kept up to date at regular intervals, or when data in your PC changes.