HTML and CSS Reference
In-Depth Information
instructor directs you otherwise, use the Chapter 4 JavaJam Web site as a starting point
for this case study.
Figure 6.24 displays a wireframe for the two-column page layout with a page container,
logo, left column, right column, floating, and footer areas.
Figure 6.24
JavaJam two-
column page layout
Hands-On Practice Case
1. Create a Folder.
Create a folder called javajamcss. Copy all the files from your
Chapter 4 javajam folder into the javajamcss folder. You will modify the
javajam.css file and each Web page file (index.html, menu.html, and music.html)
to implement the two-column page layout shown in Figure 6.24. See the new
JavaJam Home page, as shown in Figure 6.25 (shown also in the color insert
section).
2. Configure the CSS.
Open javajam.css in Notepad. Edit the style rules as follows:
Add the following style declarations to the
container
id: background color
(
#e8d882
), text color (
#000000
), and a 2 pixel black double border (
border
:
2px double #000000
).
●
Configure the logo area. Create a new id named
logo
with a background
(
#ccaa66
) and text (
#000000
) color, center alignment (
text-align: center
),
no margin (
margin: 0;
), and a bottom border that is 2 pixels, double, and
black (
border-bottom: 2px double #000000
).
●
Configure the left column navigation area. Add the following style rules to the
nav
id to configure an area that floats to the left, is 100 pixels wide, and has
10 pixels of padding on the top side.
●
Search WWH ::
Custom Search