Site hosted by Angelfire.com: Build your free website today!
Randy's Ed551 & 552 Web Page Design Reminders and Help

This document is intended as a supplement to the teaching in Randy's Ed 551 & 552 classes at Chapman University in Concord, CA. Our focus in this course has always been on providing teachers with the know how to create web pages for themselves, their class and to teach their students with no additional cost involved beyond an internet connected computer. With these comments in mind, this document is focused on the use of Netscape Composer, a free html design tool, as the page creator and Angelfire, a free web hosting service, as the site host.

This page will be split into two main sections. The first deals with Netscape Composer and how to perform many of the tasks that consistently give students the most problems when creating pages. It may be useful to review each section periodically to prevent common, avoidable errors. The second section deals with the Angelfire site and getting your pages successfully to the web.

Using Netscape | Using Angelfire



The Page Creation Cycle
When creating a web page on your computer, the page only exists locally (i.e. on whatever disk you save to) until you upload to an internet server such as angelfire. Once uploaded to an internet server, the page is "served" to any user that requests it. Thus it will be visible globally. Following simple mantra may help you if you get stuck during the process:
Create - Save - Upload - Repeat
Create using composer, save following the guidelines here, upload to angelfire, repeat the process if you have new pages to create or existing pages to edit.


Using Netscape Composer  text | images | links | tables | saving and naming
As mentioned above, Netscape Composer is a free web design tool. Netscape already exists on virtually every machine on the planet. However, if you cannot find it on your machine or wish to have the most up to date version you can click here to go to the download page. To open Composer simply open Netscape and choose File>New>Blank Page. To open an existing page, open Composer first, then click the open button on the Composer tool bar. This will bring up the editable version of the page.
 

In this section I deal with the most common problems I witness with my students. The following link provides much more detailed descriptions and assistance for anything not covered in this brief section:

http://wp.netscape.com/browsers/using/newusers/composer
Text Manipulation: return to top
Remember to stick with "boring" fonts when creating pages. Fonts do not travel with the html document and depend on the computer viewing the site. If your page depends on dazzling and super fancy fonts to achieve its effect, many users will be disappointed in your site. I recommend Arial and Times for the bulk of text on your pages. These fonts are common on virtually every machine whether PC or Mac and will give you greater control over what the user sees.

Additionally:

Images: return to top
You can insert images effectively in two ways:
  1. If an image is coming from another web page, and needs no editing before being added to your page, you can simply copy it from the web and paste it to your page. (right-click on the image and select copy, click to your page and right-click and select paste)
  2. If an image is coming from a disk, click the image button on the toolbar in Composer, click choose file in the dialog box, and find the image you wish to add.
Note: If you need an image to be much smaller on your page than it appears in your original source, you should resize the image before placing it on your page. By resizing in Composer you are not affecting the memory required to display the image and are forcing users to wait longer than necessary to view your page. If you first resize the image in a program such as Microsoft Photo Editor, you will decrease the memory required by an image and, more importantly, decrease the amount of time for your page to load. This is especially important on pages that contain many images.

Remember that you can create cool custom banners at Flaming Text. These make a great accent to pages and are FREE.
Example: 

Links: return to top
There are different types of links for different situations. However, all of the following links are added by highlighting the text or image you wish to apply the link to and clicking the link button on the Composer tool bar and adding the link to line.

Tables: return to top
Tables are the best, most effective way to achieve more complex page formatting. Working with tables in Composer takes a little practice, but your pages will be better for your efforts. i encourage you to explore. Some reminders are provided here.
  1. To make your table invisible set the border to "0".
  2. If you have table content that varies in width (i.e. thin image in one cell, text in another), make sure the "equal column widths" box is unchecked.
  3. I recommend setting the width of the table to pixels instead of % of window. This will give you greater control over how the table looks by preventing the table from resizing on bigger or smaller monitors.
  4. To align a table (left, center, right) you must use the table properties window, the justification buttons on the Composer bar will not work with tables. However, use the toolbar justification to align content within cells.
  5. To modify any properties of a table, or to delete or insert rows or columns, simply right-click on the table (or specific row or column) and select the appropriate item from the list.
Saving and naming: return to top
Saving and naming files is an extremely important and often overlooked part of the process. Failure to follow the guidelines listed here will lead to sites that don't work and creators (you) who hate their computer and this process. Conversely, and more positively, following these guidelines consistently will lead to many happy carefree days of design and maintenance of your site.
  1. Every file you save should contain only letters, numbers, dots ( . ), and underscores ( _ ). Never use any of the other special symbols on your keyboard, including commas, slashes ( / , \ ), dashes ( - ), colons or semi-colons, quotation marks, etc.
  2. Every file you save should have the appropriate suffix attached. PC's should do this automatically, but on Macs you must do it manually. The following suffixes are the most common ".html" for pages, ".gif" or ".jpg" for images, if you are unsure what format an image is in, you can open it in another program and it should tell you.
  3. Your homepage should be named "index.html". As a rule, web servers will load any file entitled index.html first.
  4. Links are case sensitive. If you use capital letters, you must remember each instance and apply that to your links. Because of this I never use capital letters when naming files (never use them, never have to remember when I did).
  5. All of the files within a given page must be saved to the same directory. One of the good thing about Composer is that it does this for you, however, you must make sure that you do not remove any of the files from the folder that contains the page. This will result in broken images and headaches. I recommend that beginners create a separate folder for each page you create and only put files for that page in the folder.


Using Angelfire return to top
Angelfire is a free web hosting service provided by Lycos. It allows you 20 MB of space for your site (about 17 floppy disks worth of storage) in exchange for a 1" advertising banner on each page. Using Angelfire is really easy, this section contains a rundown of the steps involved to upload a page from beginning to end.
  1. After going to Angelfire, you can log in by clicking the "web shell" button. Your member name contains your directory and member name both, for example, my member name is "space/rdepew". Your password is self evident. (Important Note: if you are using a computer that more than one angelfire member uses, like in the lab, make sure that you are the user that is logged in. This information exists at the top of the web shell window. If another user is logged in click "logout" and log in again.)
  2. The left side of the web shell lists all of the files on your angelfire's server. Think of this as a remote floppy disk and remember that for any file to be visible on the web it must be listed here.
  3. From the web shell you can select a file to view, rename, or delete using the buttons at the top.
  4. To upload files to the site use the file upload section below the directory. To upload a single file click the "browse..." button, select your file, and click "upload". If you have more than one file to upload you can click the "upload multiple files" button. This will allow you to choose up to 10 files at a time. Click "upload" when done selecting files. If you have more than 10 files to upload, repeat this step until you have all of the files.
  5. Remember that every item on your page must be uploaded separately. Thus, if you have a page with 7 pictures you must select the page itself and each image for a total of 8 files to upload.
  6. If you are uploading corrections or changes to page that already exists on angelfire, you must make sure the "overwrite" box is checked. Without this, the original file will not be replaced. (If you are unsure, checking this box will not hurt.)
  7. Only files that have been changed or that are new to your site need to be uploaded. If you correct content on an uploaded page, but do not change any images, only the page needs to be uploaded, the images are already there. However, if you add images to an existing page, any new images do need to be uploaded with the page.
  8. Your site address, if using angelfire will be www.angelfire.com/directory/username (i.e. www.angelfire.com/space/rdepew). This address will load the file index.html. If you do not have a file entitled index.html you will need to add the file you want to view to your address (i.e. www.angelfire.com/space/rdepew/webquest.html).
Remember the cycle: create - save - upload - repeat. Create in Composer, Save to your disk, Upload to Angelfire, Repeat if changes are necessary


Other FREE web services:
I recommend Angelfire due to my experience using it and its ease of use for Chapman students, however, there are many other free web hosting services available on the web and I encourage you to check the out if you become dissatisfied with Angelfire. Here is a list of few others that I am familiar with and there are many others:



Page created and maintained by Randy Depew
Instructor, Chapman University, Concord, CA
rdepew@yahoo.com
Last update: August 20, 2002