Dreamweaver MX 2004 - power tips
Dreamweaver is the most trusted application for Web development - and it's filled with hidden power. Here's some of our favourite tips for unlocking Dreamweaver's secrets.
25 August 2004
This isn't a substitute for attending one of our Dreamweaver courses, but we thought that we'd like to share some of our favourite Dreamweaver and HTML productivity tips with you. Enjoy!
Maximise your workspace
All of those panels in Dreamweaver are great (and essential) but they can get in the way some times. A quick way to turn them on and off is to press F4, leaving you with just your maximised editing windows.
Contextual menus
Most applications support the right-click function to display contextual menus when clicking on an object. Dreamweaver supports them better than most. Get into right-clicking on page elements - you'll find you can apply most changes and updates from the context menu.
Use the tag selector
Even if you design visually, without touching the underlying HTML code, you should learn to use and love the tag selector. The tag selector is at the bottom of the active editing window, and shows you, you guessed it, the HTML tags relating to your document. When you select an item in the editing windows using your mouse, Dreamweaver doesn't always get the start and end of the selection right, so you can end up with unpredictable results. If you select an item using the tag inspector, selecting (for example) <a> or perhaps <table> then the selection is totally precise. And, an added bonus - it's a great way to learn more about HTML.
Define a local site - always
Although Dreamweaver will let you create and edit individual pages, it's always best to define a local site. It only takes a moment and gives you access that you wouldn't otherwise have to many Dreamweaver features - many site-management, templates, libraries, link checking, site reports, and site assets. And, without defining a local site, much of Dreamweaver's background productivity automation doesn't work without it.
The order of link style classes
Many people struggle with link formatting that doesn't quite work - perhaps after one click, the hover doesn't work. The answer is often simple - that the pseudoclasses are written in the CSS file in the wrong order. They should always be 'link', 'visited', 'hover' then 'active'.
Preview your style sheets first
When you've got a few style sheets and you're not sure which one to attach, you can preview its effects first, without making a change. Click 'attach style sheet' from the CSS styles panel, browse to a CSS file name and then click 'preview' instead of OK.
Spam e-mail blocker
The main way that an e-mail address ends up on a spam list is because a 'spider' has crawled your site and harvested the e-mail addresses in the HTML. Well, you can hide those e-mail addresses by encrypting the characters as HTML entities rather than plain text. The HTML characters display fine in a browser, but can't be harvested by spambots. Doing this manually is a pain, but if you visit the Dreamweaver Exchange, you can download 'Mail Spam Blocker' which does this automatically - but be warned, if you use the 'clean up HTML/XHTML' command, Dreamweaver converts the encoded HTML items back to text.
Browser checking
Checking a Web site for browser compatibility and different screen sizes is essential. You can use Microsoft's Virtual PC to install every browser type on Windows and Linux and this provides a good testing platform. Or, you can go to www.browsercam.com and sign-up for their service - which lets you remote test Web pages on Windows, Linux and Mac under almost every configuration you can think of. Another useful tool is 'Sizer' which lets you resize any browser window to a specific size with one click - you can get this from www.brianapps.net/sizer.html - and it's free! Another useful option is to add a link within pages that you're developing to resize them with a click. Type in the text for link and add the link URL as: javascript:resizeTo(800,600). Neat. Finally, get hold of a copy of the latest version of Opera - it contains lots of useful tools for developers, like a page zoom (about time!) and an alt-text checker.
CSS differences
The difference between the CSS box model in Internet Explorer and other browsers can be frustrating - especially for earlier versions. Essentially, in early versions of IE, the box model's maths don't work - and even IE 6 adds three pixels of padding to DIVs which are butted up together, whereas other (properly compliant) browsers don't. The answer: simple. You move some IE-specific code to different style sheets and add links such as the following to your Web pages:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="css/iespecific.css"
/>
<![endif]-->
All the other browsers ignore this, but IE will act on it.
Keep your code window open
Even if you use the GUI to create Web pages, it's more than useful to keep the code window open, to see what Dreamweaver's up to. Although Dreamweaver writes reasonably good code, it can make mistakes - which are easily sorted if you keep a careful eye on the code window.
Reducing the complexity of nested tables
Many people use nested tables to create complex designs - but they can get out of hand. Dreamweaver can come to the rescue and unnest tables with one click - just select the table and click on the 'remove nesting' button on the properties bar.
Go to a specific line of code
When you're validating a page which has errors reported at a specific line, scrolling to the line is a pain. Well, click your cursor in the code window and press CONTROL-G instead - and then type your line number into the pop-up dialogue box that appears.
Use design notes
When you're editing a big site, either on your own or as a team, it's hard to keep track of outstanding actions. Dreamweaver' design notes allow you to add notes to pages which pop up automatically when the file is opened in Dreamweaver. Just go to 'file, design notes'. It even has a neat little button to quickly add today's date to the note. And, if you're scared that you'll lose track of your design notes, just go to 'site, reports' and check the 'design notes' box and Dreamweaver will display all the design notes in your site.
Watch that tables to layers command
For people moving from tables-based layouts to layers-based layouts the 'convert tables to layers' command seems pretty handy. Try it - it works. But just look at how many layers it can create - maybe four times the amount you actually need. The answer? Code layers by hand.
Get rid of the Internet Explorer toolbar
Internet Explorer 6 has a handy feature - hover over an image and it gives you a toolbar to save, print and e-mail the image. But in doing so, it robs the browser of the alt text which should pop up instead. What's more - it doesn't appear on all sized images. Best to get rid of it! Just enter and IE won't display the image toolbar.
Check that you've titled your documents
Type the words 'untitled document' into Google and guess what - there are millions of pages for which people have forgotten to give a title. Well, everyone's human. Use Dreamweaver to check for this error sitewide: choose 'site, reports' and then check 'untitled documents'. Dreamweaver returns a full list which you can easily edit. And while you're at it, you can check for empty alt-text tags too.
The power of Fireworks - within Dreamweaver
Dreamweaver MX 2004 includes tools to edit and optimise images - without leaving Dreamweaver. Click on an image and you'll see them in the properties bar. You can optimise an image to a specific file size, resize its dimensions, change the brightness and contrast, resample it, or apply sharpening - or even press the Fireworks button to open the image directly for editing. All real time-savers.
Hide that layout grid
Using a layout grid is useful when designing a site, but it can get in the way visually. So use the keyboard shortcut COLTROL-ALT-G to show/hide your grid.
