To preview and test a web design requires multiple round-trips between your development tool of choice and an external browser. Ironically, the web pages you design are meant to be highly visual, yet historically, designing and testing them has not been because of the amount of time spent going back and forth for testing. The latest version of Adobe Dreamweaver CC includes several features that make it much easier to visually construct web content.
Now you can work more efficiently while designing pages by accomplishing the same tasks with fewer clicks. Quickly locate code with Inspect mode and make updates, and then see your changes reflected immediately.
In this article, I show you several new features, including a modernized Live View, the Live Highlight feature, and a new color picker interface in CSS Designer. I also demonstrate how Dreamweaver CC enables you to preview your site as you create it.
If you haven't already installed Dreamweaver CC, download a free 30-day trial to check out the new features described in this article. Join Creative Cloud and get all the Adobe CC tools you need to create digital media, design layouts, and publish content to any screen.
Note: Download the supplied files (ZIP, 20 MB) to try these features on your own.
Dreamweaver CC displays web content and executes its functionality directly within Live View so you can see how your site will look and behave before you publish. This allows you to spend more time working in the Dreamweaver CC workspace and less time switching to the browser to test your projects. The updated Live View also supports more media codecs — making it possible to directly preview a wider range of HTML5 video formats while working within Dreamweaver CC.
Live View uses the same performance and HTML5 technology support available in Google Chrome to render your site previews more efficiently. To get more information about this technology, read the Chromium Embedded Framework article on the Adobe Web Platform team blog.
Elements are now rendered more accurately in Live View. Compare the two examples in Figure 1 to see how a div with a border radius and repeating gradient is rendered in earlier versions of Dreamweaver and how it is rendered in Dreamweaver CC. On the left, the earlier version of Live View doesn't support border radius rendering. On the right, the updated Live View renders the div border radius property the same way it appears in modern browsers.
Now you can use Inspect mode in Dreamweaver CC to edit page elements quickly. Enable Inspect mode and then hover over an element to see a tooltip with its properties displayed. The process of inspecting code in the Dreamweaver workspace is similar to using Google Chrome to inspect elements in a browser.
This means you can get visual feedback right away rather than hunt for property values. Follow these steps:
Note: The Fluid Grid Layout feature still uses the WebKit framework engine to render responsive layouts.
If you are familiar with using Google Chrome to inspect elements in a browser, you'll notice that the visual representation of inspected elements differs in Dreamweaver CC because Dreamweaver CC uses a customized interface (see Figure 4).
Note: To test your projects more effectively, be sure to install the latest versions of browsers to check the display of CSS properties and HTML5 elements.
Live View in Dreamweaver CC now supports more codecs, which means that you can watch HTML5 video files and listen to HTML5 audio files while testing pages in Live View. Now you can preview media content within the Dreamweaver workspace, instead of launching a browser every time you want to test your video and audio content in your layout. The video and audio codecs listed in Figure 5 are supported and can be played in Live View.
Insert and preview HTML5 elements such as pop-up menus, calendar interfaces, and other form elements directly within Live View. These elements perform as they would in a separate browser that supports the HTML5 specification (see Figure 6).
Browse and navigate websites in Live View to experience web content as though you are using an external browser. The zoom settings now behave the same way that magnification settings are handled in a browser.
For example, when you choose View > Magnification and change the magnification of a page (zoom in or out) in Live View, the same page that is opened in a different tab retains the same magnification value. If you set a page to be displayed at 50% magnification and then open that page in a new tab, it will also be displayed at 50% magnification. In previous versions of Dreamweaver, any pages you opened in a new tab appeared at 100% magnification by default.
When you open a different page in the same tab using Dreamweaver CC, Live View now defaults to 100% magnification. Previously, if you clicked a link in Live View to navigate to a new page, the new page opened using the same magnification as the page that contained the link.
Additionally, regardless of the target options you've applied to a link on a page, when you click the link in Live View, the page will always open in the same tab. To test link target behavior, preview the page in a browser instead.
Hover over any selector name in the Selectors panel of the CSS Designer interface to see a tooltip appear that lists all the applied CSS properties. In Dreamweaver CC, when you make changes to a selector those changes are no longer applied to the computed selector (the selector from which an element's properties may inherit its values). Instead, click a selector to display the corresponding code in Code view so you can make changes immediately (see Figure 7).
Live View also enables you to select an element and make changes or update options using a variety of different panels rather than having to scroll through Code view.
You can use CSS Designer to inspect and highlight elements in Live View in real time. As you select items in Live View, the corresponding CSS selectors are selected so you can see the relationship between HTML elements in Live View and the CSS rules applied to them.
When you edit a selector using CSS Designer, the view does not switch to the computed list of properties. Now when you click a selector in the Selectors panel, your cursor jumps to the same section of CSS code in Code view. Additionally, when you edit properties, the Property inspector doesn't lose its context. This new behavior is called context save and restore.
When you choose a color using the Color Picker panel, the selected color is saved and can be used in other panels that use the color picker interface. For example, when you add swatches to a color picker, the same swatches are displayed when you open any other color picker or the Gradient panel within the Dreamweaver workspace.
Note: The swatch changes that you make are saved in the Dreamweaver preferences file on your computer. When you delete your Dreamweaver preferences file, saved color picker information is also deleted.
Select a specific color to use for your project by dragging sliders across ramps to choose color, saturation, and transparency values. The color code in RGBa, Hex, or HSLA is automatically generated, and the value is used in Code view when you apply the color.
Alternatively, you can enter a color code in the Color Picker panel, and the corresponding color is displayed. Based on the value you enter in the panel, the corresponding color button is selected automatically. For example, when you type a hexadecimal value like #a2b4c6, the Color Picker panel detects the format and switches to the Hex button.
Once you've selected a color, press Enter (Windows) or Return (Mac OS) or click outside the panel to apply the color. Press Escape to exit the panel without applying the selected color.
Swatches enable you to save and reuse colors from any Color Picker panel or swatch interface that you open within Dreamweaver CC. After you select a color, click the Plus button to add a swatch to the Color Picker panel. To remove a swatch from the panel, select the swatch and drag it outside the panel. You can also rearrange swatches by clicking and dragging them around in the swatch interface.
The Eyedropper tool in Dreamweaver CC enables you to select or sample any color on your computer's interface. Follow these steps:
The color you pick appears in the selected color section of the Color Picker panel (see Figure 8).
Tip: To revert back to the previously selected color, click the original color chip (marked as item B in Figure 8) in the Color Picker panel.
Dreamweaver CC includes several other helpful features that make your web production workflow faster, so you can make updates efficiently. The following recent changes to the workspace make it easy to click and change items on a page:
After you've explored these new features that help you visually build and design web content, see how you can work more efficiently in your other web design projects by checking out these helpful online resources:
To learn about future updates to Dreamweaver, read the Adobe Dreamweaver team blog. Download Dreamweaver CC today and see how these new capabilities enable you to create web content more expressively, with less effort.
Preran Kumar is the social support lead for web products at Adobe. He engages with customers on various social channels to help resolve technical issues. In his previous professional life, Preran worked in areas ranging from formulating cosmetic products and handling packaging for consumer products to web design.