Adobe Dreamweaver: Your fault if the code is bad?

BlogHer Original Post

I like Adobe Dreamweaver. I've been using it for over 10 years, since sometime back in the 90s when I first started learning web design. It's fast, clean, and flexible. But I'm always hearing tales about how it adds "bloat" and "bad code" to your code. I suspect that people making this complaint are misusing the lowly Property inspector.

The Property inspector is that tool bar that has options for Format, Style, bold, italic, centering, font, font size, font color, lists and blockquotes, among other choices. Here's a small screen shot of my Property inspector:

the Adobe Dreamweaver Property inspector

Let's look at each tool on the Property inspector (PI) and how it should be used. The first menu is Format. It contains options such as paragraph and h1. This is essential and should be used to format headings and paragraphs properly. Next is Style. If you already have a style defined in a stylesheet, this menu can be used to swiftly assign it to a bit of the page. The CSS button lets you modify the stylesheet rule that applies to a particular selection. Just remember when you change a style rule, you are changing the appearance of every HTML element where it's applied.

The B and I buttons are fine to use, provided you have set your Preferences to have the B button create strong text and the I button to create <em> text. The next four buttons align text: left aligned, centered and so on. If you use these icons to align text, you'll be adding presentational markup to the page: bloat. You want all the presentational information in your CSS. So ignore the alignment buttons and use the CSS property text-align instead.

In the next row, you have Font, Size, and a color picker box. Using these will add two kinds of bloat or unneeded markup to your page. These menus create style rules that are inserted in the document only (they won't apply to any documents linked to your external stylesheet) and add extra code to the page to apply them like this:

<span class=
"style1">your words here</span>
. The final insult is that the style has a useless generic name, such as style1, that gives you no help in recognizing what it does, You want your styles in an external stylesheet where you can use them on any page in your site. You want them to have a meaningful name so you know what they do. Instead of using nonsemantic spans, you want your styles to apply to meaningful HTML elements, such as acronyms, list items, emphasized text, paragraphs, and so on.

The next four buttons format lists and blockquotes. The list buttons do exactly what they should. However the two on the right don't say blockquote, they say text outdent and text indent. If you use the text indent button, you actually create a meaningful HTML element: <blockquote>. If the text you indented isn't a real blockquote, you've just confused all the readers of your site who rely on semantic markup to make sense of your page. Such users might be on a mobile device, using a screen reader, or surfing with a browser that doesn't display styles. When you just want to move text around a few pixels, use CSS properties such as margin or padding to create the whitespace around your item.

When the PI is fully open, you see a Page Properties and List Item menu. The Page Properties menu writes style rules controlling things like body fonts and link colors. It puts them in the document head, not in an external stylesheet. The List Items options let you specify the type of list markers. You can specify list markers in the CSS rather than by adding presentational markup to your page, but you may need the Start count option from this menu.

Many people like to start designing a page with all the styles in the document head. After they are satisfied with what they see, the styles are moved into an external stylesheet so they can be used with other pages. So having Dreamweaver write style rules in the document isn't a bad thing, as long as that's what you intend to do.

If you use Dreamweaver with the view split so you can see the code being written for you, you'll quickly get a feel for whether or not you like what you create with the PI. Watch it well, and you won't have bloat or nonsemantic markup.

Technorati Tags: web design, CSS, Dreamweaver


In order to comment on, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.

More Like This