This chapter is from the book
This chapter is from the book
This chapter is from the book
Organizing Documents
Like most graphics programs, Fireworks has a set of features that enable you to structure your pages during design time. These include Rulers, Guides, and a Grid, with several options for each. These tools help you structure pleasing pages and align objects. Because they are used only when you are authoring, they do not appear when you export your file.
Working with Rulers
Rulers (View, Rulers), when showing, run across the top and down the left side of the document. Measured in pixels regardless of the unit setting, rulers help you identify the coordinates of both the cursor and the objects on canvas, as shown in Figure 3.11.
){kind=link}
Figure 3.11 Rulers identify the location of objects and the cursor. In this image, the rectangle is being dragged, and its position is marked by the black highlighting on the rulers.
One easily overlooked feature of rulers is the capability they give you to change the 0 point. Normally, the pixel in the top left corner of the canvas is 0,0. Negative coordinates run off the top and left sides of the canvas, and positive coordinates run through the canvas down and to the right. It is possible to change this default. Drag the zero point crosshairs in the top left corner of the ruler and release where you would like the new zero point to be, as shown in Figure 3.12. The rulers automatically update.
){kind=link}
Figure 3.12 Drag the zero point crosshairs to change the document's zero point.
Working with Guides
Guides are vertical and horizontal lines that you can drag and drop to any location to structure or align your files. To draw a guide, start dragging from either ruler toward the canvas. Dragging from the horizontal ruler results in a horizontal guide, whereas dragging from the vertical ruler yields a vertical guide.
Guides can be placed arbitrarily in the document. You can have as many guides as you like. Designers use guides to structure drawings, to ensure that all the objects align to each other properly, and also to create skeletal outlines of whole pages. Figure 3.13, for example, shows a canvas that will be used to create a Web interface. Guides indicate the image's major regions. Using this technique is sort of like outlining a paper before you write it.
){kind=link}
The following list summarizes the use of guides.
To show or hide guides, choose View, Guides, Show Guides (or use the keyboard shortcut Command-;/Ctrl+;).
To lock or unlock guides (so that you don't accidentally move them), choose View, Guides, Lock Guides (or use the keyboard shortcut Option-Command-;/Ctrl+Alt+;).
To remove guides, drag the guides to the horizontal or vertical rulers and off the document window.
Change the guide color (which defaults to neon green) by choosing View, Guide, Edit Guides, and then select a color from the color box pop-up.
Reposition existing guides by dragging the guide to a new position.
-
To position a guide precisely, double-click it and enter the new position in the Move Guide dialog box, as shown in Figure 3.14.
Use View, Guides, Snap to Guides to give the guides a magnetic quality; then, when you drag an object near a guide, it snaps to it, which helps with precise positioning.
){kind=link}
Figure 3.13 Guides can be used to create outlines for whole page interfaces.
Figure 3.14 Why eyeball it when you can drop that guide right at x:250? Double-click any guide to see the Move Guide dialog box.
Working with the Grid
Traditional design, especially technical design, often involves the use of graph paper. The Fireworks grid (View, Grid, Show Grid) simulates graph paper by imposing a grid over the entire document at a regular interval, which you can define as shown in Figure 3.15.
){kind=link}
The default color for the grid lines is black. You can change the color by choosing View, Grid, Edit Grid; then in the Edit Grid dialog box, shown in Figure 3.16, select a color from the color box pop-up. You can also modify the size of grid cells in the same dialog box by entering the desired values.
){kind=link}
Just as you can snap objects to guides, you can also snap them to the grid. Choose View, Grid, Snap to Grid.
Figure 3.15 Show the grid to make your canvas work like graph paper.
Figure 3.16 The Edit Grid dialog box offers several features that control how the grid functions and is displayed.