Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Dreamweaver Meets the Challenge of Changing Times

Long dominant in web design, Dreamweaver continues holding its first-place standing by improving with time. David Powers, author of Adobe Dreamweaver CC Learn by Video (2014 release), points out additions to Dreamweaver CC 2014.1 that make life a little easier for web designers, whether they hate dealing with code, or love it.
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.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020