Accessibility

Table of Contents

  1. Introduction
  2. Creating the structure
  3. What to watch out for
  4. A touch of styling
  5. When the client isn't happy

Tableless layouts with Dreamweaver CS4

Creating the structure

Download the sample files that accompany this article and define a new site in Dreamweaver.

Note: For more information about defining a site, refer to Setting up a Dreamweaver site in Dreamweaver Help or read the Introducing Site Management chapter from Dreamweaver CS4 The Missing Manual.

You can refer to the completed project files as needed, but let's start with a fresh page to begin your work.

  1. Create a new page by choosing File > New In the New Document dialog box, click Blank Page, under Page Type click HTML, and under Layout, select <none> (see Figure 1).

    New Document dialog box

    Figure 1. New Document dialog box

    You have 32 pre-made CSS layouts to choose from under Layout. You're going to learn how to build one from scratch in this tutorial, but later, you may find those layouts a useful way to get a quick start on your development. You can read more about them in my article, Understanding the new Dreamweaver CS3 CSS Layouts.

  2. In the lower right corner you can choose your Document Type (DTD). For this example, I'm using XHTML 1.0 Transitional, but if you're uncomfortable with that, feel free to create an HTML 4.01 Transitional document. (XHTML is not difficult; the main thing to remember is that all tags must be closed. For more details, see Dan Short's coding standards article, The (X)HTML Files.)
  3. Save this file and call it index.html.

Next, explore the following alternate way to create a new document:

  1. Right-click inside the Files panel and choose New File. Dreamweaver allows you to name it right away by showing the name area highlighted.
  2. Name this new file demo.css.

When you open this file, you'll see how smart Dreamweaver is; it creates the default document based on the extension you gave the file.

I recommend working in Split view so that you can see the code that Dreamweaver writes while you have a visual representation of it in Design view. Dreamweaver CS4 allows you to work in a vertical split view (a great new feature if you're working on a larger monitor).

  1. Switch to Split view. You can access this option through the new Application toolbar.
  2. Attach the style sheet to your index page. If you're unfamiliar with how to do that, click the context menu at the top right corner of the CSS Styles panel, and choose Attach Style Sheet.
  3. Browse to your demo.css file and click OK (see Figure 2).

Attach CSS to your (X)HTML document

Figure 2. Attach CSS to your (X)HTML document

Now place your div elements on the index page.

  1. On the Common pane of the Insert bar, click the Insert Div Tag icon (sixth button from the left if you're using classic view or sixth from the top if you're using the new Insert panel; it looks like a page with a small box in the lower right corner).

  2. In the Insert Div Tag dialog box (see Figure 3), leave Insert set to the default (Insert: At insertion point), type container in the ID field, and click OK. This will place a single div on the page.

    The Insert Div Tag dialog box

    Figure 3. The Insert Div Tag dialog box

  3. Look at Code view and be sure your code looks like this:

    <body>
     <div id="container">Content for id "container" Goes Here</div>
</body>
  4. In Design view, highlight the words "Content for id 'container' Goes Here" and delete them.
  5. Just as you did above, and without moving your cursor, insert another div element. This time, give it the ID of header and click OK.

  6. View the code you've just written and note that the header div is nested inside the container div. That's exactly what you want.

    Next you'll insert two more div elements after the header (not nested within it).

  7. Place your cursor after the closing tag of the header div (either in the Code view pane or by selecting the header div on the tag selector at the bottom of the document and clicking your right arrow key once) and insert a div with the ID of sidebar1.
  8. Following that div element, create the mainContent div.

By nature, div elements are block-level elements and unless constrained take up 100% of their parent container. Because of this, they stack up on one another as if there were a break element in between them. Since none of the divs have any styling applied, let's see if they behave as expected.

On the main document toolbar, you'll see a little Visual Aids icon about mid-way across—it looks like an eye. Select it and choose CSS Layout Backgrounds. Your divs will magically appear with background colors (see Figure 4). Since these background colors are randomized, your colors will no doubt be different from the ones shown here.

Background color examples for the Layout Backgrounds visual aid

Figure 4. Background color examples for the Layout Backgrounds visual aid

Div elements are like building blocks—but made of clay. You can mold and carve them into the size and placement you need. You can even make them appear to be non-rectangular shapes using background images (but that technique is for another article). In this case, you're going to set a width on the holder div and center it in the browser. You could just as easily allow it to take up the entire browser width, but limiting the width of the layout is sometimes a wise choice for creating a comfortable, readable line length. Monitors are growing larger all the time!

It's good practice to define the properties for the body element first. Browser defaults can vary and this gives you an even playing field to start.

  1. Select the <body> element on the tag selector at the bottom of the document.
  2. Open the CSS panel by selecting Window > CSS Styles if it is not already open.

  3. In the CSS panel, click the New CSS Rule button (among the icons at the bottom of the panel, it looks like a page with a plus sign). This brings up the New CSS Rule dialog box (see Figure 5).

    The New CSS Rule dialog box

    Figure 5. The New CSS Rule dialog box

  4. For Selector Type, choose Tag (so it redefines the look of a specific tag or element). If you selected <body> on the tag selector, Dreamweaver CS4 will auto-populate it for you in the Selector name field. If it doesn't, either type body or choose it from the pop-up menu. For Rule Definition, choose demo.css from the pop-up menu.
  5. Click OK. The CSS Rule Definition dialog box appears.

  6. I always begin by zeroing the margins and padding, and setting my font size, color, and background color. The panes of the CSS dialog box should be fairly self-explanatory, but for this first one I'll point you in the right direction:

    • Category > Type
      • Font-family: Choose the list beginning with "Arial, Helvetica..."
      • Font-size: Type 100 and choose % for the unit of measurement
      • Color: Enter #000000
    • Category > Background
      • Background-color: Enter #ADA189
    • Category > Block
      • Text-align: Center (to force Microsoft Internet Explorer 5 to comply with the centering)
    • Category > Box
      • Margin: 0 (leave same for all checked)
      • Padding: 0 (leave same for all checked)
  7. Click OK.

Note that at the top of your index.html document, you can see all the related files. In this case, you have Source code and demo.css. Clicking demo.css allows you to view your demo.css document while still viewing the visual design. Within the demo.css, you should see a rule similar to the following:

body {
    font: 100% Arial, Helvetica, sans-serif;
    color: #000000;
    background: #ADA189;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

Note that when you view your index.html page that your divs now all appear centered. If you've left your CSS Background colors visualization on, you won't see the background color defined for the page. This feature turns off all background colors because it adds its own. If you want to see the effect that your rules are having, feel free to leave this feature on for now but know that you won't see the background color you just defined.

Code hinting

For the #container div, you'll use another method of creating the rule. This method demonstrates how code hinting works.

Beneath the body selector in the demo.css file, type #container {. Beneath that line, type width: 760px;. Note that Dreamweaver gives you hints based on what you type. When you see the property you need, press Enter; it will put the property and colon separator on your page and will then move on to the value hints.

Beneath that line type background: #FFFFFF; and close the rule by typing }. Once a rule is begun in the CSS page, you can use the Properties pane of the CSS panel to edit and add to it.

The Properties pane

You'll now complete the rule with the Properties pane of the CSS panel.

  1. Click in any of the divs in Design view. Note that you can see the document tree on the tag selector at the bottom of the document. Depending on the div in which you placed your cursor, it will look something like this: <body> <div#container> <div#sidebar1>. When working in Dreamweaver, the tag selector is your very best friend.

  2. Click <div#container> on the Tag selector. With your CSS Styles panel in Current view, note that, in the Properties pane, you can see the two property/value pairs you just created. You may need to drag the Properties pane area down a bit to see all your properties.

    Next, you'll add a couple more properties. I keep my Properties pane set to Show only set properties, so I don't have to scroll through all the unused properties (the three icons at the bottom left of the Properties pane).

  3. Click Add Property. On the left side there will be an input. You can enter your property if you're sure you know the exact label. Or use the pop-up menu to select it (they're in alphabetical order).
  4. Select the text-align: option. Once it's selected, an input appears on the right side. Again, enter the value or select from the possible choices shown in the pop-up menu. Select left.
  5. Finally, click Add Property again and select margin.

Note that you don't get a pop-up menu showing any values. I prefer shorthand-style CSS because it's so much more succinct. If you can't remember the order to place the shorthand values, don't worry. Dreamweaver reminds you if you hover your cursor over the value input (see Figure 6). Enter 0 auto 0 auto (if you really want to be short about it, 0 auto gives the same, but shorter, results).

Property hinting in the CSS panel

Figure 6. Property hinting in the CSS panel

In the demo.css file, your rule should now look something like this:

#container {
    width: 780px;
    background: #FFFFFF;
    text-align: left;
    margin: 0 auto;
}

Let's review the #container rule and discuss the values given. Since you're centering this page, the div must have a width. Otherwise, as I mentioned earlier, it will be 100% as wide as the body element (which is its parent). The margins given, with both side values set to auto is the magical property that forces that #container to be centered. No matter how wide the browser is, this 780-pixel block will be in the center. Since you gave the overall page a background color, you gave this div a white background for legibility.

Finally, you placed text-align: center into the body rule to center this div in Internet Explorer 5 series browsers. Thus, you put text-align: left into the holder to bring everything back to the default left alignment.

Defining the header

There are three more divs, all within the #container div, to define. Feel free to use any of the previous three methods to create these rules. Play around with them and see which works best for you:

#header {
    background: #DCCBAC;
}
#sidebar1 {
    width: 140px;
    float: left;
    padding: 15px 10px;
}
#mainContent {
    margin: 0 0 0 165px;
    padding: 15px;
}

Allow the header to stay at 100% of the width of its parent container (the container div). That means it is also 780 pixels wide. There's no need to define it. Also allow the contents of the header to define its height. In general, this area is used for the company name, logo, and tag line. Many times it will be an image, but I'll use text for this demonstration.

Type in a fake company name in a <h1> element and remove the placeholder text. Now that you've carved and formed the blocks that create your page, view them with the CSS backgrounds again. Turn on the CSS Layout Outlines as well (see Figure 7).

Three divs defined

Figure 7. Three divs defined

Note that the #sidebar1 div is now sitting to the left of the #mainContent div. This works because the #sidebar1 div is given a width (140 pixels + 20 pixels padding = 160 pixels) and is floated left, and the #mainContent div is given a left margin of 165px which clears that width. There's now room for them both on one line.

Note also that the left margin for the #mainContent div is 5 pixels wider than the width of the #sidebar1. I always give the margin values at least 3–5 pixels more than they seem to need because Internet Explorer for Windows sometimes adds a phantom 3 pixels to the value.

If an item is placed in the #mainContent div that is wider than the space provided, the content div will drop to the next line (below the #sidebar1 div). This is called float drop and if you'd like to see it in action, simply place an image (or div with a width setting wider than the #mainContent div allows, over 615px) into the #mainContent div and preview it in Internet Explorer. (John Gallant and Holly Bergevin wrote a great series on Community MX about floats and how they work, called Float: The Theory.)

Note: You could absolutely position the #sidebar1 div and give the #mainContent div the same left margin to get the same effect. In general, I don't do this because an absolutely positioned div is taken out of the flow of the page so that none of the other elements know of its existence. So if you had a great deal of content in your #sidbar1 column, it would simply run off the bottom of the page and not respect the same boundaries that the other divs do. This can be messy, so I don't advise it. For more information on the flow of the document, read John Gallant and Holly Bergevin's article on Community MX, called Flowing and Positioning: Two Page Models.

Page 2 of 5
Previous Page
Next Page