Check out the Sample Chapter

Almost as good as thumbing through the book before you buy. Below you'll find the sample chapter from Macromedia Dreamweaver MX Killer Tips. Be sure to check out the the sample chapter from Macromedia Dreamweaver MX 2004 Killer Tips.

Macromedia Dreamweaver MX Killer Tips

Chapter 7: Maximum Acceleration: Dreamweaver Tip Variety Pack

Two web developer guys meet for lunch one Tuesday afternoon. "I need a vacation. Everything lately has been work, work, work...", complains the first guy. The second guy says, "I know the feeling. I can't wait until next month. I'm going to Jamaica for a couple of weeks." The other developer responds, "Hey, that's not fair. You work on as many sites as I do. How can you afford to take the time off?" The second guy, looks down and notices Dreamweaver MX Killer Tips sticking out of his briefcase and quickly pushes the briefcase under the table and—with a very big grin—he then replies, "I must work faster than you do." During lunch, the first guy gripes about typical web development woes while the second guy just smiles and nods.

Hey, it could happen! This chapter is special—well they're all special but this one is different—because this chapter is like a box of chocolates. That's right, you never know what you're going to get. You just might find that perfect tip that you didn't even know you were looking for that frees up so much of your time that you can afford to take that vacation you've been wanting. You never know; stranger things have happened! Send me an email if you need a good travel agent...

BRINGING IN SEPARATE PARAGRAPHS FROM WORD

How many times has this happened to you? You highlight a bunch of paragraphs in Word and copy 'em. Switch to Dreamweaver and click paste. Yikes! All your nicely laid out paragraphs come in as one big block. Truth is, you haven't lost all your formatting—Dreamweaver interprets a single paragraph return as a line-break tag, <br>. Two returns, however, are changed to paragraph tags. So the moral is this: If you're copying multiple paragraphs from your word processing document, make sure your paragraphs are separated by two returns.

Bonus Tip! Change a <br> tag to a surrounding <p> in one move: With Invisible Elements turned on, select the <br> symbol and press Enter (Return)—the line-break is gone and the text is now wrapped in a paragraph tag.

View Screenshot

FOCUS YOUR ATTENTION RIGHT HERE

Here is a simple little JavaScript used to give a specific field focus in a form when the page is loaded so that the user can start filling out the fields right away. Right+click (Ctrl+click) the <body> tag in the Tag Selector in the lower left of the Document window if you're using Design view and choose Edit Tag (if you're in Code view, get ready to modify the <body> tag). Here's the code to add to the <body> tag:

onload="document.theFormName.theFieldName.focus();"

Replace theFormName with the exact name of your form and theFieldName with the exact name of the field in which you want the cursor to be positioned when the page loads. When I say exact, I mean it; make sure the casing is identical.

By the way, if an onload event is already present, you should add only the portion between the quotes and not a second onload attribute. Remember that functions must be separated by a semicolon, so if you put this at the start of an existing onload event you should be just fine.

Go to Top of Page

WATCH OUT FOR KILLER OCTOTHORPES

How many times have you clicked on a link to a popup window and find that when you close the popup, you're back at the top of the page again? Well, you've been attacked by an octothorpe and I bet you didn't even know it! A what-o-thorpe, you ask? Octothorpe comes from the Greek word octo, which means eight. (If you've seen the movie My Big Fat Greek Wedding, you should know that all words come from a Greek word! Joe tells me that the thorpe part comes from James Oglethorpe, Georgia's founder. Should we believe him? The true origin is unkown according to the dictionary, so the world may never know...) Anyway, this is an octothorpe: #. You can call it the number sign, a hash, a pound sign or any other words it may be known as, but I call 'em octothorpes.

Octothorpes are great for some things, but not for creating what is known as a null link. So as you use Dreamweaver's behaviors, keep an eye on the Link field of the Property inspector and make sure that you see javascript:; instead of an octothorpe. If you have a bunch of pages with null links you'd like to fix, you could use Dreamweaver's Find and Replace feature to search for this source code:

<a href="#"

And then replace it with this:

<a href="javascript:;"

This way you'll never subject your site's visitors to killer octothorpes again.

View Screenshot

HEADING THIS WAY

Headings 1 through 6 in HTML are represented by <h1> through <h6> tags. To turn text into a heading, use Ctrl (Command)+1 through 6 to add the respective heading. Ctrl+Shift+P (Command+Shift+P) is used to make a paragraph and Ctrl+0 (Command+0) will remove any heading or paragraph formatting.

Go to Top of Page

RESCALING AN IMAGE IN DREAMWEAVER

Here's one of the coolest tricks I know—if you've ever tried to rescale an image already in your web page, you're gonna love it too. You'll need Fireworks 3 or better to make it work, but this one technique is worth the price of the whole program. I'm sure you know that you can resize an image in Dreamweaver by dragging the lower-right corner, right? (Be sure to hold down the Shift key while dragging to keep the original height-to-width ratio.) Resizing an image this way is purely a visual experience—and not a very good one at that. Dreamweaver is not a graphics editor, but it has a direct line to a great one: Fireworks. After you've resized the image so that it's picture perfect, choose Commands > Optimize Image in Fireworks. If you have the original PNG source file available, use it so that you get the best quality; but if not, a GIF or JPEG will work. When the Optimize Images dialog opens, switch to the File tab and presto! Your Dreamweaver-drawn dimensions are locked and loaded—all you need do is click the Update button and you're done. The Fireworks-in-Dreamweaver engine optimizes the graphic and replaces the original. You'll even find that the <img> tag includes the new width and height values. Schweeeet!

View Screenshot

QUICKLY CLEARING A PAGE

If you're like me, you try a slew of different layout designs before you find the right one. Here's a really fast way to scrap what you're doing and start over when you've got design fever: Just select <body> in the Tag Selector and press Delete. BAM! All the visible content—graphics, text, tables, Flash movies, what have you—is gone. A clean slate awaits your next masterpiece. Now this eradicates only the visible elements of a page; any code in the <head>, such as the <title>, <meta> tags, or JavaScript functions, is untouched. You'll also find the <body> tag itself is unscathed, leaving any attributes or events as pristine as ever.

View Screenshot

Go to Top of Page

FINDING YOUR ASSETS IN A DARK ROOM (WITHOUT A FLASHLIGHT)

I just love dragging images, Flash movies, and library items from the Assets panel and dropping onto the page. Dreamweaver does a yeoman's job of keeping up with all the site elements, but it's not perfect by any means. Occasionally, you'll need to click the Refresh button to make Dreamweaver-imported assets appear. Should you ever feel the urge to copy over assets in some other fashion—like with a file manager—you'll need to take it one step further. Instead of simply clicking the Refresh button, Ctrl+click it (Command+click ) and you'll trigger the Recreate Site List command. True, it might take a moment, but it's the one way to be sure you're seeing all your site assets. Okay, okay, there's another way—choose Recreate Site List from the Assets panel Options menu.

View Screenshot

EVERYBODY, COME ON AND DO DA COMBO, MON!

In a land of HTML forms, where every drop-down list is a what-you-see-is-all-you-get affair, a treat awaits you. A number of the dialog elements sprinkled throughout Dreamweaver are actually combo boxes—drop-down lists where you can type in your own values. In some instances, this feature is a quick way to choose a specific value. For example, if you haven't made the leap to CSS yet and are still using font size attributes, you don't have to go digging deep in the list to super-size a selection—just type 7 in the Size field of the Property inspector for instant gratification. On the flip side, the Link text field is also a combo box. Some folks forget that all those URLs they entered during the current Dreamweaver session are now available in handy-dandy list format, ready to be selected.

View Screenshot

Go to Top of Page

CLOWNS TO THE LEFT OF ME, JOKERS TO THE RIGHT...

Even if your web page isn't filled with images of clowns and assorted jokers, you still can position your text so that it's "stuck in the middle" between two graphics. First, put your two images right next to each other on the page. Then, use the Property inspector to set the Align property of the one on the left to Left and—bet you saw this coming—the Align property for the one on the right to Right. Make sure you're using the Align drop-down list and not the align icons. Dreamweaver will instantly place the two graphics on opposing sides, leaving a very inviting empty space in the middle. Don't waste another second—fill that void with your (or your client's) golden words. This is great for those Greek column layouts you've been dying to do. If you've got Invisible Elements enabled, you might see a symbol representing the anchor points for one or both <img> tags. They're safe to ignore (choose View > Visual Aids > Invisible Elements to hide them if you want), but don't delete them, whatever you do. If you zap 'em, your images will go too.

View Screenshot

ZIPPY FORM ORGANIZATION WITH THE FIELDSET TAG

One of the keys to good design is proximity: Grouping related elements together makes it easier on the eye and the brain, especially when it comes to lengthy forms. The <fieldset> tag is a handy tool to keep in any form designer's palette. Supported by most modern browsers (Internet Explorer 5.0 and later and Netscape Navigator 6.0 and above), the <fieldset> tag groups elements by drawing a thin-lined box around them all and adding a legend in the top-left corner of the box. Address info—such as Street, City, State, Zip—is a likely target for a <fieldset> tag. It's a cool look and easy to do. To group existing form elements, go into Code view and select all the desired form elements. (When I've tried to do this in Design view, I've found Dreamweaver didn't always get all the necessary tags.) Then, from the Forms category of the Insert bar, choose the Fieldset object; you can either click it or drop it on the selection, and a small dialog prompts you for the fieldset legend. Both a <fieldset> and a <legend> tag are inserted, like this:

<fieldset>
  <legend>address</legend>
    <label>street <input type="text" name="street"></label>
    <label>city <input type="text" name="city"></label>
    <label>state <input type="text" name="state"></label>
    <label>zip <input type="text" name="zip"></label>
</fieldset>

The legend appears in Design view, but the box outline doesn't. Browser support does vary so be sure to preview in your favorite browser to see the results. Truly zippy.

View Screenshot

Go to Top of Page

WHERE, OH, WHERE HAVE MY WINDOW SIZES GONE?

If the key to being a successful real estate developer is location, location, location; for website developers, it's testing, testing, testing. One of the wide-ranging variances that designers face are different browser window sizes; you really don't know whether your audience is looking at your site with an window set at 640x480, 800x600, 1024x768 or something higher. Dreamweaver makes it easy to view your page in different dimensions by choosing the Window Size pop-up on the status bar. It's a pretty nifty feature—sometimes, however, you'll try to use it and none of the options in the list are active. In Windows, Dreamweaver automatically disables the feature whenever your Document window is maximized. To restore the options, back off the maximized state by selecting the Restore Down button on Windows systems.

View Screenshot

STAYING IN GOOD FORM

Naming conventions are extremely helpful in avoiding common form-processing errors. The trick is to create unique labels for form elements that are instantly identifiable to the developer. My technique is to combine the type of form element with its purpose. For example, I would call a text field for accepting the name of a country countryText—whereas a list element for the same purpose would be countryList. I use mixed case (also known as intercapping) to avoid spaces—a definite no-no in web naming—but this helps keep it legible.

View Screenshot

Go to Top of Page

PLAYING NICE WITH THE INSERT BAR

Looking for a little more flexibility in your Dreamweaver workspace? By default, the Insert bar (previously known as the Objects panel in earlier versions of Dreamweaver), is all by its lonesome. But it doesn't have to remain unattached. When you're working in the Dreamweaver MX workspace or HomeSite/Coder Style workspace, you can drag it down to the extended Property inspector by the gripper (those tiny little dots to the left of the Panel group name) and free up the top part of the screen. Or you can swing the other way and bring the Property inspector up to the Insert bar's neck of the woods. You cannot, however, dock the Insert bar (or the Property inspector for that matter) with any of the other Panel groups that are on the side of the workspace. On the other hand, the Insert bar and Property inspector can be docked with a Panel group that is floating footloose and fancyfree.

View Screenshot

"A" IS FOR ACCESSIBLE APPLETS

If you're into Java applets, you're probably aware that you can enter a URL or path to a graphic as the Alt attribute and the image will be displayed for users with Java disabled. Dreamweaver even provides a Browse for File icon next to the Alt field on the Property inspector to aid your picture pickin'. But Section 508 guidelines dictate that every non-text element must have a text equivalent—so how do you make both alternative text and the image available? After you've selected an alternate image, Dreamweaver inserts an <img> tag within the <applet> tag. In Code view, add an alt attribute, like alt="Wowie Zowie Java Applet", to the <img> tag. Now, you've got the best of all worlds.

View Screenshot

Go to Top of Page

MULTIPLYING RADIO BUTTONS

The new Radio Group object in the Forms category of the Insert bar is a good all-in-one interface for making sure that all your radio buttons are properly named. There's another technique, however, honed from the ol' days when we didn't have such new-fangled doo-dads. It starts by creating a single radio button and giving it whatever group name you desire. Next, copy and paste as many copies of the button as you need; a really fast way to do this is to Ctrl+drag (Opt+drag) out the copies. The radio group name will be the same for all your copies. All you have to do is make sure the values are unique and select which one of the radio buttons, if any, is checked.

View Screenshot

FANCY-SCHMANCY FORM BUTTONS

Looking to spice up a boring form? A common element to all forms is the Submit button—and its standard appearance is definitely commonplace. You can replace the ordinary gray button with a graphic button in one of two ways. If your form has only a Submit button, with no reset or other type of button, you can use an image field. You can add an input image using the Image Field object found in the Forms category of the Insert bar. When users select an image field (that's inside a form), the form is automatically submitted. There is a drawback to using image fields—you can't use them for other purposes, like resetting a form. The second method uses JavaScript. In this technique, you bring in a regular image to act as your Submit button and give it a link like this: javascript:document.form1 .submit(), assuming that your form is named form1. If you want to use another graphic to clear a form, just change the link to javascript:document.form1.reset(). Not only do these types of buttons display the pointing hand icon, but you could also include rollover images if you like.

View Screenshot

Go to Top of Page

LABEL-LICIOUS

The new accessibility options for form elements, which can be enabled in Preferences, include a rather cool feature—labels. Supported in the latest browsers, the <label> tag makes it easy to associate any form element with specific text, which appears normally but can also be noted by screen readers. The Input Tag Accessibility Attributes dialog gives you two possible routes to take when creating labels. Use the Wrap with Label Tag when your form element and label are side-by-side; this gives you code like this:

<label>First Name<input type="text" name="firstnameText"></label>

If you prefer to separate the label and form element into separate columns, use the Attach Label Tag Using 'for' Attribute option. This choice results in code like this:

<label for="firstnameText">First Name</label>
< input type="text" name="firstnameText" id="firstnameText">

View Screenshot

BUTTON, BUTTON, WHO'S GOT THE BUTTON?

Form buttons aren't just for submitting or resetting forms—they can be pressed into a multitude of services. If you need an instantly recognizable button to trigger any function, the form button is ideal; you don't even need to put it within a <form> tag. The easiest way to assign a function directly to a button is to use the Quick Tag Editor. Select the button and press Ctrl+T (Command+T) to display the <input> tag. Tab to the end of the tag and enter onClick="doMyFunction()" where doMyFunction() is the name of...well, your custom JavaScript function. For simple JavaScript commands like alerts, you can enter the JavaScript directly, like this:

onClick="javascript:alert('Call 555-1234 for help.')"

View Screenshot

Go to Top of Page

ANCHORS AWAY

Let your visitors jump to the right spot on your web page by using what is known as a named anchor. You can drop an anchor on your page using the Named Anchor object found in the Common Category of the Insert bar. Give the anchor a name that is alphanumeric—lowercase, no spaces, and not starting with a number. As long as Invisible Elements are enabled (View > Visual Aids > Invisible Elements should be checked), you will see a little anchor icon on your page. You can click and drag the icon to wherever you want in the document. You can save yourself not only time, but typos too, if you use the point-to-file method to link to your named anchors. To manually link to a named anchor, add an octothorpe to the end of the filename plus the name you gave the anchor. For example:

<a href="default.asp#backToTop">:: Back To Top ::</a>

View Screenshot

BYE, BYE HELPER TEXT

Sometimes it is necessary to have a form field already filled out so users understand what they are supposed to enter. The only problem with this method is that it means the users have to delete the pre-filled entry themselves, which can be annoying—especially if there are many fields to clear. You can make it easier by clearing the text for them with some easy JavaScript. To clear an <input> tag's value, add the following:

onfocus="this.value=''"

You wouldn't want to clear the form every time the user clicks inside it because that could really get annoying. Let's clear the field only if the default value specified by the value attribute of the <input> tag is present, by using this code instead:

onfocus="if(this.value==this.defaultValue)this.value=''"

A great way to add this code is by first clicking on the field in Design view to select it, and then adding the value to the onFocus attribute in the Tag inspector.

View Screenshot

Go to Top of Page

THAT'S WHAT IT'S ALL ABOUT

A clear subject line in an email can be very helpful to the recipient, but often the sender isn't specific enough. There's no guarantee that the user won't modify the subject line you create for them, but it doesn't hurt to try! Use the Email Link object (found in the Common category of the Insert bar) and in the E-mail field, enter the following:

you@yourwebsite.com?subject=
The%20Subject%20Here

Spaces in the subject must be encoded with %20 and any other special characters must be encoded as well. You can make use of additional attributes and values, such as cc (Carbon copy), bcc (Blind Carbon Copy), and body (the message) by stringing them together using an ampersand as in the following code (which should appear all on the same line in Code view):

angela@dwkillertips.com?subject=Dreamweaver%20MX%20Killer%20Tips&cc=
joe@dwkillertips.com&bcc=linda.bump@newriders.com&body=I really love
this book!

View Screenshot

JAVASCRIPT REQUIRED

You never know when users have fiddled with their browser settings and decided to disable JavaScript. The <noscript> tag will let you present those users with a special message only for them. Switch to the Script category of the Insert bar and then click in the body of the document where you want the message to display—near the top is usually a good spot so that it is seen the moment the page is loaded. Click the noscript icon—the one in the middle—and the Tag Editor dialog will appear. If you've never used the <noscript> tag, you may want to click Tag Info in the lower right of the dialog to display a description and example of the <noscript> tag. Enter your message in the text area and if you'd like, switch to the Style Sheet/Accessibility category on the left, fill out the values on the right, and then click OK.

View Screenshot

Go to Top of Page

TRANSFERING SITES

Do you have a client or co-worker using Dreamweaver? You can save them the time of defining a site by exporting your site definition for them to import. This very method is how you'll transfer sites between your own computers. Select Site > Edit Sites and then click the site you want to export. Click the Export button and continue with the export—I'm sure you can figure it out. Do the same for each site definition—it is good to have a backup of all site definitions, just in case. In fact, set this book down—but keep it open of course—and export all of your defined sites right now. It is a known issue that without rhyme or reason, the site definitions may be lost completely.

It is important to realize that the .ste files store all the info in the Site Definition dialog but it does not back up the files on your site. You'll need to do that manually. If you opted to include the password in the .ste, be aware that though it is encrypted it is conceivable that it can be deciphered. Give the .ste fiels to your client or co-worker so that they can use the Import button on the Edit Sites dialog to import the site definition.

View Screenshot

NO MORE BROKEN LINKS

You are not only able to find broken links, but you can also find orphaned files—those are files not used within the site at all. While at least one document in your site is open, select Window > Results > Link Checker or use the keyboard shortcut Ctrl+Shift+F9 (Command+Shift+F9) and then click the green arrow icon on the left to select Check Links for Entire Site or one of the other two choices. When the command is finished, if any links are broken, they'll be listed in the panel. Click the filename in the Broken Links column and you can edit the link or browse to the file. Dreamweaver will even ask whether you'd like to update any other broken references to the same file. After those bad links are fixed, they are removed from the list. In the top left of the panel, you can choose to show external and orphaned files. No matter what you're displaying, double-clicking a file listed on the left in the panel will open it in Dreamweaver for editing.

View Screenshot

Go to Top of Page

REUSABLE JAVASCRIPT

Whenever you have JavaScript code that is common to more than one page, you should externalize the code to its own file and link it to the document(s) that need it. A blank file with the script added to it minus the <script> tags and saved with the .js file extension is all you need. When it comes time to link the external JavaScript file to a document, go to the Scripts category of the Assets panel. Clicking the filename will reveal the file's code inside the preview area. You can either drag the file by its name into the document or click the Insert icon in the lower left of the Assets panel. The <script> tag is added to the document with the proper src attribute that points to the JavaScript file. You should add a type attribute to the <script> tag if you want to be sure your page uses valid (X)HTML.

View Screenshot

VIEW AS ROOT

A site map can get rather large and difficult to view. When this happens, you'll know just what to do. You can right-click (Ctrl+click) any other file in the Site Map—as long as it resides locally—and choose View As Root. After doing so, you'll notice that the Site Navigation display has added an arrow followed by a filename for every file in the path to the file being viewed as the root. Clicking any of the files listed in the Site Navigation crumb trail will update the site map to use that file as its root. If you haven't set a home page for your site or if you need to change the current one, you can right-click (Ctrl+Click) a file in the Local Files section of the Site panel and choose Set as Home Page from the context menu.

View Screenshot

Go to Top of Page

INITIALLY SELECTED VALUE

After inserting a List/Menu object, you can add the possible values for the form element by clicking the List Values button in the Property inspector. After you've added all the item's labels and values, click OK. You'll probably want to choose one of the values to be pre-selected. You can do this by clicking the label in the Initially Selected field in the lower portion of the Property inspector. One day I decided to remove the Initially Selected value so that nothing was shown in the list by default. To my surprise, when I clicked in the Initially Selected field of the Property inspector, it seemed impossible. I thought I was stuck with my choice unless I went into Code view to do the change manually. Now I know that if I Ctrl+click (Command+click) the selected value, it becomes unselected.

View Screenshot

REQUIRING INPUT

Making sure that a user has completed a form correctly is made easy with the Check Form behavior. The Check Form behavior will let you specify which fields are required and you can choose the type of user input, such as email address, a number, or within a range of numbers. After you've established a form with one or more text fields or text areas, use the Tag Selector to select the form tag. Now click the Add (+) button on the Behaviors panel and choose Validate Form near the bottom of the drop-down list. When the dialog appears, select the form field in the list and choose the appropriate values for the remaining options. You may do this for each of the fields listed in the dialog.

By applying the behavior to the <form> tag, the validation occurs at the time the user submits the form. If the requirements are met the form is submitted, otherwise the user will get a JavaScript alert letting them know what fields need to be corrected. If you want the validation to take place while the user is filling out the form and proceeds to the next field apply the behavior to each text field element rather than to the <form> tag.

View Screenshot

Go to Top of Page