26 May 2008
In Part 1 of this tutorial, Gordon Mackay and I presented best practices for organizing the layers of your Fireworks comp in a logical way to promote ease of use and to mirror the structural counterparts of your target website. You created a comp for a design that you could present to a client and use to generate the required images for a CSS-based layout.
In Part 2, you will work in Dreamweaver to prepare the markup that serves as the foundation for the cascading style sheet (CSS) document. Part 3 shows you how to complete the layout and create the style sheet. The first steps in Part 2 are defining the site and creating a starting page in Dreamweaver.
This tutorial assumes that you know how to define a site in Dreamweaver. If you do not, please refer to the Dreamweaver Help files. For the Blimey site, you only need the Local Info category, which is easy to set up quickly when you select the Advanced tab of the Site Definition panel (see Figure 1):
Create the new HTML file that you will use to code the main layout for the Blimey site (see Figure 2):
The remaining sections of this tutorial explain how to set up the page structure, make the logo image accessible, add the Spry components, and apply some finishing touches.
The reconstruction of the Blimey layout happens in two phases. In this part of the tutorial, you will prepare the markup so that it provides the hooks for the CSS styles and in Part 3, you will complete the layout and create the style sheet.
To begin preparing your markup, add a series of div elements, or divs, to form the basic shell of the page. Figure 3 shows the structure for this layout.
The easiest way to insert divs while remaining in Design view is to use the Insert Div Tag button on the Common tab of the Insert toolbar (see Figure 4).
It might seem reasonable to expect CSS to provide a way to use divs to create equal-height columns. However, divs expand vertically only as long as there is content to fill them. When that content ends, so does the div along with any background color or image that you set in its CSS rules (see Figure 5).
Designers work around this problem by placing columns and other page areas, such as the header and footer, in a wrapper or container div. That way, as long as there is content in any column within the wrapper div, the background color or image on the container appears.
Container divs are useful also for centering layouts on the page, and such layouts have been the prevailing trend for quite some time.
Horizontal band layouts reverse this operating procedure, however. Because the orientation is horizontal, rather than vertical, you are going to place the container inside the header, masthead, and footer divs instead of placing those divs inside the container! You are still going to use div nesting techniques, however, to create the illusion of columns using the faux column technique.
Unlike the centered, fixed-width layout that fits inside one parent container, the horizontal band layout is almost like building separate self-contained layouts. You will build four such layouts, labeled Module 1, Module 2, Module 3, and Module 4. Begin by adding the header module to the page.
To create the header module, follow these steps:
The Insert pop-up menu automatically selects the At Insertion Point option and positions the new div at the cursor.
When you click OK, Dreamweaver inserts an outlined representation of the
header div in Design view (see Figure 7). The outlines will not appear as part of the design when the page is viewed in a browser; the CSS Layout Outlines tool is one of the Dreamweaver CS3 CSS tools that enable you to visualize and troubleshoot divs on the page. You can toggle all such visual tools on and off from the Document toolbar. They are located under the Visual Aids (eye) icon.
Note that Dreamweaver automatically adds placeholder text inside the div. In the next steps, you will delete this text and nest a container div inside the header. Although the header itself will span the entire width of the window, the content within it will be constrained to a centered, fixed-width container.
Note: Depending on whether you are in Code or Design view, Dreamweaver will present a different dialog box for the Insert Div Tag icon. For this tutorial, you will use Design view. If, however, you are comfortable with hand coding, you might prefer to stay in Code view and enter your markup manually. This will minimize going back and forth between Design and Code views as you tackle various tasks.
CSS IDs must be unique on each page, while classes can be reused. Because you are going to reuse this container in the other main areas of the page, you use the class selector type instead of the ID.
Even if you are not used to working with code, you will want to switch to Code and Design view to make sure that the next step works exactly as you expect:
This completes the first module, or band, of the horizontal band layout.
The second module is devoted to the branding of the layout. It includes the logo and the gradient band that spans the entire width of the page behind it.
bodytag (see Figure 11). Return to Design view, or if you prefer, you can add the next div element in Code view.
You will proceed a little differently with the content module. You still need the container div, but because there is no color band behind the module you do not need to add a parent content div. However, if you ever want to put color behind the content, you can wrap the following structure in a content div that can provide the hook for a CSS background color.
secondary-contentdiv tag but before the closing
content-wrapperdiv tag (see Figure 12).
Note: When you write the CSS for the layout, you will float both the secondary and main content columns to the left to give them each an independent block formatting context. Part 3 of this tutorial explains this in more detail. The column div that comes first in the source order of the document will appear leftmost in the layout. This is why the
secondary-content div is coded first.
To complete the basic structure, create the "fat footer" module:
You have now completed the main structure for the layout. You can refer to main_divs.html in the support_files folder if you want to compare your work to a completed file.
There are still a few important tasks to complete before moving on to Part 3 of this tutorial:
br) element that will be used for a clearing class.
Most companies use a logo as part of their corporate identity. In web design, it is often necessary to leave the logo as an image to preserve fonts and branding. For the sake of accessibility and search engine optimization, however, it is a good practice to add a span within a heading and wrap that around the logo image. This gives it a keyword rich text equivalent in a format that is more potent than just alternative text from an
alt attribute. Some developers place the logo inside a Level 1 heading to gain an advantage in search engine optimization. However, according to XML standards, you should only include one Level 1 heading, or
h1, per page. If you use the
h1 for the logo on every page, you lose the benefit of a unique, keyword-rich
h1 for each. Your choices, then, are to use another element such as a lower level heading, or a
<p> element. In this tutorial you will use the latter:
<p>.If you have code hints turned on, the code hints will appear as you type.
</p>after the image code. When you type the closing slash, Dreamweaver completes the tag for you.
Figure 14 shows the finished code.
You will see both the logo image and the logo
span text in Design view (see Figure 15). When you write the CSS, you will position the
span text off-screen where sighted visitors cannot see it, but where it is still accessible to visually impaired visitors.
The next step is to add the list of navigation links. Most experienced web developers follow the best practice of putting related groups of links in lists to enhance accessibility:
Note: Dummy links do not go anywhere but they make text look and behave like a real link.
To add the search form, follow these steps:
</ul>tag for the unordered list of links.
<form>tags, select Insert > Form > Textfield.
The Accessibility dialog box appears.
Usually you do not need accessibility features for a standard Submit button, but because you are using an image to submit the search query, it is advisable to add alternative text.
Figure 19 shows the completed form in both Code and Design views.
To add the Spry Accordion widget, follow these steps:
Note: By default, the widget will horizontally fill the entire width of the window. You will change that later.
Note: You can use the up and down arrows to change the order of the panels.
Next, add content to the panels. The first panel is open by default.
Now, add sub navigation to the content region of each panel.
The steps for adding the Tabbed Panel widget are similar to those used for adding the Accordion.
main-contentdiv, click the Tabbed Panel icon in the Spry category of the Insert toolbar.
Next, add content to each tabbed panel.
To add the footer column content, follow these steps:
If you have ever floated images on a page, you probably know that unless you add the
clear property, content that follows a float may wrap around it. To prevent problems with the footer div that follows the content area of the layout, you will need to add an element to which you can later add a class for clearing.
Some developers consider it taboo to add superfluous code to your markup to solve presentation problems. In this project, you added such code when you used spans within headings and when you used wrapper divs to contain structural divs. Given the current state of evolution in CSS, however, "divitis," "classitis," and extra markup are sometimes necessary evils.
br> element used in this exercise is another example of a method that most easily achieves the specific goal. Some ingenious developers devise alternative methods to improve code, such as using generated content to clear floats. In the end, there are pros and cons to all methods, and the clearing element remains a stable and reliable way to introduce the clearing property with minimal extra structural markup.
Most developers use either a
<div> or <
br> element to provide the hook for the clearing class. This tutorial uses a <
The code should appear as shown in Figure 28.
Later in the CSS, you will add the
clear property to the class as well as some properties that ensure the break element does not take up any room in the layout.
Figure 29 shows what your comp should look like now (minus the dummy text for the last column).
The preparation work is finished and the page is ready for some styling that will take it from plain to visually engaging. In Part 3, you will complete the layout and create the style sheet.
Tutorials and samples