Inside Dreamweaver MX Tables
- Viewing Aids
- Layout View
- The Convert Layers to Table Command
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Like ice cream, web designers come in all flavors. Some love their code and want nothing more than to be close to it. They can appreciate a visual design interface like Dreamweaver's because of the amount of time it saves, but feel compelled to keep an eagle eye on the Code view, monitoring every tag Dreamweaver writes. Others are happy to allow Dreamweaver to translate for them, instructing it to place this or that element on the page and trusting that the software will take care of things behind the scenes. The preceding chapter discussed using tables for page layout, and how to make the code work for you in designing. This chapter looks at the various options you have to let Dreamweaver do the table coding for you, including Layout view and the Convert Layers to Table command. It also covers rulers, grids, and tracing images—viewing aids that can help you create layouts in Design view regardless of how you approach your page layout tables.
Viewing Aids
Graphic designers are used to having certain tools at their disposal when they build their layouts. Rulers, guides, tracing images—most print-based page layout environments have at least some of these features. For those of you who sorely miss having such helpers as you work, Dreamweaver offers rulers, the grid, and tracing images. (Sorry, no ruler guides!)
Rulers
Dreamweaver rulers work similarly to rulers in most graphics programs. They display across the top and down the left side of the Document window; they can be set to display various measurement systems; they can be turned off and on; and they indicate the current cursor position with a dotted line. Figure 10.1 shows the rulers in action.
){kind=small}
Figure
10.1 Dreamweaver rulers and their options.
To configure and show or hide the rulers, use commands in the View > Rulers submenu:
Showing and hiding. The View > Rulers > Show command acts like a toggle, turning the rulers on and off. You can also use the Rulers toggle command in the View Options menu, in the Document toolbar, or right-click (Mac users Ctrl-click) on the ruler itself to access its contextual menu.
Choosing a unit of measurement. From the View > Rulers submenu, choose pixels, inches, or centimeters. You can also right-click (Ctrl-click) on the ruler in the Document window, to access its contextual menu. Pixels (the default) is definitely the most useful choice.
-
Changing and resetting the origin point. The origin is the zero-point, the location on the page where the horizontal and vertical ruler read 0. By default, this is the upper-left corner of the page. To change the origin point, position the cursor over the little square where the left and top rulers meet (see Figure 10.1), and drag out into the document area. To reset the origin back to the top-left corner, choose View > Rulers > Reset Origin, or right-click (Ctrl-click) on the ruler itself to access its contextual menu.
Grid
Dreamweaver might not have moveable rulers you can pull out from the rulers, but it does have a grid. The grid overlays the Design view display with horizontal and vertical rules at fixed intervals, and can be a helpful design aid if your layout is built on those fixed intervals (a column every 100 pixels, for instance). Figure 10.2 shows the grid being used in a document.
){kind=small}
Figure
10.2 The Dreamweaver grid set to its default of 50x50 pixels.
To configure and show or hide the grid, use commands in the View > Grid submenu:
Showing and hiding. The View > Grid > Show Grid command acts like a toggle, turning the grid on and off. You also can use the Grid toggle command in the View Options menu, in the Document toolbar.
Choosing grid size and appearance. The grid can be set to display rules at any fixed interval from 1 pixel on up, and measured in pixels, inches, or centimeters. It can display as solid lines or rows of dots, in any color you choose. To alter these settings, choose View > Grid > Grid Settings. (Okay, a 1-pixel grid is not very useful—but it's nice to know it's possible!)
Snapping to the grid. When creating layouts using Layout View or Layers, or when dragging to resize tables, a snap-to feature can be helpful for accuracy. Toggle snapping on and off by choosing View > Grid > Snap to Grid.
NOTE
The grid starts measuring in the upper-left corner of the document, not necessarily at the zero point but where the page content starts. If you haven't specified page margins for your document (using Modify > Page Properties), the grid will start about 8 pixels in from the top-left corner.
If you want, you can have your layout tables and cells automatically snap to the grid. The snapping behavior can be controlled by changing the grid settings.
To show the grid, choose View > Grid > Show Grid, or select Grid from the Options drop-down menu on the toolbar.
Tracing Images
If you're the kind of designer who creates your layouts first by sketching them with pencil and paper, or building prototypes in a graphics program, and then recreating the effect in Dreamweaver, you might find the Dreamweaver tracing image feature a great help. A tracing image is any GIF, JPEG, or PNG file that you choose, that will appear as a ghosted-back image in Design view—as if you were viewing it through tracing paper. The idea is, you place your layout sketch "behind" your Dreamweaver design and use it as a guide to construct the tables or layers that will create your HTML layout. When you're done, you remove the tracing image, and all is well with the world. Tracing images are configured and set using the commands in the View > Tracing Image submenu, or the Modify > Page Properties dialog box. Figure 10.3 shows a tracing image being used.
)
Figure
10.3 A Dreamweaver document with tracing image in place.
Setting a Tracing Image
To put a tracing image "behind" your Dreamweaver Design view, do this:
-
Create the GIF, JPEG, or PNG file any way you like—by scanning a sketch, saving a Fireworks or Photoshop file, taking a screenshot of a desired layout, and so on.
-
In Dreamweaver, open your document and go to Modify > Page Properties (see Figure 10.4).
-
From the Page Properties dialog box, find the tracing image options and click the Choose button. Browse to select your tracing image file.
-
Still in the Page Properties dialog box, set the image opacity slider to around 30–50% (to create the faded-back, tracing paper effect). Click Apply to see how your tracing image looks, and adjust the opacity more until you like the effect.
-
Click OK to close the Page Properties dialog box. There you go!
)
Figure
10.4 Using Modify > Page Properties to set the tracing image.
TIP
You can also use View > Tracing Image > Load to choose a tracing image, but you can't assign it an opacity value using that method.
To see how Dreamweaver creates the tracing image, go to Code view and examine the code for your <body> tag. You'll see several nonstandard attributes assigned (shown in bold):
<body bgcolor="#FFFFFF"text="#000000 "tracingsrc="images/myLayout.gif" tracingopacity="40">
The browser won't recognize these attributes, and so will ignore them. If you Preview in Browser with a tracing image in position, it won't show. But it will show in Dreamweaver Design view.
NOTE
If your page has a background image assigned, either as part of the <body> tag or in a Cascading Style Sheet, the tracing image won't be visible—it's hidden behind the other image. To see the tracing image, you'll have to temporarily remove your background image.
Adjusting Tracing Image Position
Your tracing image might not be positioned exactly where you need it—by default, it appears slightly offset from the top and left of the Document window.
To adjust the tracing image position manually, do this:
Go to View > Tracing Image > Adjust Position. A dialog box will appear, displaying the current x (horizontal) and y (vertical) coordinates of the image, and allowing you to change these.
You can change the image's position either by entering new values in these fields, or by using your arrow keys to nudge the image one pixel at a time in any direction.
When you're done, click OK!
To adjust the tracing position to match a certain page element (such as a graphic, table or layer), do this:
Select the element you want to align the image with.
Go to View > Tracing Image > Align with Selection.
After you've done your repositioning, check your code, and you'll see that more attributes have been added to the <body> tag (shown in bold):
<body bgcolor="#FFFFFF" text="#000000" tracingsrc="images/myLayout.gif" tracingopacity="40" tracingx="-5" tracingy="150">
TIP
Don't use the tracing image to get pixel-perfect layouts in place—use it to get the overall positioning down, and then remove it. HTML layouts can't always perfectly match layouts created in graphics programs.
Removing a Tracing Image
Eventually, the tracing image will start getting in your way, and you'll want to remove it—either temporarily, by hiding it, or permanently, by removing its code from the <body> tag.
To temporarily hide the tracing image, go to View > Tracing Image > Show, to toggle the command off; or go to Modify > Page Properties, and set the opacity slider to 0%.
To remove the tracing image permanently, go to Modify > Page Properties, and delete it from the Tracing Image input field; or go to Code view and remove the tracing image attributes.