• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Day 3. Advanced HTML and Site Tools > Customizing the Document Design Window

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.

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:

Title— This is the title of the current page.

Background Image— Don't confuse this with the tracing image. The background image is a repeating tiled image that is displayed in the background of the Web page.

Background— Sets a background color for the page. You can either type a standard HTML hexadecimal color code into the appropriate field, or click the color square to pop up the color picker. You'll learn more about the color picker shortly.

Text— Controls the color of the text on the Web page.

Links— Sets the colors of links, active links, and visited links.

Margins— A page's margins are set using the four margin fields. If you want the contents of a page to adjoin the upper-right corner of the browser window, set these to 0. There are four attribute settings because margin widths are set with different attributes in Netscape (width/height) and Internet Explorer (left/top). You'll need to set all four of these fields in order to have full cross-browser compatibility.

Document Encoding— This is the default language for the document.

Tracing Image/Image Transparency— The tracing image and its corresponding transparency setting allow you to pick an image which will be displayed in the background of the document design window while you work.

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.

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.

Figure 3.21. Grids can aid in the layout of HTML elements.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint