GW Micro - Unleashing the power of your mind's eye.

Climb Aboard the Dreamweaver CS3 Train

2007-04-25

Permalink 11:02:29 am, by Aaron Email , 1125 words, 3911 views English (US)
Categories: software

Climb Aboard the Dreamweaver CS3 Train

I had the opportunity to sit down with Window-Eyes and Dreamweaver CS3 recently, and I have to say that I am pleasantly surprised at the level of accessibility in this latest version. It's sad, really, that I experience surprise when I encounter an accessible, mainstream application, but that's a rant for another day.

So what is Dreamweaver? According to Adobe, you can "Quickly and easily design, develop, and maintain websites and web applications — from start to finish — with Adobe® Dreamweaver® CS3 software. Built for both designers and developers, Dreamweaver CS3 offers the choice of working in an intuitive visual layout interface or a streamlined coding environment."

For beginner users interested in creating web pages, DW offers an intuitive interface, with the ability to insert and modify many web page elements without needing to know exactly how the underlying code works. If you want big, bold text in the center of your page, type the text, and change the font attributes and position just like you would in a word processor. If you want to add an image, use the Insert -> Image option.

My biggest complaint about applications that generate code behind the scenes in WYSIWYG applications has been that the resulting code is often bloated and littered with validation errors. And if you don't know anything about the code, you can't fix the problems. Applications that generate this kind of balderdash (I'm looking at you, Microsoft Word and FrontPage) should be taken out and shot. They're lazy, and they create unnecessary accessibility problems when they could so easily be avoided.

DW, thankfully, does not fall into this crappy software category. Not only is the resulting code efficient, it validates. You can even check your markup as you go. In addition to clean code, accessibility features are in the forefront when inserting elements. Take, for example, inserting images. The first dialog that pops up after selecting an image to insert contains both alternative text and long description options. The only bad thing about this dialog is the text that states, "If you don't want to enter this information when inserting objects, change the Accessibility preferences." That option shouldn't even exist. But at least the options are on by default.

Speaking of Accessibility preferences, they're another indication that DW is, at the very least, aware of accessibility issues, and that's another positive.

For more advanced users who are familiar with code, DW's code editor speaks right out of the box. Since this is code, turning on various punctuation options makes it read better. You can have multiple files open at the same time in different tabs, and CTRL-TAB moves focus between them. You can also opt to have both the code window and design window open at the same time so that you can monitor your changes in real-time (with CTRL-`).

An interesting thing about DW's approach is that the design window doesn't use an IE or Firefox engine for rendering. Instead, it's much like a rich text editor. There is an option, however, to view the project in an external browser. I really like this because, as powerful as Browse mode is, sometimes you just want a quick view at a line or two. Being able to jump right from code to result and then back again with a quick hot key is a really nice feature.

As much as I'm impressed by DW's accessibility, there are a few things that don't speak, and those I would like to see fixed. For example, when DW first opens, you're presented with a Flash dialog that lets you choose from various options like creating a new file, opening an existing file, opening a recent file, etc. Currently, Window-Eyes only receives data from a Flash object while in Browse mode. This is a limitation of Flash because Flash doesn't expose anything outside of Browse Mode. It would be nice to either have that issue resolved, or see them use a standard dialog for these options.

Even though the Flash dialog doesn't speak, you can still press standard hot keys to open or create new documents. CTRL-O brings up a standard file/open dialog. CTRL-N, for new, however, brings up a dialog with some problems. You're initially presented with what Window-Eyes calls a list box, but when you arrow up and down, you hear nothing. This, however, is probably a Window-Eyes bug, so I can get that logged and investigated. There are two other lists in this dialog that don't read quite right, but it looks like a small increase in cursor delay solves the problem. So we may want to think about some sets for DW, even though they're not really necessary.

Another annoyance is that task panels don't seem to have any keyboard navigation options. As I mentioned earlier, CTRL-` moves between design and code windows, and CTRL-TAB is used for moving between tabs in the focused window, but there's no key to move between the task panels and any other window, like F6 does in Word to move between the document area and the task pane. This isn't a huge deal because you can get to all of the options in the task panels through menu items. But it would be nice to be able to access them quickly without doing a lot of hunting.

There's one other annoying thing that has nothing to do with accessibility, but it drives me crazy nonetheless. If you go to the beginning of a line in the code editor that contains blank space, followed by text, you should be able to press CTRL-DELETE to clear the spaces, and move the text to the left edge of the editor. Most editors do that, but they also include punctuation characters, such as the dollar sign. That's unbelievably annoying when you're dealing with code, such as PHP, that uses those punctuation marks to designate variables and such. I've searched the Internet over for editors that do not have this problem (i.e. that will remove the blank space, but will not delete punctuation), and I've only found three that are worth my time: the Visual Studio IDE, the ActiveState Komodo IDE , and Notepad++ . That's just sad. But I digress.

Adobe Dreamweaver CS3 is a good, accessible web development tool that I will begin recommending, despite the few problems I found. It's robust, it's efficient, it's packed with options and support for multiple web based languages (including style sheets) and it speaks right out of the box with Window-Eyes. Those are winning combinations.


Comments, Pingbacks:

Comment from: Dave [Visitor] Email
Hi, good blog post. All i can say is where was this four years ago when i had to take a web development class that used dw i believe it was either 3 or mx, and some of the tasks, utilizing the pains didn't talk at all, i had to code everything and even flipping back and forth between interfaces didn't work so well. It was not a very pleasant experience, i'll have to check dw out when i get something called time.
PermalinkPermalink 2007-04-25 @ 19:41
Comment from: Brad Hodges [Visitor] Email
Macromedia began the work of making DW accessible many years ago. Bob Regan spearheaded the effort. It is good to learn that advances made while the product was owned by Macromedia have not eroded now that Adobe has control. While there are always issues with advanced complex interfaces, it appears that the Adobe trend is generally good.
PermalinkPermalink 2007-04-26 @ 08:41
Comment from: Renee M. Zelickson [Visitor] Email · http://www.zeli.net
I have had someone design my page because I needed to convert it from front page and didn't know how. I was introduced to Dream Weaver. I would welcome any mentoring on how to do the drop down menues. I am in the process of getting my files back so I can learn Dream Weaver. This article is helpful and will refer to it for notes. If anyone reading my comment has any or would be willing to provide assistance, please let me know at renee@zeli.net
PermalinkPermalink 2007-04-27 @ 19:17
Comment from: Nick [Visitor] Email
Great article - however I work with a site written in PHTML and there was a workaround for editing phtml pages in DW MX, 8 but that doesn't seem to work for this one. Any ideas? Adobe doesn't seem to have any reference to phtml and neither does the Help section in DW.
PermalinkPermalink 2007-06-28 @ 06:51
Comment from: Chris [Visitor] Email · http://www.none.com
@Nick
If you browse to C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes and open a file called MMDocumentTypes.xml, you can simply edit line #75. On this line you will see the declaration for the php file type. Simply add .phtml to the end of the file extensions displayed in both the winfileextension and the macfileextension nodes. Save the file and restart dreamweaver. Dreamweaver will now recognize a phtml document as a standard php document type. I hope this clears up your issue.
PermalinkPermalink 2007-07-10 @ 09:18
Comment from: ryan [Visitor] · http://webrehash.com
Even with all the automation of DW3, I found some extensions that save a ton of time coding sites. From log in to file uploads to building complete sites by click a button, these really do save some time. They're by WebAssist and their support is excellent. http://www.webassist.com/professional/products/productdetails.asp?PID=110&WAAID=649
PermalinkPermalink 2008-02-02 @ 16:17
Comment from: Matt [Visitor] Email · http://www.i-a.co.uk
Is there any way to get the PHTML extension to open in the design view rather than just the code view?
PermalinkPermalink 2008-02-12 @ 18:06
Comment from: NoWares [Visitor] · http://www.nowareshosting.com
Very informative thread :)

I love dreamweaver for the simple fact it saves me time typing!

Start typing your tag and press enter to let DW finish it ;)
PermalinkPermalink 2008-03-29 @ 22:05
Comment from: Chris Gordon [Visitor] Email · http://www.4wordsystems.com
The phtml modification won't work for CS3, it gives you warnings that the file extensions already exist and still won't open those files in design view or code view with syntax highlighting.
This company has docs on how to do it though:
http://www.magentocommerce.com/wiki/general/opening_phtml_files_in_dreamweaver
PermalinkPermalink 2008-04-15 @ 07:12
Comment from: Dubai Web Design, Development [Visitor] Email · http://www.go-gulf.com
I love using front page. But since the introduction of DW8 i love DW and know DW CS3 come. I haven't get much a chance to use it but i heard alot about it and know this thread open my eyes more. thanks for ncie thread
PermalinkPermalink 2008-06-26 @ 13:19
Comment from: Elizabeth Weir [Visitor] Email · http://www.mastersculptor.co.nz
I am considering Dreamweaver CS39 or CS4, but would like to know the following:
Are you able to put pictures and text over my own pictoral background in the program itself rather than having to use photoshop etc?
I would appreciate any help you can give me.
PermalinkPermalink 2008-10-07 @ 21:06
Comment from: strubmeister [Member] Email
I would like to know how to put mapquest on the page in dreamweaver cs3. I have seen it on several webpages lately but cannot figure how to do it. Help!
PermalinkPermalink 2008-10-08 @ 17:52

Leave a comment:

Your email address will not be displayed on this site.
Your URL will be displayed.

Allowed XHTML tags: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>
(Line breaks become <br />)
(Set cookies for name, email and url)
(Allow users to contact you through a message form (your email will NOT be displayed.))
Why am I being asked this question?


Archive

October 2008
Sun Mon Tue Wed Thu Fri Sat
 << <   > >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Search



© GW Micro, Inc. All Rights Reserved.
GW Micro, Inc.    725 Airport North Office Park    Fort Wayne, IN 46825
Ph: 260-489-3671 Fax: 260-489-2608    www.gwmicro.com    sales@gwmicro.com    support@gwmicro.com
Hours: M-F, 8a-5p, EST