Webpage Creation Practise

by Alan Zisman (c) 2001  - translated into Polish by Valeria Aleksandrova, Ukrainian by Anna Matesh, and Russian by Sandi Wolfe

We are going to be creating a homepage for a fantasy school.

In order to work on this web page, you should have a set of graphics files including the following:

  • baseball.gif
  • books.gif
  • computer.gif
  • lunch.gif
  • music.gif
  • pumpkin.gif
  • paper.jpg
  • skeleton.jpg
  • If you do not have them, you can download them as a compressed PC or Mac file by clicking on the links... then double-clicking on the downloaded files to copy them to the location of your choice.

    This practise is designed to be used with Netscape Composer-- part of the Netscape Communicator suite of programs on PC or Mac. With minor modifications, it could be used with the older Netscape Gold, with Microsoft FrontPad, or with other graphical web design programs. (FrontPage, DreamWeaver, PageMill, etc). (Update 2013 - you might prefer the more modern version, Kompozer, available for Windows, Mac OS X, Linux, etc - using it should be similar to these older instructions)
  • Open Netscape Composer (or startup Netscape Navigator, click on the Communicator menu, and choose Composer). You should be looking at a blank screen.
  • Become familiar with the Composer toolbar-- we'll be using the following items:

  • Composer toolbar

    1. Preview in browser
    2. Create or edit a link
    3. Insert a graphic
    4. Insert a horizontal line
    5. Create a table
    6. Select a paragraph style
    7. Bold text
    8. Italic text
    9. Increase indent
    10. Alignment
  • Click on the Format menu, then on Page Colors and Properties. Make sure youíre looking at the General tab, and fill in information for Title, Author, and Keywords. Click OK and check on the title bar on top of the window to see that your title has appeared there.
  • Save your file, as Index.htm Note that the names 'index.htm' and 'index.html' have magic properties on most web servers. Find out the magic name for yours-- and note that in some cases, capitalization matters. Also-- NEVER save web files or graphics spaces in their filenames. 'mylongname.htm' is OK, as is 'My_long_name.htm', but not 'my long namee.htm'. While Composer will save the file that way, when you load it on your server, you'll be unable to accessthe page across the Internet.
  • Go back to the Format/Page Colors and Properties menu, and go to the Colors and Background tab. While you could use that to change background (and text) colours, resist temptation. Select the [  ] Use Image option, click on the Choose File button, and browse to your sample files. Select the file paper.jpg. Click OK. How does your page look?
  • Notice that your text cursor is at the left-hand edge of the pageÖ if you type, it will be hard to read text over top of the spiral rings of your background graphic. Click on the Increase Indent toolbar button (#9)to indent all your text. Repeat as needed. (This is a good idea even for pages without a background graphicóthey look more professional if the text isnít right up against the edge of the screen).
  • In the Paragraph Style box (#6), click the down arrow, and pick Heading 1. Use the Alignment tool (#10) to center-align your cursor. (Click the down-arrow then choose the middle option).
  • Type a title for your school webpage such as YourSchool Home Page. Press Enter.
  • Notice that your style has returned to Normal. Resist the temptation to set font and size as you would in your word processoróthe results will look different on different computers. Instead, limit yourself to the pre-set styles.
  • Click on the Table tool (#5). Use it to create a table with four columns and three rows. Look where it's currently set to a width of 100% of window... click on the arrows next to the % sign, and change that to pixels and change the value to 600. Remove the checkmark from the Equal Column Widths option. Click OK or INSERT.
  • Click in the upper-left-hand table cell, then click on the Image tool. Click on the Choose Filebook.gif file. Click Open and then OK to import that picture onto your page. Repeat for the other cells down the left-hand column, importing the files baseball.gif, computer.gif. Add lunch.gif, music.gif, and pumpkin.gif to the three cells in the third column. button, and navigate to your sample files. Click on the
  • In the top cell of the second column, write a sentence or two about your school library. In the second cell, write about school sports, in the third, about technology at your school. In the right-hand column, write about nutrition, the music and art programs, and about student writing and art.
  • Click on the book picture, then on the Link tool (#2)Ö enter the following fictitious web address for the link: http://myschool.vsb.bc.ca/library and click OK (or enter a real address of your choice!). Save and Preview in Browser (#1). You'll see a blue border around the picture. Return to Composer.
  • Highlight a word or two in the cell describing the library, and click on the Link tool , and enter the same address. Click OK. Note that the text is now underlined. This is why you should never use underlined text when designing a web pageóit will be mistaken for a link. Note that the links do not work when youíre in ComposerÖ you will have to open your page in a browser to test them. Resist temptation to leave out the http:// when writing a linkóthey wonít work if you take the lazy way out!
  • Repeat in the other cells, adding links to the graphics and a word or two of the text for each school activity. Save your file.
  • Click on the Preview button to load your saved page into your browser again. If you were doing it for real, you might want to test your links. (Since you didnít use real links, donít bother now!) How is your page looking? Go back to Composer.
  • You donít like the border around the table cells. Right-click anywhere in your table (Mac users, click and hold down the mouse button)Ö a menu will pop up. Choose Table Properties. Go to the Table tab and remove the checkmark next to Border Line Width. Click OK.
  • You donít like how the text is floating in the middle of the cellsÖ so right-click in one of the right-hand cells, and again go to the Table Properties dialogue box. This time, go to the RowVertical Alignment to Top. Click OK. Does it look better? No? Set it back.tab, and set the
  • Click underneath the table. Click on the H. Line tool (#4) to insert a horizontal line.
  • Click on the Italic tool (#8), and type (below the horizontal line), the words:
  • Webpage created by (yourname). Highlight your name, and make it an e-mail link by clicking on the Link tool. In the link field, type:

  • mailto:yourname@youraddress.com  (use a real or fictitious e-mail address).
  • Save your file. Youíre done! Notice that if youíve saved to a location different from where your graphics were originally located, the graphics files you used were automatically copied to the new location.
  • Your page should look something like this:

    An example of a practise webpage from these instructions

    You can see it full sized here: 

    Web Page Creation and Maintenance:
    Before you begin- an Introduction 
    Using Netscape Composer to create web pages 
    Webpage Creation hands-on practice 
    Using Netscape Gold to create web pages
    Adding sounds and music to your webpages  new!
    Using WS_FTP to upload and maintain your web pages
    Making web animations with free tools new!
    Tricks of the trade: Extend Composer with hand coding new!


    Search WWW Search www.zisman.ca

    Alan Zisman is a Vancouver educator, writer, and computer specialist. He can be reached at E-mail Alan