Top Ten Dreamweaver Design Tips

Dreamweaver 4 is a powerful tool for building professional Web sites. But with power comes complexity. To help you get the most out of Dreamweaver, here are ten tips to help you work more productively and steer clear of typical problems people encounter when using the program.

Use the Tag Selector.

Dreamweaver's visual-editing mode is so easy to use you may forget that underneath the hood you're still working in HTML. Tags such as the <table> tag for creating tables provide the information a Web browser needs to format your page. By adding attributes to tags, such as defining an image's alt property, or adding a background color to a table cell, you can further refine your designs.

Unfortunately, selecting tags in the program's Design view can sometimes be hit or miss. For example, if you want to select a paragraph of text in order to apply a cascading style sheet, or CSS, style, you could drag to select the text. Unfortunately, this doesn't necessarily guarantee that you'll select the tag. You might just miss one letter (or an empty space) and end up selecting only part of the paragraph.

For precise and rapid tag selection, start using the Tag selector. It's located in the lower left corner of the document window. The Tag selector indicates how tags are nested in the document, based on what you've selected or where the insertion point is (see Figure 1). Clicking on any tag will select it. You can then set properties, add behaviors, or precisely control the application of CSS styles.

Figure 1. The tag selector lets you see how HTML in a page is nested. In this figure, the bold <td> indicates that a table cell is selected.

Related Reading

Dreamweaver 4: The Missing Manual
By David Sawyer McFarland

Display your line breaks.

Normally, Web browsers display extra space between paragraphs. At times, you may want to move text to the next line without introducing this gap. For example, to format an address you'd have each part of the address on its own line, like this:

O'Reilly & Associates
1005 Gravenstein Highway North
Sebastopol, CA 95472

Display your line breaks.

O'Reilly & Associates
101 Morris Street
Sebastopol, CA 95472

HTML's line break tag ( ) is the answer. In Dreamweaver, you can add a line break by typing Shift-Enter. The insertion point jumps to the next line and you can type (or paste) the text you wish to appear there.

Visit web.oreilly.com for a complete list of O'Reilly's books about Web and Internet technologies.

Unfortunately, this tag is invisible and it can be difficult locating tags in Dreamweaver's Design View. This is especially problematic when you cut and paste text from other applications, since Dreamweaver adds tags between paragraphs of pasted text. It's easy to suddenly have an invisible army of rogue tags cluttering your page and introducing line breaks when you don't want them.

Fortunately, while the tag is invisible by default, by tweaking Dreamweaver's preferences you can make all tags appear as tiny gold shields (Dreamweaver's icon for tags that aren't visible on the page). You can then select (and delete) them like any other object. To display linebreaks choose Edit --> Preferences. The Preferences window will open. Next, click on the Invisible Elements option from the Category list and make sure the Line Breaks checkbox is selected. Click OK and now you'll be able to see every linebreak on your page.

Change the default New page.

Whenever you create a new document by choosing the File --> New command, Dreamweaver creates a blank, untitled document with a white background and a minimal set of HTML tags in place. Each new Web page created this way is actually a copy of a default HTML file called Default.html that is stored in the Templates folder located in Dreamweaver's configuration folder. You can open this file within Dreamweaver and edit it however you like. For example, say you want each new page you create to have a background color other than white. Or, more importantly from a Web standards perspective, you want to include a document type declaration at the beginning of each new page. For example this line of code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, indicates that the HTML in the page is HTML 4.01 Transitional (these DOCTYPE declarations are necessary if you wish to validate the HTML in your page).

After changing this Default.html file, every subsequent page you create using the File --> New command will begin life looking just like this default file. (You might consider making a backup of this file before editing it, however, so that you can return to the factory settings if you accidentally make a mess of it.)

David McFarland talks about the most valuable and least understood Dreamweaver features in this oreilly.com interview.

Watch the resize handles on graphics.

When you insert an image into a page, the selected graphic displays three square handles on its right edge, corner, and bottom. In trying to imitate other graphically oriented programs, Dreamweaver lets you grab one of these handles and resize the image. Actually, the graphic remains unchanged, only the Width and Height properties are modified. This results in distortion of the graphic; dragging a handle to make the graphic larger leads to pixelation. Unless you're going for some kind of special effect, this is usually undesirable. If you want to make your graphic a different size it's best to do this in the image-editing program of your choice.

Unfortunately, it's all too easy to accidentally drag one of these handles. For example, trying to grab a small graphic like an icon often resizes the icon. If you do this and change the Width or Height properties to something other than the graphic's original dimensions, the property inspector will display the W and H values in bold. This is your best hint that something's wrong. To return the image's Width and Height properties to their original settings, click the Resize button in the lower right corner of the property inspector.

Always define a local site.

Dreamweaver is an amazing productivity enhancer. It automatically handles many of the small details every Web developer has to deal with. Most significantly, Dreamweaver's site-management tools help maintain the integrity of your pages' links. But only if you follow a basic principle: Always define a local site. Even if you're only building a 5-page site, I always recommend spending the minute or two it takes to define a site. Simply choose the Site --> New Site menu. From the window that appears, give your site a name and select the local root folder. This is the folder you plan on storing your site's Web pages. That's it, just a few simple steps.

Doing this lets you take advantage of Dreamweaver's many site-management features, including templates and libraries, link checking, site reports, and site assets. In addition, it makes sure that a lot of Dreamweaver's behind the scenes automation works the way it is supposed to. This is one step you should never skip.

Use document relative paths.

When creating links between pages in your site, or adding images to your pages, Dreamweaver lets you specify either a document-relative or site root-relative path to the page or the graphic file. Site root-relative paths specify the path to a file based on the site's root level, or top-level, folder. This used to be a common way to link to pages or graphics in a site because the path would always work no matter where the page with the link was saved. This made it easy to move pages to other directories in the site without shattering links. Unfortunately, these types of paths can only be previewed from a Web server; if you use them while building a site, you'll notice that none of your links work and none of the graphics appear when you view your site directly off your hard drive. In addition, if the files in your local site aren't stored at the root level of the Web server, root-relative paths won't work at all.

Because of this, when adding a graphic to a page or linking to another page in your site, always choose "Document" from the "Relative To" menu that appears on the "Select File" window. Fortunately, the main advantage of site-root paths--links don't break when you move pages around your site--is automatically handled by Dreamweaver. When you save a page into a different directory, the program is smart enough to rewrite the document relative links you've already created. After choosing a link type, Dreamweaver remembers your selection and uses it for all future links. If you suddenly find that none of your links work and no images appear when viewing the pages of a site off your hard drive, chances are you accidentally selected "Site Root" at some point, and continued to add links and images with that setting. You'll have to go back and reset the links and re-add the images using a document-relative setting.

Rapidly eliminate font tag formatting.

The HTML tag is on the way out. It was officially deprecated in the HTML 4 standard, meaning that in the near future it's headed the way of the dinosaur. In its place cascading style sheets have risen to meet the formatting challenges of the ever-evolving Web. Unfortunately, you may already have a Web site that's loaded down with the byte-heavy weight of the tag and its numerous properties. Even if you create CSS styles for the HTML tags in your pages, you're still stuck with that old tag. In fact, its properties will override those of a style sheet. Going through every page of your site to remove that tag is a major pain--if you do it by hand.

Dreamweaver's Find and Replace can do the job in quick order. Choose Edit --> Find and Replace to open the Find and Replace window. Then select "Specific Tag" from the "Search For" menu. This amazing option lets you search for tags, and even narrow your search based on the properties of the tag. If you choose "Font" from the next menu, this tells Dreamweaver to search for the tag. Next click on the minus (-) button; you won't need to search for any particular property because you want to find all font tags. Finally, choose "Strip Tag" from the action menu and then click on the "Replace All" button (see Figure 2). To do this to an entire site, choose "Entire Local Site" from the "Search In" menu. You can get even more advanced by using the Find and Replace tool to find specific combinations of font properties and replace that font tag with a span tag to replace font formatting with custom styles.

Figure 2. In this figure, the Find and Replace window is ready to find and remove the tag on every page in the site.

Create your own status menu for Dreamweaver's Design Notes.

The Status pop-up menu in Design Notes is a great feature. With a flick of the mouse, you can assign a status to a page or file, letting others know if a page is finished or is just a rough draft. But the preset status options may not exactly fit your process. Your team may not use the terms alpha or beta; instead, you may have other stages you'd like to add, such as copy edit, to signify that a page is ready to be proofread and tested.

With a little sly hacking, you can change the status categories to suit your needs. The file Design Notes.htm in the Dreamweaver 4 Configuration --> Commands folder, holds the key to this puzzle. Start by making a safety copy of the file. You can always return to it if something goes wrong. Then open this file in a text editor like NotePad or SimpleText, or even within Dreamweaver's Code view. Find line 28 in the file, which looks like this: var STATUS_ITEMS = new Array("","draft","revision1","revision2","revision3","alpha","beta","final", "needs attention");.

The words between the double-quotes are the choices that appear in the Status menu. You can change or delete them as you see fit (if you delete one, be sure to delete the word, both sets of quotation marks, and the preceding comma). Then, after saving changes to the file, quit and restart Dreamweaver, where you'll see your new, improved Status pop-up menu ready for action.

To make sure you and your coworkers see the same choices, give each of them the modified Design Notes.htm file, and advise them to put it in their own Dreamweaver 4 --> Configuration --> Commands folders.

Add to the power of Dreamweaver ... for free.

Dreamweaver is already an amazing Web site production tool. But did you know you can add hundreds of additional features to the program for free? Dreamweaver's open architecture makes it possible to program endless new features for the program using the basic languages of the Web: HTML, JavaScript, and XML. In fact, HTML forms, JavaScript programs, and XML documents constitute much of the program. The objects in the Objects panel, for example, are actually HTML pages stored within Dreamweaver's Configuration folder, and all of Dreamweaver's menus are presented in an XML file.

Because of this, legions of hard-core Dreamweaver fans have written their own extensions for the program. You can find hundreds on a Macromedia-sponsored Web site dedicated to distributing these free add-ons. The Macromedia Exchange is the perfect place to find exciting new commands for working with layers, tables, cascading style sheets, and more.

Meet the engineers.

OK, so this isn't a tip; but it's too fun to pass up. Hidden throughout Dreamweaver are amusing diversions programmed by Dreamweaver engineers: They are so-called easter eggs, a computer-industry term for buried credits screens that appear only when you stumble onto the secret and unusual combination of words, keystrokes, and mouse clicks.

One of these is hidden in the Property inspector. Select an image in the document window. Then Ctrl-double-click (Cmd-double-click on the Mac) the thumbnail of the graphic in the left side of the Property inspector. A picture of one of Dreamweaver's programmers appears, along with his name. Ctrl-double-click (Cmd-double-click on the Mac) the thumbnail repeatedly to cycle through the names and pictures of other members of the Dreamweaver team.

Dave McFarland is the president of Sawyer McFarland Media, a Web development and training company located in the San Francisco Bay Area. In addition, he teaches JavaScript programming, Flash, and Web design at the University of California, Berkeley, the Center for Electronic Art, the Academy of Art College, and Ex'Pressions Center for New Media. He was formerly the Webmaster at UC Berkeley, and at the Berkeley Multimedia Research Center.