With Dreamweaver CC, you can design pages that have a proper HTML5 structure and test and preview your work in an interface similar to an external browser.
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.
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.
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.
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.
Note: To learn how you can do design and edit directly in the latest Live View, check out the project-based tutorial, How to edit and preview web pages with new Live View features.
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.
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.
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.
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:
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.
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.
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.
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).
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).
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.
The Insert menu and panel have two categories containing jQuery widgets (see Figure 10).
- jQuery UI – jQuery widgets such as, Accordion, Tabs, Progressbar, and Buttons to add desktop-like functionality to your web designs.
- jQuery Mobile – jQuery widgets such as Page, List View, Collapsible Block and Password, which are designed for use in mobile app development projects.
To try jQuery UI widgets in your page design, check out the Using jQuery widgets in web pages in Dreamweaver tutorial. This article's supplied project files also include a jquery.html file that you can use to follow along.
To see how you can use jQuery Mobile widgets in your mobile projects, check out the following tutorials, which both include downloadable project files.
- Customizable starter design for jQuery Mobile
- Advanced design template for jQuery Mobile
Dreamweaver CC supports PHP 5.4, so you can now access PHP server behaviors when developing content management systems (CMS) sites including WordPress and Drupal sites.
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.
To learn how to set up a local server to work with Dreamweaver, check out Paul Trani’s How to Set up Wordpress in Dreamweaver view for an overview. Kristin Long of MIGHTYminnow also provides a detailed demonstration in the Faster theming of dynamic, CMS-based sites in Dreamweaver screencast.
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.
That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.
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.