Netscape Editor Basics I

CS 14

Apr. 28, 1997

1. Create a folder named scratch on your N: drive for this work.

2. Visit http://home.netscape.com/assist/net_sites/starter/samples/ and copy a bullet and a line to your scratch directory. You can use a Web search engine to locate other sources of images, too.

3. We'll need some text to work with. Open any MS Word document you have handy (your paper will do), open the File menu and choose Save as. Set the document type to HTML. Save the document into your scratch folder.

4. Open the HTML document you just created with the Netscape editor.

5. Give you Web page a title (the kind that will appear in a browser's title bar). Also, Give the document a centered ``headline,'' using the Heading 1 style.

6. Make the background color white, or use a ``tasteful'' background image that provides good contrast for the page's text. Tell me, why would contrast matter here? Do you know what I mean by ``contrast''?

7. Create some headings (using the Heading 2 style) and sub-headings (using the Heading 3 style). Make these headings and sub-headings red or some color of your own choosing.

8. Separate each of the headed ``sections'' using the line you designed.

9. Make each of the headings a ``target.''

10. Insert an image and wrap some text around it. Be careful, the text might shatter. Make the image a link to another page.

11. Manually create a ``table of contents'' at the beginning of your document. Use an outline list for the table of contents. Headings should be numbered using roman numerals and sub-headings should be numbered using lower case letters. The list items should be links to your targeted headings. In other words, if I click on something in your table of contents, the browser should leap to that section of the page.

12. Create a list in the body of your document, using the bullet you designed for the list bullets.

13. Apply some character formatting to some text in your page --- experiment with color, style and size.

14. Put a ``signature'' at the end of your page. Include a mailto link to your e-mail address. (Use the browser to test the mailto.) A mailto link is a link with mailto:email as the link. Replace email with your e-mail address. For example, . Make sure all your links work, especially your targets.

15. Call me over to have a look at your page. I will ask you if you had any difficulties with this exercise and talk to you briefly about Web design principles/aesthetics.