Creating Research-Based Web Sites with Netscape Composer

Lab Exercise Step-by-Step

Netscape Composer 7.2 Practice Exercise

Before you do follow the steps below, please download the content files.

1. Create the site’s folders:
1. Create a “testsite” folder on the desktop
2. Inside proposal folder create an “images” folder
   
   
2. Create the HTML pages, add page properties, and save the pages:
   • Create a new blank page in Composer for each page that needs to be built (index.html, content. html, description.html, bibliograpy.html, inet_sources.html, non_inet_sources.html – from the Web Site File Structure list above.)
     ( http://www.umw.edu/training/inte/internet/composer/newpage.htm)
     
     
   • Leave the content of the page blank, but fill in the page title, author, description in the page properties (the page names are listed right after the filenames above in the Web Site File Structure.)
     ( http://www.umw.edu/training/inte/internet/composer/title.htm)
     
     
   • save the pages in the “testsite” folder on the desktop using the specified filenames from the Web Site File Structure above.
     ( http://www.umw.edu/training/inte/internet/composer/save.htm)
     
     
3. Put photos into the images folder:
   • place a copy of train.jpg (located in the Composer Lab Files folder we downloaded at the beginning of the practice exercise) into the “images” folder inside the “testsite” folder.
     
   
   
   Your testsite folder should now contain these files:
   
   
   
   
   
   
   
   
   
   
   
   
   
4. Go to the Proposal Home Page in Composer (index.html)
   • Add title -  “Online Proposal Web Site” at top of page
   • Use the text editing tools on the toolbar to:
     • Change the text to Bold
     • make it bigger
     • center it on the page
     • hit enter a few times to move the cursor down the page 
       
     
     
5. Create a table that is
   •  1 row, 2 columns. 
   • Border set to zero.   ( http://www.umw.edu/training/inte/internet/composer/tables.htm)
     
     
     
6. Using Table Properties make the left cell (not the entire table) 150 pixels wide
   ( http://www.umw.edu/training/inte/internet/composer/table_props.htm)
   
   
   
7. Create another table inside the left cell that will become our navigation bar:
   • Right click in the left cell, choose table insert, then table from the menu
   • 1 column, 4 rows – border set to 1
   • fill in text for Home, Content Components, Site Description, Bibliography
   • Using Table properties, add a light background color to the navigation table
     
     
     
8. Click the “Preview” tab at the bottom of the page – this gives you a “simulated” preview on what the page would look like in a web browser. Once you are done looking at the preview, click the “ Normal” button to return to the web page editing mode.
   
   
   
9. Click the “Browse” button on the toolbar at the top of the Composer window.  This will open the Netscape Navigator web browser and allow you to see what you pages will actually look like.  Once you are done looking at the page in Navigator, close the browser window.
   
   
   
10. Back in Composer, on the Normal tab:
    • Click your cursor so it is just BELOW the main table on the home page.
    • Create a new table that is 1 row, 1 column
    • Add some Spacing (10) and Padding (10) to the table
    • Add the contact information for your page in this cell:
      • page created by:
      • Email address
      • page updated:  date
        
      
      
11. Save the page and use the Browse button to look at the page in Netscape Navigator.
    ( http://www.umw.edu/training/inte/internet/composer/save.htm )
    
    
    
12. Create Hyperlinks for Navigation bar and email address
    ( http://www.umw.edu/training/inte/internet/composer/links.htm )
    ( http://www.umw.edu/training/inte/internet/composer/email_links.htm )
    
    
    
13. Using the Copy and Paste function, copy all the content on the home page and paste a copy of it to all the other pages.  This process creates the basic structure for each page and copies the working navigation.  Some useful keyboard commands to know for this:
    • “Control-A” (“A” for ALL) - click in the window that contains the content you want to copy, then hold the control key and hit the A key.  This selects all the content on a page.
    • “Control-C” (“C” for COPY) – hold the control key and hit the C key.  This copies all selected text into the clipboard memory of the computer.
    • “Control-V” (“V” for PASTE) – Click the cursor in the location where you want to paste content currently stored in the clipboard memory, and then hold the control key and hit the V key.  This copies the content from the clipboard to the place your cursor was located.
    • “Control-Z” (“Z” for UNDO) – This undoes the last thing you did – always a good thing to know!
      
      
      
14. Modify the pages.  Change any text that was copied from the home page that is not appropriate for the page you copied the content.
    
    
    
15.  Using the “Content for proposal web site model for HIST 325.txt” file from the resources folder in Blackboard:
    • pasting the content from the text file into the appropriate pages
    • On the site structure page, pasting a numbered list (or bulleted list) from a text document often does not work well.  It is better to recreate the numbered list (or bulleted list) from scratch.
      ( http://www.umw.edu/training/inte/internet/composer/lists.htm )
    • Insert the picture “train.jpg” into the Home Page and format it so the text flows around it to your liking.
      ( http://www.umw.edu/training/inte/internet/composer/graphics.htm)
      
      
      
16. Once everything in the site is working as it should and all edits are complete, you can upload the files to your public.www space:
    • If you log into the Novell network (for example, from a lab) you can simply click on the My Computer icon, then click on your H: drive, then click the public.www folder.  Now copy the entire “testsite” folder to the public.www folder.
    • If you do not log in to the Novell network, FTP will be your best option for transferring files.  Info on using FTP is located here:  http://www.umw.edu/technology/announcements/access_your_network_space/ftp.php
      
      
      
17. View the site over the internet.  The URL for your site should follow this format: http://students.umw.edu/~username/testsite
    
    
    
18. Test your site by looking at the pages in different browsers – take note that the pages may appear different in each browser:
    • In the Netscape Browser
    • In the Internet Explorer Browser
    • If available to you, test in the Firefox and Safari browsers as well

Congratulations if you got this far! However, if you had problems, please get help from Dr. McClurken or Jerry Slezak.