7 The placeholder content is replaced with the actual content for the site.
BUILDING WEB PAGES 251
At this point, we have added the marked-up content into a
pre-existing XHTML layout and styled it with the pre-existing
3_col_liquid_faux.css and text_n_colors.css style sheets. This has
got us quite a long way (Figure 7.7), but now it??™s time to start adding
some styles to give this page its own unique look.
The Background Images
We??™ll ?¬? rst add some background graphics. There are four of them,
one for the header, one for the footer, and two in the main area of
the page. Let??™s start with the header and footer graphics (Figures
7.8a and b). They were created in Adobe Photoshop by simply putting
huge gray type on a darker gray background and then exporting
them in .gif format. They are each 880 pixels wide, which is the
maximum width I plan for this liquid layout.
FIGURES 7.8A AND 7.8B The
header and footer background
graphics are both 880-pixel-wide
.gif images.
Once these graphics are in the images folder, making them appear
in the background of the header and footer simply requires opening
the 3_col_liquid.css ?¬? le and adding the following CSS:
div#header {
background:url(../images/gray_header.gif) repeat-y #383838;
}
#footer {
clear:both;
background:url(../images/gray_footer.gif) repeat-y #383838;
}
Note the use of repeat-y (repeat vertically) for both graphics, even
though in normal circumstances, neither will actually visibly repeat.
Pages:
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292