Linking from Templates
Templates are a great way to achieve a consistent look-and-feel across your store. So, what's the number-one problem folks have with templates? Links. When a document is derived from the template, Dreamweaver automatically adjusts the links so that they point to the proper file. The best way to ensure that you are assigning the correct links in a template is to always use the Browse for File or Point to File options found on the Property inspector next to the Link field. If you're linking to a file that doesn't exist yet, use Browse for File to link to another file in the same folder and change the file's name by hand.
Date Stamping Documents
Looking for a simple date stamp? Use Dreamweaver's Date object from the Insert bar's Common category. This handy little object can update the page with the current date - and time, if you want -- in a slew of formats. you're offered an automatic update option, that inserts the current info whenever you save the file. If you're working in Code view, you can identify the inserted date comment tags by the #BeginDate and #EndDate before and after the date, respectively. Any CSS formatting other than the date, or additional text (such as Last Modified On:) should not be added between these tags or you risk breaking the functionality.
Styling With Library Items
If you add CSS styles to your Library items, they can automatically appear correctly formatted when added to the page. The key is to make sure that the classes or other selectors applied to your Library item elements are included in your style sheet. Likewise, you want to be sure to define CSS rules for all the HTML tags used in the Library items. Create the Library item from a page where it is correctly styled to be absolutely sure it will work perfectly.
Snippets - It's a Wrap!
Here's a tip toward crafting more flexible snippets, faster. Whenever you choose New Snippet from the Snippets panel, enter all your snippets in Wrap mode, and not Block mode, and it'll still work as promised. You can put all the code in the Insert before section of the Snippet dialog box without fear - Dreamweaver will add it as one piece. Even better, if you've got a code snippet that could wrap around another element or be placed as one block, split it up into the Insert before and Insert after sections: Dreamweaver will only divide the block if you insert it when some code, text or other page element is selected. It's the best of both snippet worlds!
The Code Clean Up Crew
Most designers I know are just as particular about the way their code looks as they are about the way their page looks. Dreamweaver offers a tremendous degree of control toward shaping your code just the way you like it. The basic option, Apply Source Formatting, is found under the Command menu and reformats all the code in your page according to your Preference settings. There are, however, times when you don't want to reformat the entire page but rather just a section. For these situations, highlight the unsightly code and choose Commands > Apply Source Formatting to Selection. Your code will be ship-shape in no time.
Solid State Table Cells
Getting your table columns to the correct visually pleasing width - without messing up the other meticulously sized columns- can be a time consuming effort. When you need to adjust the width of one column without resizing the others, Shift-drag the cell border, instead of the standard drag-and-drop. Your column expands as needed while the others are held rock steady; the table itself also expands to handle the increase width.
Maximizing your space
One way to provide maximum functionality in a minimal amount of space is to design collapsible content and navigational pods. As shown in the example at left, and throughout the WebAssist site, collapsible pods help keep your design clean and easy to use while enhancing functionality and content.
Dynamic interaction design
When building your wireframes, remember that you are not limited to a static presentation of text and graphics. Many technologies from Flash animation to DHTML help you maximize your page space and present content in more interesting and interactive ways.
Legible text on wireframes?
Because you're sharing wireframes with clients and team members alike, I indicate all navigational elements and headlines for major content sections with readable text to orient them. All other copy components can be indicated with greek (unreadable) text that reflects their allocated character count (the number of letters, punctuation, and spaces) so you get a sense of actual text block size.
Lorem ipsum generators
You can search the Web for "lorem ipsum generator" to find sites that generate paragraphs of greek text and even specific character counts that you can copy and paste right into your wireframes.
Set client expectations
Be clear with clients and team members alike that the readable text is for communication purposes only and that final copy comes from the writers in due time. I've found placeholder text on high-profile Web sites upon launch because the developers simply copied what they saw on the wireframes and no one caught it!
Designing below the fold
Give visual clues to let users know more stuff is below the fold by either purposefully showing headlines or the tops of images that lead to more stuff below. Users don't mind scrolling, just as long as the page doesn't go on forever. A good rule is to limit the total page height to twice the initial viewable height (so 1200 pixels for a 800 wide x 600 tall page).
Provide global navigation
The best way to reduce the number of clicks is to provide the same set of navigation links on each page of the site. This strategy, called global navigation, enables people to quickly navigate from one main section to the next without needing to retrace any steps by clicking the dreaded browser Back button.