Streamline your development workflow by using Adobe Dreamweaver CC

Ryan Boudreaux highlights these enhancements in Adobe Dreamweaver CC: modernized Live View, HTML5, CSS3, and JavaScript support, CSS Designer, and Edge web fonts integration.

Figure A: Adobe Creative Cloud Dreamweaver CC

Adobe's Dreamweaver (DW) CC (Figure A) aids developers' workflow by eliminating steps, providing a cleaner interface, and consolidating options, buttons, and panels. The text editor also comes with new features that enhance the total user experience.

I will highlight some of the improvements that make DW CC a viable option for those who use earlier versions of the text editor application. I will be using an example website named The Pluralist, which was provided to me by Adobe for demonstration purposes only.

Enhancements in DW CC that I focus on include the following:

  • Modernized Live View;
  • Modern support for HTML5, CSS3, and JavaScript;
  • CSS Designer, which allows you to visually edit CSS; and
  • Edge web fonts integration.

Modernized Live View

A primary improvement in DW CC is the use of a WebKit-based rendering engine within Live View to display your web content; this includes the same performance and HTML5 support found in modern browsers. Now you can spend more time in Dreamweaver and less time switching in and out of the browser to test your content.

The workflow to view your edited content assumes that you have already opened DW CC and had your document open and in any view mode (code, design, or dual screen). Then, from the top menu bar select View | Live View to ensure it is turned on. Next, select File | Preview In Browser | Google Chrome F12 as shown in the screen capture of an example web page in DW CC on a Windows 7 laptop implementation in Figure B.

Figure B


The resulting preview of the edited web page as shown in Chrome is displayed in Figure C.

Figure C


With previous versions of DW, the workflows for live viewing of edited web page documents are quite similar, but they used an outdated rendering engine, thus you were unable to view true rendering for modern HTML5 and CSS3 elements as shown in this Live View from an earlier version of Dreamweaver in Figure D.

Figure D


Notice the buttons at the bottom of the Live View screen are square in the older version of Dreamweaver; this is due to the fact that the rendering engine does not recognize HTML5 and CSS3 elements and properties.

Modern support for HTML5, CSS3, and JavaScript

The workflow improvements displayed in this example will demonstrate the steps to inserting a header and navigation element to a blank web page HTML document. With DW CC open, I will select a new blank HTML document using these workflow steps:

1. File | New.

2. Click Blank Page.

3. Select HTML from the Page Type.

4. Click the Create button.

The New Document dialog box is shown in Figure E.

Figure E


5. Once the file is open, make sure the Insert panel is open by going to Window and selecting Insert. The Insert panel is displayed with the Structure panel options displayed in Figure F.

Figure F


6. Make sure your cursor is within the <body> tags of the open document and then select the Header option from within the Structure panel. After you click it, you will see the Insert Header dialog box (Figure G).

Figure G


This is where you can enter any class or ID that you may have associated with your web page document; in this case we don't have any for our demonstration.

7. Click the OK button to add the header tag, and then you can edit the default text to suit your requirements. The inserted header element is displayed in Figure H.

Figure H


8. We will add a navigation element just under the closing </header> tag using the same technique except we will select the Navigation option from the Structure panel and then select OK from the Navigation dialog box. We have added a <nav> element to our web page document (Figure I).

Figure I


Other HTML5 elements that can be added in a similar fashion with DW CC include <section>, <footer>, <article>, <video>, and more. With DW CC, you can code more efficiently in code view, which also incorporates line numbers and tag match highlighting to assist in identifying and debugging your code.

Code hinting in previous versions of DW involves more workflow steps and does not provide as many options for modern coding practices. An example of code hinting from an earlier version of DW is shown in Figure J.

Figure J


CSS Designer allows you to visually edit CSS

With DW CC, you can now view live CSS edits as you make changes to various elements on the open web page document. This example will walk you through editing the CSS3 box shadow properties for the product buttons on our demo web page.

1. With the demo page open in Live View and set as the display mode, locate the CSS Designer panel on the right side of the screen (Figure K).

Figure K


2. Expand the CSS Designer panel to the left to view all the available options (Figure L).

Figure L


3. In this example, I selected the CSS styles source screen-starter-index.css from the Sources panel in addition to the .categoriesNavLinkIcon from the Selectors section (Figure L).

4. I scrolled down the Properties section until I found the Border Radius visual format. Then, I scrolled down to the box-shadow section and modified the h-shadow, v-shadow, and blur settings to 5 pixels each (Figure M).

Figure M


I modified and added a property group to a group of elements using the visual format from the CSS Designer view. The resulting edit of the product buttons with box shadow is displayed in Figure N.

Figure N


Edge web fonts integration

This example will show how to change a font to an Adobe Edge web font using the Text Properties panel. Using the same demo website, we will update the "Gear Up" text by following these steps.

1. Highlight the text Gear Up.

2. Click the Inspect button.

3. Click the .heroTitleTop from the Computed Selectors section (Figure O).

Figure O


4. Check the box Show Set Properties in the Properties section of the CSS Designer panel (Figure P).

Figure P


5. Click the text icon in the Properties panel shown in Figure Q.

Figure Q


6. Go to the font-family drop-down menu in the CSS Designer panel (Figure R).

Figure R


7. Click Manage Fonts..., and then the Manage Fonts pop-up window displays (Figure S).

Figure S


8. From the Adobe Edge Web Fonts, check fonts to add them to your Adobe Edge Web Fonts Library. After you make your selections, click the Done button. The selected fonts are shown in Figure T.

Figure T


The selected Adobe Edge Fonts are now added to the font-family list (Figure U).

Figure U


9. I selected the aladin font-family and then selected Gear Up text updated on the fly as shown in Figures V and W.

Figure V


Figure W


One enhancement that I will not review in this article but is worth mentioning is the added feature JQuery UI (Figure X). The modern platform support in DW CC allows you to comfortably drag-and-drop widgets from the Insert panel to your web document projects with JQuery UI, which allows you to make progress bars, sliders, menus, and other useful and customizable components without having to leave the DW CC application.

Figure X


The bottom line

If you are on the fence about upgrading your previous versions of DW, I recommend that you make the jump to CC and start improving your workflows.

By Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...