Tips for Using Dreamweaver for Web Design

Tips for Using Dreamweaver for Web Design

Adobe Dreamweaver is  nearly 20 years old. This proprietary web development software was initially created in 1997 by Macromedia. In 2005, Adobe Systems acquired it and has maintained it ever since. It’s a popular choice of web design for experienced designers as well as beginners who have just completed coding bootcamp training.

One way Dreamweaver has been distinguished over the years is its ability to continually innovate to keep apace with modern trends in code and design. It can be called a lot of things, but never let it be said that Dreamweaver is outdated.

Whether you are simply experimenting around with the coding, or want to create a nice website, here are some tips to get you started:

Create a style sheet –

If you already don’t know how to create a style sheet in Dreamweaver, it’s quite simple: Click on Windows / CSS styles, and then select the “+” icon to create a new style. Enter a name for the style sheet and then choose “Make Custom Style”. Confirm. You can repeat these same steps to create additional styles for links, titles, subtitles, and so forth.

Move the code panel around –

If you don’t like the Code and Split view, go to Window > Code Inspector and you will find a free-range option. You can then move and dock the standard panel in a more convenient spot, whether it’s along the side or bottom of the document window.

Modify or experiment with an existing layout –

Dreamweaver CS6 offers two HTML5 CSS layouts and 16 standard HTML4 layouts. You can get some good practice by modifying pre-existing layouts. You might find it useful to disable CSS styling in the Design View screen. Just select Choose View / Style Rendering / Display Styles and uncheck the option (it’s usually turned on by default).

Filter fonts –

In the old days, Dreamweaver only had so many fonts to choose from. It was all the basic fonts that have been around since the beginning of the internet. Now, you can get plenty of attractive web fonts for free, thanks to Creative Cloud access. A Dreamweaver user has direct access to literally hundreds of neat fonts in all styles imaginable. No matter what kind of look you are trying to achieve, there is the perfect font family for it. Assign a font family property to a selector (any will do) in the CSS Designer panel. A list of entries will show up. Choose the “Manage Fonts” option.

Check broken links –

If you already have a site built, or at least part of a site, it’s essential that you test for broken links. You never know when you might have made an error. Go to the site map, right click on any file, and then select “check links”. You get the option to either check links within the selected folder or file or the entire site. Fix dead links by using the folder icon to select the correct files.

Analyze code quickly –

It might seem like a daunting task to look over a bunch of coding, but it doesn’t have to be. You can spotlight specific code by choosing the Enable Code highlighting option under the Technology Preview section. Once enabled, double-click on ay tag to highlight ALL uses of that tag on the current page. This is a very useful function if you are trying to learn how to code, as it helps you to identify your mistakes. states that Dreamweaver CS6 is“far away the world’s most powerful web editor”. We can only imagine what it will be like another 20 years from now.

Michael Peggs is the founder of Marccx Media, a digital marketing agency specializing in Search Engine Optimization (SEO) and Search Engine Marketing (SEM). Before Marcxx, Peggs worked at Google in business development, forming digital media and advertising partnerships in the United States and Asia. He is also a contributor to The Huffington Post, FastCompany and Business Insider as well as and podcaster, hosting the iTunes Top 10 New & Noteworthy Podcast You University. 

About The Author

Leave a Reply

Your email address will not be published. Required fields are marked *