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:/ web site>.
The page name in the browser will change to Home Page, and the display will be mostly blank, except for a header and the text ‘Home page’.
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:
“
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 Insertnew page. Form creating a new pagewill 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 <your organisation> has appeared, and a new link Conditions of Use leads you to the page you have just created.
☼ This link is automatically added to all pages when a page with the special name __conditions is created.
► 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.