Using guides with templates, Use the layout grid, Use a tracing image – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 277
Emulate the fold (visible area) of a web browser
Select View > Guides, and then select a preset browser size from the menu.
Remove a guide
Drag the guide off the document.
Change guide settings
Select View > Guides > Edit Guides, set the following options, and click OK.
Guide color 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.
Distance Color 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.
Show Guides Makes guides visible in Design view.
Snap to Guides Makes page elements snap to guides as you move elements around the page.
Lock Guides Locks guides in place.
Guides Snap to Elements Snaps guides to elements on the page as you drag guides.
Clear All Clears all guides from the page.
Using guides with templates
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.
Use the layout grid
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.
Show or hide the grid
Select View > Grid > Show Grid.
Enable or disable snapping
Select View > Grid > Snap to Grid.
Change grid settings
1. Select View > Grid > Grid Settings.
2. Set the options and click OK to apply the changes.
Color 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.
Show Grid Makes the grid visible in Design view.
Snap to Grid Makes page elements snap to the lines of the grid.
Spacing Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.
Display Specifies whether the grid lines appear as lines or dots.
Note: If Show Grid is not selected, the grid does not appear in the document and no changes are visible.
Use a tracing image
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.
270