Page Layout with CSS - Web Development and Design Foundations with XHTML - page 243

<p>A wide array of wildflowers grow in the county because of
this variety of ecosystems.</p>
<h2>Explore the beauty <br />of Door County Wildflowers.</h2>
</div>
<div id="footer" >
Copyright &copy; 2010 Door County Wild Flowers<br />
Last Updated on 06/07/10
</div>
</div>
</div>
</body>
</html>
Save your page as twocolumn.html in your wildflowers2 folder. Test the page in a
browser. Your display will not look like the one shown in Figure 6.21 because you
have not yet configured the CSS. Your page should look similar to the page shown in
Figure 6.23.
Figure 6.23
The two-column
page before CSS is
applied
Part 2—Configure the CSS
For ease of editing, in this Hands-On Practice you will code the CSS as embedded styles in
the header section of the Web page. However, if you were creating an entire Web site you
would most likely use an external style sheet as you did in the previous Hands-On Practice.
Launch Notepad and open twocolumn.html. Let's take a moment to consider what type
of layout is needed for the page shown in Figure 6.21: wrapper, left column with navi-
gation, right column, logo, content, right-floating image, and footer. Locate these areas
on the sketch shown in Figure 6.22. Notice that the same font is used throughout the
page and the page begins right at the browser margin. Launch Notepad and open your
twocolumn.html file. In the header section of your Web page document, add a tag to
begin the embedded styles: <style type=“text/css”> .