Visualize Relationships Between HTML Elements in Live View & Applied CSS Selectors

A few months ago, we announced a new Dreamweaver CC update with several exciting new features.

One of these, the Live Highlight feature, lets you visualize the relationships between HTML elements in Live View and applied CSS selectors.

Let’s review how Live Highlight works. In the screenshot below, a user intends to make changes to the ‘Cart’ navigation link. To make changes to HTML elements, the user usually starts by selecting the CSS selector “.SiteNavLink a” and editing the associated properties. These changes could however inadvertently change other HTML elements that the user might have no intention of changing at all.

 

Live Highlight in Dreamweaver

Live Highlight in Dreamweaver

 

Using Live Highlight, users can now simply click the CSS selector in the CSS Designer panel to see the affected page elements. These elements are highlighted in blue in Live View mode. Users decide if they want to create a separate Selector that applies to ‘Cart‘ alone, thus leaving the styles for other links undisturbed.

Enjoy the video below that shows how to use the new Live Highlight feature. Also, check out this article for more info http://ref.sx/LiveHighlightDreamweaver

 

Download and get your hands on the modernized Dreamweaver CC with exciting features that make mobile and web content creation a more streamlined and productive experience.

  • Thanks Tareq for the post. It really made the job easy while working on html and css. Tell me how to make if work for cross browser compatibility?

Share your thoughts

Your email address will not be published. Required fields are marked *

*


− 4 = five