21. Tutorial: Creating Web Pages

• The general steps are:

1. Get a computer account on ‘claymore.engineer.gvsu.edu’ from Prof. Jack. This account will have a prototype web page that you can edit.

2. Go to http://www.mozilla.org/editor and download the web page editing tool. In the editor go to ‘claymore.engineer.gvsu.edu’ and look for your account under ‘students’. You should be able to find a page that starts with ‘YOUR_NAME_GOES_HERE’.

3. First, save the page using ’save’. If one doesn’t exist, create a ‘temp’ directory on the computer. This directory will be used to temporarily hold your web page files. Make sure that the files will be saved in the ‘temp’ directory, and then ‘save’ the file as ’index.html’, all in lower case. An editor will start on the screen.

4. The editor behaves much like Microsoft Word, with some subtle differences. At this point add your name, and change your email address to your university account. You can change your email address by clicking on the email link, and then clicking on the ’chain link’ near the top of the screen.

5. To upload the changes use FTP. Many computers have ’WSFTP’ installed, although other FTP tools are available and may be used. You will need to connect to ’claymore.engineer.gvsu.edu’ and login with you user ID and password. (NOTE: Don’t save these on the computer you are using because somebody else could use your account.) Change to the ’public_html’ directory and copy the files there. As a minimum you will need to copy the ’index.html’ file, but any other files you need should also be in this directory, or in a subdirectory.

6. Use Firefox, not the editor, to see if the changes have occurred. Your changes may not show up on the browser. This is because Firefox does not reload pages every time to look at them. Pages are often stored for up to 1 month on the PCs hard drive, and reused when you look at them. One way to update the screen before this time limit is to click on the ’reload’ or ’refresh’ button.

7. Next we will add links to your home page. Identify the file you would like to link to, and move it to the temp directory with the ’index.html’ file. Use a file name that is all lower case such as ‘test.mcd’: any upper case letters cause problems in Windows. Open your homepage in the editor, if it is not open already. Write a simple description for the file, and highlight it with the mouse. Use the ’link’ button at the top of the editor screen, and enter the file name for the link. If it is in the same directory nothing else is needed beyond the file name. Pay attention to the case of the file name, upper and lower case are significant. Upload the page (using FTP) and the file to claymore and verify that the link works.

8. Get your home page back in the editor. Someplace on the page add a line that says ’GVSU’. Use the mouse to select what you just typed, and then click on the link button. For the link name enter ‘http://www.gvsu.edu’, and apply the change. This will now be a link to the Grand Valley home page. Upload and test the link.

9. Explore the editor to see what other features are available.

• Some tips when creating web pages are,

Windows will not allow multiple applications to open the same file at the same time. If you seem to be having trouble opening a file, make sure it is not open in another application.

As you add other files to your homepage, put them in the ‘temp’ directory. This will make all of the procedures simpler.

Try to make your web pages small, and link them together. This will decrease download time and make browsers happier.

Avoid using excessive images. Anything over 100K will make it slow downloading. Anything over 1M makes modem downloading very slow.

When putting images on the web page use ‘jpg’ for photographic images, and ‘gif’ for line images. ‘jpg’ images can be compressed more than ‘gif’, but lines will become blurred.

To link to other files or web pages there will be a ‘link’ command. If you want to add a file that is in your ‘temp’ directory, just put the name of the file in the ‘URL’ field.

Watch upper/lower case. This is a major cause of web page problems. It is best to keep to lower case for all file names.