Creating a web-based activity page: detailed steps

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2005
Getting started (using Netscape):

We will use Netscape Composer version 7 to create the WWW page.  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 storyboard (as you might tell a student to do an outline before writing a paper).  It is possible to use Wizards or Templates from Netscape when creating a new page or even to copy a page that you like from the Web and then make changes to fit your needs.  We will simply create a new page from a blank.
 

1. Open Netscape Communicator version 7 (earlier versions are similar).  Select File / New / Blank Page.
2. Type your name, title, department & institution, office location, and telephone number on separate lines. Include International Communications and Culture dept. at SUNY Cortland in your text.
3. Select your name.
4. Change the font from Variable Width to Ariel or Times New Roman (use the Format / Font menu)
5. Make your name large.
6. Change the text color to a color of your choice using the color drop down box. Be sure to change foreground text color, not background color.
7. Make your name Bold and Italic.
8. Center your name using the alignment drop down box.
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 in its own folder (MYPAGE) and using the file name index.html.
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.
13. That was a bad idea.  Remove the bullets and indent them instead.
14. Select International Communications and Culture. Right click on the highlighted text.  Chose the option Create Link Using Selected and type the URL for the ICC page:
http://www.cortland.edu/icc/
15. Do the same for the words SUNY Cortland, but use the URL:
http://www.cortland.edu/
To link to another page in the same folder, just use the file name in the Link box.
16. Select the menu Format / Page Title and Properties.  Put your name in the page title location.  Select Format / Page Colors and Background, and change the background color using custom colors.  Pick a color of your choice, but make it very light.
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. Give the table 1 row and 2 columns and make it 95% width.
18. Select table and view Table Properties. Align it right. Remove the border line.  Uncheck equal column widths.  Click OK.
19. Select your personal information (except your name).  Cut the text (ctrl-x) and Paste it into the left pane of your table (ctrl-v).
20. Make sure that a photo or image that you want in your page is on your floppy or hard drive in the same location as your index.html page. If you don't have a photo, download one from this page: http://web.cortland.edu/ponterior/
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.
24. Select your email address, right click on the highlighted text, chose Create Link Using Selected, and type mailto:your email address


The activity page: mini-project 1
 

25. 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!
26. 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), a link to an outside source on the web.
27. 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 distract your reader.




Return to Syllabus