Dreamweaver Article

Tableless Layouts with Dreamweaver 8

Preparing and Creating the Site Structure

Look at the Preferences dialog box. This first one is somewhat counterintuitive because you are building a site using CSS for positioning. Go to Preferences > General > Use CSS Instead of HTML Tags and turn that off. There's a good reason for doing that. If you leave that option on and use the Property inspector to add styling to an element, you will likely create classes called "style 1," "style 27," and so on, which will be placed in the head of your document.

I can't stand "classitis"; I believe in building small, succinct, well-organized pages. This means that, wherever possible, I redefine an element instead of creating a class for it. We'll look at this more thoroughly later but, for now, turn this preference off so that these random classes won't appear. This means you won't be using the Property inspector to create styles (or else you'll now be adding font tags). However, you can still apply styles you've already created with it.

Some of this is personal preference, of course, so if you've found something that works best for you, you may not want to follow my method exactly.

Let's move now to the CSS Styles panel in the Preferences dialog box. In the section When Creating CSS Rules: Use Shorthand For, you should check all the options. In the section When Editing CSS Rules: Use Shorthand, select the According to Settings Above option. Uncheck the Open CSS Files When Modified check box because you may want to use the Property pane or the CSS dialog box to edit. If I need the page open, I simply right-click (Control-click on Mac) the property in the Property pane and choose Go to Code. For the When Double-Clicking in CSS Panel option, check the Edit Using CSS Dialog option. I rarely double-click anyway; if I do, I prefer to edit with the dialog box.

Tip: If you're unfamiliar with writing CSS in shorthand, read John Gallant and Holly Bergevin's article on Community MX, called Writing Efficient CSS.

Creating the Structure

Download the files that accompany this article and define a new site in Dreamweaver. If you're unfamiliar with this process, please refer to the Help files within Dreamweaver 8 (Content > Dreamweaver Basics > Setting Up a Dreamweaver Site).

You can refer to the completed project files as needed, but let's start with a fresh page to begin your work now. Create a new page by choosing File > New (General pane). In the New Document dialog box, click Basic Page under Category and click HTML under Basic Page (see Figure 1).

Figure 1. New Document dialog box

In the lower right corner you can choose your Document Type (DTD). I will be 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. Save this file and call it index.htm.

Another way to create a new document is to right-click inside the Files panel and choose New File. Dreamweaver allows you to name it right away by showing the name area highlighted. Let's name it demo.css. Once you open this file, you'll see how smart Dreamweaver now is; it creates the default document based on what 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. Attach the style sheet to your index page. If you're unfamiliar with how to do that, look at your Dreamweaver help files or read Zoe Gillenwater's tutorial on Community MX, Apply CSS to Your Page.

Now place your div elements on the index page. I'll demonstrate a variety of ways that Dreamweaver 8 can do this. In time, you will find whatever suits your working style. On the Common pane of the Insert bar, click the Insert Div Tag icon (fifth button from the left; it looks like a page with a small box in the lower right corner). In the Insert Div Tag dialog box (see Figure 2), leave it set to the default (Insert: At insertion point), type holder in the ID field, and click OK. This will place a single div on the page.

Figure 2. Insert Div Tag dialog box

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

<body>
<div id="holder">Content for  id "holder" Goes Here</div>
</body>

In Design view, highlight the words "Content for id 'holder' Goes Here" and delete them. 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.

View the code you've just written and notice that the header div is nested inside the holder div. That's exactly what you want. Now you'll insert two more div elements after the header. Place your cursor after the closing tag of the header div and insert a div with the ID of nav. Following that div element, create the content div.

By nature, div elements take up 100% of their parent container. They also stack up on one another as if there were a break element in between them because they're block elements. 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 at the far right—it looks like an eye. (Refer to Julie's article if you're unfamiliar with this.) Click it and choose CSS Layout Backgrounds. Your divs will magically appear with background colors (see Figure 3). Since these background colors are randomized, your colors will no doubt be different from the ones shown here.

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

(+) View larger

Page 2 of 5

Previous Page

Next Page