Setting up the page structure

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.

Figure 3. Structure of the Blimey 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).

Figure 4. Insert Div Tag button

Understanding how divs work

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).

Figure 5. Examples of vertically expanding divs

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.

Page 3 of 8

Previous Page

Next Page