tableless

Prévia do material em texto

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 tables—like the one in the Welsh
farmhouse I visited—the 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
legal firm. Can this get any more fun? First, you'll need to download and unpack the accompanying files (8K) for 
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:
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
article (http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout/tableless_layout.zip) (8K). Place the logo image 
within a DIV with an ID of "logo":
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:
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:
<?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>
<div id="logo">
 <img src="images/logo.gif" alt="Robinson, Tomkins &amp; Graavs" width="200" 
height="57" /> 
</div>
<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>
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
Carta—perfect!
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.
<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 eroset 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>
<div id="script">
 <img src="images/script.gif" width="417" height="84" alt="" />
</div>
(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:
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:
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
thing_you_want_to_style{
 color : black;
 background-color : white;
 /* and so on */
}
body {
 padding : 0;
 margin : 0;
 background-image : url(images/bg.gif);
 background-repeat : repeat-x;
}
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:
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:
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{
}
#content {
 padding-top : 130px;
 padding-bottom : 30px;
 padding-left : 230px;
 padding-right : 20%;
}
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:
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:
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.
#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%;
}
#logo {
 position : absolute;
 top : 30px;
 left : 30px;
 z-index : 50;
}
#script {
 position : absolute;
 top : 12px;
 right : 0;
 text-align : right; /*Mild hack for Netscape 4*/
}
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-P—as 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:
Is the content displayed?1.
Do the columns take up the correct width without overlapping?2.
When you resize the window, does the page adjust correctly?3.
Do scroll bars appear in the correct places?4.
Do any scroll bars work as expected?5.
Are there any other abnormalities that are apparent?6.
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.
 
#navigation {
 position : absolute;
 top : 190px;
 left : 60px;
 width : 140px;
}
#navigation a { 
 font-family: "Trebuchet MS", Georgia, Times, serif;
 color : #00f;
 background-color: transparent;
}