As many regular blog readers know, I’m still a big fan of Dreamweaver even in this brave new Web 2.0 world. But shouldn’t I be exploring the new content management systems like Drupal and Movable Type…or even ANGEL?
Actually I have been, but I’m also finding that Dreamweaver has been an indispensable partner, especially for complex CMS pages – because Dreamweaver is the most flexible tool which still generates the cleanest, most accessible XHTML around.
If you can figure out how to cut and paste HTML (and what respectable Web master can’t do that?), then Dreamweaver can still be a great time saver.
Here’s a mini-tour of some useful Dreameweaver tools and how they’ve been helping me streamline a Drupal or Movable Type page.
Insert Headers
Long pages should have subheaders (e.g. H2,H3,H4) – even those in a CMS…but amazingly few editors I’ve encountered recognize this fact. They’ll let you shrink and enlarge text or change colors…but they won’t let you actually insert a correct level of header (unless you know the tag).
Dreamweaver not only lets you do that, but gives you a keyboard command – sweet.
Image Insertion & ALT Tags
Ever since Dreamweaver MX 2004, the software has been enabled with a key primal instinct. If you insert a picture – it asks for an ALT tag. You have to be pretty lazy to ignore it. Plus Dreamweaver captures the image size and image file name.
It’s true, you can’t just cut and paste the code into Drupal or Movable Type and expect an image to appear…but will have a record of the file name, ALT tag and size attributes. All you, the Webmaster, have to do is upload the images into Drupal and change the SRC path (which is always the same). You won’t have to fill in the sizes or guess on the file name. And if you miss an image…the ALT Tag has been pre-filled in for you.
Data Tables
One school of thought says to avoid them, but sometimes they really are the best way to present data (see below). But few CMS WYSIWYG tools include good table tools, and even fewer let you set the SCOPE attribute.
| Drupal Default | Movable Type 4 | ANGEL 7 | |
|---|---|---|---|
| Tool | Default setup does not include HTML Editor | Six Apart.com | FCK Editor + Equation Editor |
| Image | Hand code (including path) | Assign title to image | Assign Alternative Text to image |
| Table | Hand code. Must enable full HTML to use | Hand code | Table Editor, but no scope |
| B or STRONG | STRONG enabled by default. Must enable full HTML to use B | Either (depends on editor) | STRONG |
| H tag | Hand Code. Must enable full HTML to use | Hand code | Under Format menu (vs. Style). |
In Dreamweaver, inserting the table prompts you to select a table layout with table headers (and the right SCOPE). If you get the initial set-up correct, your accessibility issues have been mostly solved. And if you need to tweak the table, Dreamweaver can do that too.
A Break is a P and not a Break
A basic accessibility mantra is to make sure that paragraphs are chunked into P tags and groups of sentences separated by BR tags. That is, blank lines between paragraphs should be caused by the P tag and not two BR tags. This allows screen readers to re-read single paragraphs as necessary. If it’s all BR tags, then the HTML is just one giant text block structurally. Some HTML editors ensure that blank spaces between paragraphs really correspond to the P tag, but more than a few don’t…
Bold or Strong
Want the bold command to be B or STRONG? Dreamweaver lets you choose either by default (and you can even activate commands to do both if you’re really clever). The one thing you won’t have to do is manually type in “<strong>” all the time – that one gets old very fast. Nor will Dreamweaver generate one of the scariest pieces of CMS code I ever did see – <span style=”font-weight:bold”>. This may validate, but if you’re going the presentation route, surely <b> would save many bytes.
And it gives a Local Backup
Penn State is pretty good about backing up server files, but glitches do occur (sometimes I push the Delete button when I shouldn’t), but Dreamweaver allows you to archive key content…if you’re feeling paranoid.
Same Toolset for the Same HTML
As much as I like the concept of CMS, I’ve been exposed to enough of them that I’m starting to get a little disoriented. It really is nice to have one HTML generator that is independent of everything else. And if the HTML editor isn’t working on a Mac (or IE 7) today, then Dreamweaver will come to the rescue
Any Drawbacks?
The two I can think of are that 1) Dreamweaver costs money and 2) Dreamweaver is complex for a WYSIWYG editor. Plus, you usually have to set your CMS HTML editor to view tags only when it comes time to cut and copy code (but you can ususally toggle back to WYSIWYG mode).
But if you are a Web saavy user and already have access to Dreamweaver and spent all that time getting up to speed in it, I would think it would make sense to leverage the tool.
This entry composed in Dreamweaver and pasted into Movable Type – with subheaders.
Your Drawback no. 2 resonates with me. Dreamweaver is really a professional-grade web development tool. I generally become befuddled when using the app.
I think it should be the job of the webmaster to make sure the wysiwyg interfaces on the website create appropriate html. I think it can be done, but generally isn’t.