E-Commerce Overview - Web Development and Design Foundations with XHTML - page 490

Hands-On Practice Case
1. Copy the javamug.gif, javatshirt.gif, and viewtrans.gif image files from the
Chapter12 folder in the student files and save them to disk in the javajamcss folder.
2. Launch Notepad and modify each existing Web page (index.html, jobs.html,
music.html, menu.html) in the javajamcss folder to link to the Gear page
(gear.html) in the main navigation. See Figure 12.16 for an example.
Figure 12.16
Revised JavaJam
text navigation
3. Configure CSS. Before you create the Gear page (gear.html) you will add a new
style rule to your javajam.css external style sheet that configures a class named
clearright. The clearright class will be used to clear a right float. The style
rule follows:
.clearright {clear: right;}
4. Now you are ready to create the Gear page. Figure 12.17 shows a sample of the
completed Gear page.
Figure 12.17
JavaJam gear.html
One way to be productive is to create pages based on your earlier work. Launch
Notepad and open the Music page (music.html). Save the file as gear.html. This
will give you a head start and ensure that the pages on the Web site are similar.
Perform the following modifications:
a. Change the page title to an appropriate phrase.
b. Delete the contents of the <div> assigned to the rightcolumn id. You'll be
adding code for the Gear page in this area.