Dreamweaver 8[c] The Missing Manual

7.1. Using Guides to Align Page Elements

Dreamweaver 8 adds a useful new design tool, one that's very common in graphic arts programs like Adobe Illustrator, InDesign, and Quark XPress. Guides are simply lines that you drag onto the document window from the top or left ruler. They provide alignment aids that make it easy to draw layout tables and cells , or (if you're using CSS positioning as discussed in the next chapter) to accurately position CSS-controlled <div> tags on a page.

To use guides, you must first turn on the document window's rulers by choosing View Rulers Show. A faster method is the keyboard shortcut Ctrl+Alt+R (-Option-R on a Mac), which toggles the display of the rulers off and on. Finally, the View Options menu in the document toolbar also lets you show or hide rulers (see Figure 7-2).

Figure 7-2. The View Options menu lets you show or hide rulers as well as guides, head content (see Figure 1-2), a tracing image (see Section 7.3.7), and a regularly spaced grid of lines.

You also need to make sure guides are turned on. Use the View Options menu (Figure 7-2), the View Guides menu, or the keyboard shortcut Ctrl+; (-;). After this initial setup, you just drag lines onto the page from either the top ruler (to create horizontal guides) or from the left ruler (to create vertical guides), as shown in Figure 7-3. As you drag a guide onto the page, a yellow box appears with a number indicating the distance (in pixels) between the guide and either the top ruler (if you're adding a horizontal guide) or the left ruler (if you're adding a vertical guide). Guides are a great way to lay down a pixel-accurate set of lines to help manage your designsure to please the pickiest of designers who demand that the Web page look exactly like their Photoshop mock-up!

Figure 7-3. Dreamweaver 8's new guides let you add helpful guidelines by dragging them from any point along the document window's top or left rulers. Guides let you accurately place page elements and also act like helpful measuring tapes that let you determine the distance between objects on a page.

The number in the yellow box indicates the distance between the guide and the ruler's zero point. Normally the ruler starts at zero in the upper-left edge of the document window. However, you can drag the box at the edges of the rulers (circled in Figure 7-3) onto the document window to reset the zero point, placing it somewhere in the middle of the document. In earlier versions of Dreamweaver (before guides), this was a handy way to measure the distance from one object to another object on a pagejust drag the zero point to the edge of one object and read on the ruler the distance to the next object. But now, guides can handle this function much more gracefully, as described next.

Tip: If you accidentally change the zero point, just double-click the ruler origin box (circled in Figure 7-3) to reset the zero point to the top-left corner of the document window.

If you hold down the Ctrl ( ) key as you drag a guide onto the page, Dreamweaver provides other helpful informationthe distance from one guide to another or, if there's no guide in the way, from the guide to the edge of the document (see Figure 7-3). The distance (in pixels) appears in a white box, and two blue lines appear, one with an arrow head that indicates where the measurement begins and another with an arrow head indicating where the measurement ends. These markers can come in very handy when you want to make sure two elements are separated by a specific distance. For example, say you want to begin the main area of a page exactly 23 pixels (dude, you're picky) below a page-topping banner and navigation bar. Drag one guide down from the top ruler until the guide covers the bottom edge of the banner; then, drag another guide below the first one while holding down the Ctrl ( ) key. When the distance between the two guides is 23 pixels, let go of the mouse button, and the new guide is in position (note that Dreamweaver 8's new Zoom tool can help make this maneuver feel less like a game of Operation).

Tip: You can still see distances between guides and the edges of your document even after placing guides on a page. Just hold down the Ctrl ( ) key and move your mouse over the guide whose distances you wish to know.

Once you've added a guide, to remove it, just drag it off any edge of the page, or, to reposition it, drag it to another part of the document window. You can temporarily hide the guides using one of the same methods discussed earlier for turning them onfor example, Ctrl+; ( -;). In addition, the View Guides menu provides several other options for controlling guides (see Figure 7-4): you can lock guides so you dont accidentally move them; turn on "snap to" guides so that elements you draw on a page, like a layout cell (Section 7.3.3) or a layer (Section 8.6), snap to the edge of a guide as you draw or drag them; or make the guides snap to elements on the page, so if you've already built parts of a Web page, you can drag guides and have them snap into place right next to any elementan image, for exampleon the page. This last maneuver's a good way to use guides to measure the distance between two objects on a page. (Holding down the Alt [Option] key temporarily turns off snapping.) And, if you're completely done with guides, you can choose Clear Guides to remove them permanently.

Figure 7-4. The Guides menu lets you hide, show, and otherwise control guides. Select the "Edit Guides" option to change the color Dreamweaver uses for displaying guide and distance lines.

Note: Dreamweaver remembers where you placed guides on a particular page, even if you quit and restart the program. It stores that information in a folder called _notes , which is stored in the same folder the page is in. If you delete the _notes folder, you lose all of the guide information for all pages in the same folder.

7.1.1. Checking the Fold

There's one final option provided by the new guides feature that helps Web designers see how their designs fit inside a variety of different size browser windows . One difficulty in designing Web pages is designing for a variety of different monitor sizes. People use a wide range of resolutions when using a computerranging from 640 x 480 pixel settings for small monitors up to the colossal 2560 x 1600 pixel resolution of Apple's 30" Cinema Display. It's all too easy, if you, Ms. Fancy-Pants Web Designer, have a big monitor, to create a page where all the important information won't appear to the average visitor unless he scrolls down or, even worse , scrolls to the right.

Note: Newspapers put the most important stories on the top half of the front page; stories of lesser importance appear "below the fold."

The Guides menu provides a quick way to slap down guides that mark the boundaries of the viewable area of most Web browsers at a variety of resolutions (see Figure 7-4). Just choose one of the resolutions640 x 480, 800 x 600, and so on and Dreamweaver displays green guides marking the bottom and right edge of the display area. If any of the page's content falls to the right of the vertical green line, a visitor viewing the page at the specified resolution needs to scroll right; anything below the horizontal green line appears only when the visitor scrolls down.

Note: The two 640 x 480 options are quickly become relics. Fewer and fewer people have monitors this small or set their monitors to this resolution. In addition, the default option's pretty much useless since browsers no longer open to a set or "default" size each time you open them. In this day and age, browsers open to whatever dimension the visitor last had the browser set at when she quit the browser. The "Maximized" option just means the browser window is expanded to fill as much area of the screen as possible.

You can turn on multiple sets of these guides at one timefor 640 x 480, 800 x 600, and so on. But doing so makes it difficult to determine which guides belong to which window size, since the guidelines are all the same color. It's even harder to tell which guides are the "fold" guides, if you've already dragged a lot of green guides onto the page. An alternative method is the Window Size menu in the bottom-right corner of the document window.

Related

Категории