Dreamweaver enables you to design sites with clean, web-standards compliant code while minimizing the need for hand coding. The features are built upon, or support, open and modern technologies such as HTML5, CSS3, jQuery, PHP 5.4, and Chromium Embedded Framework (CEF) to help web professionals develop, test, and publish responsive, mobile, and dynamic web projects more efficiently.

Note: Download the supplied files to try these features yourself. You can use the supplied HTML, image, and video files to apply many of the concepts described in this article.

Structuring pages with HTML5 elements

Dreamweaver CC defaults to the HTML5 doctype when you create new HTML pages. The Insert panel and menu include HTML5 tags, such as section, article, aside, and header, and footer, for structuring the content of your document (see Figure 1). By structuring your pages using HTML5 elements, you can design web sites that are more accessible, easier to maintain, and supported by the major browsers.

Figure 1. This web design comp was structured using HTML5 elements.

Note: Check out David Powers's six-part series, Creating your first website, for an in-depth tutorial on building a website using the latest HTML5 structural elements.

Previewing and testing web designs in Live view

Dreamweaver CC includes several views for authoring and previewing your web designs. Design view provides a visual interface for adding elements and defining their properties. Code view enables you to directly view and edit the HTML code of the pages you build, and Live View lets you edit and preview your designs without leaving Dreamweaver.

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. As a result, you can spend more time working productively in the Dreamweaver CC workspace and less time switching to the browser to test your projects. Live view uses the same performance and HTML5 technology support available in Google Chrome to render your site previews. To get more information about this technology, read the Chromium Embedded Framework article on the Adobe Web Platform team blog.

Rendering HTML5 elements

Elements are now rendered more accurately in Live View. For example, compare the two examples in Figure 2 to see how a div with a border radius and repeating gradient is rendered in Dreamweaver CS6 and earlier versions, and how it is rendered in Dreamweaver CC. On the left, the earlier version of Live View did not support border radius rendering. On the right, the updated Live view renders the div border radius property just as it appears in modern browsers.

Previewing HTML5 form elements and plug-ins

You can now test form and element behavior directly in Live view. When you preview HTML5 elements such as pop-up menus and calendar interfaces among others directly within Live view, they perform as they would in a separate browser that supports the HTML5 specification (see Figure 3).

Note: The supplied files include a form you can use to test the behavior of various form elements directly in Live view.

Figure 3. HTML5 form elements function as expected in Live View.

Previewing HTML5 media with extended support for codecs

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 the video and audio content in your layout. Content that uses the video and audio codecs listed in Table 1 can be played in Live view.

Video

Audio

Theora

MP3

H264

AAC

Vorbis

pcm_u8

pcm_s16le

pcm_s24le

pcm_f32le

pcm_s16be

pcm_s24be

Inspecting HTML elements

Inspect mode in Dreamweaver CC enables you to edit page elements quickly. Enable Inspect mode and then hover over an element to see a tooltip that displays the element's properties, including width and height as well as applied classes and IDs. 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 hunting for property values. To try this feature yourself, follow these steps:

Launch Dreamweaver CC.

Open or create a new web page.

Enable Live View by clicking the Live toggle button and then click Inspect.

Hover over an element to see highlighted element properties. Rulers are displayed along with information about the values of the margin, padding, and border properties applied to the hovered element (see Figure 4).

Figure 4. Hover over elements to see a tooltip that displays property values.

If you regularly use Google Chrome to inspect elements in a browser, you'll quickly become familiar with the concept of element inspection in Dreamweaver CC (see Figure 5).

Note: To test your projects more effectively and check the display of CSS properties and HTML5 elements, be sure to use the latest versions of browsers.

Style pages with CSS3

The CSS Designer is a visual tool that enables you to visually define CSS3 styles, files, and media queries, and to apply CSS3 properties to the elements on your page.

Defining and locating CSS Sources

The Sources panel in the top of the CSS Designer offers three options for the type of CSS sources you can associate with your page. You can create a new CSS file, attach an existing file, or define the CSS within your web page (see Figure 6). Each of the sources is then listed in this panel. Select the appropriate source when you need to modify the CSS styling.

Figure 6. The CSS Designer Sources panel.

Visualizing relationships between HTML elements and CSS selectors

As you select items in Live view, the corresponding CSS selectors are highlighted so you can see the relationship between your HTML elements and the CSS rules applied to them. Simply hover and click selectors in the CSS Designer to highlight and inspect elements (see Figure 7). You can then select an element and make changes or update options using one of several different panels (rather than scrolling through Code view to make a change).

Figure 7. Click a selector in the CSS Designer to highlight the HTML element is affects.

Navigating Code view with CSS Designer

In Dreamweaver CC, you can click a selector in the Selectors panel to jump to the appropriate section of the CSS code in Code view. You can make changes to the selector by editing the properties directly in Code view or from the Properties panel of the CSS Designer. You can also hover over any selector name in the Selectors panel of the CSS Designer interface to see a tooltip that lists the selector details (see Figure 8).

Figure 8. Hover over a selector in CSS Designer to see a tooltip with its CSS properties, and notice that the corresponding selections are highlighted in Code View and Live View.

Making visual edits with the properties section

The Properties panel in the CSS Designer works in conjunction with Live view to enable you to change the CSS properties on an element while simultaneously previewing the new effect.

For example, you can select the video container in the supplied project files (see Figure 9) and change its drop shadow properties until you achieve the look you like.

Figure 9. Use the Properties panel of the CSS Designer while in Live View to modify and preview changes to CSS styling.

Extend sites and mobile apps with jQuery widgets

jQuery widgets are small web applications you can use to add functionality and formatting within your web designs. jQuery is a JavaScript library that is supported natively, in most cases, by the major browsers. jQuery widgets have replaced the Spry framework, an Adobe-proprietary technology stack, for items such as accordions, datepickers, buttons, and tabs in dynamic web designs.

Develop with PHP 5.4

Once you have Dreamweaver setup with a local web server to serve the PHP pages in your site, you can develop and test dynamic web sites locally on your machine before publishing. While working in Code view, Dreamweaver CC offers code hinting for PHP5.4 syntax.

Where to go from here

To learn about future updates to Dreamweaver, read the Adobe Dreamweaver team blog. Download Dreamweaver CC today and see how you can apply these new capabilities to create web content more expressively and with less effort.

More on this topic

Preran 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.