Chapter 10. Using Dreamweaver s Page Layout Aids

CONTENTS

Chapter 10. Using Dreamweaver's Page Layout Aids

 

•  Viewing Aids
•  Layout View
•  The Convert Layers to Table Command
•  Summary

Like ice cream, web designers come in all flavors. Some love their code and want nothing more than to be close to it. They can appreciate a visual design interface like Dreamweaver's because of the amount of time it saves, but feel compelled to keep an eagle eye on the Code view, monitoring every tag Dreamweaver writes. Others are happy to allow Dreamweaver to translate for them, instructing it to place this or that element on the page and trusting that the software will take care of things behind the scenes. The preceding chapter discussed using tables for page layout, and how to make the code work for you in designing. This chapter looks at the various options you have to let Dreamweaver do the table coding for you, including Layout view and the Convert Layers to Table command. It also covers rulers, grids, and tracing images viewing aids that can help you create layouts in Design view regardless of how you approach your page layout tables.

Viewing Aids

Graphic designers are used to having certain tools at their disposal when they build their layouts. Rulers, guides, tracing images most print-based page layout environments have at least some of these features. For those of you who sorely miss having such helpers as you work, Dreamweaver offers rulers, the grid, and tracing images. (Sorry, no ruler guides!)

Rulers

Dreamweaver rulers work similarly to rulers in most graphics programs. They display across the top and down the left side of the Document window; they can be set to display various measurement systems; they can be turned off and on; and they indicate the current cursor position with a dotted line. Figure 10.1 shows the rulers in action.

Figure 10.1. Dreamweaver rulers and their options.

To configure and show or hide the rulers, use commands in the View > Rulers submenu:

• Showing and hiding. The View > Rulers > Show command acts like a toggle, turning the rulers on and off. You can also use the Rulers toggle command in the View Options menu, in the Document toolbar, or right-click (Mac users Ctrl-click) on the ruler itself to access its contextual menu.

• Choosing a unit of measurement. From the View > Rulers submenu, choose pixels, inches, or centimeters. You can also right-click (Ctrl-click) on the ruler in the Document window, to access its contextual menu. Pixels (the default) is definitely the most useful choice.

• Changing and resetting the origin point. The origin is the zero-point, the location on the page where the horizontal and vertical ruler read 0. By default, this is the upper-left corner of the page. To change the origin point, position the cursor over the little square where the left and top rulers meet (see Figure 10.1), and drag out into the document area. To reset the origin back to the top-left corner, choose View > Rulers > Reset Origin, or right-click (Ctrl-click) on the ruler itself to access its contextual menu.

Grid

Dreamweaver might not have moveable rulers you can pull out from the rulers, but it does have a grid. The grid overlays the Design view display with horizontal and vertical rules at fixed intervals, and can be a helpful design aid if your layout is built on those fixed intervals (a column every 100 pixels, for instance). Figure 10.2 shows the grid being used in a document.

Figure 10.2. The Dreamweaver grid set to its default of 50x50 pixels.

To configure and show or hide the grid, use commands in the View > Grid submenu:

• Showing and hiding. The View > Grid > Show Grid command acts like a toggle, turning the grid on and off. You also can use the Grid toggle command in the View Options menu, in the Document toolbar.

• Choosing grid size and appearance. The grid can be set to display rules at any fixed interval from 1 pixel on up, and measured in pixels, inches, or centimeters. It can display as solid lines or rows of dots, in any color you choose. To alter these settings, choose View > Grid > Grid Settings. (Okay, a 1-pixel grid is not very useful but it's nice to know it's possible!)

  Note

  

  The grid starts measuring in the upper-left corner of the document, not necessarily at the zero point but where the page content starts. If you haven't specified page margins for your document (using Modify > Page Properties), the grid will start about 8 pixels in from the top-left corner.

• Snapping to the grid. When creating layouts using Layout View or Layers, or when dragging to resize tables, a snap-to feature can be helpful for accuracy. Toggle snapping on and off by choosing View > Grid > Snap to Grid.

If you want, you can have your layout tables and cells automatically snap to the grid. The snapping behavior can be controlled by changing the grid settings.

To show the grid, choose View > Grid > Show Grid, or select Grid from the Options drop-down menu on the toolbar.

Tracing Images

If you're the kind of designer who creates your layouts first by sketching them with pencil and paper, or building prototypes in a graphics program, and then recreating the effect in Dreamweaver, you might find the Dreamweaver tracing image feature a great help. A tracing image is any GIF, JPEG, or PNG file that you choose, that will appear as a ghosted-back image in Design view as if you were viewing it through tracing paper. The idea is, you place your layout sketch "behind" your Dreamweaver design and use it as a guide to construct the tables or layers that will create your HTML layout. When you're done, you remove the tracing image, and all is well with the world. Tracing images are configured and set using the commands in the View > Tracing Image submenu, or the Modify > Page Properties dialog box. Figure 10.3 shows a tracing image being used.

Figure 10.3. A Dreamweaver document with tracing image in place.

Setting a Tracing Image

To put a tracing image "behind" your Dreamweaver Design view, do this:

1. Create the GIF, JPEG, or PNG file any way you like by scanning a sketch, saving a Fireworks or Photoshop file, taking a screenshot of a desired layout, and so on.

2. In Dreamweaver, open your document and go to Modify > Page Properties (see Figure 10.4).

   Figure 10.4. Using Modify > Page Properties to set the tracing image.

   

3. From the Page Properties dialog box, find the tracing image options and click the Choose button. Browse to select your tracing image file.

4. Still in the Page Properties dialog box, set the image opacity slider to around 30 50% (to create the faded-back, tracing paper effect). Click Apply to see how your tracing image looks, and adjust the opacity more until you like the effect.

5. Click OK to close the Page Properties dialog box. There you go!

Tip

You can also use View > Tracing Image > Load to choose a tracing image, but you can't assign it an opacity value using that method.

To see how Dreamweaver creates the tracing image, go to Code view and examine the code for your <body> tag. You'll see several nonstandard attributes assigned (shown in bold):

<body bgcolor="#FFFFFF" text="#000000"tracingsrc="images/myLayout.gif"  tracingopacity="40">

The browser won't recognize these attributes, and so will ignore them. If you Preview in Browser with a tracing image in position, it won't show. But it will show in Dreamweaver Design view.

Note

If your page has a background image assigned, either as part of the <body> tag or in a Cascading Style Sheet, the tracing image won't be visible it's hidden behind the other image. To see the tracing image, you'll have to temporarily remove your background image.

Adjusting Tracing Image Position

Your tracing image might not be positioned exactly where you need it by default, it appears slightly offset from the top and left of the Document window.

To adjust the tracing image position manually, do this:

1. Go to View > Tracing Image > Adjust Position. A dialog box will appear, displaying the current x (horizontal) and y (vertical) coordinates of the image, and allowing you to change these.

2. You can change the image's position either by entering new values in these fields, or by using your arrow keys to nudge the image one pixel at a time in any direction.

3. When you're done, click OK!

To adjust the tracing position to match a certain page element (such as a graphic, table or layer), do this:

1. Select the element you want to align the image with.

2. Go to View > Tracing Image > Align with Selection.

After you've done your repositioning, check your code, and you'll see that more attributes have been added to the <body> tag (shown in bold):

<body bgcolor="#FFFFFF" text="#000000"  tracingsrc="images/myLayout.gif" tracingopacity="40"  tracingx="-5" tracingy="150">

Tip

Don't use the tracing image to get pixel-perfect layouts in place use it to get the overall positioning down, and then remove it. HTML layouts can't always perfectly match layouts created in graphics programs.

Removing a Tracing Image

Eventually, the tracing image will start getting in your way, and you'll want to remove it either temporarily, by hiding it, or permanently, by removing its code from the <body> tag.

To temporarily hide the tracing image, go to View > Tracing Image > Show, to toggle the command off; or go to Modify > Page Properties, and set the opacity slider to 0%.

To remove the tracing image permanently, go to Modify > Page Properties, and delete it from the Tracing Image input field; or go to Code view and remove the tracing image attributes.

Layout View

Dreamweaver Design view includes two separate modes of working: Standard view and Layout view. Layout view is an alternate way of viewing and working with documents containing table-based layouts, where 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. 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.

Note

Unfortunately, the Layout View feature has a bug (a flaw in the way the software functions), which was present in Dreamweaver 4 and was not fixed in Dreamweaver MX. When Dreamweaver writes table code from the design you create in Layout View, it often includes empty table cells, which look like this:

<td></td>

Empty table cells produce serious display problems in some browsers, and might cause your page to look very different than you expect or intend. Netscape 4 browsers, in particular, don't display empty table cells well.

For this reason, we recommend that Layout View be used only when absolutely necessary, and when it is used, that the empty table cells be filled with either a non-breaking space character (&nbsp;) or a single-pixel GIF spacer. This can be done by using Dreamweaver's Find and Replace feature, or simply by reviewing the page code and adding the non-breaking spaces or GIFs manually.

There's another problem with the code written by Dreamweaver when pages are designed in Layout View; it often specifies table heights and widths in pixels. As of this writing, the commonly used browsers do not all display table and cell heights and widths as specified in pixels.

If you do use Layout View, these height and width attributes should be removed. See the discussion on "Formatting Layout Tables," later in this chapter for more on removing height values.

About Layout Cells and Layout Tables

Layout view enables you to add layout cells and layout tables to your page, to facilitate placing page elements where you want them. When you draw a layout table, Dreamweaver creates an HTML table. When you draw a layout cell inside a layout table, Dreamweaver creates a cell (<td> tag) inside the table. Just as a table cell can't exist outside a table, a layout cell must always be contained by a layout table. (If you create a layout cell without first creating a layout table, Dreamweaver will automatically create a layout table for you.)

A page could consist of a single layout table with several layout cells. However, just as you might use multiple HTML tables in one page, you might want to use multiple layout tables. Using multiple tables isolates sections of your layout so that one section isn't affected by another; within the same table, the size of a cell often affects the other cells in its row and column.

Just like regular HTML tables, layout tables also can be nested.

Switching Between Layout and Standard View

Layout view and Standard view are two different viewing modes within Design view. Normally, when you're in Design view, you're in Standard view.

Note

Just because you're working in Layout view doesn't mean you can't keep an eye on your code. While you're in Layout view you can still switch between Design view and Code view, or even work in Code and Design view.

Accessing Layout View

To switch into Layout view, first be sure you are in Design View by choosing View > Design, and then do one of the following:

• Choose View > Table View > Layout View (Ctrl+F6).

• Click the Layout view button in the Layout tab of the Insert bar (see Figure 10.5).

  Figure 10.5. Switching views using the Insert bar.

  

After you're in Layout view, any tables your document already contains will now display as layout tables. If your document is empty, you can use the objects in the Layout tab of the Insert bar to build your page layout.

Accessing Standard View

After you're in Layout view, to switch back into Standard view, go to the Layout tab of the Insert bar and click the Standard View button (see Figure 10.9). All layout tables are now displayed as standard HTML tables, and can be edited using the methods covered in the preceding chapter.

Figure 10.9. The Layout Table Property inspector.

Note

You can go back and forth between Layout and Standard view as often as you like, in building your pages. You can even start with a page created entirely in Standard view, using the standard HTML table-creation tools, switch to Layout view, and start editing the table as a Layout table.

Creating Tables and Cells in Layout View

Working in Layout view, you can draw both layout cells and layout tables.

Note

Layout view is a Dreamweaver-specific tool. Although you're creating HTML tables in Layout view, many of the terms and concepts used don't exist in HTML, but only in the Dreamweaver software.

Drawing Layout Tables

Use the Draw Layout Table button to draw a table on an empty area of the page, or inside another layout table. To draw a layout table, follow these steps:

1. Make sure that you are in Layout view, and then, in the Layout category of the Insert bar, click the Draw Layout Table button (see Figure 10.5). The cursor will change to a crosshair (+).

2. Place the cursor at the point on the page where you want one corner of a layout table and click and drag to draw the table as if you were drawing a rectangle in a graphics program. Note that if you want the table to be the only table on the page, or the first of several tables, you must draw it so that its upper-left corner is at the upper-left corner of the page.

   Note

   

   If you draw a layout table in the middle of an empty document, Dreamweaver will create it as a table nested inside a larger table. If this happens and you don't want it to, Edit > Undo and draw again, being careful to begin or end in the upper-left corner.

3. On your page, the new table will appear outlined in green (see Figure 10.6). 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 below for more on setting up flexible, percent-based, layout tables.)

   Figure 10.6. A new layout table, set to a pixel width of 606.

   

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.

Note

To draw a number of layout tables without clicking the Layout Table button each time, hold down Control (Windows) or Command (Mac). This technique also applies to drawing a number of layout cells.

Drawing Layout Cells

To draw a layout cell, follow these steps:

1. Be sure you're in Layout view. In the Layout tab of the Insert bar, click the Draw Layout Cell button (see Figure 10.5). This causes the cursor to change to a plus sign (+) or crosshair (+) in preparation for drawing a cell.

   Note

   

   Layout cells can only exist within a layout table. If you draw a layout cell outside the boundaries of a layout table, or without drawing a layout table first, Dreamweaver will create the layout table for you.

2. Place the cursor within a layout table, at the point where you want to position one corner of your layout cell, and drag to create the cell. To draw more than one cell, you must click the Draw Layout Cell button again for each new cell.

3. The cell will display in the Dreamweaver Document window with a blue outline (see Figure 10.7). 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 10.7. 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. To temporarily stop snapping of cells, hold down Alt (Windows) or Option (Mac) while drawing the cell.

Cells in the same column can be different widths; cells in the same row can be different heights. Dreamweaver will create additional cells in the HTML table it's building, to create the layout that you specify.

Dreamweaver will draw whatever additional cells are needed to maintain the layout you specify; these cells will be displayed with a gray background.

Creating Nested Layout Tables

Just like HTML tables, layout tables can be placed within existing layout tables; this is referred to as nesting tables. Nested layout tables can only be drawn in the portions of a parent table that don't already contain layout cells (in other words, only in the gray portions of the parent table).

To draw a layout table nested inside another layout table, follow these steps:

1. Draw the parent layout table.

2. Click the Draw Layout Table icon in the Insert bar.

3. Position the cursor within the parent table, as though you were going to draw a new layout cell, and drag to create the table. Dreamweaver will create a cell within the layout table, and draw your new, nested table within that cell (see Figure 10.8).

   Figure 10.8. Creating a nested table by drawing a layout table within an existing layout table.

   

Note

As noted earlier, if you draw a layout table in an empty document, but don't position it in the upper-left corner, Dreamweaver will automatically create it as a table nested inside another layout table.

As you can see from Figure 10.8, nested layout tables display with a Layout Table tab, in addition to a Column Width header. The header displays only if the nested table is selected; the tab always displays. This is your visual indication that the element is in fact a nested table, and not just another table cell. You can also click on the tab to select the nested table.

Manipulating Table Structure in Layout View

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 special Property inspectors for layout tables and cells, you can interactively resize and reposition your layout directly in the Document window.

Interactive Adjustments: Selecting, Moving, Resizing

Layout cells and nested layout tables can be moved and resized interactively, without referring to code or Property inspectors, by click-and-drag methods in the Document window.

Selecting (Tables and Cells)

To select a layout table, click its Column Width header or Layout Table tab (if it has one), or click anywhere inside the table and use the tag selector as you would in Standard view. A selected layout table displays with a green outline and selection handles (see Figure 10.6).

To select a layout cell, click its edge or click anywhere inside the cell and use the tag selector. You also can Control-click (Windows) or Command-click (Mac) anywhere in the cell to select it. A selected layout cell displays with a blue outline and selection handles (see Figure 10.7).

Resizing (Tables and Cells)

To resize a layout table or cell select it, and use the selection handles to drag the edges. Note that resizing a nested layout table will resize the table itself and the cell of the parent table that contains it. When resizing a layout table, remember the following:

• Cells and nested tables will automatically snap to existing cells when within 8 pixels of an existing cell.

• A layout table cannot be resized so that it would be smaller than the cells it contains.

• A layout cell cannot be resized beyond the borders of its containing table.

• No overlapping is allowed.

• A layout cell is always at least as large as the content it contains.

Moving (Nested Tables and Cells)

You cannot move a layout table that isn't nested inside another table. To move a nested layout table or a layout cell, 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.

Using the Property Inspector

Layout tables and cells each have their own Property inspector, allowing you to set all the standard table and cell properties just like in Standard view.

Formatting Layout Tables

When you select a layout table, the Layout Table Property inspector appears (see Figure 10.9). 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 differences, and items of special note. In particular:

• Instead of choosing pixels or percent for width, layout tables allow you to choose between a fixed pixel-width and autostretch. For more information on autostretch, see the section on "Creating Flexible Layouts" later in this chapter.

• The Property inspector specifies a table height attribute, measured in pixels. You can change this attribute, here or by resizing the table in the Document window; but you can't remove the attribute completely. Layout tables must have a height attribute.

• Layout tables can be assigned background colors, but not background images using the Property inspector.

• Because most designers prefer to use gutter cells in their tables, rather than assigning cell padding or spacing, the cell padding and spacing attributes are set to 0 by default. (A gutter cell is an empty cell placed between two neighboring cells to separate their contents. The advantage of a gutter cell over cell padding or spacing is that it only adds space to one particular area of a table; cell padding and spacing will add space equally between all cells.)

• The Clear Row Heights button removes all cell height attributes. If the table does not yet contain any elements, this will cause it to collapse; it is best used after all content has been added. Because not all browsers support the height attribute for table code, doing this will produce more stable code for your layout. You also can clear cell heights by accessing one of the drop-down menus in the table's Column Header area, and choose Clear Cell Heights (see Figure 10.10). Note that clearing row heights will reduce your layout table's height, but won't clear its height attribute.

  Figure 10.10. The Layout Table Column Header menu.

  

• The Make Widths Consistent button resets the HTML width attributes of each cell to match its content. If you are using a fixed-width table, set this attribute after you've added your content, to ensure stable code.

• Remove Nesting will convert a nested layout table to cells within the parent table. The nested table will disappear, and its cells and their contents will become part of the parent table.

• Remove All Spacer Images does just that. For more information on spacer images in layout tables, see the section "Using Spacer Images in Autostretch Tables" later in this chapter.

Formatting Layout Cells

To edit the properties of a layout cell, select it and the Layout Cell Property inspector will appear (see Figure 10.11). As with layout tables, the properties that appear are generally the same as those you can set for table cells in Standard view. A few items of special note:

Figure 10.11. The Layout Cell Property inspector.

• Like layout tables, layout cells can be set to a fixed (pixel) width or to autostretch. See the section "Creating Flexible Layouts" later in this chapter, for more on this.

• Like layout tables, layout cells can be assigned background colors but not background images using the Property inspector.

• To set the horizontal or vertical alignment for the cell contents, use the drop-down menus labeled Horz and Vert. Because most designers prefer their layout content to be aligned to the tops of cells, the default vertical alignment is top.

• Though you can set cell heights here, as mentioned above doing so will produce nonstandard and possibly unstable code.

Adding Content

Text, images, and other media can be added to layout cells just as you would add content to a regular HTML table in Standard view. However, the only place content can be inserted is in a layout cell, so the necessary cells must be drawn first. Just click in the cell where you want to insert content and type or insert the element. A few tips about layout cells and content:

• When Dreamweaver creates layout cells, it automatically assigns them a vertical alignment of top. Any content you enter will float to the top of the cell.

• Just like a normal HTML table cell, a layout cell will expand as needed to hold its content. As a cell expands, surrounding cells also might be affected, and the column the cell is in will expand.

• As you created your layout cells, Dreamweaver might have subdivided the layout table to create other cells, to maintain the grid structure of the table. Those cells appear in the Document window as grayed-out areas marked by outlines. You can't enter content into one of those "placeholder" cells to add content, you must use the Layout Cell tool to draw a cell in that space.

• Because you're in Layout view, you can't create a table using the standard Table object. If you want to insert a regular table (for displaying tabular data) into your layout table, you'll have to go to Standard view to do it.

Exercise 10.1 Creating a Page Layout Using Layout View

In this exercise, you use Layout view to build a simple page design based on a fixed-width layout table. Along the way, you'll get a chance to see some of the strengths and limitations of Layout view, and how you can work with it to get the results you want. You'll also experiment with grids as a visual aid in page setup. Figure 10.12 shows the finished layout you'll be creating.

Figure 10.12. The desired layout for bumpers.html.

If you haven't yet, copy the folder chapter_10 from the companion CD into a folder named idmx on your hard drive and define a Dreamweaver site named chapter_10 with the folder chapter_10 as its root directory.

1. You'll be creating the layout page from scratch, so start by choosing File > New to create a new blank HTML page. Save it in the chapter_10 folder as bumpers.html.

2. To help you draw accurately, you'll use the grid. Go to View > Grid > Show Grid, to turn the grid on. The default grid setting is too large for the requirements of your layout, so adjust it. Go to View > Grid > Grid Settings, and in the dialog box that appears, enter a grid size of 20 pixels. Finally, so the grid can be of maximum help as you draw, go to View > Grid > Snap to Grid.

3. Your desired layout is 640 pixels wide. To help you gauge widths as you're drawing tables and cells, go to View > Rulers > Show. Make sure the rulers are set to measure pixels, by checking that View > Rulers > Pixels is the selected option.

   Finally, if you want ruler measurements and grid measurements to match each other, you must set the origin point of the rulers to the upper-left corner of the grid. Position the cursor over the zero-point corner of the rulers, and drag down and right until the zero-point crosshair lines up with the top left edge of the grid (see Figure 10.13).

   Figure 10.13. Resetting the rulers' zero-point to match the grid.

   

4. Now switch to Layout view by going to the Insert bar and bringing the Layers tab to the front. Click the Layout View button (refer back to Figure 10.5) to switch to Layout view.

5. Now you're ready to draw. In the Insert bar, select the Draw Layout Table button, and draw a table that starts in the page's upper-left corner and is 640 pixels wide and a few hundred pixels tall. (You'll be removing the height values later, so they're not crucial for now.) The grid snap feature should help you get your measurements accurate.

   If you draw your table and it isn't 640 pixels wide, you can adjust its width by dragging its edge or by selecting it and using the Layout Table Property inspector to manually enter a width of 640. Figure 10.14 shows how your document should look, with grid, rulers, and layout table in place.

   Figure 10.14. The bumpers.html file, with grid and rulers showing, and the main layout table in position.

   

6. Using the Draw Layout Cell tool, create four cells: one for the banner across the top, and three for the main columns. Make your left-hand and right-hand columns 100 pixels wide each. Leave a 20-pixel gutter between those columns and the center column. Again, the grid snap should help you draw accurately. If necessary, select the cells after drawing and use the Property inspector to correct their widths. Figure 10.15 shows how your layout table should look at this point.

   Figure 10.15. The bumpers.html file with layout cells in place.

   

7. You've just created an HTML table, disguised as a layout table. To test this out, go to the Insert bar and click the Standard View button. Your table is revealed! Check it out in Code view; examine it with the Property inspector. It's just a regular table but you created it in a special way.

   When you're done examining the table, go to the Layout tab of the Insert bar and click the Layout View button, to return to Layout view.

8. It's time to add some content. For the banner, click inside the top layout cell and insert the banner.gif image from the chapter_10/images folder. (You can drag-and-drop the image from the Site window or Assets panel, or use the Image object to insert it.)

   Depending on how tall you made your layout cell, the image might be too tall for it, and might stretch it out. This won't be a problem for you, because you're going to remove cell heights later so don't worry about it now.

   By default, the image aligns to the upper left of the layout cell. You want the image centered in the cell, and you want the cell background color to match the image. To accomplish this, select the layout cell (using any of the methods outlined earlier), and use the Property inspector to change the horizontal alignment to center and the background color to a purple that matches the image. (Hint: Sample the image color to create the color.) When you're done, the top portion of your page should look just like the finished layout in Figure 10.12.

9. The center column of your layout is for the page's main text. If you've installed one of Macromedia's filler text extensions (as described in Chapter 4, "Working with Text"), use it to fill this area with text. If you haven't, open filler_text.html, in the chapter_10 folder, and copy and paste the text from that file to your layout cell. Add a header, if you like, so the page looks more like the finished layout.

10. The left-hand column is for the five navigation buttons. There are various ways you could structure this stack of buttons, including just inserting them as a series of images. For this exercise, you'll put them in separate table cells which means you need a nested table to sit in that left-hand column.

    If you try to draw a layout table inside the layout cell, you'll discover that Dreamweaver doesn't allow that. So, select and delete the left layout cell. In its place, draw an identically sized layout table. After you've drawn the table, draw five layout cells in it, each 60 pixels tall and as wide as the table. Figure 10.16 shows what your layout should look like at this point.

    Figure 10.16. The bumpers.html page with nested layout table in place.

    

11. Create your page's navigation bar by inserting one button image in each of the new layout cells. (The button images are all in the chapter_10/images folder, called button1.gif button5.gif.)

    Hmm. If you're looking carefully, you might notice a problem in your table structure at this point. The Column Header for the nested table, and for the left-most column of the parent table, both show two width figures. This is because the images are all 103 pixels wide, and the table and column are set to 100 pixels wide (see Figure 10.17).

    Figure 10.17. Double values in the column headers indicate that the left-most column is set too narrow for its contents.

    

    To fix this problem, use the drop-down menu for each column with a double value, and choose Make Cell Widths Consistent. Problem solved! But this indicates that the grid has outlived its usefulness, so turn it off by choosing View > Grid > Show Grid, to toggle the command off.

    Note

    

    If your column is narrower than the image, most browsers will ignore the specified column width and display the column wide enough to accommodate the image. If your column is wider than the image, and you are counting on the column maintaining that width, you will probably have a problem when the page displays in the browser; the column will shrink to the size of its widest rigid object, the image.

12. To match the finished layout, your left and right layout cells need colored backgrounds a light purple or light blue, or any color you think looks good.

    Colorizing the right cell is easy select the cell and use the Property inspector to assign a background color.

    Colorizing the left cell is not so easy, because it has a nested table in it. You don't want to colorize the background of the nested table because that won't guarantee that the color extends the full length of the layout. You want to colorize the cell containing the table. But if you remember, when you created this nested table, Dreamweaver created an automatic cell to hold it. And you can't use Layout view to set the properties of cells created automatically.

    You're stumped, unless you remember that you can always return to Standard View if you need to, and then come back to Layout view. Do that now in the Layout tab of the Insert bar, click the Standard View button. After you're in Standard view, use the tag selector to select the table cell behind the nested table, and use the Property inspector to colorize its background (see Figure 10.18). When you've made your change, return to Layout view.

    Figure 10.18. Switching to Standard view to add a background color to a hidden table cell.

    

13. To make your code more stable and compliant, it's time to get rid of all height values. Start with the nested table: Select it, and from the drop-down menu in its Column Header, choose Clear Cell Heights (refer back to Figure 10.10, if necessary). That shrinks up your navigation bar pretty severely! Next, select the parent table and repeat the process.

14. To make the navigation bar look a little nicer, you don't want the buttons all smashed together. For each button image, use the Property inspector to add a vspace and hspace of 10 pixels. That will force the table, and its enclosing cell, to expand. If you end up with double values in the Column Headers because of this, make your cell widths consistent as you did before.

15. How does your design look? If you haven't done so yet, Preview in Browser to check it out.

    One last touch: For any visitor with a large monitor, your fixed layout hugs the left edge of the browser window. This is a fixed-width layout, but you can make it look nicer in large windows by centering the layout (that's what Figure 10.12 shows). Normally, you would do this by giving the main table an alignment of center. But if you select your layout table and check the Property inspector, you'll see that there is no option for table alignment. Once more, go back to Standard view; select the table, and use the Property inspector to add the center alignment; then return to Layout view. Your page is complete!

Creating Flexible Layouts

Dreamweaver Layout view provides tools for creating "flexible" pages. (See Chapter 8, "Design Issues," for a complete discussion of flexible versus fixed-width pages. Chapter 9, "Building Tables," discusses how percent-based tables are used to create flexible layouts.) In Layout view, the Dreamweaver-specific term autostretch is used to describe a layout table or column that is set to a percentage width so that it expands to fill all available space.

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 one column, and one column only, designated as autostretch. A few tips on autostretching:

• Layout tables set to autostretch are always assigned a width of 100%. If you want a flexible layout table set to, say, 90%, you'll have to leave Layout view and change the width using Code view or the Table Property inspector.

• Autostretch tables do not always display correctly in Dreamweaver. They might look as though they stretch too far, beyond the boundaries of your Document window. This is a quirk of Design view, rather than a problem with the table. Previewing the page in a browser will show that the table does in fact correctly size itself to the window. (Remember, the goal isn't to create pages that display nicely in Dreamweaver, but pages that display nicely in the browser.)

Using Spacer Images in Autostretch Tables

The preceding chapter discussed some of the benefits of using spacer images to stabilize tables. A spacer image is usually a 1x1 pixel transparent GIF inserted into a table cell and given a width attribute in pixels; this "props open" the column containing that cell, preventing it from shrinking any smaller than the dimensions of the spacer. Spacer images are especially important to the workings of Dreamweaver autostretch tables.

As mentioned in the preceding section, autostretch tables include one column set to 100%. That percentage means, "this column should take up 100% of the available space in the browser window." The available space is all space not being taken up by other columns. If you define a column as autostretch, and other columns in the table don't have some sort of content in them propping them open, the stretching column will shrink them down to nothing, regardless of what their fixed pixel widths are. If your table's fixed columns contain content, such as images, this will keep them from shrinking. But in case they don't, this is the time to use a spacer image.

Automatically Adding Spacers (Before Generating Autostretch Tables)

You can tell Dreamweaver that, whenever you define an autostretch table, it should automatically add spacers to the fixed-width columns. Dreamweaver will even create the transparent GIF image for you, if you like. Do it like this:

1. Go to Edit > Preferences, and choose the Layout category (see Figure 10.19). (For Mac users of OS X, choose Dreamweaver, Preferences.)

   Figure 10.19. The Dreamweaver Layout View preferences, including options for automatically generating spacer images.

   

2. From the options shown, choose to autoinsert spacers when making autostretch tables.

3. If your site already includes a transparent GIF that you could use as a spacer image, click the Browse button to select it. Otherwise, click the Create button and show Dreamweaver where to store your spacer image and what to call it. The default name is spacer.gif. Dreamweaver will remember this choice for all documents in the current site.

Note

The Layout View Preferences include options for customizing the colors used in layout tables and cells, as well. If you don't find the default colors to your liking, experiment with these settings until you create something you like better.

After doing this, the next time you turn one of your layout tables into an autostretch table, Dreamweaver will add a 1-pixel high row to the bottom of the table, with a spacer image in each fixed-width cell. If your table has two columns, the first set to 100 pixels wide and the second set to autostretch, the following code will be added to the bottom of your table:

<tr>     <td height="1"><img src="images/spacer.gif" alt="" width="100"  height="1"></td>     <td></td>  </tr>

In web geek circles, this is known as a control row. Many hand-coders manually add them to the bottoms of their tables to solidify flexible tables.

Manually Adding Spacers (After Generating Autostretch Tables)

You also can add a spacer image to any column at any time by going to the Column Header drop-down menu and selecting Add Spacer Image. This will add a control row, if one doesn't already exist, and will add a spacer image to the relevant cell. Note, however, that the width of the spacer image will be based on the current width of the column if you have already run into the column-squishing problem described earlier in this section, that might not be the width you want.

Removing Spacers

After Dreamweaver inserts spacer images, you are free to remove some or all of them, but be warned that this might generate some unexpected and undesired results. To remove a spacer image from a particular column, go to the relevant Column Header drop-down menu and select Remove Spacer Image. To remove all spacer images from a table, select Remove All Spacer Images from the column header menu, or select the layout table and click the Remove All Spacers button in the Layout Table Property inspector.

Setting a Table to Autostretch

One way to create a flexible layout is to select the layout table and use the Property inspector to set its width to autostretch (see Figure 10.9). If you do this, the table will be given a 100% width, and all the cells in its rightmost column will also be assigned a width of 100%. All other cells will retain their fixed pixel width. This is a good solution if, for instance, your layout consists of a left-hand navigation column (which shouldn't stretch) and right-hand content column (which should).

Note

Whether you set the table or a column to autostretch, Dreamweaver might ask if you want to use a spacer image to create your flexible table. If you choose not to, you'll get a warning about possible instability in your table.

Setting a Column to Autostretch

If you don't want your right-hand column to be the flexible column, instead of setting the layout table to autostretch, you will need to select a particular column and specify it as having an autostretch width. When you do this, the table will automatically be set to autostretch as well. You can set a column to autostretch in one of two ways:

• Select a cell in the desired column and, in the Property inspector, set the width attribute to autostretch.

• Go to the layout table's Column Header area, and from the drop-down menu, select Make Column Autostretch (see Figure 10.20).

  Figure 10.20. Using the Column Header menu to make a column autostretch.

  

Note

Occasionally, a page with table cells set to 100% width won't browse properly the offending column will cause it to stretch beyond the edges of the window. If this happens to you, go back to Standard view and remove the width from all cells previously set to 100% wide. Leave the table width at 100%.

Setting Columns or Tables Back to Fixed Width

After a table has been set to autostretch, you can set it back to fixed width by doing one of the following:

• Select the autostretch table, or one of the cells in the autostretch column, and in the Property inspector select the fixed width option.

• In the table's Column Header, go to the drop-down menu for the autostretch column and select Make Column Fixed Width.

Doing either of these will automatically set the width of the table, and the column, to a pixel value that matches their current width. In some cases, you might see two numbers in the column header menu. One is the actual width of the column, and the other is the width that currently appears in the HTML code. This can happen in situations such as one in which a width was specified, and then content was subsequently added which exceeded that specified width. It is best to have column widths reflect the width of their content. To make this adjustment automatically, go to the Column header drop-down menu and select Make Cell Widths Consistent.

Exercise 10.2 Creating a Flexible Layout in Layout View

In this exercise, you'll use the autostretch feature to refine the bumpers.html file you created in Exercise 10.1, so that it stretches to fill the browser window.

1. Open bumpers.html and save it as bumpers2.html. Go to Layout view, if you're not there already. It should contain the fixed-width layout shown in Figure 10.12.

2. To make this layout flexible, you want the center column to autostretch, and the left and right columns to remain fixed. To make this happen, from the Column Header drop-down menu of the main table, choose Autostretch (see Figure 10.21).

   Figure 10.21. Making the center column of bumpers2.html autostretch.

   

   Note

   

   For purposes of this exercise, if Dreamweaver asks if you want to insert a spacer image, choose not to. Normally, you'll probably want to say yes to this option.

   Does something horrible happen? If you haven't told Dreamweaver to use spacer images for autostretch, you'll probably see something like the disaster shown in Figure 10.22. That's not good! Go to Edit > Undo, to get your fixed-width table back.

   Figure 10.22. What happens when autostretch is applied, and there's no content to stabilize the rest of the table.

   

3. To fix this problem, go to Edit > Preferences, and choose the Layout View category. (For Mac OS X users, choose Dreamweaver > Preferences.) From the options there, choose to Autoinsert Spacers When Making Autostretch Tables for the current site. Click the Create button to make Dreamweaver create a single-pixel GIF for you. When the dialog box appears, browse to the chapter_10/images folder to store your spacer image. When you're done, click OK to leave Preferences.

4. Now, try again to set your center column to autostretch. The result looks much better! If it still looks a little odd in Dreamweaver, Preview in Browser. Your layout should be up against the outer edges of the browser window. The center column should stretch, and the two outer columns remain fixed.

   There is a chance the browser won't cooperate with you, and your table will stretch beyond the browser window width. If this happens, come back to Dreamweaver, go to Standard view, and select all the cells in the autostretch column. Their width will be set to 100%. Remove the width attribute entirely. The page might now look a little strange in Dreamweaver (see Figure 10.23), but it will browse just fine.

   Figure 10.23. Removing the 100% width attribute from the autostretch cells (in Standard view) and the resulting shift in Dreamweaver Design view.

   

   Back in Dreamweaver, go to Standard view or Code view and investigate the structure of your table. The table itself, and the middle cell are both set to 100% width.

5. But what if you want your layout to stretch not to the very edges of the browser window, but just close to it? This is done by setting the table width to 90% but you can't do this in Layout view. Go to Standard view, select your table, and use the Property inspector to set its width to 90%. Then Preview in Browser again, and see how the layout behaves when you stretch and squash the window.

Note

Chapter 9 has an exercise in building a more complex flexible-tables layout.

 

The Convert Layers to Table Command

Another Dreamweaver layout aid that can help you create tables without coding tables is the Convert Layers to Table command. This command is provided as an aid to those who like designing pages using layers, with all the advantages of drag-and-drop and pixel-specific positioning; but who do not want their finished layouts to remain in layers, perhaps because they are concerned about inconsistent browser support of layer-based layouts. (See the next chapter for more on using layers for page layout.) Using this command, you can create your layout using layers, and convert the layers to a table-based layout when everything is set to your liking.

Note

The Convert Layers to Tables command has a bug (a flaw in the way the software performs) of which you should be aware. It is very similar to the problem with Layout View discussed earlier in this chapter. Convert Layers to Tables often creates empty table cells; this code will cause your pages to display poorly in some browsers. For this reason, it is recommend that if you use the Convert Layers to Tables command, be sure to place either non-breaking space characters or spacer GIFs in these empty table cells. This can be done manually in Code view, or by using Find and Replace.

Note

Convert Tables to Layers is intended to be used in conjunction with Convert Layers to Tables, so that a layout can be converted back to layers for future modifications.

The Basics of Converting Layers to Table

Essentially, this is a simple command, though it does require some care in setting up your layer-based layout before it will work properly. It requires setting up your layers a certain way, doing some planning as you build, and making some strategic decisions as you apply the command.

Note

Creating layer-based layouts, and using Convert Layers to Table, can only be done from Standard Design view, not from Layout view.

Prepare Your Layers

Layers that overlap each other cannot be converted to a table. If you're thinking ahead, before you create your layer-based layout you'll open the Layers panel (Window > Other > Layers, which opens the Advanced Layout panel group) and select the Do Not Allow Overlaps option (see Figure 10.24). This option won't affect any overlapping layers you might already have created, but it will stop you creating any new overlaps.

Figure 10.24. Disabling layer overlaps in the Layers panel preparatory to using the Convert Layers to Table command.

If you've already created your layers without this safeguard enabled, and still want to use the command, use your eyeballs and your judgment to try to eliminate all overlaps. (If you miss any, Dreamweaver will tell you about it when you try to convert!)

Choose and Configure the Command

When you're ready to convert, go to Modify > Convert > Layers to Table. The dialog box that appears (shown in Figure 10.25) gives you various options for determining how the conversion will take place, and what kind of table code it will create. The Layout Tools options are not crucial to a good result; they simply offer some automatic choices like opening the Layers panel. The Table options are crucial, as they determine how the table code will be generated. They're discussed in the following sections.

Figure 10.25. The Convert Layers to Table dialog box.

Table Complexity: Most Accurate Versus Smallest

You must tell Dreamweaver to create the most accurate table it possibly can, or the most efficient table. When you choose most accurate, Dreamweaver will attempt to create a pixel-perfect reproduction of your layer structure in the table. This often means many small (sometimes very small!) table cells, a real mess for you to edit and for the browser to display. When you choose smallest, Dreamweaver will automatically collapse any table cells within the size limit you specify, to create simpler table code; but your layout might shift slightly from its layer-based positioning.

Table Stability: Use Transparent GIFs

As discussed in the preceding chapter, and in the section on "Layout View" earlier in this chapter, transparent single-pixel spacer images help to solidify table structure. If this option is selected, Dreamweaver will automatically include a control row of transparent pixels in the table code. (See the discussion on using spacer images in Layout view, earlier in this chapter, for more on control rows.)

Table Alignment: Center Table

This option applies the align="center" attribute to the table, so it floats in the middle of the page.

Working Smart with Convert Layers to Table

There are limits to what kind of page structure you can create with this command. Because Dreamweaver layers have fixed pixel widths, you can't use them to create flexible layouts. Because the command converts all layers in a document into one big table, you can't use it to create multi-table layouts, or layouts with nested tables.

But just because the command is limited doesn't mean you can't use it wisely, within its limitations. If you're careful and smart, you can use Convert Layers to Table to create workable pages, fairly quickly and very intuitively.

Tidy Layers Make a Tidy Table

If you understand what makes a good table, you'll know how to arrange your layers to create the same effect. Tables exist as row and column grids respect this. Align layers carefully; match their dimensions where appropriate, so they form the simplest grid structure you can get them in. Don't create two layers where one will do.

To help accomplish simple table structure, choose the Smallest option in the Convert Layers to Table dialog box, allowing Dreamweaver to combine small cells into larger ones.

Know When to Use Other Tools

Just because your table started out life as a series of layers, doesn't mean you can't use the standard table-editing tools to clean it up or extend it. To make a flexible layout, convert your fixed layout to a table and then add percent-based widths as necessary to the table and its columns. To make a layout that uses multiple tables (nested or otherwise), use layers to build the layout for one table in one document, and convert to table; then use layers to build the layout for the second table in another document, and convert to table; then copy and paste to combine your tables.

Never Say Die!

And if at first you don't succeed, try again! If your conversion creates an unlovely table structure, Edit > Undo, tweak your layers to be tidier, and run the command again. You also can use the Modify > Convert > Table to Layers command to get your layers back though doing so might not reproduce exactly the structure of layers you started with.

Note

In particular, if you convert Layers to Table and then reverse the process to converting Tables to Layers, you might end up with a whole row of skinny little layers at the bottom of your layout. These layers have been created from the table's control row they contain that row's spacer images. You can safely delete these layers before continuing. The next time you convert Layers to Table, Dreamweaver will create another control row.

Exercise 10.3 Building a Page Layout Using a Tracing Image and the Convert Layers to Table Command

In this exercise, you'll create a layout by starting from a tracing image, creating a layer-based layout to re-create the design of the tracing image, and convert the whole thing to a table. You'll experiment with different conversion settings, and examine the resulting code to see how it's been created, how it can be improved on, and how it might have been done differently by constructing the table manually.

All files for this exercise are in the chapter_10 folder from the CD. If you haven't done so already, copy the folder to your hard drive and use it to create a Dreamweaver site called chapter_10.

1. For this exercise, you'll build a different version of the Rubber Baby Buggy Bumpers home page used for previous exercises in this chapter (see Figure 10.26). Start by creating a new HTML file and saving it in the chapter_10 folder as bumpers3.html.

   Figure 10.26. The desired layout for the bumpers3.html page.

   

2. The new layout for the Bumpers home page was created in Adobe Illustrator, captured as a screenshot and saved as bumperLayout.gif. To load this image as a tracing image, go to Modify > Page Properties.

   In the portion of the dialog box regarding tracing images, click the Choose button and browse to bumperLayout.gif (it's in the chapter_10/images folder). After the image is in place, click the Apply button to see it in your document. You don't want to use it at 100% opacity, because it will be hard to tell which parts of your layout are tracing image and which parts are real layout elements so set the opacity slider to around 40%. Click Apply, if you want to see if 40% is a good setting for you, and adjust it if needed.

   Before leaving the Page Properties dialog box, set the document's page margins to 0. When your dialog box looks like the one in Figure 10.27, click OK to close the dialog box.

   Figure 10.27. The Page Properties dialog box for bumpers3.html establishing the tracing image.

   

3. The positioning of the tracing image could be improved. To match the finished layout shown in Figure 10.26, you want the banner flush against the top and left edges of the page. So your tracing image should be aligned that way, to help you work.

   Go to View > Tracing Image > Adjust Position. When the dialog box opens, use your arrow keys to nudge the tracing image until it's in position. Figure 10.28 shows the Document window with tracing image, ready for use.

   Figure 10.28. The bumpers3.html page with tracing image in place.

   

4. Now it's time to start creating layers. To keep yourself from accidentally overlapping them, open the Layers panel and select Prevent Overlaps (Window > Other > Layers, or expand the Advanced Layout panel group).

   From the Common tab of the Insert bar, select the Draw Layer object and start drawing layers. You want one layer for the banner, one for each button, and one for the text block (see Figure 10.29).

   Figure 10.29. The layers for the bumpers3.html layout in position aligned with the tracing image.

   

5. Using the images in the chapter_10/images folder, and the text in the chapter_10/filler_text.html file, fill your layers with content. Everything should be looking close to the tracing image by now, except the main banner. The layer containing it needs a background color matching the color of the image; and the image needs to be centered in the layer. To accomplish the first task, select the layer and use the color picker in the Layer Property inspector to sample the image's color. The second task can't be accomplished using the Property inspec-tor there are no alignment controls for layers listed there. But don't worry about it you'll be able to set the alignment after you've converted to a table.

   Preview your page in a browser. As long as you're not using a version 3 browser, which doesn't support layers, you'll see your layout, looking almost perfect. The tracing image won't show.

6. Back in Dreamweaver, remove the tracing image it has served its purpose. Go to Modify > Page Properties, find the tracing image input field, and select and delete the contents. When you close the dialog box and return to Design view, your tracing image will be gone.

7. It's time to convert your layout and for a bit of experimenting with settings. Choose Modify > Convert Layers to Table. In the dialog box that appears, select Most Accurate, and Use Transparent GIFs. You can deselect all the Layout Tools options. When you're all set, click OK.

   Note

   

   If you have overlapping layers, you'll get an error message when you try to convert. Check your layout carefully, looking for and adjusting all possible culprits, and try again.

   How does your page look? Unless you were very precise in aligning layers, your table is probably pretty complex and ugly, like that shown in Figure 10.30. That's not an optimal result!

   Figure 10.30. The results of using the most accurate setting, converting bumpers2.html from layers to a table.

   

8. Try again. Go to Edit > Undo, to get your layers back. Then choose Modify > Convert Layers to Table again. This time, change the settings to Smallest, collapsing all cells smaller than 6 pixels. Click OK, and check your table. That's much better! (See Figure 10.31).

   Figure 10.31. A much more compact table created from more efficient settings in Convert Layers to Table.

   

9. Now that the layout is in a table, you can fix the banner alignment problem. Select the cell containing the banner and use the Table Property inspector to set the align attribute to center and valign to middle .

   Preview your page in a browser, to check it out. Now it looks like the desired layout you wanted to create.

10. If you examine your table in Dreamweaver, you might see all sorts of ways in which it could be structured more efficiently than it is. Looking at the example in Figure 10.31, the center text column is slightly off-center; several rows have heights assigned, which isn't quite kosher; and you might think of various alternatives to having so many columns separating all the buttons (maybe a nested table, or multiple stacked tables creating the page). But it's not bad.

11. Now, for the ultimate challenge can you make this layout flexible? A good flexible structure for this table would be if the banner cell stretched from side to side, and the empty columns at left and right stretched equally, so the fixed width content and button areas in the middle remain centered no matter what. While Dreamweaver couldn't create the table this way, using Convert Layers to Table, you can now tweak it.

    First, select the table itself and assign it a width of 100%.

    Next, drag to select all the cells in the leftmost column, and use the Property inspector to assign a width of 50% (see Figure 10.32).

    Figure 10.32. Assigning a width of 50% to one column of bumpers2.html, part of turning it into a flexible table.

    

    Repeat the process for the rightmost column.

    The table might look a little strange in Dreamweaver, stretching slightly beyond the edges of the Document window. Preview in the Browser, to see your final flexible layout (see Figure 10.33).

    Figure 10.33. The final, flexible version of bumpers2.html as seen in the browser.

    

Summary

This chapter covered some of the more obviously graphic-designer-friendly tools and techniques for working in Dreamweaver that really maximize the possibilities of Design view. Rulers, grids, and tracing images are great tools for getting more visual feedback from Design view and the Document window. Layout view and the Convert Layers to Table command allow you to quickly, intuitively translate your layout ideas into HTML structures. As you saw from the exercises, both of these latter tools have their limitations this is true with any design tool that does things automatically for you. As always with web design, the more you know about HTML, and the more you keep one eye on the code as you work, the better off you'll be. But used wisely, and if they fit your working style, they can be valuable additions to your web development toolbox.

CONTENTS