• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 15. Creating Layers > Setting Grid and Ruler Options

Setting Grid and Ruler Options

When you work with layers, you might want to use grids and rulers as visual guides for placement of layers on your page.

In the layers.html document, choose View > Grid > Show Grid.

The grids will display in the document window. A check next to the command indicates the option is on.

Choose View > Grid > Snap To Grid.

This option will turn snapping on or off. A check next to the command indicates the option is on. When this option is on, the layers will snap to the grid lines when you move them close.

Select the lighthouse layer, then press the Shift key and select the landscape layer. Move them to the right so that four of the grid boxes are showing between the edge of the document window and the left edge of the landscape layer.

The landscape layer will appear to be on top of the lighthouse layer while you move them because you selected the landscape layer last. Once you click off of the layers in a blank area of the document window, the lighthouse layer will appear above the landscape layer again.

The landscape layer will have snapped to the grid line. The L value of the landscape layer should now be 200px. You may be able to see the faint gray border of the land scape layer just to the left of the grid line in the document window. The layer is actually aligned exactly with the grid line even though the border appears to be 1 pixel to the left of the grid line; the 1-pixel gray layer border that you see is a Dreamweaver visual aid which does not display in the browser.


You can change the grid setting by choosing View > Grid > Grid Settings…. The Edit Grid dialog box will appear in which you can change the color, set the spacing value and units (pixels, inches, or centimeters), and switch the grid display to lines or dots. The grid can be useful when you need to align layers.

Choose View > Rulers > Show.

The rulers will display in the document window. A check next to the command indicates the option is on. The units for rulers can be changed by choosing View > Rulers > Pixels, Inches, or Centimeters. A check next to a unit of measure indicates which one is set.

Select the textlayer layer and move it just below the landscape layer. Format the text in the textlayer as Verdana, –1.

The background color or the textlayer layer should touch the landscape layer. This may be difficult to see in the document window since the layer borders visual aid is turned on.

Preview the page in the browser. If necessary, adjust the T value of the textlayer layer so there is no white space between the landscape layer and the background color of the textlayer layer.

You can also temporarily turn off the layer borders visual aid by choosing View > Visual Aids > Layer Borders. The rest of this lesson assumes you have the layer borders visual aid turned on.


The zero point is the point where the horizontal and vertical rulers intersect. The default location for the zero point is the upper left corner of the page, where the top and left sides of the page meet. You can set the zero point to a different location by clicking in the square between the vertical and horizontal rulers, dragging the zero point downward and to the right, and then releasing. When the zero point is moved to a point inside the document, you will see negative values appear upwards and to the left of the zero point. Choose View > Rulers > Reset Origin to reset the zero point.

Notice when you preview the file that the browser window continues to scroll past the end of the text. This is due to the hidden Layer3 layer.

In the Layers panel, select the Layer3 layer, click the layer selection handle in the document window, and press Delete (Macintosh) or Backspace (Windows).

Your document should now look similar to the example shown here.

Choose View > Grid > Show Grid to remove the check mark and hide the grid.

The rest of the book assumes you have the grid turned off. You can either turn off the rulers or leave them on. Save this file and leave it open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint