Designing a Page with Layers

Team-Fly    

Macromedia® DreamWeaver® MX Unleashed
By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 11.  Layers in Dreamweaver


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.

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 11.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 origin point, choose View, Rulers, Reset Origin.

Figure 11.20. The Grid Settings dialog box offers many options for changing the appearance of the Grid.

graphics/11fig20.jpg

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. Now 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 11.20.

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 11.21 to see the document with the rulers and grid visible.

Figure 11.21. The document has both the rulers and the grid visible. Having these aids visible can greatly increase the accuracy of layer placement.

graphics/11fig21.jpg

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 11.22, or you can choose Modify, Arrange, Prevent Layer Overlaps.

Figure 11.22. Choose the Prevent Overlaps option in the Layers panel if you intend to convert the layers to a table.

graphics/11fig22.jpg

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 11.23.

Figure 11.23. I designed the entire page by laying content out into different layers.

graphics/11fig23.jpg

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.

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 11.24.

Figure 11.24. The Convert Layers to Table dialog box has a host of features to assist in the transition.

graphics/11fig24.jpg

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 were reviewed earlier in this chapter.

When you're happy with the settings, choose OK. This converts the layers into tables, as shown in Figure 11.25. Preview the page in a Web browser to ensure that the results are satisfactory.

Figure 11.25. The document, which was previously designed in layers, is now structured in tables.

graphics/11fig25.jpg

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 11.26.

Figure 11.26. The Convert Tables to Layers dialog box offers some basic options for the conversion.

graphics/11fig26.jpg

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 19.


    Team-Fly    
    Top


    Macromedia Dreamweaver MX Unleashed
    Macromedia Dreamweaver MX 2004 Unleashed
    ISBN: 0672326310
    EAN: 2147483647
    Year: 2002
    Pages: 321

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net