Setting Grid and Ruler Options


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

1.

Select the class layer and use the Property inspector to change the size of the layer to 158 W and 100 H.

Having the layer size match the size of its contents will help you when adjusting the placement of the layer in this exercise.

2.

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

The grids display in the Document window. A checkmark next to the command indicates that the option is on.

3.

Choose View > Grid > Snap To Grid.

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

4.

Select the om layer; then press the Shift key and select the class layer. Use the class layer selection handle to move them to the right so that the right edge of the class layer snaps to the seventh vertical grid line from the left and one grid box is showing between the top edge of the Document window and the top edge of the om layer.

The class layer appears to be on top of the om layer while you move them because you selected the class layer lastyou can see that they are both selected in the Layers panel because both layer names are highlighted. After you click off of the layers in a blank area of the Document window, the om layer appears above the class layer again.

The class layer will have snapped to the grid line. If you click in the Document window to deselect both layers, select only the class layer; the L value should now be 200px. You might be able to see the faint gray border of the class layer just to the left of the grid line in the Document window when it is deselected. The layer is actually aligned exactly with the grid line, even though the border appears to be one pixel to the left of the grid line; the one-pixel gray layer border that you see is a Dreamweaver visual aid that does not display in the browser.

Note

You can change the grid setting by choosing View > Grid > Grid Settings. The Edit Grid dialog box appears, 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.

5.

Choose View > Rulers > Show to turn the rulers on if they are not already visible.

The rulers display at the top and left sides of the Document window. A checkmark next to the command indicates that the option is on. The units for rulers can be changed by choosing View > Rulers > Pixels, Inches, or Centimeters. A checkmark next to a unit of measure indicates which one is set.

6.

Select the textlayer layer and move it just to the right of the class layer, aligning the tops of both layers and aligning the left side of the textlayer along the grid line along the right edge of the class layer. Change the width of the textlayer layer to 300px.

7.

Preview the page in the browser. If necessary, adjust the L value of the textlayer layer on the Property inspector or move the layer by using the left and right arrow keys so there is no white space between the class layer and the background color of the textlayer layer.

Note

If the tan background of the textlayer does not continue to the bottom of the text inside the table and you see white space near the bottom of the table when viewed in the browser, you can either set the background of the table to the same tan color or you can increase the height of the 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 that you have the layer borders visual aid turned on.

Note

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 see negative values appear upward and to the left of the zero point. Choose View > Rulers > Reset Origin to reset the zero point.

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

8.

Turn off the Grid, Snap To Grid, and Ruler options.

Note

Choose View > Grid > Show Grid to remove the checkmark and hide the grid. Use the same method to remove the checkmarks for the Snap To Grid (View > Grid > Snap To Grid) and Ruler options (View > Rulers > Show).


The rest of the book assumes that 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.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net