4. Using Styles

You may have noticed that the use of 'Font' to set the properties of the text is nowadays deprecated. This is because there exists a much more convenient method for maintaining consistent text style across the various pages of a web site. This approach is known as Styles.

To illustrate this better, copy and paste in (just before the /body tag) the code for sections 2 and 3 from the html file, codesecs2and3.html in the pool area. Test your current page.

We now convert our tutorial to the use of styles. Insert a Style tag in the code immediately after the '!DOCTYPE' tab at the top. Between the style tag parts type the following definition:

BODY

{

    color : Navy;

}

.Bold

{

    font-weight : bold;

}

P.Navy

{

    color : Navy;

}

P.Black

{

    color : Black;

}

1. You can now remove the 'Navy' color property from the 'body' tag. The 'BODY' style is actually already controlling the 'body' text properties.

2. All font tags that set the text colour of a paragraph to black can now be replaced with:

   <p class=Black>

   - making use of the P.Black style.
   

3. Next, we can substitute the 'b' tag with the .Bold class. The acknowledgment line now becomes:

   <p>This page was created using
   <span class=Bold>HomeSite</span>, which can be downloaded from ...

   So first, test this is all working.

4. Then replace all other occurrences of the Font tag with an appropriate style. This involves introducing a couple more styles at the top of the html code, called '.Fuchsia' and '.Red'.

5. Finally, validate your document code again, to ensure all references to the deprecated tag have been removed.

Save your page before exiting.

5. Making a Contents List

As your page gets longer it becomes inconvenient for the reader to have to search for the sections they are interested in. A means of indexing into the text is required. We make a Contents List at the front of the page and use internal hyperlinks to navigate to each section heading.

Locate your Contents List immediately after the MACROMEDIA HOMESITE 5 TUTORIAL heading at the top of the page. Start by placing a 'Name'd text heading there, as:

<p><a name="contents-list"><strong>Contents</strong></a></p>

Notice the name 'contents-list' in the tag. This Name enables the user to return to this Contents List when they have finished reading any section.

So test this by copying and pasting in (just before /body) the text of section 4 and this section, up to this point (codesecs4and5.html), followed by the link tag below: