Dreamweaver Meets the Challenge of Changing Times
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Dreamweaver is the venerable warhorse of web development IDEs. It has outlived not only Microsoft FrontPage, which was released the same year (1997), but also FrontPage's successor, Microsoft Expression Web. More recently, a challenge has come from Dreamweaver's young stable mate, Adobe Muse, but Dreamweaver shows little sign of stepping aside, mainly because Muse and Dreamweaver target different markets. Muse is squarely targeted at designers who shudder at the thought of working with code, whereas Dreamweaver expects users to at least understand HTML and CSS, even if they don't want to type everything manually. Most of all, Dreamweaver owes its longevity to the way it has embraced changes in web development. Just how much the program has changed is obvious as soon as you open a web page in Dreamweaver CC 2014.1.
Designing in the Browser Without Leaving Dreamweaver
Dominating the left side of the screen is the huge new Extract panel, a dream come true for every web developer tasked with creating a web page from a Photoshop comp. The Extract panel enables you to upload Photoshop's PSD files to the Creative Cloud, and it makes extracting images and CSS seem like child's play. (We'll examine the Extract panel in more detail later in this article.) The familiar Document window where you create web pages now defaults to Live View, showing exactly how the page will be rendered in a modern, standards-compliant browser. No longer do you need to jump to a dedicated browser window to test your work in progress.
Dragging-and-dropping elements has been made much easier through the addition of Live Guides that work in conjunction with the Element Quick View panel for precision insertion. As a result, Editable Live View, which made a hesitant first appearance in May 2014, is beginning to be really useful. (There's still room for improvement.) Meanwhile, under the hood, Dreamweaver is now a native 64-bit program on both Windows and Mac OS X (a 32-bit version is also available for Windows).
Superficially, all the changes in Dreamweaver appear aimed at the same market as that of Muse. But the days are long gone when you could blissfully drag page elements around and leave Dreamweaver to generate a spider's web of code to replicate your design. Although the code remains in the background most of the time, you won't get very far with the current version of Dreamweaver without a decent grasp of HTML and CSS. The target user is the web professional or serious hobbyist who understands how web pages are built, but prefers to work in a visual medium. The program's visual approach echoes the popular trend of designing in the browser. The difference is that you don't need to leave Dreamweaver to design in a browser, because a browser is embedded in the program's Document window.
Developers who prefer working directly with code will also feel at home with Dreamweaver. Just switch to Code View to get syntax support and code hints for all major web languages: HTML, CSS, JavaScript, jQuery, XML, SVG, and PHP. With a single click, you can see output rendered in Live View—without leaving the program. Dreamweaver even has syntax support for the two main CSS preprocessors, Sass and LESS, although it can't compile them—at least, not yet.
Extracting Images and CSS from Photoshop Comps
For years, one of the most arduous tasks for web developers has been converting a designer's layout from a PSD file created in Photoshop, slicing the design to extract images, and painfully working out how to re-create the same result using HTML and CSS. The big new feature—in more than one sense—in Dreamweaver CC 2014.1 aims to alleviate that pain, and it succeeds to a large extent. I'm referring to the Extract panel, which we considered briefly at the beginning of this article. Now let's take a closer look at the Extract panel, which appears on the left side of the screen in the default workspace.
The panel has an interactive mini-tutorial that's designed to get you up and running in minutes. From within the panel, you upload your PSD design comp to your own private space in the Creative Cloud. As soon as the file is uploaded, the online Extract service analyzes it, and within seconds you can start downloading images and extracting CSS (see Figure 1). Although Extract is an online service, Dreamweaver caches the information locally to speed up the extraction of assets. Using the panel is extremely intuitive. You can even drag an image from the panel, dropping a copy directly into your web page. The panel converts the image to your chosen format (JPEG, PNG-8 with alpha transparency, or PNG-32), stores it in your images folder, and creates all the necessary code in the HTML to use the image in your web page. For greater control, you can select the image first and choose whether to rename it and/or scale it to a different size. You can also change the quality setting for JPEG files (see Figure 2).
)
Figure 1 The Extract panel generates CSS styles from a Photoshop design comp, ready for pasting into Dreamweaver.
)
Figure 2 The Extract panel gives considerable control over the settings for images extracted from a Photoshop comp.
Although extracting images is much quicker and simpler than slicing and exporting directly from Photoshop, it's still a good idea to take them into Photoshop or another graphics program to optimize them before use. Most of the images I extracted were at least twice the size (in bytes) that I felt they needed to be.
The Extract panel even extracts text from a PSD, ready for pasting directly into a web page. This is real text that you can edit—not an image. It isn't formatted, but you can copy all its styles and paste them into your style sheet. If you want only some of the styles, that's okay too. CSS extraction works well, particularly for gradients, rounded corners, and drop shadows.
The Extract service is extremely well done, but it isn't capable of building the HTML structure for a page. You need to do that yourself, and that's where the developer's knowledge remains essential. This integration with Photoshop makes a lot of sense for Creative Cloud subscribers. My biggest reservation is that it perpetuates the idea of creating static designs for what is essentially a fluid medium. The Extract panel supports switching between layer comps, so it's possible to create different layouts in Photoshop for mobile phones and tablets, but they're still fixed sizes. Also, not everybody works from Photoshop comps. Fortunately, you can dismiss the Extract panel by switching from the default workspace to the Design workspace, and you'll still be able to use the many other tools Dreamweaver puts at your disposal.
Editing Pages in Live View
Live View, which renders web pages in the Chrome Embedded Framework, is now the default mode in the Document window. This is because Live View is now editable. Editing capabilities were first added to Live View in the May 2014 release of Dreamweaver CC, but they were very crude (to put it mildly). They've been improved considerably in Dreamweaver CC 2014.1, with the addition of Live Guides that display a green line to indicate whether an element will be inserted before or after an existing element when dragging and dropping (see Figure 3).
)
Figure 3 Live Guides indicate where an element will be inserted via drag-and-drop.
Not quite sure where an element will go? Pause for a moment with the mouse button held down, and an icon appears, allowing you to drop the element precisely in the Element Quick View panel. Element Quick View displays the page's document object model (DOM) as a tree-like structure of tags that can be expanded and contracted. Elements can be selected for reordering, deletion, copying, or duplication. You can also cut, copy, and paste elements directly in Live View. The CSS Designer panel isn't new (it made its original appearance in the first version of Dreamweaver CC), but a couple of minor tweaks have improved its usability. The great strength of the CSS Designer panel is that it lets you edit CSS while seeing the results in real time in Live View. I love the ability to adjust rounded corners, drop shadows, and background positions precisely, without needing to save the style sheet to review every change.
Room for Improvement
There's a lot to like in this version of Dreamweaver, but some areas need more work. The weakest aspects of Editable Live View are text editing and the inability to select multiple elements. Fortunately, Dreamweaver's original layout surface, Design View, hasn't gone away completely. You reach it through a drop-down menu on the Live button. I still recommend this view for major text editing and for wrapping multiple elements in a parent tag. Design View doesn't support CSS3, but that's rarely a top consideration when working with large blocks of text.
Dreamweaver's Fluid Grid Layouts—never the easiest features to work with—are now supported only in Live View. This change makes adding text content really painful. Here's a useful trick: Cut the comments at the top of a Fluid Grid Layout style sheet to a separate file while building the text content and adding images. This lets you switch to Design View and get your work done quickly. Then just paste the comments back into the style sheet to get access to the Fluid Grid Layout tools again. Adobe's mistake with Fluid Grid Layouts was adopting an approach that relies on defining a grid that can't easily be changed. However, the engineers are aware of these shortcomings, and I get the impression that Fluid Grid Layouts will be quietly left to wither on the vine.
My advice would be to opt for a more adaptable grid framework, such as Bootstrap or Foundation. Dreamweaver's Live View already provides you with all the necessary tools, and you can see the results instantly as you work with them.
A Lot of Changes—Mostly for the Better
Dreamweaver has come a long way over the past 18 years, and the changes have been particularly striking since the launch of the Creative Cloud. If you've never used Dreamweaver, give the latest version a whirl. If you're one of those people who abandoned Dreamweaver several years ago, I urge you to give it another try. You might be pleasantly surprised. It's not perfect, but it's continually evolving to keep up with the rapid pace of change in web technology.