HTML and CSS Reference
In-Depth Information
2. Configure the CSS.
Open painter.css in Notepad. Edit the style rules as follows:
●
Add a new style rule for the
h2
selector that configures a background color
(#336633), text color (#ffffff), font typeface (Georgia, Times New Roman, or
serif), font size of 1.2em, left padding (10px), and bottom padding (5px).
●
Modify the CSS to configure an id named
container
with width set to
620 pixels.
●
Configure the
img
selector as follows: 10 pixels of right padding and do not
display a border.
Save the painter.css file.
3. Configure the
container
id on each page.
Modify the index.html, services.html,
and testimonials.html pages to utilize a wrapper
<div>
that configures the page
width as indicated. On each page, assign the
container
id to a
<div>
element
that contains the page content (see Section 3.9 for a review). Configure this
<div>
on each page as follows:
<body>
<div id="container">
... page content goes here
</div>
</body>
4. Test.
Test your pages in a browser. If your images do not appear or your image
links do not work, examine your work carefully. Use Windows Explorer to verify
that the images are saved in your painter folder. Examine the
src
attribute on the
<img />
tags to be sure you spelled the image names correctly. Another useful
troubleshooting technique is to validate the XHTML and CSS code. See
Chapters 2 and 3 for Hands-On Practice exercises that describe how to use these
validators.
5. The Home and Services Pages.
Modify the Home page (index.html) and Services
page (services.html) to display the Pasha the Painter logo (painterlogo.gif) image
and look similar to the Testimonials page you just created. A cohesive Web site
uses color and images in a consistent manner. Save and test your pages.
Prime Properties
See Chapter 2 for an introduction to the Prime Properties Case Study. Figure 2.38 shows
a site map for Prime Properties. A Home page and Financing page were created in earlier
chapters. You will continue to work with this Web site in this case study and create the
Listings page, as shown in Figure 4.47 (shown also in the color insert section). You will
then modify the other pages so that they are consistent with the new design.
Hands-On Practice Case
Obtain the images used in this case study from the student files. The images are located
in the Chapter4/CaseStudyStarters/Prime folder. The images are: primelogo.gif
(Figure 4.48), primehomenav.gif (Figure 4.49), primehomebtn.gif (Figure 4.50),
primelistingsnav.gif (Figure 4.51), primelistingsbtn.gif (Figure 4.52), primefinancingnav.gif
(Figure 4.53), primefinancingbtn.gif (Figure 4.54), primecontactnav.gif (Figure 4.55),
primecontactbtn.gif (Figure 4.56), schaumburg.jpg (Figure 4.57), schaumburgthumb.jpg
(Figure 4.58), libertyville.jpg (Figure 4.59), libertyvillethumb.jpg (Figure 4.60). Save the
files in your prime folder.
Search WWH ::
Custom Search