Macromedia’s Dreamweaver is already the world’s leading Web-design layout tool. But to describe it as merely a layout tool is to ignore its multitude of other interactive scripting and site-management features. Version 4 of Dreamweaver is now even easier to use and faster to learn. It’s also better at production flow, and entirely customizable.
Earlier versions of Dreamweaver made it easy for those with no HTML-coding skills to create complex Web-site designs, without ever having to even see any funny HTML tags. This appealed to many graphic designers who were new to Web design, and didn’t want to delve into the complicated depths of text-based programming.
Adobe GoLive also offers this WYSIWYG (what you see is what you get) solution to creating Web pages. And version 5 of GoLive – released in August 2000 – overtook Dreamweaver 3 in terms of ease-of-use and scripting ability; see our review in the October 2000 issue of Macworld. However, this latest incarnation of Macromedia’s Dreamweaver has again raced ahead of GoLive 5 to deliver the ultimate Web-designer’s application.
Macromedia continues to build and develop its applications while paying particular attention to its users’ suggestions. Every Web site is different, and each designer has his or her own particular way of working. This makes tool-customization important across all the tools you need to create a great Web site. Macromedia has been listening.
Not so important for designers – except for those willing to dabble in hand-coding – but vitally important to Web developers is access to and complete control of the HTML source code. Even with emphasis on the user-friendly WYSIWYG layout and drag-&-drop capabilities of Dreamweaver, Macromedia has wisely not ignored HTML-coding needs. Even with all the extra text-editor additions, Macromedia still ships third-party text-editor supremo BBEdit with Dreamweaver.
The integrated text editor in version 4 provides some improved BBEdit-like functionality. It now allows immediate access in Dreamweaver and UltraDev to the basic source code of your Web pages. You can use a separate windowpane to view the HTML code or take advantage of the split-pane view (see screenshot opposite). On the new code pane there’s a Launcher Bar (first seen in Macromedia’s Flash 5), and the HTML can now be colour-coded.
The bar includes button access to page properties such as file management, code navigation, site files, debugging, reference information, body properties, and Meta information. This means that you no longer need to access them separately through the pop-up control window.
Macromedia has added some excellent HTML reference information with Dreamweaver 4. The new integrated Code Reference feature is accessible via a one-click access of HTML terms and where to use them; this is based on the Definitive DHTML reference book published by O’Reilly. Simply highlight the tag you want more information on, and handy hints and links are shown in a panel.
As more and more Web sites use Flash-generated content – either completely developed in Flash, or with some Flash animation included in the design – Macromedia has made it easier to add Flash content to Dreamweaver.
You can now create editable vector-graphics within Dreamweaver. The advantage of using Flash graphics and text rather than bitmaps is that they can have much smaller file sizes and are infinitely scalable. A few styles are included with the shipping Dreamweaver product, but more can be created in Flash and added to Dreamweaver or downloaded from Macromedia Exchange.
Creating Flash text is very simple. All you have to do is launch the Flash text editor – or select the icon from the Objects palette – type in your text, apply the desired effects, and export as a SWF file. Unfortunately Macromedia seems to have forgotten that it improved the text-editor window in Fireworks 4 to allow manipulation of the text block during creation on the canvas – you cannot do this while creating Flash text in Dreamweaver 4.
Dreamweaver’s new Layout Design mode for table page design is one of the best new features in version 4. No other Web-design tool helps you create and manipulate HTML tables in the same way as Dreamweaver 4 – not even GoLive 5, which first achieved advanced WYSIWYG table-editing ability. This feature has been added with graphic designers in mind. Designers would rather sketch out table layouts than painfully add tables and cells, then split and combine them to get the layout they need. Now, you can simply switch Dreamweaver from Standard mode to Layout mode (and back again), and actually draw the tables and cells wherever you like on the page. The only disadvantage to this method of layout is that your HTML will consist of many empty table cells that then need to be managed intelligently.
This new feature speeds up design and layout of Web pages as you only have to sketch out the layout of your pages for Dreamweaver to automatically convert it into tables and cells in HTML.
New assets for all
Managing all the source images and draft files for a project can be a nightmare in file management. This is particularly true in relation to professional Web sites, that must change constantly and have to be updated incredibly frequently in order to survive. For this reason, a new Asset panel in Dreamweaver 4 – similar to the one in Flash 5 – helps keep track of all your site data. You can now preview, store and manage your source images, text colours, URLs scripts, Flash content, movies, content templates and library items. You can sort your data into Favorites for frequently used items, group related assets together for specific projects, and assign them individual nicknames for easy searching.
The importance of getting feedback on Web designs is vital in the creation process. It can make or break a professional project if a certain element has been accidentally overlooked. Checking code by hand for the tiniest HTML error somewhere in the midst of massive lines of code can be very a time-consuming – not to mention dreary – job. This is especially true if a site is being worked on by a large number of developers. Print designers needn’t worry about the same issues as Web designers; for example, checking file sizes, browser compatibility or missing ALT tags. Luckily Dreamweaver’s Site Reporting tool built is fast and powerful enough to cope with the largest of sites.
The Site Report feature is now much more customizable. Depending on the site, it can be set to check for combinable tags, fix common errors, check external links, and remove empty tags. It also lets you save reports as HTML files and print them out. These customizable reports allow project managers to produce project-specific reports such as file-size limits or browser-compatibility checks.
Even without its scripting, table-editing, Flash-text or asset-management features, Dreamweaver 4 would be a worthy upgrade just for the improved user interface. The application’s stability, as well as its time-saving drag-&-drop abilities make it the top dog of Web page-design tools once again. As soon as you spend even just a little time having fun drawing tables in Dreamweaver, and creating cool menus with the new Pop-up menu tool, you won’t want to live without it, so upgrade immediately.