I have two website editors of choice:
For years I heard that Dreamweaver was the Web editor of choice for the serious Web developer. At the time I wasn’t a serious Web developer, I was a lowly curate and couldn’t afford a copy (I made do with trial versions) so I had to find another solution.
From 1st Page 2000 to WeBuilder
For about five years I used Evrsoft 1st Page 2000. For a free text editor it did everything that I wanted and more — it was certainly a good step up from Notepad — but as the Web developed I grew increasingly frustrated by its lack of support for the latest standards (XHTML anyone? CSS 2.0, etc.). The application was really feeling dated.
But I hung on in the hope that a new, promised version would be the solution I was needing. Month turned to year, nothing appeared and I faithfully struggled on. “Better the Web editor you know …” and all that.
The day that I installed the first public beta on their new version, First Page 2006, was the day that I finally gave up on Evrsoft and moved to WeBuilder. I haven’t looked back.
That’s when I discovered Blumentals WeBuilder 2005 (version 6.3). Not only was it similar in layout to 1st Page 2000 it far surpassed it in terms of both Web standards and application features.
I’ve now used WeBuilder (which I presume is pronounced “web builder”, although in the office we called it “we builder”) ever since, upgrading through versions 7 (2006), 8 (2007) and now 9 (2008). And it just gets better and better with each new release. There is a very active community forum and its developers really do listen to requests for new features. I’ve had one of my requests included (to do with how the file explorer displays files), and I put my voice to calls for Subversion integration, which appeared a version or two ago.
Matching and missing HTML tag highlighting
One of my favourite features in WeBuilder is the code highlighting:
As you can see from the screenshot above, if you click within a tag it highlights the tag in green and shows the corresponding end tag. It also highlights broken tags – you can see immediately that there’s a problem with the anchor tag (<a>).
It’s a really impressive feature that makes navigating code very easy, particularly when you have quite a few nested DIV tags.
Meanwhile in Dreamweaver
Looking at the same code in Dreamweaver CS4, when I click on the list-item tag (<li>) nothing happens within the code window; there is no code highlighting.
Instead, the corresponding list-item tag in the code navigator bar at the bottom of the window subtly highlights. Clicking on that tiny navigation item then highlights the code in the code window but it’s nowhere near as intuitive, doesn’t give as much immediate feedback to the coder and involves having to move the mouse to the bottom of the code window which is fiddly.
Another area where I think WeBuilder outshines the mighty Dreamweaver is in the area of file associations.
When I first installed both applications they each asked me which file types I’d like to associate with that program, e.g. .css, .js, .php, .xml, etc. I made my selection and the application negotiated a deal with Windows, so that I could simply double-click a CSS file, for example, and as if by magic the Web-developer-application-of-choice appeared.
But what if you change your mind? What if you now want to associate PHP files with WeBuilder instead of Dreamweaver, so that when you double-click a CSS file it opens in WeBuilder rather than Adobe’s offering?
In WeBuilder …
In WeBuilder it’s quite simple. Go to Options > Preferences, click on Files then select Associations:
In Dreamweaver CS4 …
In Dreamweaver … I’ve still to find out how to do it. I’ve read through two Dreamweaver CS4 books, searched Google down to about results page 10 and I don’t think you can. I think you have to do it manually via Windows Explorer: Tools > Folder Options > click on the File Types tab.
I can’t understand why. Unless, of course, Adobe reason: why would anyone want to use anything other than Dreamweaver?!
Question: does anyone know how to do this from within Dreamweaver, or how to get DW to run the initial file association dialog again?
Where I think Dreamweaver CS4 completely outshines WeBuilder is in the area of project management. In WeBuilder you can define projects, which is a really useful feature, but it doesn’t manage them to the same extent that Dreamweaver does.
Dreamweaver scans your site code and builds a cache. It knows what’s linked to what, so if you rename a file, for example, it will offer to update links to that file throughout your site. And if you site has 600+ pages, as one of mine does, you’ll realise what a time-saver that is. For that feature alone it’s worth the money!
I remember back in the days of 1st Page 2000 spending two weeks going through a site simply correctly links to files that I’d moved because I’d not planned the site in full before coding.
The other advantage that Dreamweaver has over WeBuilder is its support for community-created extensions, which add extra functionality to the application.
Want to add microformats, Google maps, PayPal or Skype buttons, YouTube videos — just download and install the extension.
WebAssist create a number of amazingly good extensions. Some are free, the best ones cost, but are very reasonable considering what they do and the time and potential frustration that they avert.
I thoroughly recommend Eric Meyer’s CSS Sculptor extension and the related CSS Menu Writer extension, and I like the look of the new Jeffrey Zeldman’s Web Standards Advisor extension.
So, is Dreamweaver better than WeBuilder? In some ways, yes … but there are some features in WeBuilder that I struggle without now (particularly, especially the code highlighting). I can see me using a combination of them both for a few years to come.
That all said … I do fancy checking out WestCiv Style Master assuming that it supports CSS 2.1. I suppose it’s too much to expect it to handle elements of CSS 3, given that the latest version was released in 2006.