- Advanced Navigation
- Advanced Layout and Document Control
- Cascading Style Sheets
- Customizing the Document Design Window
- Forms: A Brief Introduction
- Direct Access to the HTML
- Site-Management Tools
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Customizing the Document Design Window
To better use the advanced layout tools, Macromedia has provided several ways to customize the Dreamweaver MX design window so that you can create a more layout-oriented design experience.
Page Properties and Tracing Images
As you've seen, you can edit the title of your page by using the Properties panel on the appropriate tag within the page heading or directly from within the design window toolbar. Dreamweaver MX also provides another means of accessing common page properties, including the page title, margins, and default link/background colors. To access these attributes for any page, choose Page Properties from the Modify menu. The Page Properties dialog box is shown in Figure 3.19.
){kind=link}
Figure 3.19 The Page Properties dialog box allows you to set a variety of attributes within the head and body sections of the HTML.
As you can see, there are several useful items here:
Although most of these features are simply attributes that you can set by directly editing the <body> and <head> document tags, the tracing image isn't actually a part of the final HTML design—it is simply a graphic that is displayed in the back of the design window.
Tracing Images
If you've ever had to layout a Web page based on an existing piece of art, you know how hard it is to make everything line up exactly as it did in the original artwork. To make life easier, Dreamweaver MX includes the ability to add tracing images to the background of any document. This image floats behind the actual page and can be used to align elements so that the HTML stays true to the original designer's vision.
To add a tracing image to the document window, choose Tracing Image, and then Load from the View window. You will be prompted to select an image file to use. Once chosen, the image will be displayed in your window aligned to the upper-right corner of your HTML. Figure 3.20 shows a Web page with a tracing image turned on.
){kind=link}
Figure 3.20 The tracing image floats behind the Web page and allows the designer to use it as a guide.
You might find that you don't want the tracing image located at the origin point of the HTML. To move the tracing image, you can use Adjust Position option under the View and Tracing Image menus to enter exact pixel coordinates or move the image around using the arrow keys. You can also align an image with an existing object (useful for using a tracing image to layout a table) by selecting the object and choosing Align with Selection from the same menu. At all times, the tracing image can be reset to its original position with the Reset Position option.
You might be thinking to yourself, "Isn't that image going to get in the way of my design process?" The answer is almost certainly, "yes." Luckily, Macromedia has this under control. The Tracing image also has a transparency control that lets you ghost the image so that it can barely be seen on your display. Setting the tracing image to be nearly invisible keeps it from overwhelming the display and interfering with the design process. To set the transparency, choose Page Properties from the Modify menu and use the Image Transparency slider to adjust the image from fully visible (100%) to invisible (0%). To quickly hide the tracing image at any time, just deselect Show from the View, Tracing Image menu.
Grids and Rulers
If you need visual alignment cues, you can also add grid guidelines and rules to the design window. From the View menu, choose Grid and the Edit Grid option. This option lets you create a grid, specifying the spacing of the cells, color, style, and snap to.
Rulers can also be used to help position items. Once again, go to the View menu. Choose Rulers and Show. From the Rulers submenu, you can also adjust the units that the rulers are shown in. If you'd like to change the origin of the ruler, just click and drag from the upper-right corner of the onscreen rulers to wherever on the page you want the 0,0 point to be located. Choose Reset Origin from the View, Rulers menu to reset this point to its original location. Figure 3.21 shows the design window with grid and ruler options active.
){kind=link}
Figure 3.21 Grids can aid in the layout of HTML elements.