Dreamweaver Article

Tableless layout with Dreamweaver

Drew McClellan Dreamweaver Fever A few years back, I stopped for the night at a farmhouse in Wales. It was a traditional farmhouse with slanted walls, a thatched roof, and narrow, winding staircases. In the kitchen, the Aga was well stocked and cats slept on almost every horizontal surface. Right in the middle of the kitchen was a large oak table. Kitchen tables are used for almost everything that requires something flat to lean on. An everyday eating surface becomes an occasional sewing table, a writing desk, an easel, a conference table, a battle zone, a place to sit and chat. Kitchen tables routinely get covered in food, large route maps, homework, furry creatures, paint, glue, flour, and just about every liquid known to man. The kitchen table is where it's at, and with most tableslike the one in the Welsh farmhouse I visitedthe scars can soon be seen. In just the same way as a kitchen table, the HTML <table> tag gets roped into all sorts of activities that it wasn't originally designed for. Most of these involve alignment of items on a page and the occasional carving of "kevin woz 'ere" into their surface. This article covers how to use Macromedia Dreamweaver MX to design and lay out a page without the use of HTML tables. Creating tables in HTML Basic design principles instruct us to align elements horizontally and vertically to each other to create a well-ordered page. By its very nature, the HTML table is well suited to these alignment tasks. Although apparently suited to layout on the surface, under the hood it becomes clear that tables do a pretty lousy job of page construction. Among their shortcomings is the implied bias of the code towards presentation rather than structure, the necessity to nest tables in order to achieve the most basic of layouts, and enough redundant bandwidth-hogging tags to feed a large family of tag eating monsters for literally a month. Introducing CSS: A less chewy alternative Fortunately, Cascading Style Sheets (CSS) provides an alternative to table layouts. Although not without its own shortcomings, CSS addresses many of the problems that tables bring to the table. Designed specifically for the job, CSS obviously has benefits far and beyond the scope of tables. You can read about those benefits in the following places: An Overview of Cascading Style Sheets (http://www.macromedia.com/support/dreamweaver/ts/documents/css_overview.htm) (Dreamweaver Support Center) Best Practices with CSS in Dreamweaver MX (http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_practices.html) (Developer Center) Turning the Tables (DreamweaverFever.com)

In this article, you are going to use CSS instead of tables to create the basis of a corporate website for an imaginary (8K) for legal firm. Can this get any more fun? First, you'll need to download and unpack the accompanying files this article into a new or existing site in Dreamweaver MX. Consult the Dreamweaver MX help files (Help > Using Dreamweaver) for steps on how to define a site. Make sure to move or copy the unpacked images folder into the root folder of the site. Laying out a page with CSS Positioning Designing a page with CSS Positioning (CSS-P) can, at first, present a bit of a challenge. Although the principles of good design remain the same, the techniques are wildly different from those used when laying out a page with tables. You really have to put away the things you already know and open your mind to something completely different. It's a bit like learning to cook with a microwave oven (but ultimately far more useful). The page you build is going to be quite straightforward, yet open enough to be built upon once you find your feet.

There's no point learning to run before you can walk. I'll keep it to a simple combination of a logo, some navigation, a decorative image, and some text. With a little luck, your page will end up looking something like Figure 1.

(http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/figure01.html)

Figure 1. The final look of the page.(Click the image for a full-size version of the image.)

Step 1: Create the page When designing a page with CSS-P, I find it easiest to structure my document first with a good selection of sample content. Starting with a solid, structurally marked up document is definitely the way to go. Remember that you're not going to include anything in the page that describes how anything looks; that's the job of the style sheet. Building the document structure For the basic document you'll use the Dreamweaver XHTML Transitional template. If you haven't used XHTML for your pages yet, now is a good time to start. There are no disadvantages to using XHTML over HTML, and transitioning is simple. The major benefit is forward compatibility. See Dan Short's coding standards article, "The (X)HTML Files (http://www.macromedia.com/devnet/mx/dreamweaver/articles/code_standards.html) ," for more details. First off, create a new XHTML document in Dreamweaver MX. Select File > New and pick HTML from the Basic Page category. Make sure the Make Document XHTML Compliant check box is checked within the New Document window (see Figure 2).

(http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/figure02.html)

Figure 2. Creating a new XHTML document. (Click the image to see a full-size version.)

Your basic document now looks like this:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> </head> <body> </body> </html> The next thing to do is insert your content between the <body> tags. Let's take this one element at a time. Insert a logo Every site needs a logo, right? Better throw one in, then. Use the logo.gif file that is included in the sample files for this (http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/tableless_layout.zip) (8K). Place the logo image article within a DIV with an ID of "logo": <div id="logo"> <img src="images/logo.gif" alt="Robinson, Tomkins &amp; Graavs" width="200" height="57" /> </div> What could be simpler? Wait, don't answer that. Create the navigation You want the navigation to appear near the top in the page flow so that even browsers without CSS support can find it in a fairly intuitive place. My "dummy" navigation looks like this: <div id="navigation"> <a href="#">About us</a><br/> <a href="#">The Partners</a><br/> <a href="#">Areas of law</a><br/> <a href="#">Contact us </a> </div> Content Your main feature in this crazy little show is, naturally, the content. Again in a DIV note how I've marked up this mock Latin structurally. I've used <hx> tags for headings and <p> tags for paragraphs:

<div id="content"> <h1>Welcome to Robinson, Timkins &amp; Graavs</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <h2>Our Value Proposition</h2> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div> Don't forget the decorative elements The final thing to add to the page is a bit of jazz a naff image with some swirly script writing from the Magna Cartaperfect! <div id="script"> <img src="images/script.gif" width="417" height="84" alt="" /> </div> In the next section you will create the style sheet. Step 2: Create the style sheet From within Dreamweaver MX, select File > New and pick CSS from the Basic Page category (see Figure 3). This will create a new style sheet. Save it in your site with the .css extension.

(http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/figure03.html)

Figure 2. Creating a new XHTML document. (Click the image to see a full-size version.)

There are two different methods for editing CSS in Dreamweaver MX. The first is to use the built-in CSS editor. Unfortunately, this editor hasn't been updated since the earliest versions of Dreamweaver so it's nearly useless. Note from the editor: Since the publication of this article, Macromedia has made many CSS-related updates in Macromedia Dreamweaver MX 2004. Check out Jennifer Taylor's article on the new Dreamweaver MX 2004 (http://www.macromedia.com/devnet/mx/dreamweaver/articles/dw_whatsnew.html) features to find out more. The second method is to open the CSS document directly and edit it by hand. This is the approach I describe because it offers greater control and is faster than using the built-in editor. A third option would be to use a third-party tool like Bradbury Software's TopStyle Pro, which is a fine tool and integrates nicely with Dreamweaver MX. If you have TopStyle Pro, fire it up now. Like HTML, a CSS document is just a text file following a certain format. Also like HTML, CSS syntax is quite easy to learn. To help you along your way, let's do some by hand. Here's the basic structure of a CSS rule: thing_you_want_to_style{ color : black; background-color : white; /* and so on */ } The "thing you want to style" is called a selector. As you may have guessed, comments are marked like this: /* and so on */ Add base elements To get yourself started, insert a basic rule defining how the <body> tag should be styled: body { padding : 0; margin : 0; background-image : url(images/bg.gif); background-repeat : repeat-x; } Because it's the <body> tag we're styling, I've started my rule with "body" as the selector. You'll notice I've set a background image, too, and told it to "repeat-x," which means tile left to right, but not top to bottom. This image is a gray background strip or banner. The padding and margin properties tell the browser not to leave any gaps around the edge of the page, but to run the content right up to the edge. Note that you don't need to give a unit of measurement after the zero. Zero is zero, whichever unit of measurement you're working in. Link the style sheet Now that you have a basic style sheet, you need to link it to the page. Dreamweaver MX makes this quite easy. From

within your XHTML page (not the CSS file), open the CSS Styles panel in the Design panel group (select Window > CSS Styles) and click the Attach Style Sheet button at the bottom of the panel (the first button on the left). Browse to your CSS file and click OK (see Figure 4).

(http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/figure04.html)

Figure 4. Linking the style sheet to the document. (Click the image to see the full-size image.)

The inserted link should look something like this in the <head> of your page: <link href="master.css" rel="stylesheet" type="text/css" /> In the next section you will position the content. Step 3: Position the content If you were to view your page in a browser at this point, it would appear as a mess. However, it should be understandable. To really communicate the information and brand properly, you need to position some elements. Anything that has an ID can be addressed from a style sheet. Your content is inside a DIV with an ID of "content." The # at the start of the selector denotes that the following name is an ID from the document. To address it, you need to create a rule like so: #content{ } To position the content where I want it, I'm going to play around with the padding. A DIV will naturally occupy all the width it can. In the case of this page, that width is 100 percent. By letting it keep that width, but tuning its padding, I can create quite a strong, browser-safe layout. Let's look at how I've done it: #content { padding-top : 130px; padding-bottom : 30px; padding-left : 230px; padding-right : 20%; } I'm assuming that it's got all the space it wants (the whole window) and am taming it down from there with some padding. Note the use of pixel values for the top, bottom, and left padding settings, but a percentage for the right. This keeps the layout liquid (the right side with give and take) while still maintaining the desired look and feel on the left. Check how your page looks now. Not too pretty yet, but certainly different! Let's throw in some text styling for good measure. In CSS, you can address elements by the elements in which they are contained. In this case, you know that you have paragraph tags and heading tags within a DIV called "content"; therefore, you can style those headings and paragraphs without affecting other headings and paragraphs on the page:

#content h1 { font-family : "Trebuchet MS", Georgia, Times, serif; font-size : 120%; font-weight : normal; color : #000; background-color : transparent; } #content h2 { font-family: "Trebuchet MS", Georgia, Times, serif; font-size: 100%; font-weight: bold; color: #000000; background-color : transparent; } #content p { font-family : "Trebuchet MS", Georgia, Times,serif; font-size : 80%; font-weight : normal; color : #000; background-color : transparent; line-height : 140%; } Check your page and you'll see that things are slowly taking shape. In the next section you will position the logo and navigation and decorative elements. Step 4: Position the logo and navigation and decorative elements All you need now are a few quick rules to get the rest of the junk into place. Here's what I've got: #logo { position : absolute; top : 30px; left : 30px; z-index : 50; } I use absolute positioning to get the logo where I want it. Absolute (rather than relative) positioning ignores all other elements on the page and positions the item based on the values given. The item is taken out of "document flow." I've also set a z-index (stacking order) to make sure that the logo is always on top, whatever happens in the browser: #script { position : absolute; top : 12px; right : 0; text-align : right; /*Mild hack for Netscape 4*/ } Again, I've used absolute positioning to get the script-text image where I want it. Because I'm going for a right-aligned feel with the graphic, I've set the "right" value to zero (as in, no space to the right). Most browsers do this correctly, but I've had to include a "text-align" property so that Netscape 4 catches on. No great loss there; Netscape 4 has always been the class idiot.

#navigation { position : absolute; top : 190px; left : 60px; width : 140px; } #navigation a { font-family: "Trebuchet MS", Georgia, Times, serif; color : #00f; background-color: transparent; } Here I've both positioned my navigation (again, absolutely) and styled any link within that navigation DIV. Check your page again. I hope it now looks something like what you were trying to achieve! In the next section you will make sure the page validates and also test the page in several browsers. Step 5: Validate and test the page The quality assurance steps for any project are critically important. This process doesn't change between table-based and CSS-based sites, although the problems you're looking for are different. Page validation As always, run your page through the W3C's HTML and CSS validators. You'll find them here: HTML validator (http://validator.w3.org/) CSS validator (http://jigsaw.w3.org/css-validator/) I deliberately did not run my code examples through the validator. I hope I made a few errors for you to find. Browser testing A crucial part of working with CSS-Pas with any other aspect of Web development is to check your work in as many browsers as possible. To be sure that your page works correctly for all those who view your site, you must open the page in different browsers and perform a number of tests. For the page you have been working on, I think these are reasonable tests to conduct: 1. Is the content displayed? 2. Do the columns take up the correct width without overlapping? 3. When you resize the window, does the page adjust correctly? 4. Do scroll bars appear in the correct places? 5. Do any scroll bars work as expected? 6. Are there any other abnormalities that are apparent? For your page, these six simple tests should reveal most abnormalities. After all, this is quite a simple page; you shouldn't really encounter too many problems.

About the author Drew McLellan is the author of Dreamweaver MX Web Development (dreamweaverfever.com/dwd/) from New Riders, as well as an extension writer and all-around Dreamweaver good guy. He runs DreamweaverFever.com, and helps folks out in various support forums as a Team Macromedia volunteer. In the real world he's a feet-on-the-ground web development manager for an agency on the outskirts of London.