| Before you start a painting, you first have to stretch the canvas. The canvas frame (usually a wooden rectangle) gives the limp cloth a taut structure. In the same vein, before you start applying your designs, you need to add structure to your HTML code to give your CSS, DHTML, and Ajax code something to hook into. This structure generally comes in the form of adding IDs and classes around particular blocks of content using either <div> or <span> tags. In this first example (Figure 21.1), we will add structure to the HTML code to accommodate the design for the upcoming sections on multicolumn layouts, headers, navigation and links, and copy and content so that we can create our final layout (Figure 21.2). Figure 21.1. The page created from Code 21.1 displayed without CSS. 
Figure 21.2. The same HTML code as shown in Figure 21.1 with the external CSS file default.css (Code 21.3) applied to it. 
To structure your HTML markup for layout: 1. | Initially the code is already structured by the HTML, but it may not be optimally structured for layout using CSS. Evaluate the code carefully and look for blocks of code that should be separated out so that you can structure the page logically.
In the page for this example (Code 21.1), I see a need for a header, navigation, content, a pull-quote box (drop box), and footer. In addition, I'll want to individually style the author name and chapter title.
Code 21.1. Although already marked up with HTML tags, there are no "hooks" for CSS to use to create the type of layout we want. | | | 2. | <div >…</div>
Surround your entire page (between the <body> tags) with a <div> element (Code 21.2). Generally, you will want to provide the page a unique ID name, or at least the section of the site where the page is located (the ID is used later in this chapter to help us with styling the global navigation). Also add a class called page to the tag, which is often used to help control columns in the design.
Code 21.2. This is the same basic code as Code 21.1 (and will display the same if no CSS is added), but the structural "hooks" have been added that will allow us to create the desired layout. In theory, the ID and class could go directly in the body tag, but I find this sometimes causes problems.
| 3. | <div >…</div>
Surround the content of the page that makes up the main header with a <div> element. The header will generally stretch across the top of the page, and may have title, sub-titles, global navigation, or other elements that will need to be at the top of every page in the Web site.
| 4. | <div >…</div>
If you have navigation that is not in the header, identify it with a <div> element. This is only a two-column example, so I'm assuming that this will be the content in the left column and I have assigned it the navigation ID. However, you can call this block anything you want or even introduce another <div> to be used as a third column.
You might also want to put search forms, e-mail sign-ups, link lists, or whatever you want into the header.
| | | 5. | <div >…</div>
Add a <div> element around the primary content of your page. Generally, these are the articles, registration forms, photo galleries, or other content that the visitor came to the page looking for.
| 6. | <div >…</div>
Add a <div> element that will contain all of the copy (the text) of your content. Generally you will want to style the copy text in your content section independent of other content in the page.
| 7. | <div >…</div>
Add a <div> at the very bottom of your content for the footer. Even if you don't plan to use it to display content, it has to be included for the 2-column layout presented in the next section to work successfully.
| 8. | <div >…</div>
Add other <div> elements with class names as needed to set off specialized content types that may be reused throughout the page.
For this page, I wanted to create a floating "drop box" that will contain images and text that other text on the page can wrap around.
| 9. | <span >…</span>
Finally, add individual classes as needed to style particular elements, based on the type of content they contain. In general, try to avoid "classitis" as much as possible, since using large numbers of classes can severely limit you in future redesigns. The better tactic is to rely on contextual styling instead, which does not require you to add anything to the HTML code.
For this example, I found I needed a class for the author name and a class for the chapter title.
| | | 10. | <link href="default.css" rel="stylesheet" type="text/css" media="all" />
Back in the head of your document, you can go ahead and add the links to any external style sheets or JavaScript you will be using with this page.
In this example, I've included a link to default.css (Code 21.3) that you will be creating in the next four sections of this chapter. This file will contain all of the code used to style the page.
Code 21.3. default.css: This is the final version of the CSS code that will be applied to the HTML in Code 21.2. The individual components are explained in Codes 21.4, 21.5, 21.6, and 21.7.| [View full width] body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #999; margin: 0px; } /*** Multi-column ***/ .page { display: block; width: 100%; padding: 0px; background-color: #ccc; } #header, #footer { clear: both; background-color: #999; } #navigation { float: left; width: 30%; max-width: 250px; min-width: 100px; font: bold 12px "Helvetica Neue Narrow", Arial, Helvetica, sans-serif; } #content { float: left; width: 65%; padding: 2%; max-width: 756px; min-width: 200px; border-left: 2px solid #999; background-color: #fff; } .dropBox { float: right; padding: 4px; margin: 4px; background-color: white; border: 2px solid #666; } .dropBox img { display: block; } /*** Headers ***/ h1, h2, h3 { padding-bottom: 0px; margin-bottom: 0px; } h1 { font-size: 28px; } h2 { color: #666; } h3 { margin-left: 8px; font: small-caps bold 18px "Helvetica Neue Narrow", Arial, Helvetica, sans-serif; } #header { height: 100px; color: #fff; border: 1px solid RGB(255,204,204); border-bottom: 2px solid #999; background: #f99 url(header_01.png) repeat-x; padding: 0px 8px; } .authorName { font: 18px "Helvetica Neue", Arial, Helvetica, sans-serif; } h2 .chapterTitle { display: block; font-size: smaller; color: black; } /*** Navigation and Links ***/ p a { color: #f33; text-decoration: none; padding-bottom: 0px; } p a:link { color: #f33; border-bottom: 2px dotted #fcc; } p a:visited { color: #966; border-bottom: 2px dotted #fcc; } p a:hover { color: #f00; border-bottom: 2px solid #f99; } p a:active { color: #966; border-bottom: 2px double #f66; } #navigation ol { list-style-type: none; margin: 0px; padding: 0px; } #navigation ol li { margin: 0px; margin-bottom: 0px; padding-bottom: 0px; } #navigation a { padding: 2px 2px 8px 16px; border-top: 3px solid #fff; text-decoration: none; display: block; } #navigation a:link { color: red; } #navigation a:visited { color: red; } #navigation a:hover { background-color: #fff; border-top: 3px solid #666; color: red; } #navigation a:active { background-color: red; border-top: 3px solid #fff; color: #fff; } #chapter01 #ch01, #chapter02 #ch02, #chapter03 #ch03, #chapter04 #ch04, #chapter05 #ch05,  #chapter06 #ch06, #chapter07 #ch07, #chapter08 #ch08, #chapter09 #ch09, #chapter10 #ch10, #chapter11 #ch11, "Comic Sans MS", Helvetica, Arial, sans-serif; } #footer p { color: white; font-size: small; text-align: center; padding-top: 4px; border-top: 2px solid #999; }
|
|
 Tip
A major trend in Web design today is to separate the content, design, and functionality as much as possible to make changes to any one of these categories as easy as possible without affecting the others. This allows for what is called progressive enhancement (see the sidebar "What is Progressive Enhancement?").
What Is Progressive Enhancement? Today, all Web design layout should be done with CSS. This lets you separate the content and structure created by the markup (whether it is in HTML, XHTML, or XML) from the styles (CSS) and functionality (JavaScript) used for presentation on a particular technology (like a Web browser). This Web design strategy is called progressive enhancement, which promotes the following principals: Basic content and functionality that is native to the particular medium should be accessible to all browsers. All content is contained in the markup if possible, which should have no styling. Enhanced styles, layout, and functionality are provided by external CSS or JavaScript files.
Following these principals takes some extra effort, especially at first. However, you will benefit in the long run from amazing power and flexibility with your Web site designs. Separating content, style, and functionality lets you completely redesign an entire Web site by simply supplying new CSS and JavaScript files. Beyond the flexibility, following these principals increases accessibility and doesn't tie your content down to being used by any particular technology. The basic content can go to Braille readers or Web-enabled cell phones, while CSS-enhanced and JavaScript-enhanced versions can be used by computers. For more details, check out Steve Champeon's seminal article on the topic from Webmonkey (webmonkey.com/03/21/index3a.html). |
|
