Creating a web-based activity page: detailed steps

We will use Netscape Composer to create the WWW page (Netscape is free and very simple to use).  This handout will walk you through some basic steps of web page creation in order to familiarize you with the possibilities in Netscape Composer.  First work through these steps, and then move on to your web activity page.  It is possible to select formatting options using menu items or toolbar buttons.

Before starting, it is a good idea to plan your page carefully by making a picture of how you want it laid out on the page, storyboard, as you might tell a student to do an outline before writing a paper.  We will create a new page from a blank.
 

1. Open Netscape Communicator.  Menu item: File / New / Composer Page.
2. Type your name, title, department & institution, office location, and telephone number on separate lines. Use the ENTER key for line breaks as you would in your word processor.
   
3. Select your name.
4. Change the font from Variable Width to Ariel or Times New Roman using Menu item: Format / Font.
   
5. Make your name large using Menu item: Format / Size.
6. Change the text color to a color of your choice using the color drop down box or Menu item: Format / Text color.
7. Make your name Bold and Italic.  Menu item: Format / Text style.
   
8. Center your name using the alignment drop down box or Menu item: Format / Align.
   
9. You decide that your italic centered name looks awful.  Realign it to the left margin and remove the italic format.
10. Save your page on a floppy or the hard drive with the name MYPAGE.HTML. You will be asked to give your page a title. (Never put any punctuation or spaces in file names on the WWW.) Remember where you saved it because EVERYTHING you will put on the page will have to go in this same location: drive, folder, etc.
    
11. Insert a blank line between your name and your title.  Then select your title, office location, and telephone number.
12. Make them a bulleted list. Menu item: Format / List / Bulleted.
    
13. That was a bad idea.  Remove the bullets and indent them instead. Menu item: Format / Increase indent.
14. Type "Jean & Bob's Department".  Select This text and then turn it into a web link. Use the link button or Menu item: Insert / Link. Type the URL for their department's home page: http://www.cortland.edu/icc/
15. Find any web page that you like. Type the name of the page and turn it into a link by copying the URL from your browser.
    
16. Select the menu Format / Title and Properties.  Change the page title by putting your name in the page title location.  Select the menu Format / Page Colors and Background, and click the Use Custom Colors button.  Select the background color and chose a color that you prefer. Make it light to allow adequate contrast so your page is easy to read.
17. Make a table by positioning your cursor under your name and clicking on the Insert Table button or selecting the menu item Table / Insert Table.
18. Give the table 2 rows and 2 columns.  
    
19. Select your personal information (except your name).  Cut the text and Paste it into the left pane of your table.
20. Make sure that a photo or image that you want in your page is saved on your floppy or hard drive in The Same Location as your web page.  MYPAGE.HTML
    Use this photo of French bread if you don't have an image to use.
    
    
    
21. Place your cursor in the right pane of your table and click Insert Image or select the menu item Insert / Image.  Click Chose File, and find the file name of the image that you wish to insert.
22. Place your cursor below the table and select Insert / Horizontal Line.
23. Below the line type your email address.

An activity page: for later practice on your own
 

1. By now you should feel fairly comfortable with basic formatting in Netscape Composer.  You are ready to create a page w/a web-based activity!
2. Using the knowledge you gained from working through the steps above, create your page and include the following: 1-2 images, a sound file (either original recording or one you obtained from the web - just link to it as you did to the image), a link to an outside source on the web.
3. Just a note about style: Format to your heart's content, but try to follow basic principles of good style, so don't overdo it.  A left margin tends to look better than text flush against the edge of your browser window.  Items look better if they line up.  Big blocks of text without white space look bad and are difficult to read.  Too many different colors, fonts, text sizes or styles detract from your message.  Use style to enhance your message, not to distract from it.