Web Development and Design Foundations with XHTML, 5th Edition

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.

(^500) Chapter 12 E-Commerce Overview
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
   floatrightwhich 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 rightcolumnid
   area. Assign the viewtrans.gif to the floatrightclass.
   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

   to display the text: Sunny Days Basket.
   i. Configure the sunnydays.jpg image.