Tag Archive: CSS Designer

Dropcaps: Easily Create Drop Caps in Dreamweaver CC

Using CSS to create drop caps in your design can be cumbersome. If you’ve used dropcap.js, you know it’s a much easier way to realize your design. The good news? We’ve made it even easier for Dreamweaver CC users with a native dropcap.js extension called Dropcaps.

Now you can enlarge the first letter of a paragraph or section of text to catch readers’ attention and jazz up your design.

 

Dropcap first character

Dropcap first character

Overview of the Enhanced CSS Designer and Element Quick View in Dreamweaver CC

The latest release of Dreamweaver CC has not only introduced new features, but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.

CSS Designer

This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:

  • Start a page design with the CSS Designer.
  • Work with the CSS Designer visual controls.
  • Use the panel’s workflow enhancements.

You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.

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.