This chapter is from the book
This chapter is from the book
This chapter is from the book
Designing a Page with Layers
Being able to design pages with layers lends more flexibility to the developer. However, layers still are viewable only by the latest versions of Web browsers, and unless you really know your specific audience, it may be safer to create a layout with tables. An option is to have two versions of your site as well: one that embraces the latest standards and another that caters to mass acceptance and compatibility. Whichever you decide, it's a snap creating two versions of a design in Dreamweaver MX 2004.
Aids to Help Lay Out Layers
When designing pages with layers, a few things inside Dreamweaver can help you place layers precisely. The first thing you might consider doing is turning on the visibility of the rulers.
Rulers
You can easily make the rulers visible by choosing View, Rulers, Show. A couple of options exist within the Rulers submenu to help your layout become a successful one. If you need to change the ruler's increments, those options are available there.
If you need to change the 0,0 origin point of the rulers, click and drag from the top-right corner. You'll begin to drag a large crosshair, as shown in Figure 12.20. Place the center of the crosshair where your desired 0,0 mark would be for the x,y coordinate. To return to the original point, choose View, Rulers, Reset Origin.
Grid
Unfortunately, the rulers do not offer the standard guides you can drag out from the top or left side of the document. However, Dreamweaver does offer the grid, which can be a handy companion to the rulers. You can view the grid by choosing View, Grid, Show Grid. Depending on your project, the default settings for the grid may not be beneficial; however, there are several options for modifying the grid. To modify the grid choose View, Grid, Grid Settings, which launches the Grid Settings dialog box as shown in Figure 12.20.
)
Figure 12.20 The Grid Settings dialog box offers many options for changing the
appearance of the grid.
You can change the following options:
Color You can change the color of the grid, especially if the default or currently selected color competes too much with the foreground.
Show Grid Check this box to have the grid appear in the document; leave unchecked for it to remain invisible.
Snap to Grid With this option enabled, the layers will snap to the grid lines.
Spacing The value entered into this box determines the space between grid points or the size of the grid squares. Use the drop-down menu to the right of it to determine what unit of measure to use.
Display You can have the grid appear as solid or dotted lines.
Using the grid and the ruler can greatly enhance the layout of your layers. Refer to Figure 12.21 to see the document with the rulers and grid visible.
)
Figure 12.21 The document has both the rulers and the grid visible. Having these
aids visible can greatly increase the accuracy of layer placement.
Prevent Overlaps
If your intention is to be able to make this document compatible with many of the Web browsers, at some point you will have to convert the layers into a table. You cannot convert layers that overlap one another into a table. To avoid potential future problems, you may want to check off the Prevent Overlaps option in the Layers panel, as pictured in Figure 12.22, or you can choose Modify, Arrange, Prevent Layer Overlaps.
Converting Layers to Tables
By adding content such as images and text into many layers, I was able to come up with a nice design, as pictured in Figure 12.23.
When I was designing the page, I made sure that the Prevent Overlaps option was selected in the Layers panel so that none of the layers would overlap. I now want to make a version of this page that will be compatible with the majority of Web browsers. The first thing I'm going to do is save a new copy of this document by choosing File, Save As. In the Save As dialog box, I'm going to save this document inside my local root folder as index_table.html.
)
Figure 12.22 Choose the Prevent Overlaps option in the Layers panel if you
intend to convert the layers to a table.
)
Figure 12.23 I designed the entire page by laying content out into
different layers.
After saving a new version of this document, I'm going to choose Modify, Convert, Layers to Table. This opens the Convert Layers to Table dialog box, as shown in Figure 12.24.
)
Figure 12.24 The Convert Layers to Table dialog box has a host of features to
assist in the transition.
You can see several options in this dialog box; here's what they mean:
Most Accurate This option generates a table as complex as necessary so that it ensures the most accurate placement of your content when the switch has been made from layers to tables. By default, this option is selected.
Smallest This option collapses any empty cells smaller than a pixel size that you specify. By merging empty cells, it ultimately creates a cleaner, simpler table. Unfortunately, it generates a less-accurate table, which may outweigh the advantages of a cleaner, faster-loading table. I recommend choosing Most Accurate and merging the cells by hand to clean up the table.
Use Transparent GIFs When this option is selected, Dreamweaver places transparent GIFs in all the empty cells in the table. This prevents browsers from collapsing the empty cells.
Center on Page This option centers the table on the page by using the <div> tag with the align attribute. Without choosing this, the table is placed in the default location of the top-left corner of the browser window.
Layout Tools These options will display or not display the visual tools. Each of these tools was reviewed earlier in this chapter.
When you're happy with the settings, choose OK. This converts the layers into tables, as shown in Figure 12.25. Preview the page in a Web browser to ensure that the results are satisfactory.
If the results aren't quite what you expected, you can always convert the table back to layers by choosing Modify, Convert, Table to Layers. This opens the Convert Tables to Layers dialog box as pictured in Figure 12.26.
)
Figure 12.25 The document, which was previously designed in layers, is now
structured in tables.
)
Figure 12.26 The Convert Tables to Layers dialog box offers some basic
options for the conversion.
Check off the element you want to take effect and choose OK. Now that the layout is in layers again, you can make tweaks and adjustments and then convert the layout back to tables. You may find yourself doing this a couple of times.
Now you have two versions of the same layout: one for current browsers and one for older browsers. Finally, you can use a behavior to check to see what browser the end user is using to view your site. You'll learn more about how to use this behavior in Chapter 11.