General Principles of Web Design
  1. 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.
  2. 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.
  3. Don't get too fancy with your first Web site.
  4. 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.
  5. 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.
  6. 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.
  7. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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).
  6. 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.
  7. 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.
  8. 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.
  9. 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

  1. 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.
  2. Set up a free account at http://www.geocities.com.
  3. Log in to your account by typing your userID and password.
  4. Click on the File Manager link.
  5. Click the File Manager link again.
  6. 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.
  7. 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.)
  8. 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.