In order to work on this
you should have a set of graphics files including the following:
If you do not have
them, you can
download them as a compressed PC
clicking on the links... then double-clicking on the downloaded files
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
Netscape Navigator, click on the Communicator menu, and choose
Composer). You should be looking at a blank screen.
familiar with the Composer toolbar-- we'll be using the following items:
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
the Format menu, then on Page Colors and
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
file, as Index.htm Note that the names
'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
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
(and text) colours, resist temptation. Select the [
] Use Image
option, click on the Choose File button, and browse
sample files. Select the file paper.jpg. Click OK.
your page look?
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
indent all your text. Repeat as needed. (This is a good idea even for
pages without a background graphicóthey look more
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
cursor. (Click the down-arrow then choose the middle option).
title for your school webpage such as YourSchool
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
the pre-set styles.
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
of window... click on the arrows next to the % sign, and change that to
pixels and change the value to 600.
checkmark from the Equal Column Widths option.
Click OK or INSERT.
the upper-left-hand table cell, then click on the Image
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
the three cells in the third column. button, and navigate
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
the book picture, then on the Link tool (#2)Ö
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.
word or two in the cell describing the library, and click on the
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
the links do not work when youíre in ComposerÖ you
to open your page in a browser to test them. Resist temptation to leave
out the http:// when writing a linkóthey
work if you take the lazy way out!
the other cells, adding links to the graphics and a word or two of the
text for each school activity. Save your file.
the Preview button to load your saved page into
again. If you were doing it for real, you might want to test your
(Since you didnít use real links, donít bother
is your page looking? Go back to Composer.
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.
the Table tab and remove the checkmark next to Border
Width. Click OK.
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
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
underneath the table. Click on the H. Line tool (#4)
insert a horizontal line.
the Italic tool (#8), and type
(below the horizontal
line), the words:
created by (yourname). Highlight your name, and make it an
link by clicking on the Link tool. In the link
(use a real
or fictitious e-mail address).
Save your file.
done! Notice that if youíve saved to a location different
where your graphics were originally located, the graphics files you
were automatically copied to the new location.