Improve Your Design Skills - Dreamweaver

Mastering the tools that you work with on a day-to-day basis is no easy feat. In fact, it takes years to become so adept with tools that you barely even need to think about how to create a desired effect. But it's this knowledge that's going to give you more time to be more creative on projects; more time to brainstorm, sketch up ideas and bring them to life. Without a true knowledge of the industry's leading software tools, your creativity is likely to be stifled, and your productivity lessened. Adobe Creative Suite is the de facto standard in the design industry.

Whether you work in print, web or motion, the tools in Adobe CS are essential to your output. And so we're bringing you 112 invaluable tips for working in Photoshop, Illustrator, Flash, InDesign, Dreamweaver, Fireworks, After Effects, Premiere and Encore.

So, whether you work in CS2, CS3 or CS4, you'll find snippets of advice that will help you to work faster, more efficiently and, ultimately, improve your design skills (see our Dreamweaver CS6 review for the last edition of the boxed software).

Anthony Zinni on Dreamweaver

01: Change the Code View font
After staring at code for hours, your eyes will thank you for switching your font in Code View to a monospace font with increased legibility. This is especially true in the new Dreamweaver CS4 for Mac, which defaults to Monaco at a miniscule screen resolution of 7pt.

02: Collapse code between elements
Collapsing code around items you are not editing can simplify your code window and make it easier to find important elements. Simply highlight the code you wish to temporarily hide and then click one of the arrows next to the line numbers in the gutter to hide it.

03: Leave Design View behind
It might be convenient and fast, but viewing your code in Design View will only give you an unrealistic representation of the final product. Instead, open each of the different browsers and periodically check your code in them all. This will save you time in the long run.

04: Enable Split Code view
When working on a large CSS file with general styles at the top and more specific ones at the bottom, it is helpful to use the Split Code view found by selecting View>Split Code. This enables you to edit CSS properties in different parts of the file without excessive scrolling.

05: Configure Dreamweaver sites
Setting up this feature for each of your projects enables you to manage files from within Dreamweaver and quickly make global changes across an entire site.

06: Utilise the Files panel
Once you have configured your site, Dreamweaver will enable you to FTP files to and from your server without launching another program. You can even automatically upload after you save a file, saving even more time.

07: Get advanced with Find & Replace
Dreamweaver has one of the best Find & Replace tools found in web design programs, which can be used to make changes across an entire website. Its ability to specifically define a search also means less worrying about breaking your code with improper replaces.

08: Quick colours in the Assets window
When your site is properly defined, Dreamweaver will search all the files and find any defined colours, presenting them in a palette similar to that in InDesign. This saves you the trouble of searching back through code for # values.

09: Create a snippet library
Snippets enable you to save pieces of frequently used code that can be quickly inserted into your document with a click.

10: CS4 Star tip The JavaScript Extractor
This new CS4 feature saves a lot of time by pulling legacy JavaScript out of the page and placing it into an external file, separating it from the structure of the page and making it unobtrusive.

11: Create your own CSS reset
CSS frameworks and reset files can save a lot of time during development, but usually you need to change them considerably to meet your needs. During your next project, optimise one to fit your workflow and make it a snippet. This will enable you to quickly add it to future projects.

12: Put a table of contents in your CSS
Add numbered section title comments in your CSS file and place a table of contents for them at the top of the file. This will enable you to quickly do a Ctrl/Cmd+F and jump directly to that section of the CSS file.

13: Update links when moving files>Never
When working on anything other than basic static websites, this feature is of little use. Setting the 'Update links when moving files' preference to 'Never' will save you from accidentally breaking links.

14: Checking In/Out files
This feature can help small teams working together on websites avoid multiple people working on the same file at the same time, and avoids the complexity of versioning software.

15: Turn on the Visual History
This feature enables you to see the history of your actions in a format similar to that in Photoshop, enabling you to quickly undo mistakes or revert to an earlier state.

16: Code Navigator
This new feature of Dreamweaver CS4 enables you to switch to Design View and Ctrl+click/Cmd+Option+click an item to have a window with its associated code appear. Great for that stubborn bit of code that, for some reason, you just can't find.

Anthony Zinni
Anthony is an art director and partner at AssociaDirect, a design firm focused on delivering intelligent design solutions to associations and non-profit organisations. In his spare time, Anthony likes to write about graphic design and running a successful agency on his blog.
www.associadirect.com
www.positivespaceblog.com