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

Hands-On Practice Case
1. Copy the sunnydays.jpg, jeweltone.jpg, and viewtrans.gif image files from the
Chapter12 folder in the student files and save them to your primecss folder.
2. Launch Notepad and modify each existing Web page (index.html, listings.html,
financing.html, and contact.html) in the primecss folder to link to the Services
page (services.html) in the main navigation and footer navigation, as shown in
Figure 12.27.
Figure 12.27
Revised Prime
Properties navigation
3. Configure CSS. Before you create the Services page (services.html) you will configure
a new style rule to your prime.css external style sheet. Configure a class named
floatright which will be used to float the images of the gifts to the right.
The style rule follows:
.floatright {float: right;}
4. Now you are ready to create the Services page. Figure 12.28 shows the completed
page.
One way to be productive is to create pages based on your earlier work. Launch
Notepad and open the Financing page (financing.html). Save the file as
services.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. Modify the links on the page as appropriate.
c. Configure the viewtrans.gif image to display at the top of rightcolumn id
area. Assign the viewtrans.gif to the floatright class.
d. Change the Financing heading to Services.
e. Delete the other text on the page related to financing.
f. Place your cursor on the line after the Services heading. Create a paragraph
with the following text:
“Prime Properties values our clients and provides the professional service that
you expect including a competitive market analysis, Web and newspaper mar-
keting, and financing assistance.”
g. Next, add another paragraph of text: “When your purchase or sale closes we
would like to present you with a thank you gift from the choices below.”
h. Configure an <h3> to display the text: Sunny Days Basket.
i. Configure the sunnydays.jpg image.