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.
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 https://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.