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.
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...
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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">
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.')"
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>
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.
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!
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.
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.
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.
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.
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.
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.
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.