Adobe Dreamweaver CC

How to author HTML, CSS, jQuery, and PHP 5.4

Learn how the latest support for HTML5, CSS3, jQuery and PHP5.4 in Dreamweaver can help you author static, dynamic, mobile or responsive projects. (Try it, 15 min)

FromPreran Kumar

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.

What do I need?

Get files Sample files to practice with (ZIP, 21 MB)

Get PDF Dreamweaver cheat sheet

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. A web design comp structured using HTML5 elements.
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.

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.

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.

Figure 2. Live view rendering of elements with border radius settings and repeating gradients in Dreamweaver CS6 (left) and Dreamweaver CC (right).
Figure 2. Live View now accurately renders elements with border radius settings and repeating gradients.

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. Functional HTML5 form elements previewed 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:

  1. Launch Dreamweaver CC.

  2. Open or create a new web page.

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

  4. 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.
    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).

Figure 5. Element inspection in Dreamweaver CC
Figure 5. Inspect page elements and update properties without hunting in the source code.

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.
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. A selector in CSS Designer, with its associated HTML element highlighted
Figure 7. Click a selector in the CSS Designer to highlight the HTML element is affects.

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. A tooltip in CSS Designer showing a selector's CSS properties with the corresponding selections highlighted in Code view and Live view.
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. Using the Properties panel of the CSS Designer while in Live View to modify and preview changes to CSS styling.
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.

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.

 

Figure 10. The jQuery UI and jQuery Mobile widgets are available from the Insert panel and the Insert menu.
Figure 10. The jQuery UI and jQuery Mobile widgets available from the Insert panel and the Insert menu.
Figure 10. The jQuery UI and jQuery Mobile widgets are available from the Insert panel and the Insert menu.

Using jQuery UI

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.

Using jQuery Mobile

To see how you can use jQuery Mobile widgets in your mobile projects, check out the following tutorials, which both include downloadable project files.

 

Develop with PHP 5.4

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.

 

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.

Let us know what you think

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-kumar-83x83

Preran Kumar

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.


Purchase by phone: 800-585-0774