Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Harmony TutorialsOne Design: All Devices: Perfect Harmony...

User Guide & Examples | Harmony Home

One Design. All Devices. Perfect Harmony

  • The first ever flexbox page layout tool for Dreamweaver
  • Makes Dreamweaver a much better program
  • No coding is ever required.
  • Add, remove, and re-order columns visually, within the Harmony interface
  • No layout is beyond your reach

Current Tutorials

The following tutorials are available:

Harmony Layout Basics

Harmony is all about being able to flesh out any type of page layout you can imagine. But all that power can be used to make simple layouts extraordinarily fast. Literally, in minutes For a web designer, this is not a trivial thing. It's more like being handed a magic wand—a means to handle more clients, or more projects, than you ever thought possible. So let's work together on a little project right now. Let's make a traditional 2-column page layout, composed of a masthead, a main content area, a sidebar, and a footer. Then we'll spice it up a little by fixing masthead so it sticks to the top of the page. We'll start with a new page, and if you follow each step, your layout will be finished in about 5 minutes.

Harmony Link Styles

The default Harmony style sheet [p7HMY-01.css] contains a set of text link styles that are applied automatically. Sometimes these rules can conflict with other elements on your pages, such as menus or widgets, by assigning unwanted borders. If this is a problem, there are two ways to fix things, which are covered in the tutorial.

Best Practices: The User Class Option

You can assign an optional User Classes to Harmony Sections, Columns, or the entire Harmony Grid. User classes are one of the most powerful features in Harmony, allowing you full freedom to customize individual elements beyond the options in the UI. User classes are assigned directly in the Harmony interface and point to CSS classes that you create, giving you total design freedom. If you are a proficient CSS author, the User Class entry boxes in the Harmony UI allow entry of multiple class names. Simply separate each name with a class.

Best Practices: Assigning Background Images

You can set simple or complex background images to any Harmony element, by assigning User Classes to Harmony Sections, Columns, or the entire Harmony Grid. User classes are one of the most powerful features in Harmony, allowing you full freedom to customize individual elements beyond the options in the UI.