General Principles of Web Design
- Storyboard your Web site by sketching each page showing the placement of
text, graphics, and hyperlinks. Decide on the actual file name of each page
and write it on this storyboard.
- Use lowercase letters in all Web page and graphic file names. Do not use
blank spaces or symbols in file names either. Web pages must be saved with
.htm or .html file extensions. Graphics that are used on Web pages must have
either a .gif or .jpg file extension. You should create folder named something
like mywebsite and store all Web pages and graphics in that folder.
- Don't get too fancy with your first Web site.
- Purposefully use active whitespace in your page to space out text and graphics.
Do not confuse the person browsing your page. The motto "Less is more" definitely
applies to a home page.
- Use logical navigation by adding hyperlinks that allow a person to get back
to the previous page without having to use the browser's Back button.
- Do not add too much text to a home page. You can add paragraph's of text
to secondary pages in your Web site but not the home page itself.
- Identify your Web site's audience as you decide on the purpose of your site.
Sometimes it is not possible to make a site be user-friendly for all audiences
(first graders, high school students, middle-age adults, experienced Web surfers,
elderly people, etc.)
To Create a New Web Page Using Netscape Composer
- Open the Netscape program. You should realize that the Netscape Navigator
browser program is open at this point. Netscape Navigator is used to view
(i.e. browse) existing Web pages.
- Click the File/New/Blank Page menu command. This causes the Netscape Composer
program to open on your computer with a blank window. Realize though that
Netscape Navigator is still open with a browser window behind the Composer
window.
- You can type text into the body of a Composer Web page just like you can
type text into a blank Microsoft Word document. You can also use the Enter
key (Return key on a Macintosh) to start new paragraphs.
You can also highlight words and use the bold, italics, and underline buttons
on the toolbar. You can also change the color and size of highlighted words
with the Font Color and Font Size buttons. It should be pointed out though
that you do not have as much control over the size of text in a Web page that
you do with the size of text in Word.
The alignment button on the toolbar can be used to center, left-align, and
right-align sentences or whole paragraphs of text.
However, it is not recommended that you use the Tab key or type multiple blank
spaces to separate or align words or columns in a Web page. Using these methods
to space out words can lead to unpredictable effects in the final Web page.
- It is useful to arrange text and graphics on a Web page using tables. Unfortunately,
it is not possible to drag and drop graphics on a Web page like it is in a
Word document. Also, you cannot add text boxes and arrange them on a Web page
like you can in Word. So a table with multiple columns and rows is used to
serve as a guide for text and graphics. The person who eventually looks at
the Web page will not be able to tell that an invisible table was used to
spatially arrange the blocks of text and graphics but the page will have a
more appealing and professional look.
To insert a table, first make sure that the cursor is blinking where you plan
to insert the table. Then click the Insert/Table/Table… menu command. Type
the desired numbers into the "Number of rows" and "Number of columns" areas.
I recommend unchecking the "Border line width" checkbox so that the table
ends up being invisible. Click the OK button to insert the table.
It is important to have planned out your Web page by drawing it on paper before
starting your Web page in Composer and inserting your table. This is because
it can be difficult to change the number of rows and columns in a table after
you've created it and begun to add content into the table cells.
To delete a whole table that you no longer want, you should first click your
mouse in any cell of the table. Then click the Edit/Delete Table/Table menu
command. To delete one column or row of a table, click your mouse in any cell
of that column or row, and choose the Edit/Delete Table/Delete Row-Column
menu command.
- You can either click your mouse in various cells of the table in order to
type text into those cells or you can use the Tab key to move the blinking
cursor from cell to cell.
Within each cell, you can set the alignment for text (or graphics) in that
cell to centered, right-aligned, or left-aligned. This is done by first clicking
the Format/Table Properties menu command. Click the Cell tab at the top of
the window and then choose the desired Horizontal Alignment and Vertical Alignment.
Also, a desired column width can be adjusted in this window as well. By clicking
the Cell width checkbox and then changing the default 100 to another value,
you can resize the column. Sometimes it is more useful to change "% of table"
to "pixels" though. The whole width of the window is usually about 600 pixels
by the way. You can also change the background color of an individual cell
by clicking the "Use Color" checkbox and then clicking the rectangle next
to it to choose a color different than the default white (gray on a Macintosh).
- Graphics can and should be used on Web pages. Unfortunately though clip
art that comes with your computer or that works within Microsoft Word usually
cannot be used on a Web page. Graphics that can be inserted into a Web page
must be individual files with either the .gif or .jpg file extensions. You
can obtain free gif and jpg graphics from www.free-graphics.com (be sure to
type the hyphen) among other places on the Web. To do so, you find the graphic
and then right-click your mouse over top of that graphic and choose the Save
Image As… menu command that appears. On a Macintosh, since there is no right
mouse button, you simply hold down you mouse button over top of the desired
graphic and then choose the Save Image As… menu command that appears. Be sure
to save the graphic file to a folder that you made expressly for all of your
Web page files (.htm) and your graphic files (.jpg and .gif).
To insert a graphic, you must first make sure that your cursor is blinking
where you want the graphic to appear. Remember that you cannot simply drag
a graphic across the page like you can in Word. Also, you should have already
saved or placed the graphic file (that ends with .jpg or .gif file extension)
into the same folder that you are using to store your Web page(s).
To insert the graphic, use the Insert/Image… menu command. Then click "Choose
File…" and locate & highlight the desired graphic filename. Click the
"Open" button (even though you are not really opening the graphic file) and
then click the OK button. You should now see the graphic on your Web page.
If the graphic is too large or too small do not try to resize it like you
would a piece of clip art in Word. Rather, single-click the graphic to select
it. Then, click the menu command Format/Image Properties… Change the numbers
of pixels in the Height and Width Dimensions areas until the desired effect
is achieved.
To delete a graphic from your Web page, single click the graphic to select
it and hit the Delete key on the keyboard.
- To turn a word or phrase into a blue, underlined hyperlink, follow these
steps. First, select the word or phrase. Click the Insert/Link… menu command.
Type in the full URL Web page address into the "Link to a page location or
local file" area if you wish to link to someone else's Web page (i.e. an external
link). Be sure to type out the http:// and not just www.minich.com. If you
wish to link to another Web page that you have already or will be saving to
your Web page folder, simply type the name of that file such as webpage2.htm
. Be sure to include the file extension .htm or .html, whichever you used
when you saved that other file. Even if you haven't created that second Web
page, you can make the hyperlink, just be sure to name the Web page appropriately
when you do create it. To make a hyperlink which allows someone to send you
email, highlight the word or phrase that you wish to link (e.g. Email Me)
and type mailto:john@aol.com into the "Link to a page location or local file"
area. Of course you must substitute your email address for john@aol.com in
my example.
- Be sure to save your Web page with the file extension .htm (or .html). It
is highly recommended that you use all lowercase letters in Web page filenames
and that you never include blank spaces or symbols in Web page filenames.
If the page is meant to be your home page rather than a secondary page, you
must name it index.htm or index.html.
- To view a page locally on your computer before uploading it to your Web
site, save the file using the File/Save menu command and then click the File/Browse
Page… menu command. This will cause it to appear in a Netscape Navigator browser
window. Click the Reload button at the top of the window to be sure that you
are viewing the last saved version of your Web page. If you are not satisfied
with the look of the page, click the File/Edit Page menu command to return
to the Composer window where you have the ability to make changes.
To Upload Web Pages to a GeoCities Web Site
- First make sure that your Web pages are all saved to a folder that you created
expressly for your Web site. They should have the file extension .htm. Also
make sure that any graphics that you had inserted into your Web page are also
stored in this same folder. They should have the file extensions .gif or .jpg.
Whichever page is meant to serve as your home page should be renamed index.htm
if you did not already name it that. Of course, if you are now renaming that
page and if you have any internal hyperlinks to that page from secondary pages,
you must fix those hyperlinks to take into account the new spelling of the
filename.
- Set up a free account at http://www.geocities.com.
- Log in to your account by typing your userID and password.
- Click on the File Manager link.
- Click the File Manager link again.
- Notice that GeoCities has already provided you with a page named index.html.
Soon, you will be overwriting this default home page with the one you already
created.
- To upload your new index.htm home page or graphic files, click the Upload
Files hyperlink in the upper-right corner of the window. Click the topmost
Browse button and locate your index.htm file in your Web site folder. After
selecting the file, click the Open button (even though you are not really
opening that file.)
- To test the Web page(s) that are now uploaded to your GeoCities Web server,
it is recommended that you open another Netscape Navigator browser window
using the File/New/Navigator Window menu command leaving the window with your
File Manager as is. Type your Web site's home page address into the new navigator
browser window as you would visit any other Web site. To be sure that you
are viewing the most updated version of your Web page, click the Reload button
at the top of the browser window.
For example, if your GeoCities UserID is curtminich then type the URL Web
page address:
www.geocities.com/curtminich/index.htm
to browse your home page. Since you named your home page with the standard
index.htm name, you can actually type the shorter URL Web page address:
www.geocities.com/curtminich
. In general to directly browse any of your secondary pages such as one named
historylesson.htm, you can type the address:
www.geocites.com/curtminich/historylesson.htm
. Of course, most people will probably click an internal hyperlink that purposefully
added to your home page in order to visit the historylesson.htm Web
page.
To Edit Web Pages w/ Netscape Composer:
1. Suppose that you created and saved several Web pages (i.e. .htm files) into a folder on a computer at school or in the Hills Elementary computer lab but those pages have been uploaded to your GeoCities Web server. If you wish to edit those pages at home but you did not bring the files home on a floppy disk, don't worry. First make a folder named minichwebsite (use your name instead of minich) on your home computer. You can simply visit one of your Web pages by going online and typing in the correct address (e.g. www.geocities.com/curtminich/index.htm )
2. Next, use the File/Save As… menu command in Netscape to save a copy of your index.htm Web page to the new folder that you created. Then right-click (or hold down the mouse if you are using a Macintosh) over top of all of the individual graphics that you may have on your Web page in order to save copies of those graphic files to the newly created folder on your home computer.
3. Now you can open those pages in Composer using the File/Open Page… menu command in Netscape. Be sure to click the Composer option rather than the Navigator option.
Of course, after making any edits to a Web page, you must still re-upload it to the GeoCities Web server by logging into GeoCities and using the File Manager.