HTML and CSS Reference
In-Depth Information
●
Configure the page footer area. Replace the
<p>
elements with
<div>
elements.
Remove the
<small>
and
<em>
elements because the
font-size
and
font-style
are configured as part of the
footer
id. Assign this
<div>
to
the id named
footer
.
●
Save the index.html file and test in a browser. Your page should look similar to
the one shown in Figure 3.22 except that your page content will be left-aligned
instead of centered. Don't worry—you'll center your page layout in Step 4 of
this case study.
3. The Menu Page.
Launch Notepad and open the menu.html file. You will modify
this file in a similar manner—add the
<link />
element, configure the navigation
area, configure a div to contain the content, and configure the page footer area.
Save and test your new menu.html page. It should look similar to the one shown
in Figure 3.23 except for the alignment.
Figure 3.23
New menu.html
page
4. Centered Page Layout with CSS.
Modify javajam.css, index.html, and menu.html
to configure page content that is centered with width set to 80%. Refer to
Hands-On Practice 3.8 if necessary. Save your files and retest your pages. The
index.html and menu.html pages should closely match the samples shown in
Figures 3.22 and 3.23.
Experiment with modifying the javajam.css file. Change the page background color, the
font family, and so on. Test your pages in a browser. Isn't it amazing how a change in a
single file can affect multiple files when external style sheets are used?
Fish Creek Animal Hospital
See Chapter 2 for an introduction to the Fish Creek Animal Hospital Case Study. Figure
2.30 shows a site map for the Fish Creek Web site. The Home page and Services page
were created in Chapter 2. You will use the existing Web site as a start while you create
a new version that uses an external style sheet to configure text and color.
Search WWH ::
Custom Search