Home / Articles / Adobe Dreamweaver / Adobe Dreamweaver CS3 How-Tos: Designing Pages with Absolute Placement Objects

Adobe Dreamweaver CS3 How-Tos: Designing Pages with Absolute Placement Objects

Chapter Description

Dreamweaver CS3 provides accessible designer-oriented tools for creating and editing CSS page layout in the form of what Dreamweaver calls Absolute Placement (AP) objects. David Karlins shows you how to work with AP objects in this sample chapter.

#34 Using Rulers, Guides, and Grids

Since AP Divs and Div tags allow you to design pages in an intuitive, interactive, graphical environment, wouldn't it be nice if you could use design features like rulers, guides, and gridlines to make it easy to align and place layout objects? Good news—you can!

Dreamweaver's rulers, guides, and gridlines display much like those in Illustrator, InDesign, and Photoshop. Combined with AP Divs and definable Div tags, they allow Dreamweaver's Document window to function as a graphical design workspace.

To display rulers in an open document, choose View > Rulers > Show. The View > Rulers submenu also allows you to choose between pixels, centimeters, and inches (Figure 34a).

Figure 34a

Figure 34a Choosing a unit of measurement for rulers.

You can even redefine the horizontal and/or vertical zero points for the rulers. Do this by dragging the icon at the intersection of the horizontal and vertical rulers into the Document window. The point at which you release your mouse becomes the new zero point for the horizontal and vertical rulers (Figure 34b). To reset the ruler zero points, choose View > Rulers > Reset Origin.

Figure 34b

Figure 34b Setting a customized horizontal and vertical zero point for rulers.

To place a horizontal or vertical guide on the page, click and drag a ruler, and then drag it into the Document window (Figure 34c).

Figure 34c

Figure 34c Placing a horizontal guide.

To edit the location of a guide, click and drag it. You can also double-click to edit the guide location or unit of measurement.

Guides can be locked to prevent accidental editing; choose View > Guides > Lock Guides. Guides can also be made "magnetic" so that they either snap to objects on the page, or objects on the page snap to them. To make a guide snap to elements on the page, choose View > Guides > Guides Snap to Elements. To make elements snap to guides, choose View > Guides > Snap to Guides. Clear guides by choosing View > Guides > Clear Guides.

Grids can be displayed by choosing View > Grid > Show Grid. Make grids magnetic by choosing View > Grid > Snap to Grid.

Define grid properties by choosing View > Grid > Grid settings. The Grid Settings dialog allows you to change the color of gridlines, spacing between grids, grid display and snap properties, and display (dots or lines). Click Apply to preview changes to the grid, or click OK to close the dialog and change grid settings in the Document window (Figure 34d).

Figure 34d

Figure 34d Editing grid display settings.