|< Day Day Up >|
Laying the Groundwork
Since we're going to be using the weblog styles, we already have a simple embedded style sheet, which is shown in Listing 9.1 as a part of the overall document structure.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Project 9</title> <style type="text/css"> @import url(project08.css); </style> </head> <body> <div id="sitemast"> <h1> <a href="http://www.meyerweb.com/"><span>meyerweb</span>.com</a> </h1> </div> <div id="main"> <div class="skipper"> Skip to: <a href="#navpres">site navigation/presentation</a> </div> <div id="weblog"> [...weblog content...] </div> </div> <div class="panel" id="navpres"> [...navigation and presentation links...] </div> <div id="footer"> [...footer content...] </div> </body> </html>
The embedded style sheet uses an @import to call in the Project 8 style sheet, which we've split off into a separate file called project08.css. (To see this style sheet, refer to Listing 8.2 in the preceding project.) We can see the result in Figure 9.1.
All we've really done is take the weblog content from the preceding project and drop it into a slightly larger document, one that has a masthead and navigation elements, plus presentation options and a footer.
The page also has a "skip-link" near the top of the document; that's the stuff in the div with the id of skipper. Clicking on (or otherwise activating) the skip-link will jump the browser display to the navigation and presentation links, which are found at the end of the document. This is illustrated in Figure 9.2.
The placement of these links in the document source makes it pretty clear that we'll have to either float the main content to the left or else absolutely position the "sidebar" to get it placed to the right of the main content, as our project goals require.
I say "sidebar" with quotes because there's nothing about the document structure that requires it to be a sidebar. We could style it however we want梐s a series of drop-down menus, perhaps, as we did in Project 6, "CSS-Driven Drop-Down Menus." It could also all stay at the bottom of the design. We're referring to the navigation and presentation links as a sidebar merely because it's a convenient way to refer to our intent to place those links to one side of the main content.
|< Day Day Up >|