Objectives

• know how to use basic graphic principles to create an attractive and effective Web page;
• be able to use Netscape Composer to create a Web page with headings, tables, colors, and links;
• be able to publish a page on the Web;
• know the meanings of the terms below.

Terms

• bullet
• display text
• focal point 
• link
• point 
• sans serif 
• serif 
• template 
• typeface 
• typography
• Web-authoring software

Resources

• Be Your Best: Internet Structure explains how to reserve space on the Geocities servier.
• Netscape allows you to download its browser and Web-authoring software for free.
• TechEncyclopedia provides definitions of more than 14,000 computer terms, including "search engine" and "portal."

Updated January 5, 2001
© Mark Canada, 2001
mark.canada@uncp.edu

Web Design

Just as people with good ideas do not always know how to express them effectively, many people who publish material in print and on the Web do not make effective use of graphic and navigational elements.  In other words, their pages are hard to read and hard to use.  You can set yourself apart from the crowd if you learn a few basic principles of graphic design, particularly Web design.

• Focal points, such as relatively large photographs or headings give viewers' eyes someplace to go on a page.  In general, try to put one focal point at the top of each Web page.  If the focal point is a photograph of a person, make the person look toward the middle of the page, thus attracting the viewers' eyes to the heart of your material and not off the screen. 
• Color, when used effectively, can make a page more appealing and can attract attention to particular elements.  Used carelessly, color can make a page hard to read.  Avoid overusing color and and make sure your text has adequate contrast with the background.  In other words, if the background is dark, use a light typeface on top of it.
• Typography--in other words, the appearance of letters on a page or screen--has a significant impact on how viewers process information.  Indeed, experienced designers know how to manipulate typefaces--whole sets of letters, a through z, along with punctuation marks, designed to be used together in printing a body of text--to organize information, to convey different messages, or simply to appeal to the eye. Thus, while the letter "s" always has the same linguistic value, a designer may decide to print that "s"--along with the rest of the alphabet--in a particularly typeface, such as Times or Arial, because of the way that typeface makes the letters look on the page.  Most typefaces belong to one of two families.  One family has what are called serifs: tiny extra lines that appear on the corners of letters. A holdover from the days when scribes wrote out manuscripts, serifs facilitate reading by guiding the eye from letter to letter. Some of the most popular typefaces--including Times New Roman, Bembo, and Garamond--are serif fonts.  Serif fonts tend to work well for long stretches of text, such as the body of an essay.  Because of their history, they also have a traditional feel.  The second class of typefaces is called "sans serif"--Latin for "without serifs"--because these typefaces lack the extra lines on the corners of letters.  Sans serif typefaces, such as Arial and Helvetica, make for good display text, such as headings.  They have a more modern feel than serif typefaces.  Type comes in various sizes, generally measured in a unit called a point, which is roughly equivalent to 1/72nd of an inch.  Appropriate type sizes for body text range from 10 to 12 points.  Display text may be of various sizes, but usually is about 18 to 72 points. 
• Similarity suggests connections.  In other words, if you have three roughly equal sections of you Web page, use the same typeface, size, and color for the heading of each section.
• Bullets, graphic symbols used in front of items in a list, can help viewers to find and to process information.
• Links--words or pictures that viewers can click to go somewhere else on the page or somewhere else on the Web--can help people navigate your Web site.  Your home page, or index, should contain a list of links to the other components of your site.
• Templates are patterns that you can use to create several pages with the same basic design.  Some Web-authoring software products, including Netscape Composer, come with templates.  You also can make one of your own pages a template simply by making copies of it and changing the content in each copy while retaining the format.

Exercises

1. Build a Web Page: The following instructions will take you through the steps of building a Web page in Netscape Composer:

1. While you are still in Netscape Navigator, click on "Communicator" and then on "Composer." 
2. Type some words--such as your name--at the top of the page and highlight them.  Using the icons in the toolbar at the top of the screen, experiment with changing the size, style, color, and placement of these words. 
3. Before you go any further, you should save your page. Insert a diskette into the narrow slot on the computer, click on "File," and click on "Save As." When the dialog box appears, make sure that the computer is set for the "a" drive and type a name that contains no more than eight characters and contains no capital letters, no spaces, and no punctuation marks.  If you are creating the index page for your Web site, use "index.html" for the filename.  Click "OK." In the dialogue box that appears, type the full name of your Web page.  This time, you may use more than eight characters, as well as capital letters and spaces.  Click "OK." As you go through the following steps, remember to click every few minutes on the "Save" icon in the toolbar at the top of the screen. 
4. To create a link to another site, toggle to Netscape Navigator by clicking on the icon that looks like a ship's wheel at the bottom of the screen. Using a search engine or a portal, locate a relevant, credible Web site on your topic. While you are looking at this site, click on the URL, or Web address, in the white box at the top. The URL should turn blue. Hold down the "Control" key and press the "c" key on the keyboard. Now toggle back to Netscape Composer by clicking on the icon that looks like a pen and blue triangle at the bottom of the screen. On your Web page, type the title of the site to which you are going to create a link. Highlight this title and click on "Link" at the top of the screen. In the dialogue box that appears, you will see your cursor blinking in a white box. Hold down the "Control" key and press the "v" key on your keyboard. You should see the URL you cut from Netscape Navigator appear in the white box. Click "OK." 
5. To create a link to your e-mail address, type the address on your page and highlight it.  Click on "Link" in the toolbar at the top of the screen.  In the box that appears, type "mailto:" followed by your e-mail address--for example, I would type "mailto:mark.canada@uncp.edu"--and click "OK." 
6. To make sure your link works, click on "Preview" at the top of the screen. Now place your arrow over the link so that the arrow turns into a pointing hand. Click. You now should see the site to which you created this link. To return to the Composer function so that you can work on you site some more, click on the Netscape Composer icon at the bottom of the screen. 
7. To place a photograph you have taken with an ordinary camera on your Web page, you first need to scan the photo.  Here are directions for scanning a photograph in the UNCP Writing Center, courtesy of Writing Center Director Dean Hinnen: 
1. Place photo in upper right-hand corner of scanner (next to green arrow), face-down. 
2. Double-click on the PaintShop Pro icon. 
3. Click on File. 
4. Move arrow to Import, then to TWAIN, then to Acquire. 
5. Click on Acquire. DeskScan program will activate and scanner will "preview" the image. 
6. Click on Final. Scanner will make its "final" scan. 
7. Click on the X in the upper right-hand corner of the DeskScan box to close DeskScan. 
8. Edit image in Paint Shop Pro (optional). 
9. Click on File. 
10. Click on Save or Save As. 
11. Change the file type to JPEG (.jpg extension). 
12. Rename the file (optional, the default name is Image1.jpg). 
13. Click on Save to save file. 
14. Close PaintShop Pro. 
8. To place your photo on you page, open the page in Netscape Composer, place your cursor where you want the image to appear, and click on "Image" in the toolbar at the top of the screen.  In the dialog box that appears, click on "Choose File..." and then find the photo you want.  Click "OK."  The image will appear on your page.  To adjust the size, place your cursor on the bottom-right-hand corner, click, and drag. 
9. To alter other features of your page, such as the title and background color, click on "Format" at the top of the screen and then on "Page Colors and Properties." 
1. Creat a Web Page for All American: If you are taking a composition, literature, or linguistics course with me, one of your assignments is to write an article on American literature, history, or culture and submit it for possible publication on a Web site called All American.  For the sake of consistency, you must use a particular format.  The instructions below will help you conform to this format:
1. If you are creating a page on an American author for one of my literature classes, visit the sample page on Benjamin Franklin (http://www.uncp.edu/home/canada/work/allam/16071783/lit/franklin.htm) and study its appearance. Whenever you are unsure how your page should look, use this sample page as a model. 
2. If you are creating a page on a historical or a linguistic topic for one of my composition or linguistics classes, visit the sample page on colonial journalism (http://www.uncp.edu/home/canada/work/allam/16071783/news/index.htm) and study its appearance. Whenever you are unsure how your page should look, use this sample page as a model. 
3. To create a red box at the top, click on "Table" in the toolbar at the top of the screen. In the dialogue box that appears, change the number of columns to 1, the border line width to 0, the cell spacing to 2, and the cell spacing to 4. Click on the gray box next to the word "Color"; in the pop-up menu that appears, click on the bright red box in the second column, third row. Click on "OK." 
4. To create the white area and narrow blue box, place your cursor below the red box and press "Enter." Now click on "Table." This time, leave the number of columns at 2, but still change the border line width to 0, the cell spacing to 2, and the cell spacing to 4. Choose "Left" under "Horizontal Alignment" and "Top" under "Vertical Alignment." Click "OK." You should see two boxes; each of these boxes is a cell. Click in the cell on the right so that the cursor is blinking there. Place your arrow over this cell and click with the right mouse button. In the pop-up menu that appears, click on "Table Properties." In the dialogue box that appears, make sure that the tab labeled "Cell" is highlighted. Change the cell width to 25 percent. Click on the gray box next to "Color" and choose the lightest shade of blue, which appears in the first row, second-to-last column. Click "OK." Now you should see a wide white box on the left and a narrow blue box on the right. 
5. To fill in these boxes with text, simply click inside them and type. In the red box, type the name of the time period you are covering in your Web page: "Colonial America, 1607-1783" or "Antebellum and Civil War America, 1784-1865" or "Postbellum America, 1866-1913" or "Modern America, 1914-present." To change the color of this text to white, highlight it and click on the arrow on the right of the small black box in the toolbar next to the bold "A." In the pop-up menu that appears, click on the white box. While the text is still highlighted, click on the icon at the far right of the lowest toolbar at the top of the screen. In the pop-up menu that appears, click on the icon in the center. To fill the white box with text, click inside this box and type the information below, pressing "Enter" after each item. (You may want to type the words in brackets for now and then later, after you have done some of your research, highlight each line and type the appropriate information.) After you have typed the words, highlight the first line and click on the arrow to the right of the word "Normal" at the far left of the lowest toolbar at the top of the screen; click on "Heading 1." Referring to the labels in red below, change the size of each line of text. If the label is in italics, change the text to italics by highlighting it and clicking on the italic "A" in the toolbar. If the label is in bold, change the text to italics by highlighting it and clicking on the bold "A" in the toolbar. 

[Author's Name], [year born]-[year died] or [Subject] Heading 1
By [Your Name] Normal
Student, University of North Carolina at Pembroke Normal
[Essay] Normal
Bibliography Heading 3
[Citation] Normal
[Annotation] Normal

1. To indent the annotation, click someplace on this line and click on the icon that appears second from the right on the lowest toolbar at the top of the screen. Your annotation now should appear indented about a half-inch from the left margin. Never attempt to create extra space by pressing the space bar or "Tab" key. 
2. To fill in the blue box with text, press the "Tab" so that your cursor jumps over to the blue box. Type the information below, again referring the labels in red for details on format. If you are creating a page on an author, use the first item in each line. Otherwise, use the second item. To create a bulleted list, highlight the items you want to be bulleted and click on the eighth icon from the left in the lowest toolbar at the top of the screen. Again, see one of the sample pages for help. 

Major Works / People Heading 4
[list of major works or people] Normal in bulleted list
Careers / [nothing] Heading 4
[list of careers or nothing] Normal in bulleted list
Family / [nothing] Heading 4
[list of family members or nothing] Normal in bulleted list
Homes / Places Heading 4
[list of homes or places] Normal in bulleted list
Religion / [nothing] Heading 4
[list of family members or nothing] Normal in bulleted list
Chronology / Chronology Heading 4
[list of years and events] Year in bold, rest in normal

1. Publish a Web Page on Geocities: The instructions below will take you through the steps of publishing your Web page on the Geocities server.  Before you attempt to follow these instructions, you should have reserved space on the Geocities server.
1. Open your Web page--for example, your online resume or literature portfolio--in Netscape Composer.  When you are ready to post it on the Web, click on "Publish" in the toolbar at the top of the screen. 
2. Fill in the blanks with the requested information and click OK.  In the following example, I have used my user name (mac1uncp); you should plug in your user name instead: 
1. Page title: Mark Canada's literature portfolio (or resume) 
2. HTML Filename: lit.html (or resume.html) 
3. HTML or FTP location to publish to: ftp://ftp.geocities.com/mac1uncp/ 
4. User name: mac1uncp 
5. Password 
3. You may receive a message that begins: "Could not post the file /C|/windows . . ."  Click "OK." 
4. Return to Netscape Navigator and click on "Reload."  Type in the URL for your Web page and press return.  You should see the personal page you created.  Once you have posted your resume or literature portfolio, you should be able to click on the link you created and go directly to it.  If the link fails, check the address.  You may have made a mistake when typing the URL for the link.