Helpful text fields
Complex form may require a helping hand. You can give more information to the user by adding an initial value to the form text field like "Enter desired job position here." The problem here is that users have to clear the entry before typing their own text. With a little JavaScript, you can automatically clear the field when they click on it - just add the following code to the <input> tag:
onfocus="if(this.value==
this.defaultValue)this.value=''"
In addition to clearing the text field, this code has the advantage of only clearing it once to remove the default value.
Quick Text Deletion
When you need to delete some text or code you probably press and hold the Backspace key or the Delete key depending on if you need to remove code from the left or the right of the cursor's current position. Sometimes you may even hold the key down for what seems like an eternity before you've removed all of the code. You can speed this process up significantly by holding down the Ctrl (Command) key while pressing Delete (to remove a word to the right of the cursor) or Backspace (to remove a word to the left of the cursor).
Tag Switching
Every now and then there comes a time when you need to change a tag to an entirely different tag. Let's say you have a <p> tag that you need to change to a <div> tag. Right-click (Ctrl+Click) the tag in the tag selector and choose Edit Tag. All you have to do is change the opening tag and give focus back to the document. You'll see that Dreamweaver has updated the code, changing the closing tag to match the value of the opening tag you typed.
Saving and tranfering site details
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 > Manage Sites, and then click the site you want to export. Click the Export button and continue with the export. While you're at it, do the same for each site definition: it is good to have a backup of all site definitions, just in case. Give the .ste files to your client or co-worker so that they can use the Import button on the Edit Sites dialog box to import the site definition. If you opted to include the password in the .ste file, be aware that although it is encrypted it is conceivable that it can be deciphered.
Quick Editable Regions
When building a template from scratch, you can quickly add editable regions without having to select any existing content - a handy trick 'cause sometimes the content doesn't exist yet. Just position the cursor where you'd like the editable region to appear and choose Insert > Template Objects > Editable Region. If you're feeling dexterous, choose Ctrl+Alt+V (Command+Option+V).
Let some elements float
Web page layouts are, by nature, fairly geometric and boxy. Although it's normally a good idea to align all of your elements to a grid, your page can look too rigid if you follow this rule to the letter. To add visual interest, have some fun with only the most important element on the page. Allow an important element to break the rules a little by falling outside of the grid. This also helps it stand out from the rest. Look at how the design shown in this illustration cuts across two columns of the layout.
Use a grid system
To help you lay out your Web page, set up a grid that you can use to align graphics, text, and HTML elements. A grid can be anything you like - a three-column layout, two horizontal sections, or a page broken up into multiple sections. Generally, your content will look better if it is left-aligned within each "cell" of your grid system. Centering large blocks of text and graphics gives an amateur appearance.
Use open space around elements
By leaving large areas of white or light-colored space around your design elements, the physiological effect is an open-air, comfortable feeling. A good goal is to leave at least 25 percent of the page clear of all graphics. Another tip is to leave larger chunks of white space around the most important area of the page, making it stand out like an island. Apple's Web site at www.apple.com is famous for its extensive use of white space.
Of course, the same principles apply when designing Web sites on a black or dark-colored background, but the feeling that a dark background conveys is somewhat different. A lot of space around objects on a dark background creates a sense of drama, excitement. Apple again is an excellent example - see Apple's pages advertising the Nano and iPod.
Remember - location, location, location!
Always place interactive elements like buttons and links in the same relative location on each page. For example, create a standard navigation bar and find a happy home for it on the page - and leave it there. After you "train" the user on how to get around, you don't want to make them search again for navigation.
Keep the same graphic style
Always draw interactive elements the same way. If they look like icons on one page and buttons on the next, the visual change throws people off - even if the elements are located consistently.
Group similar elements on the page
Not all interface elements are created equal - some links take you to the main sections of the Web site, whereas others take you to resource sections, such as "Contact Us" areas or policy statements. Some interactive elements are tools, such as search fields. In your Web page layout, group similar interface elements together on the page and give them a similar graphic treatment. For example, don't mix a Privacy Policy link in with the main navigation set. Instead, set it off in its own area with its own look, along with similar links.
Feature Tour
