Home Up Search Feedback 

 

 

Web Design Tutorial by Bob Deveroux 

Index

a)    Introduction

1)    Where Do I Start

2)    Starting a new Web

3)    Navigation Flow Chart

4)    Inserting Navigation Bars

5)    Creating a New Page from scratch

6)     Inserting a Picture

7)    A note on naming pages.

8)     Keep it User Friendly

9)     Hyperlinks

10)   BookMarks

Introduction

Web sites are proliferating at an exponential rate. A large number of them do nothing except amuse the proprietor. My suggestion is that if you don't need a web site you should think very carefully about whether or not to have one. Are you and what you have to say of such interest to even your mother and loved ones let alone the world at large?

Many of the sites (like this one) are free and come with 20 meg of storage, (as an example, this web takes approx 1.5 meg) For the privilege of using the site at no cost you are compelled to carry advertising banners and all sorts of 'stuff'. You will have no control over the type of advertising that is displayed nor on the amount.

Some web site providers are better than others in that they have a more reasonable advertising regime (less of it) but the base line is that the only way they can make a profit is by loading up your site with ads. and that is what they do. The alternative is that you pay a fee to your internet service provider (I.S.P.) and reap the benefits of an ad. free site.

I have chosen to use Microsoft's FrontPage to construct this site because I got it cheap. I don't know if it is better than any of the others or even as good, it just happened to be the one that I had on my machine. Typically of Microsoft products the interface was less than intuitive and with zero knowledge of even the fundamentals of web page construction I had considerable trouble getting to grips with it. I wasted a couple of days firffing around until I managed to produce anything remotely web like. This article is intended to save you at least three quarters of that time. I am by no means even mildly proficient in web page design and what I have written here is about the sum of my knowledge on the subject. So if you have any complaints on the style, content or even the veracity of the information that you find here I counsel you to write it down on a piece of card, fold it till its all corners and put it somewhere very safe!

Where Do I Start?  (Good Question!)

  You start by obtaining a 'legel' copy of Frontpage or some other similiar application.

Having done so, and infused with a felling of self rightiousness, run it!

Assuming that you are using FrontPage, the first thing that you will see is a blank white screen with the words     new_page_1.htm   at the top left corner. This is the first  (potentially Home) page of the new web site but we don't want this one at the moment. For this example we will use one of the templates supplied with Frontpage.

Top

Starting a new Web

If you Left Mouse Click (LMC) on the menu option  mnu/File/NewWeb you will be given a choice of templates that are ready prepared for your convenience (supposedly!)   For the purpose of this exercise choose:  Personal

Now the main page will have the words new_page_2.htm at the top left and will have the words   'Add this page to the navigation...etc  on it.

At the left you will have a Folder List of the Root drive with folders called:- _Private and Images and pages called:- favourite, index.....etc  LMDoubleC the page called index.htm.

This is the home page of your new site. Indeed it has the word Home at the top of it!

At the bottom left of the border are three tabs marked respectively Normal, HTML, and Preview, LMC on Preview and you will see a preview of your new site.

Follow the links around and you will find that you can (almost) always find your way back to the Home page with a couple of clicks. This brings us to our first and most important rule:

K.I.S.S.                 Keep It Simple, Stupid!

Top

Navigation Flow Chart

You will notice that one of the pages, myfav3.htm does not return you to the home page. If you LMC on mnuView/navigation you will see displayed a simple flow chart. As you will notice the heirarchy does not show the page called myfav3.htm. If you LMC on the file name Myfav3.htm on the Folder List at the left and drag the file to the bottom of Favourites on the flow chart you will have added the page Myfav3.htm to the Navigation view.

If you now mnuView/Page you will go back to the page view of the web. LMDoubleC on the page myfav3.htm  on the Folder List and you will see displayed the face of the myfav3.htm page.

Inserting Navigation Bars

You will need to put a Navigation bar on this page so that when it is run as a web you can navigate your way back to the favorite.htm

You do this by mnuInsert/NavigationBar. You will see the Navigation properties form. On this you should check the Parent Page box and 'OK' close it.

You will now have an UP navigation button on the myfav3,htm page, Click the Preview tab at bottom left and run through the web again and now you will see that you can go to My Favorite Site on the Favorites page and navigate your way back to the Favorite page.

Top

Creating a New Page from scratch

OK now its time to create a new page of our own. To do any editing on our web we need to be in the Normal view so select Normal on the tab at bottom left.

mnuFile/New/Page and select 'Narrow Left Alligned Body' You will see displayed a new page with text on the left and a picture on the right.

You will not want this picture so you should replace it with one of your own choice. You do this by first of all deleting the unwanted pic. LMC it and press the del key.

Inserting a Picture

Now mnuInsert/Picture/From File  To the expreme right of the text box that is labeled URL is the 'Select file from computer' button. Press it and pick a picture from your collection (you must have one somewhere!) Like magic it appears on the page! mnuFile/SaveAs and save the page after renaming it to something descriptive like D_PhotoOfMe.htm. You will be asked if you want to save the new picture, answer in the affirmative!

At the side of the new picture is a whole bunch of stuff in Latin. This should be replaced  with something pithy and descriptive like. 'A picture of Me'. so that the casual visiter knows that s/he isn't visiting  the Simian Site of the London Zoo.

Take the time to make the font, color and font size match the picture and context of the page.

Top

A note on naming pages.

I find that it is a good idea to give my pages an alphabet prefix depending on its position in the flow chart heirarchy. For instance the home page is called A_Index. All pages that descent from that are called B_something. Pages that link under them are called C_ something and so on. This makes it easier to keep track of them and to make sure that the navigation bars lead the user around in a comfortable and convenient manner. This web site has at the moment of writing 16 pages and I am probably less than half way through!

Keep it User Friendly

The chances are that the visitor to your web site is only a casual browser and s/he will dump you as soon as s/he encounters any discomfort. There are many millions of web sites on the net and they are growing exponentialy, if you want to stand out you have to be user friendly and interesting to your visitors. There are a number of things that you can do to make your site more appealing to the casual visitor.

Keep It Simple!. Put as few pictures in a possible. Many people have slow connections or/and are paying by the meg.

Complex graphics and fancy animations may look cool but they take up a lot of load time and can be annoying once the admiration that your visitor feels at your brilliance wears off.

Provide plenty of hyperlinks to allow the visitor to get back to the Home page or to escape the site all together. Nothing is more annoying than ending up at a dead end.

Above all keep it interesting. You may love and admire the cutsey sayings of your offspring (although that is hard to believe) but most everybody else thinks s/he is a noisy, smelly little object and are less than interested in its photo.

OK, Back to our new page.

Top

Hyperlinks

Having lured your visitor to your Web Site page, in the spirit of K.I.S.S. you need to make it easy for her to navigate around all the goodies that you have thoughtfully provided. If you are a professional site then you need to keep the user long enough to pass her over the advertisments and banners  to persuade her to invest all her money in your product or service. If on the other hand you are a private site you need to dazzle her with the cool photo of yourself on the MyPhoto.htm, page so she can't wait to make further, more intimate, contact with you.

Wheather professional or not, it is  necessary to allow the user to jump from one area of interest to another. This is be done by using the Hyperlink which is usefull for jumping from one page to another or to another web site all together (although if this happens you have lost the visitor to your site)

We have created a page with a picture and some text on it. We need to make it visible to the user. To do this we create a Hyperlink to it from another page.

A hyperlink (in case you don't know) is a jumping off point from one page to another or from a page to another web site.

This Hyperlink is to our new picture page which we have called D_PhotoOfMe.htm and from the page named Interest.htm

First we must out a Hyperlink jump off point on the Interest.htm page

LMDoubleC on  Interest.htmon the tree view.

Replace the text on the line where it says 'Interest 1', with "A Cool Picture of ME" or something similar. Highlight the text and mnu/Insert/Hyperlink . You will be shown an  Edit Hyperlink form.

From the Folder List of the existing pages you should select the new page that you have just created called C_PhotoOfMe.htm .

Now, having created a Hyperlink to the page you have to insert a navigation bar on the page to allow the user to return to the page whence s/he came. This is done as described in Inserting Navigation Bars

Top

BookMarks

A bookmark is, as the name suggest, a point on the page that is specially marked for easy access. They are inserted by choosing and typing a descriptive name and highlighting it. They perform a similar function to the Hyperlink but are used more often to navigate around within the individual pages.

mnu/Insert/bookmark and you will see the bookmark form, Click OK and there you go!

To jump to a bookmark from somewhere on the page, simply make the jumping off point a Hyperlink only when you mnu/Insert/Hyperlink, and on being presented with the 'Create Hyperlink' form you select the appropriate Bookmark destination from the Options text box at the bottom left.

Basicaly, that is all there is to it. Fronpage has dozens more functions and options but you will have to discover them for yourself! Good Luck..

Top

Home Page

 

 

 
Send mail to [email protected] with questions or comments about this web site.
Last modified: August 23, 1993