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.
Listing 9.1. The Basic Document Structure and Starting Style Sheet
<!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 > <h1> <a href="http://www.meyerweb.com/"><span>meyerweb</span>.com</a> </h1> </div> <div > <div > Skip to: <a href="#navpres">site navigation/presentation</a> </div> <div > [...weblog content...] </div> </div> <div > [...navigation and presentation links...] </div> <div > [...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.
Figure 9.1. The design with the weblog styles applied but nothing else.
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.
Figure 9.2. The result of following the skip-link.
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 as 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.