New Features in Dreamweaver CC
The new Dreamweaver CC includes several new features to Live View and CSS Designer to help you create and update web content easily. The new Element Quick View feature helps you to quickly view, navigate, and edit your HTML markup.
Element Quick View
Review the markup in your document using the new Element Quick View, which renders an interactive HTML tree for both static and dynamic content. Modify your static content structure right within the HTML tree.
Element Quick View (View > Element Quick View) is introduced to help speed up the development process. With Element Quick View, you can see all the elements in your page in a single, easy-to-read view and edit static content.
Editing Capabilities in Live View
Element Display
With the new Element Display, you can now associate HTML elements with classes and IDs directly in Live View. The Element Display hints you with the available classes and IDs to help you quickly view and choose the required option.
Live Text Editing
You can now edit text directly in Live View and preview the changes without having to switch between different views.
Double-click the text element in Live View to enter the editing mode.
Live View Property Inspector
The Property Inspector is now made available in Live View so that you can quickly make edits to your page without switching to Design or Code View.
Live Insert
In this release, you can insert HTML elements directly into the Live View using the Insert panel. The elements are inserted in real time without any need to switch modes. You can also preview your changes right away.
CSS Designer Enhancements
Enhanced User Interface for Border Control
A tabbed control that helps you set all the four border properties in an easy and intuitive way.
- Tabbed control to avoid seeing all values at once reducing confusion.
- Intuitive and friendly icons that any beginner can follow.
- Two sets of icons to indicate unset/deleted and disabled states.
- A one-stop “All sides” tab to set all border properties at once.
- Computed row that directs you to the most appropriate tab while inspecting.
Copy-Paste Styles
You can now copy styles from one selector and paste into another. You can copy all styles or copy only specific category of styles such as Layout, Text, and Border.
Copy styles using CSS Designer
- If a selector has no styles, Copy and Copy All Styles are disabled.
- Paste Styles is disabled for remote sites that cannot be edited. But Copy and Copy All styles is available.
- Pasting Styles that exist partially on a selector (Overlapping) works. Union
of all the selectors is pasted.
- Copy-paste Styles also works for different linkages of CSS files – Import, Link, Inline Styles.
Quick Edit Text Boxes
Dreamweaver now includes quick-edit text boxes in which you can specify the shorthand code for properties such as margin, padding, border, and border-radius. This change has been made for users who prefer specifying code to using mouse/keyboard for specifying properties.
Enhancements to Custom Properties Workflow
Earlier, you clicked + in the Properties pane of the CSS Designer to add ‘Other’ (or custom) properties. Now, a set of text boxes - property name and value - are made readily available at the end of the Properties list. These text boxes let you directly type in the property name and its value without having to click +.
To add additional rows of custom properties, press Tab. The name of the ‘other’ property group is changed to ‘Custom.
Undo/Redo Enhancements
Until now, to undo/redo an operation performed in the CSS Designer panel, you had to click the CSS file (in related files) and then undo/redo the operation.
With the new enhancements to the undo/redo feature, you can undo/redo an operation directly from the Live View of a document or form the CSS Designer panel. These changes then get automatically reflected in the associated CSS file.
- When you undo/redo an action from the CSS Designer panel, the Live View is automatically refreshed.
- When you edit the document using the source code, and undo the changes from Live View, the display changes to Split view and the related source code is brought into focus.
All undo/redo actions are recorded at the HTML file-level. This means, any manual changes to a CSS file can be undone from ANY related file. For example, consider that style1.css and style2.css are related to index.html. If you add styles for .h1 in style1.css, and then do an undo from style2.css, the .h1 style gets deleted from style1.css.
Back to Top
