Use visual aids for layout in Dreamweaver, including setting rulers, setting layout guides, using guides with templates, using a layout grid, and using a tracing image.
Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page, marked in pixels, inches, or centimeters.
Guides are lines that you drag onto the document from the rulers. They help you place and align objects more precisely. You can also use guides to measure the size of page elements, or emulate the folds (visible areas) of web browsers.
To help you align elements, you can snap elements to guides, and snap guides to elements. (Elements must be absolutely positioned in order for the snap feature to work.) You can also lock guides to prevent them from being accidentally moved by another user.
By default, guides are recorded as absolute pixel measurements from the top or left side of the document, and are shown relative to the origin of the ruler. To record the guide as a percentage, press the Shift key while you create or move the guide.
When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized elements snap to guides.
Select View > Design View Options > Guides > Lock Guides.
The unit of measure is the same as the unit of measure used for the rulers.
Select View > Design View Options > Guides, and then select a preset browser size from the menu.
Select View > Design View Options > Guides > Edit Guides, set the following options, and click OK.
Specifies the color of the guide lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Specifies the color of the lines that appear as distance indicators when you hold the mouse pointer between guides. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Makes guides visible in Design view.
Snap to Guides
Makes page elements snap to guides as you move elements around the page.
Locks guides in place.
Guides Snap to Elements
Snaps guides to elements on the page as you drag guides.
Clears all guides from the page.
When guides are added to a Dreamweaver template, all instances of the template inherit the guides. Guides in template instances, however, are treated as editable regions, so users can modify them. Modified guides in template instances are restored to their original location whenever the instance is updated with the master template.
You can also add your own guides to instances of a template. Guides added in this manner are not overwritten when the template instance is updated with the master template.
The grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects precisely. You can make absolutely-positioned page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.
Select View > Design View Options > Grid > Show Grid.
Select View > Design View Options > Grid > Snap to Grid.
Select View > Design View Options > Grid > Grid Settings.
Specifies the color of the grid lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Makes the grid visible in Design view.
Snap to Grid
Makes page elements snap to the lines of the grid.
Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.
Specifies whether the grid lines appear as lines or dots.
If Show Grid is not selected, the grid does not appear in the document and no changes are visible.
You can use a tracing image as a guide to re‑create a page design that was created in a graphics application such as Adobe Freehand or Fireworks.
A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.
The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color are not visible in the Document window; however, the background image and color will be visible when the page is viewed in a browser.
Select View > Design View Options > Tracing Image > Load.
Select File > Page Properties, then in the Tracing Image category, click Browse (next to the Tracing Image text box).
Navigate to your image file and click OK.
To switch to another tracing image or change the transparency of the current tracing image at any time, select File > Page Properties.
Select View > Design View Options >Tracing Image > Show.
Select View > Design View Options > Tracing Image > Adjust Position.
To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
To move the image 1 pixel at a time, use the arrow keys.
To move the image 5 pixels at a time, press Shift and an arrow key.
Select View > Design View Options > Tracing Image > Reset Position.
The tracing image returns to the upper-left corner of the Document window (0,0).
Select View > Design View Options > Tracing Image > Align with Selection.
The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.
Set properties for a tracing image (which is an image file to use as a guide in designing your page).
Do one of the following:
From the Page Properties dialog box, select Tracing Image. You can configure the following options from this panel: