User Guide Cancel

Use visual aids for layout

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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.

Set rulers

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.

  • To toggle rulers on and off, select View > Design View Options > Rules > Show/Hide.
  • To change the origin, drag the ruler-origin icon  (at the upper-left corner of the Design view of the Document window) anywhere on the page.
  • To reset the origin to its default position, select View > Design View Options >Rulers > Reset Origin.
  • To change the unit of measure, select View > Rulers, and then select Pixels, Inches, or Centimeters.

Set layout guides

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.

Create a horizontal or vertical guide

  1. Drag from the corresponding ruler.
  2. Position the guide in the Document window and release the mouse button (reposition the guide by dragging it again).
    Note:

    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.

Show or hide guides

  1. Select View > Guides > Show Guides.

Snap elements to guides

  • To snap elements to guides, select View > Design View Options > Guides > Snap to Guides.
  • To snap guides to elements, select View > Design View Options > Guides > Guides Snap to Elements.
Note:

When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized elements snap to guides.

Lock or unlock all guides

Select View > Design View Options > Guides > Lock Guides.

View and move a guide to a specific position

  1. Hold the mouse pointer over the guide to view its position.
  2. Double-click the guide.
  3. Enter the new position in the Move Guide dialog box and click OK.

View the distance between guides

Press Control (Windows) or Command (Macintosh) and hold the mouse pointer anywhere between the two guides.
Note:

The unit of measure is the same as the unit of measure used for the rulers.

Emulate the fold (visible area) of a web browser

Select View > Design View Options > Guides, and then select a preset browser size from the menu.

Remove a guide

Drag the guide off the document.

Change guide settings

  1. Select View > Design View Options > 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.

Use 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 > Design View Options > Grid > Show Grid.

Enable or disable snapping

Select View > Design View Options > Grid > Snap to Grid.

Change grid settings

  1. Select View > Design View Options > 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.

Place a tracing image in the Document window

  1. Do one of the following:

    • 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).

  2. Navigate to your image file and click OK.

  3. In the Page Properties dialog box, specify the transparency for the image by dragging the Image Transparency slider, then click OK.

    To switch to another tracing image or change the transparency of the current tracing image at any time, select File > Page Properties.

Show or hide the tracing image

Select View > Design View Options >Tracing Image > Show.

Change the position of a tracing image

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

Reset the position of the tracing image

  1. Select View > Design View Options > Tracing Image > Reset Position.

    The tracing image returns to the upper-left corner of the Document window (0,0).

Align the tracing image to a selected element

  1. Select an element in the Document window.

  2. 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 tracing image properties

Set properties for a tracing image (which is an image file to use as a guide in designing your page).

  1. Do one of the following:

    • Click File > Page Properties
    • Click Window > Properties, and click Page Properties in the text Property inspector.

  2. From the Page Properties dialog box, select Tracing Image. You can configure the following options from this panel:

    • Tracing Image: Specifies an image to use as a guide for copying a design. This image is for reference only, and does not appear when the document is displayed in a browser.
    • Transparency: Determines the opacity of the tracing image, from completely transparent to completely opaque.

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy