|
Download the files for
this exercise. The document elementsdone.html, which is included, is
the finished page for reference.
Note
The design elements have been used to form a quasi logo at the top
of the page to help balance the design. Although this is rarely the
way that I create a page header, it does show the power and versatility
of design elements.
Tip
The spacer.gif image that appears at the end of the menu links is used
to provide a right margin for the menu without complicated tables. Using
a clear GIF file as a spacer in your document is a code-efficient method
to have a little extra control over your text.
Figure 13-10
All page elements added and previewed in Internet Explorer 5.5.
Note: Click on the image above for a larger
view of the image.
|
|
Exercise: Using Design Elements to Enhance Text
Although most of the following exercise is common sense, it can help
to do one sample of a technique to fix it in your mind. I covered CSS
in Chapter 9, so for this exercise I have included the complete CSS
style sheet to just attach to your page. If you want a challenge, try
creating this page on your own, creating your own CSS style sheet and
graphics. Once you can do that, you are well on your way to exploiting
text to the fullest in Web design.
To create a page using design elements in your favorite HTML editor,
follow these steps:
-
Open the document elements.html, found in the folder you copied
to your hard drive. This HTML document has a header and text in
place, and is linked to a style sheet. You will add the design elements
and CSS commands to finish the page.
-
Add a CSS ID element called "menu" to the menu at the
top right of the page. Locate the code for the menu and surround
the menu code with <div id="menu"> and </div>.
The completed code will be as follows:
<div id="menu"><a href="#1">Home</a>|
<a href="#2">Products</a> | <a href="#3">Services</a>
| <a href="#4">Join</a> | <a href="#5">Contact</a><img
src="spacer.gif" width="20" height="8"
border="0"></div>
-
Apply a CSS span style called "sidehead" to the "LATEST
NEWS" item in the left side menu. Your code should be as follows:
<a href="#" class="sidehead">LATEST NEWS</a>
Repeat for the three remaining links in that menu.
-
Insert the image file, red_trismall.gif, into the table cell to
the left of the "LATEST NEWS" menu item in the left side
menu. Add the same image to the corresponding cells for the three
remaining menu items.
-
Insert the image file, red_trismall.gif, at the start of the headline,
Headline One, in the first content column. Add the CSS span style.
Your code should be as follows:
<img src="red_trismall.gif" width="15" height="22">Headline
One<br>
-
Apply a CSS span style called "bodyhead" to the headline
and image created in Step 5. Your code will now be:
<span class="bodyhead"><img src="red_trismall.gif"
width="15" height="22">Headline One</span>
Repeat steps 5 and 6 for "Headline Two."
-
Apply an unordered list tag (<ul> and </ul>) to the
second through fifth paragraphs in the text in the Headline One
cell. The bullet that appears when previewed in Internet Explorer
is assigned in the CSS style sheet that is associated with this
document. (The effect will not show up in Netscape.)
-
Insert the imag, red_lineshort.gif, between the first and second
paragraphs of the Headline Two cell. Set alignment to center. Repeat
inserting and aligning the image between the second and third paragraphs
of the same cell.
-
Preview your image in Internet Explorer. The result should resemble
Figure 13-10
|
