Backstage Pass to Internet course developed by: Alan Damon
The six steps to creating a web page:
Step1 - Facilitate File Management
Create a folder with an appropriate name in which you will place all the files which concern your site - "My First Web Site". To create a folder on your diskette, for example, open the diskette by double-clicking on its icon (which is found on the desktop or
you could try clicking on the illustration). In the window showing its contents, right-click on the mouse and select "New Folder" (Nouveau Dossier) from the pop-down menu.
Inside that folder,
create two folders, one called "first_site" and the other called "Other Files". The first folder will contain all the files which will be published on Internet. It will be a copy of exactly what people will find on line. The folder called "Other Files" will contain rough drafts, lists of
things to modify, e-mail addresses or anything else which is related to the site but which is not published.
Inside the folder called "first_site"
create one last folder called "images" which will contain all the photos, graphs, animations and icons on your pages. The reason for this is that a on a site such as www.eabjm.com, with three dozen or more pages,
each with the EABJM logo on it, putting one copy of the logo in the "images" folder is all that is necessary to have it show up on each page. Every page has a line of text with an img src tag pointing to that one file.
Step 2 - Create the Home Page
Step 3 - Insert an image
Before you insert an image on to your web page, place it in the "images" folder on your diskette. You'll thank me for this later because if you don't put the image in there now, it can be a major headache to fix the problem later. How do you move an image file from one folder to another?
Some editors will automatically place a copy of the image in the same folder as the index page. This will save you the previous step of having to move the file yourself. The only problem is that the editor might change the name to something like "image1.jpg". Word, for example, does this. If "penguins.jpg" is changed to "image4.jpg", and I've got images up to
"image18.jpg", I won't necessarily remember which one had penguins in it! Netscape Composer, on the other hand, makes a copy of the image, keeps the original file name but automatically places the copy of the image in the same folder as the html file. Although Star Office does not change either the filename or the emplacement when you put the image in the first time, if you edit that image
within Star Office's web page editor, it creates a new image with a filename such as "sv8rcn2mf.jpg". The only drawback to this besides having incomprehensible filenames is that because Star Office saves a new image each time one is edited, the old copies tend to build up. So be careful how you edit images. It is better to retouch images separately in image editors rather than when they are
inside web pages.
Step 4 - Insert a hyperlink
A hyperlink, or link for the "in" crowd, is a place on a web page where you click to go to a new page. To insert a link, follow these easy steps:
Create the page which will be linked to. Suppose the page is to find out who made the first page. Let's call it "creator.htm". Save that page in the folder called "first_site".
Go back to the home page and type the text which will be clicked. For example: "Click here to find out who made this page".
Select the text (either all of it or just the words Click here).
In the Insert menu, select Hyperlink.
There are two types of links to choose from - a link which goes to another part of the same page (we don't want that one here but it would be useful for subheadings on a very long page) or a link to a new page. To have the latter, click browse (Parcourir) to look for the page, select
index.htm and click OK. If given the choice between relative path and absolute path, always choose relative unless you've got a darn good reason to choose absolute.
A picture can also be used as a link. Follow the five steps above but instead of typing and selecting text, insert and select an image. (Images are selected by clicking once on them) The only drawback is that unless the picture says "Click here" on it, people do not necessarily know it is a link!
Step 5 - Insert a table
Tables can be very helpful for use as tables but they are also good at placing images where you want them.
Put the cursor where you want the table on the page and find Insert Table in the menus. Select the number of columns and rows you want.
Once the table exists, use a right-click of the mouse to select things from the pop-down menu. You'll see that there are all kinds of goodies:
borders, background colors (for the whole table or for each cell),
alignment options (both vertical and horizontal) and much, much more!
You can also select two or more cells and merge them. Ooooooo!
Step 6 - Go wild!
Now that you know the basics, the rest is just a matter of sitting down and fooling around with it. Look through the menus at the different things you can modify.
Try using your WYSIWYG editor to do the following:
change the background colors of your pages
instead of a color, have an image as the background of your page
change the color of your text (make sure it contrasts well with the background)
make a table whose cells have different colors as backgrounds. (remember: use the right-click technique on the cell you want to change and be careful because "table properties" is for the whole kit and caboodle whereas "cell properties" is just for that cell).
Try numbered lists or unordered lists with bullets or images (like this one).
Insert an e-mail link so people can contact you (note: the hyperlink is in the form "mailto:damon@chez.com" - if the word "mailto:" is not in front of the e-mail address with no space, it won't work.)
visit other peoples pages and try to imitate the things you like.
The key with format is to have some kind of continuity from page to page so that people do not feel like they have jumped from one person's site to another.
Once again, keep it simple.
One animation on a page is fun, 3 or more is a bit silly and 10 or more is just plain moronic.
Text which streams across the screen only conveys the message from left to right, never into the visitor's brain.
Simple, sparse, clear graphics have much more visual impact than flashing text or spinning animations. Keep the bells and whistles to a minimum.
Make your site easy to navigate with links back and forth to different pages.