Building Dreamweaver MX 2004 Tables

This chapter is from the book

Macromedia Dreamweaver MX 2004 Demystified

Learn More Buy

This chapter is from the book

This chapter is from the book 

Macromedia Dreamweaver MX 2004 Demystified

Learn More Buy

Using Tables for Page Layout

Eventually, we'll all be using CSS for all of our page formatting and layout needs, and tables will be relegated back to their original, more limited function as tabular data displayers. Unfortunately, that day isn't quite here yet. So, you use tables to arrange page content, and they work just great—as long as you follow the rules, respect the quirks of browser display, and develop a good working strategy.

What's Your Working Strategy?

Here's the million dollar question: Exactly how do you go about translating all of your table knowledge into a page layout? Or translating that beautiful layout idea you have in your head into HTML tables? Well, every designer approaches things differently. But here's my favorite working strategy for bringing order to chaos, and one that has worked well for my web design students:

1. Sketch out your layout on paper or in your favorite computer graphics program.

Remember, the computer is not a designer. And HTML is not a friendly environment for creative brainstorming. Always know where you're going before you start building an HTML page. If you're comfortable with pencil and paper, start drawing your layout idea there. (It doesn't have to be a work of art!) If you're really at home in a graphics program, such as Fireworks or Freehand or whatever you like, do it there. This has the added advantage of giving you a head-start creating any graphic elements you'll need for your page.

2. Figure out how a grid-like table structure will fit over that layout. (Draw the table structure.)

Remember to keep the table structure as simple as possible without compromising your design, and use multiple stacked or nested tables if you need to. Plan to use extra cells rather than cell padding or cell spacing to create gutters between page elements. (Gutter cells are more adjustable than HTML padding and more reliable in the browser than CSS padding.) You should also start planning at this point where to incorporate background elements such as background graphics and cell colors.

3. Decide whether you want your layout to be fixed or flexible. If it's flexible, which columns should flex? If not, how do you want to align it in larger browser windows?

Not all layouts respond well to flexing across a browser window. Of those that don't, layouts with sharp, clean, well-defined left and right edges work very well in fixed form centered in the browser window.

4. In Dreamweaver, build the table(s).

Don't worry about dimensions right now. You'll probably want to set some kind of table width when you start, but it's only temporary, to make the table easier to work with. Just make sure the tables have the right number of rows and columns, and merged cells where needed. While you're at it, also set the table's cell spacing, cell padding, and borders to 0, and set your cell's vertical alignment to top.

5. Insert your page content.

This means creating your graphics, assigning background elements, and putting in text (or fake text), links, and so on. If your page uses a sliced image table (navbar, banner, and so on) created in a graphics program, insert that now as well.

6. Use whatever strategies are needed to stabilize the dimensions (as outlined earlier in this chapter).

If the fates are smiling on you, the table might be stable and perfect now. If so, you're done! If not, start by assigning an overall table width (fixed or flexible). Then add a control row or column. By the time you've done all of these things, the layout should be nice and secure.

Exercise 8.2 Translate a Layout into a Table-Formatted Page

In this exercise, you're going to create the layout shown in Figure 8.28 using HTML tables. If you haven't done so already, download the chapter_08 folder from the book's website to your hard drive, and define a site called Chapter 8 with this as the root folder. All files for this exercise are in the chapter_08/fixed folder.

Figure 8.28 The desired layout for the Wildlife Friends web page.

1. The first step has already been done for you: The layout has been sketched out so you know where you're going. Now you need to determine how this layout will break down into one or more tables. The title banner across the top can be created from a sliced image table, and so can the navigation bar down the right side. Your job is to determine what the overall page structure will be, leaving holes for those two nested tables. Figure 8.29 shows the sample layout with a table grid drawn over it, indicating the table that needs to be built. This will be a fixed-width layout, so none of the columns needs to flex.

Figure 8.29 The proposed table structure for the layout.

2. Now you need to build that table. In Dreamweaver, create a new file. Save it in the chapter_08/fixed folder as index.htm. With that file open, create a table with 4 rows, 2 columns; no cell padding, cell spacing, or border; and 640 pixels wide (which is how wide the desired layout is). Because it's intended for layout and not data display, don't create any headers, caption, or summary. Figure 8.30 shows this happening.

Figure 8.30 Creating the table for the Wildlife Friends layout.

To make your table match the grid structure, merge all cells in the top row. While you're at it, type a quick reminder in each cell so you know what they're for (and so the text props them open and makes them easier to see without having to go into Expanded Tables mode). Figure 8.31 shows this happening.

Figure 8.31 The table with its structure set up for the layout and notes in place.

While you're getting the table ready, select each cell in the second row and use the Property Inspector to assign it a vertical alignment of top. When those cells have real content, you'll want it to float to the top.

3. Now start putting the content in the page. The title banner is a Fireworks sliced table. To insert it, delete the text from the top cell of your table, leave the insertion point in that cell, and choose the Fireworks HTML object from the Insert bar (it's in the Common category, Image objects). When the dialog box opens, browse to the wildlife-top.htm file in your chapter_08/fixed folder. Click OK to insert the table and close the dialog box. Your layout now looks like that shown in Figure 8.32.

Figure 8.32 The Wildlife Friends layout with the title banner in place.

4. Another sliced image table goes in the sidebar. Delete the text in the rightmost cell and leave the insertion point in place. Choose the Insert Fireworks HTML object again, and this time insert the wildlife-side.htm file, also in the chapter_08/fixed folder. Your layout now looks like Figure 8.33. Nothing's in quite the right place yet, but you're not panicking because you're not finished!

5. You now need some text to put in the center of the page. If you have one of the filler-text extensions installed, use it to fill in several paragraphs of greeking. If not, open the filler-text.htm file in your chapter_08 folder, copy the text from that file, and paste it into the appropriate table cell in your layout. The layout probably looks really odd now, but it's about to get better.

6. A control row is the most guaranteed way to stabilize this puppy. Select the table and, in the Table Property Inspector, change the number of rows from 2 to 3. This adds a new row at the end of the table. Control rows shouldn't have merged cells (cells with rowspan attributes) in them. Make sure yours has four unmerged cells.

When you've got the control row in place, delete the gutter text from the two cells in the previous row; you won't be needing them anymore.

Figure 8.33 The layout with title banner and sidebar in place.

7. Here's where the math comes in. The entire layout is 640 pixels wide. Selecting the sidebar nested table tells you that this column needs to be 150 pixels wide. If you make each of the text gutters 30 pixels wide, how wide should the text column be? Add those three numbers and subtract the total from 640; you come up with 430. So, the control row structure should look like this:

30 + 430 + 30 + 150

To make this happen, place the cursor in the leftmost cell of the control row and insert the spacer.gif image from your chapter_08/fixed/ images folder. As soon as the image is in place, and without deselecting it, set its width to 30. Also use the drop-down Alt menu in the Image Property Inspector to set its alt text to <empty>. (That's for accessibility.)

Repeat this procedure for the other cells in this row, using the widths you just figured out.

8. As soon as you insert the last spacer image, if you deselect the table the control row seems to disappear. Why is that? Dreamweaver puts nonbreaking spaces in empty table cells, remember, and this gives them a certain automatic height. But when you put a 1-pixel-high spacer image in a cell, Dreamweaver removes the nonbreaking space. When all cells in the control row have spacer images in place, the row becomes 1 pixel high—and pretty hard to see!

If you want to see that your control row is still in place, you can turn on Expanded Tables mode (View > Table Mode > Expanded Tables Mode), which separates all cells and shows the control row.

Your layout is now complete! Because it's a fixed-width layout, though, it hugs the left edge of the browser window. To center it in the browser window, select the layout table (the big table, not the little nested ones) and, in the Table Property Inspector's Align drop-down menu, choose Center. The table now floats to the middle of any large browser window.

Exercise 8.3 Build a Flexible-Width Layout Using Table Structure

In this exercise, you'll build a slightly different version of the Wildlife Friends page. The desired layout is exactly like that shown in Figure 8.27, but this time, the center column of the layout table should stretch. Because this exercise builds on skills covered in the previous exercise, make sure you don't try this one until you've finished that one.

The table structure required for the flexible-width layout is diagrammed in Figure 8.34. Note that the banner graphic has been modified slightly so that the title and links on the left no longer touch the dolphin on the right. That's because these two elements need to hug opposite edges of the browser window as the page flexes, so they must be completely separate items. The top banner also has a light blue background, so it will still look like a banner if the left and right elements drift far apart in a large browser window.

Note also that, to accommodate this grid, two separate, stacked tables make for a much simpler solution than one large, complex table.

Figure 8.34 Table grid for the Wildlife Friends page, with an arrow indicating the part of the layout that should stretch.

1. In Dreamweaver, create a new file. Save it in the chapter_08/flex folder as index.html.

2. Build the first of the page's two tables. This table should have one row and two columns, and a width of 100%. As with all layout tables, set cellpadding, cellspacing, and border to 0. Figure 8.35 shows how the table should look when it's built, with temporary text indicating which page elements will go in each cell.

Figure 8.35 The first table for the flexible Wildlife Friends layout.

3. To build the second table, select the table you already have and press the right arrow key to place the insertion point immediately after this table. Then insert another table. This one requires one row and four columns. The second table automatically stacks under the first one. Figure 8.36 shows what the tables should look like, with placeholder text.

Figure 8.36 Adding the second table for the layout.

(If one table has two columns and the other has four, why not just create one two-row table and merge cells in the top row? Look at the grid in Figure 8.34, and you'll see that the columns won't line up, so one table won't work.)

4. Now to fill in the banner elements in the top table. Start by setting the horizontal alignment of the left cell to Left, and the horizontal alignment of the right cell to Right. Remember, it's usually easier to set cell alignment before the cell has its contents in place.

Delete any placeholder text from the left cell (title) and, with the insertion point still inside this cell, use the Insert Fireworks HTML object to insert the wildlife-top.htm file from your chapter_08/flex folder.

Now delete placeholder text from the right cell (dolphin), and insert the image dolphin.gif (from the chapter_08/flex/images folder) into this cell. Figure 8.37 shows what the page should look like at this point.

Figure 8.37 The flexible layout with its top elements in place.

5. Now you need to create the blue background across the entire banner. Select the top table. In the Table Property Inspector, find the Bg Color button. Click the button to open the color picker, and use the color picker's Options menu to turn off the Snap to Web Safe option. Then move the cursor over the blue background color of the dolphin and click to sample that color. Figure 8.38 shows all of this happening.

With this color in place, preview your page in a browser and see how the layout behaves as it's resized.

Figure 8.38 Setting the color of the top table to match the dolphin graphic.

6. Now for the bottom table. The central cell needs some filler text. Either use a filler text–generating extension or open the filler-text.htm file, in the chapter_08 folder, select the text inside, copy it, and paste it into the text cell of your layout's bottom cell. Set the vertical alignment for the cell to top.

The cell on the right needs the sidebar element. Delete any placeholder text in that cell, and use the Insert Fireworks HTML object to insert the wildlife-side.htm file in your chapter_08/flex folder. Also set the background color of this cell to #E4ECEE (a light bluish-gray). At this point, your layout should look like Figure 8.39.

Figure 8.39 The flexible-width Wildlife Friends layout, with all page elements in place.

7. Now add a control row to the bottom of the second table. Following the same instructions as in the previous exercise, insert spacer images into each cell, with the following widths:

30 + 1 + 30 + 150

Now select the control cell in the text column, and set its width to 100%. If you're having trouble selecting (or even seeing) the control row cells, switch to Expanded Tables mode while you work.

You should also remove any placeholder text in the two gutter cells at this point. Preview your layout in a browser—it should look like Figure 8.40. Congratulations!

Figure 8.40 The flexible-width layout, finished so far.

Exercise 8.4 Adding CSS Formatting to the Wildlife Flex-Width Layout

In this final exercise, you'll tweak the flexible-width layout built in the previous exercise by replacing some of its formatting with CSS. This layout might not work in older browsers, but it gives you a good idea how layout tables and CSS can complement each other. The finished page will look like Figure 8.41.

Figure 8.41 The finished CSS-enhanced flex-width layout for Wildlife Friends.

1. To start, the layout will look nicer if it really hugs the browser window edges. In the CSS Styles panel, click the New Style button to create a new style. In the dialog box that appears, choose to redefine the body for the current document only. When the CSS Style Definition dialog box opens, go to the Box category and set the margin for all sides to 0. Figure 8.42 shows this happening.

Figure 8.42 Using CSS to remove page margins for the current document.

After you've done that, click OK to close the dialog box. Your flexible table now flexes all the way to the edges of the window.

2. Next, you're going to refine the banner so the elements will overlap, if necessary. You'll do it by defining the dolphin as a background image in the banner table.

The top banner table needs to be only one column wide for the new layout, so select the table and, in the Table Property Inspector, change the number of columns from 2 to 1. That deletes the dolphin, but because the table width is 100%, it doesn't stop the banner from stretching across the entire page.

Also remove the background color from the table; you'll be using CSS for that.

3. Now you need to create a style to handle the banner display. Create a new style, a custom class called .banner. In the Style Definition dialog box, go to the Background category. Set the background color to #98CEED (the same blue that's in the dolphin picture). For the background image, choose the dolphin.gif image. Set the repeat value to no-repeat, and the horizontal alignment to right (see Figure 8.43).

Figure 8.43 Using CSS to create the top banner's color and add the dolphin picture.

When you're done, click OK to close the dialog box, and use the Property Inspector or Tag Selector to apply the banner class to your top table. Your layout shouldn't look much different than it did before you re-created it. But preview it in a browser and see what happens when the window resizes (see Figure 8.44). That's a bit fancier than it was before, although it won't display properly in Netsape 4 or older browsers.

Figure 8.44 The CSS-formatted banner, flexing in the browser window.

4. The other improvement you'll make is to ensure that the light gray sidebar color goes all the way to the bottom of the window, regardless of how long the page content and the content table are. You do this by defining the gray bar as part of the page background instead of the table background.

First, remove the gray background color from the sidebar table cell. Next, in the CSS Styles panel select the body style and click the Edit Style button. When the dialog box opens, go to the Background category. Set the page's background color to white. For the background image, browse to the gray_bg.gif image in the chapter_08/flex/images folder. This image is a 150 x 1 solid gray. Choose to repeat vertically only (repeat-y), and set the horizontal alignment to right (see Figure 8.45). This creates a 150-pixel-wide solid gray bar from top to bottom of the page, along the right edge. When you're done, click OK to close the dialog box.

Now preview the page in a browser (see Figure 8.46). See how the sidebar doesn't just end in the middle of nowhere?

Figure 8.45 Creating a gray sidebar from a page background image, using CSS.

Figure 8.46 The Wildlife Friends layout with fully extended sidebar.

5. One more refinement is in order. The text in the main cell snuggles up a little bit close to the top banner. You could fix this problem in a non-CSS manner (safe for just about all browsers) by splitting the text cell into two rows, putting a spacer image in the top cell and the text in the bottom cell. Figure 8.47 shows this happening.

Figure 8.47 Adding a horizontal gutter between banner and text by adjusting the bottom table structure.

But as long as you're using CSS, why not simply add some padding to the top of the table cell? Create a new custom class called .textcell. In the Style Definition dialog box, go to the Box category and set the top padding to 20 (see Figure 8.48). When you're done, click OK to close the dialog box and create the style.

Figure 8.48 Using CSS to add cell padding to the top of a table cell.

Finally, select the cell containing your page's text and use the Property Inspector or Tag Selector to assign the textcell class to this cell. The text bumps down from the top of the cell, all without having to add a gutter cell! Your Wildlife Friends layout is complete.

Layout Tables and Layout Mode

Layout mode is an alternate way of viewing and working with layout tables, in which the tables and cells appear more like rectangular boxes full of content than like HTML tables—something like the text boxes and picture boxes that print designers are familiar with from QuarkXPress and InDesign. To create the layout, draw some boxes, Layout Table boxes and Layout Cell boxes. To adjust the layout after it's been created, adjust the size and shape of your boxes. Meanwhile, behind the scenes, Dreamweaver is creating and adjusting the HTML table code for you.

Is Layout mode a good thing or a bad thing? It depends on your point of view. Many designers find it nicely intuitive to click and drag to create their tables. Others don't like Layout mode because it can be used as a crutch to avoid learning proper table-structuring techniques. But if you really prefer the Layout mode interface, you can still take charge of your table structure—if you know what you're doing and always keep an eye on the code.

Getting Around in Layout Mode

To activate Layout view, choose View > Table Mode > Layout Mode, or click the Layout Mode button in the Layout Insert bar (see Figure 8.49). If this is the first time you've been to Layout mode, you'll get an alert window telling you about Layout mode. You can safely close it—it's informational only. When Layout mode is engaged, a yellow highlight at the top of the Document window indicates that you're in Layout mode. In the Insert bar, within the Layout objects, the Layout Table and Draw Layout Cell objects become available for use, while the table tag becomes disabled.

Figure 8.49 Layout mode and how to get there.

Drawing Layout Tables

To draw a layout table, choose the Layout Table object and follow the instructions that appear in the Document window's status bar, clicking and dragging to draw a rectangle where you want your table to be. This rectangle will become a table tag in your code, sized to match the rectangle you've drawn.

On your page, the new table appears outlined in green (see Figure 8.50). At its top is the Column Header area, which displays the column's width in pixels. In this case, the table consists of only one column, so this width will also be the table's width. (See the following for more on setting up flexible, percent-based layout tables.)

Figure 8.50 Drawing a table with the Layout Table object in Layout mode.

Layout tables can be placed in empty page areas, nested within existing tables, or drawn around existing cells and tables. Like all HTML tables, they cannot overlap each other.

Drawing Layout Cells

To draw a layout cell, choose the Draw Layout Cell object from the Insert bar (see Figure 8.49) and, again, follow the instructions that appear in the status bar, clicking and dragging inside the layout table to create the cell. The cell displays in the Dreamweaver Document window with a blue outline (see Figure 8.51). Because cells must exist within a row and column grid, the layout table containing your cell might show additional subdivisions—these are other cells in the HTML table that are being created as you work. The layout table's column header now shows the widths for all columns.

Figure 8.51 A layout cell inside a layout table.

Cells must stay within a row-and-column grid but can span several rows or several columns. They cannot overlap, however. Dreamweaver helps you stay within this structure by snapping new cells to existing cells, or to the side of the page, if you draw them within 8 pixels.

Manipulating Table Structure in Layout Mode

A major attraction of Layout view is that, after you've created your page layout in this way, you can adjust it much more intuitively than you can when working with HTML tables in Standard view. In addition to using special Property Inspectors for layout tables and cells, you can interactively resize and reposition your layout directly in the Document window.

To resize a layout table or cell interactively in the Document window, select it and use the selection handles to drag the edges. Note that resizing a nested layout table resizes the table itself and the cell of the parent table that contains it. To move a layout cell or nested layout table, click and drag or use the arrow keys to move it 1 pixel at a time. Hold down Shift while using the arrow keys to move 10 pixels at a time. Remember, cells can't be moved or resized beyond the borders of their parent tables, and no overlapping is allowed.

Using the Layout Mode Property Inspectors

Layout tables and cells each have their own Property Inspector, enabling you to set all the standard table and cell properties, just like in Standard mode (see Figures 8.52 and 8.53). Some properties, such as width and height, cell padding and spacing, and background color, are the same as those you would find in the Property Inspector for a standard table. But there are some obvious differences. For instance, cellpadding and cellspacing for the table are set to 0, assuming that you'll be using gutter cells for your layout. Each cell has a default vertical alignment of top, again assuming that you want any table content to float to the top of its cell. Width can be specified as a fixed pixel width or autostretch, which means 100%. Tables and cells can be assigned background colors but no background images. Other input fields that aren't useful in Layout mode are also gone.

Figure 8.52 The Layout Table Property Inspector.

Figure 8.53 The Layout Cell Property Inspector.

Autostretch Tables and How They Work

When you first create a layout table, it has a fixed width. You turn it into an autostretch table by assigning either the table itself or one of its columns to have an autostretch width instead of a fixed width. When you do this, Dreamweaver assigns the table and one of its columns a width of 100%. All other columns in the table retain their fixed widths. An autostretch layout table must have only one column, designated as autostretch.

The first time you create an autostretch column or table for a particular site, Dreamweaver asks whether you want to use a spacer image to stabilize table structure (see Figure 8.54). As discussed earlier in this chapter, spacer images are a good idea, so the default is Yes. Note that Dreamweaver even offers to create the spacer image for you—or, if you already have a spacer image, select that one. Whatever choices you make here set a preference for this site. You can change that preference at any time in the Preferences/Layout view dialog box (see Figure 8.55).

Figure 8.54 Setting a spacer image for an autostretch table.

Figure 8.55 Setting spacer image preferences for a Dreamweaver site.

The Coding Behind Layout Mode

What's happening behind the scenes when you build a table in Layout mode? Dreamweaver is writing table code for you, of course. For a fixed-width table, no control row or column is generated, but the table and the first row of cells each has an assigned (pixel-based) width. The first column of cells also has a height. To remove that height, select the table, go to the Property Inspector, and click the Clear Row Heights button. It's a pretty normal-looking table!

For flexible-width (autostretch) tables, the coding is similar to that suggested earlier in this chapter in the "Controlling Table Dimensions" section. If you told Dreamweaver to use a spacer image, a control row is added to the bottom of the table with spacer images in all of its cells. The top cell of the autostretch column has also been assigned a width of 100%.

Working Smart with Layout Mode

So, you love the click-and-drag atmosphere of table generation that Layout mode offers, but you don't want to be a bad HTML citizen, creating sloppy page layouts. What can you do?

• Keep the principles of good table design in mind. Even though you're clicking and dragging, create simple table structures with no unnecessary rows or columns.

• When you've got some content in your cells, clear row heights to get rid of those unsupported height attributes.

• Keep an eye on the code you're creating, the same as you would in Standard mode. Go back to Standard mode as often as you like, to see how your table holds up under scrutiny.

• If you're creating a fixed-width table, remember that Dreamweaver hasn't created a control row for you. Create one for yourself if your table needs stabilizing.