Harmonium is a Page Pack Collection that installs inside Dreamweaver, allowing you to instantly create one of nine professionally designed, responsive web pages. Each page is complete and ready to go. Simply add your content and images and you are ready to publish.
Harmonium pages are structured using our Harmony page layout tool and contain fully functional Adaptive Menu Magic menus. If you enjoy coding yourself, Harmonium may be all you need. If, however, you would prefer to have the ability to edit and customize your page structure and your navigation menus, the following related products will make your Harmonium pages fully editable from within a user interface:
Harmony allows you to edit the column/row configuration of any Harmonium page, at any time. Add, remove, or re-order columns; change widths; define colors; set border effects; define box styles.
Visually edit and manage the responsive navigation bar on every Harmonium page. Adaptive Menu Magic is the most advanced menu system available for Dreamweaver. It is fully responsive, adaptive, and meets ADA accessibility standards.
Note: Whether you own the related products or are considering purchasing one or more, remember that each of the products can be used on any page or project you need to complete. There are no limitations.
Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...
To open the interface, choose File > New PVII Page Pack
The Interface will open
Simple choose a Page Layout and click the Create button. A Save dialog will open.
Give your page a name and save it within your defined Dreamweaver site.
After you create your Harmonium page, there is an important decision you should make. If you wish to manage site-wide repeating content, such as mastheads, logos, navigation menus, and footers, you need to use some type of site-wide management technique. The most popular method for Dreamweaver users is DWT (Dreamweaver Template).
Harmonium comes with two categories of pages. Layouts 1-7 have horizontally oriented top menus. Layouts 8 and 9 have vertical sidebar menus in a left column. You can pick one or the other as the basis for a Dreamweaver Template. Each one will need to be configured differently.
After creating your Harmonium page, edit the content that will be common to all the pages in your site. Finalize your logo and masthead, your menu, and your footer. Now you're ready to make a Template.
Choose File > Save As Template
Follow the onscreen prompts to save your new template. Name it harmonium-top-menu for clarity
Leave the DWT file open, as you'll be doing some work in it.
Note: If you wish to have a vertical sidebar menu for your site, then make sure you use one of the relevant Harmonium layouts (8 or 9) and name your Template harmonium-side-menu.
Switch to Code View in your DWT file.
Until you create an editable content region, all content on your page will be locked. You want your logo to be locked, and your menu, and your footer. But you will certainly need to have your page's main content areas be editable so that you can add relevant content to each of the pages in your site.
In each Harmonium top menu layout, there are 3 separate Harmony instances. Each instance's root DIV is assigned an ID: p7HMY_1 (Navigation), p7HMY_2 (content), and p7HMY_3 (bottom content, including footer an social icons).
The content area is always going to be p7HMY_2, and that's the DIV we want to wrap inside of an editable region.
Place your cursor inside the p7HMY_2 DIV and click the associated tag on the Tag Selector bar that runs along the bottom of your Code window (just above the property inspector). The entire code for p7HMY_2 will highlight.
With the p7HMY_2 code still highlighted, choose Insert > Template Objects > Editable Region
Enter a name (MainContent is pretty appropriate) and click OK. Your Template is now ready for saving.
Save your DWT file and close it.
After creating your Harmonium page, edit the content that will be common to all the pages in your site. Finalize your logo and masthead, your menu, and your footer. Now you're ready to make a Template.
Choose File > Save As Template
Follow the onscreen prompts to save your new template. Name it Harmonium-Left-Menu for clarity.
Leave the DWT file open, as you'll be doing some work in it.
Switch to Code View in your DWT file.
Until you create an editable content region, all content on your page will be locked. You want your logo to be locked, and your menu, and your footer. But you will certainly need to have your page's main content areas be editable so that you can add relevant content to each of the pages in your site.
In each Harmonium sidebar menu layout, there are 5 separate Harmony instances. Each instance's root DIV is assigned an ID: p7HMY_1 (Navigation), p7HMY_2 (menu and main 2-column structure), p7HMY_3 (a nested Harmony instance in the column next to the menu that you will use to customize your layout structure on template-based pages), p7HMY_4 (page-spanning black row containing ranked items), p7HMY_5 (bottom content, including footer an social icons).
Of the 5 Harmony instances, 2 will be made editable: p7HMY_3 and p7HMY_4. There is also some prime real estate below the sidebar menu, which we'll also make editable.
Switch to Code View and use the Tag Selector Bar that runs along the bottom of your Dreamweaver window to select p7HMY_3. The entire code for p7HMY_3 will highlight.
With the p7HMY_3 code still highlighted, choose Insert > Template Objects > Editable Region
Enter a name (MainContent is pretty appropriate for this one) and click OK.
Locate p7HMY_4 in your code. Select it using the Tag Selector Bar and make it editable by choosing Insert > Template Objects > Editable Region.
Save your DWT file and close it.
The area below the sidebar menu may as well be editable as it is a highly visible part of your page.
To make this area editable, select the entire paragraph, which will be safer to do in Code View, then choose choose Insert > Template Objects > Editable Region.
Now that your template is saved, you can easily create one or more child pages. To do so...
Choose File > New
The New Document Window will open.
Select Harmoium-Left-Menu
Or, if you've made a Top Menu Template, selectt harmoium-top-menu...
The generated page will open. You should save it in your defined site before proceeding.
Note: Make sure you save the page within your defined Dreamweaver site, before beginning to edit it.
As you move your cursor around the page, you'll notice that only the content inside the second Harmony instance is editable.
Use the methods described above and a single Dreamweaver template can drive your entire site—a site where each and every child page can have a completely different structure and look. All you need to do is place your cursor anywhere inside the editable region and open the Harmony interface, where you can then delete columns, add columns, change their width, and so very much more.
You will not be able to edit or delete any content inside the masthead, footer, or menu. Those areas can only be edited inside your DWT file. Simply open your DWT file, make your changes (a revised logo, a new menu item to access a new page, a new year for your footer's copyright notice). When you save the DWT file, Dreamweaver will ask if you want to update pages based on the template. Click Update to execute all changes.
Make sure to upload each of the Harmonium asset folders—p7Harmonium, p7hmy, and p7amm—when publishing to your web server.
If you are adept at coding HTML and CSS, you will find it quite easy to customize your Harmonium page. if you own Harmony, of course, the process will be significantly easier, and fully automated. For the details on how to work with Harmony pages, please refer to:
We make liberal use of one of Harmony's most powerful features: User Classes. If you own Harmony, you will be able to see the user classes assigned to various items in the UI...
Tip: To assign multiple class names, simple separate each one with a single space. See also:
Once you've ascertained the class names from the Harmony UI (or from the page markup) you can then open the Harmonium CSS file and use the Find feature to locate them. The Harmonium CSS file is located at this path:
p7Harmonium/p7Harmonium.css
Above the footeris a dark bar containing mission points that are ranked using different font sizes.
The structure and ease of maintaining this bar (if you want to) is really easy. Here's the markup:
<p class="ranks rank-1">Website Development</p>
<p class="ranks rank-2">Mobile Design</p>
<p class="ranks rank-3">Accessibility</p>
<p class="ranks rank-4">SEO</p>
<p class="ranks rank-5">Multimedia Design</p>
<p class="ranks rank-1">...and much more</p>
Each point is a paragraph. Each paragraph is assigned 2 classes. The first class ranks is assigned to all paragraphs. The second class defines the font size. There are 5 ranks: rank-1 to rank-5.
Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.
PVII maintains a Web Forum community. Go Direct to the Web Forum
E-Mail: support@projectseven.com
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.