Grids and Guides in Dreamweaver CS5

This tutorial will show you how to use the grids and guides features in Dreamweaver CS5.

Apart from rulers Dreamweaver has some other useful tools to help you to layout your pages accurately. Here we're going to look at grids and guides.

Using Grids in Dreamweaver CS5

A grid is a mesh of lines that you can use to align objects. You can access the grid options by selecting Grid from the View menu then using the fly-out menu shown here.

Select Show Grid and the document window looks like this.

You can also show and hide the grid using the keyboard shortcut Ctrl+Alt+G.

One of the options on then grid fly-out menu is Grid Settings.... If you select this you see this dialog.

You can use the options in the dialog to set the grid color, the spacing (and you can choose the units to specify this in) and whether you want the grid shown as dots or lines. When you have made the settings you want, just press OK.

There is another option in the dialog and that is Snap to Grid. If this is set, all objects that are being positioned will be aligned with grid lines. This makes it particularly easy to align objects accurately. You may have also noticed that this is also one of the options available from the grid fly-out menu.

In fact, you can have Snap to Grid set without the grid itself being visible.

Using Guides in Dreamweaver CS5

Guides are horizontal and vertical lines that you can move to any positions you need to. They are also used for alignment.

There is a Guides fly-out on the View menu.

This has similar options to the guide fly-out, but with the addition of some defaults for popular screen resolutions.

Once you have elected to show guides, click on either the horizontal or vertical ruler and drag a guide into the desired position over your document. Here I've dragged a horizontal guide to about the half way mark.

You can set various options for the guides, and elect to use Snap to Guides or not. You can also enable Snap Guides to Elements if you want to align guides with existing page elements.

When you've finished with a guide you can just drag it back to the ruler it came from. When you've finished with guides altogether you can use the menu to hide them or the keyboard shortcut Ctrl+;.

Note that the grid and guides are not visible on your pages themselves when they are published to the web.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Using Grids and Guides in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!