CCM Composer Pages.

1 by PVII

CCM Composer Pages.1 is a Dreamweaver extension that allows you to select from 6 unique Column
Composer Magic-based layouts and then creates your page instantly.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen
Project Seven Development
2 CCM Composer Pages.1 by PVII

Table of Contents

CCM Composer Pages.1 by PVII .............................................................................................................................. 1

Install the extension ................................................................................................................................................ 4

Work in a defined Dreamweaver site ..................................................................................................................... 4

Specify local site location .................................................................................................................................... 4

Site Name ........................................................................................................................................................ 4

Local Site Folder .............................................................................................................................................. 4

Creating and Editing CCM Composer Pages ........................................................................................................... 5

Creating a CCM Composer Page ......................................................................................................................... 5

Editing with the Column Composer Magic Interface .......................................................................................... 6

Site Wide Management .......................................................................................................................................... 6

Assets folders .......................................................................................................................................................... 6

Uploading to your server .................................................................................................................................... 6

Composer Page Layouts .......................................................................................................................................... 7

Composer Pages CSS fundamentals........................................................................................................................ 8

CCM Composer Pages on mobile devices ..................................................................................................... 13

Converting Composer Pages Menus to Pop Menu Magic menus ....................................................................... 14

Composer Pages.1 by PVII | ©2012 Project Seven Development

2
3 CCM Composer Pages.1 by PVII

Support and Contact info ...................................................................................................................................... 15

PVII Knowledge Base ......................................................................................................................................... 15

PVII Communities .......................................................................................................................................... 15

RSS News Feeds ............................................................................................................................................ 16

Before you Contact us................................................................................................................................... 16

Snail mail ....................................................................................................................................................... 16

Composer Pages.1 by PVII | ©2012 Project Seven Development

3
4 Install the extension

Install the extension

Look for the extension installer file p7_Composer-1_105.mxp (or higher) in the root of the zip archive
you downloaded. Double-click the file to install the extension. Dreamweaver's Extension Manager will
open and you will be prompted to complete the installation. When the installation completes, restart
Dreamweaver.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file
association issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.

Work in a defined Dreamweaver site

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary
so that Dreamweaver knows how to link required assets. If you are new to Dreamweaver or need to
learn how to define a web site, follow these simple steps:
Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on
your Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site
files. When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the
Servers category, where you can specify a remote folder on your remote server.

Site Name
The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the
browser.

Local Site Folder

This is a folder on your local disk where you store site files, templates, and library items. Create a folder
on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-
relative links, it does so relative to this folder.

Composer Pages.1 by PVII | ©2012 Project Seven Development

4
5 Creating and Editing CCM Composer Pages

Creating and Editing CCM Composer Pages

You create pages using the Composer Pages interface. Once your page is created, you can use the
Column Composer Magic interface to edit the structure.

Creating a CCM Composer Page

Let's see how easy it is to create a page. To create a page, choose: File > New PVII PagePack >
Composer Pages - Set 1
The interface will open.

Select a Page Layout and the Layout Preview image will change to reflect your choice. Click the Create
button. The Save As dialog will open. Browse to a folder within your current Dreamweaver-defined site
so that it appears in the Save in box. Enter a File name and click Save.

Composer Pages.1 by PVII | ©2012 Project Seven Development

5
6 Site Wide Management

Editing with the Column Composer Magic Interface

Once you create your page you can use the Column Composer Magic interface to add or remove rows
and to change display options or column configuration options. Please see the main Column Composer
Magic user guide for guidance.

Site Wide Management

Once you create, save, and customize your first page you should make a decision on how to manage
repeating content, such as headers, menus, and footers. The two most popular methods would be
Dreamweaver's Template utilities (DWT) or Server-Side Includes.

Assets folders
When your page is created, the Composer Pages system generates the following folders
 p7ccm
This folder contains your core CCM CSS files, images, and script
 p7composer-pages
This folder contains your Composer Pages CSS and images
 p7ehc
This folder contains the PVII Equal Heights Column script
The Composer Pages system will create these folders in the same folder where you save your Composer
Pages page. This is a workflow feature that enables you to create multiple testing folders in which to
play—but you must be mindful of where your relevant assets folders are when you ultimately publish
your page or when you edit assets.

Uploading to your server

When you publish your page, you also need to upload the following folders:
 p7ccm
 p7composer-pages
 p7ehc
 p7ie_fixes

Composer Pages.1 by PVII | ©2012 Project Seven Development

6
7 Composer Page Layouts

Composer Page Layouts

Each layout uses a single CCM structure with a unique number of rows and column configurations.
Layout 01, for example, is made up of 4 rows:
 First Row
The first row is configured as a single column and contains the logo and a horizontal menu. Its
background is set to the CCM Contrast option, which gets a black textured background image
from the Salsa theme core CSS. This row is assigned a custom ID="masthead", which we use to
write specific CSS rules that position and style the logo image and the menu.
 Second Row
The second row is also a single column and is assigned the CCM Accent background option,
which for the Salsa theme means it gets a pixel-pattern red background image. Inside this row is
a nested CCM structure that is set to a fixed width of 980 pixels with outer shadow turned on.
This nested structure has a single row set to 2 columns.
 Third Row
The third row is also a single column and is assigned the CCM Normal background option, which
for the Salsa theme means it gets a white background color. Inside this row is a nested CCM
structure that is set to a fixed width of 980 pixels with outer shadow turned on. This nested
structure has a single row set to 3 columns. Equal height columns and column separators are
enabled in the CCM interface.
 Fourth Row
The fourth row is configured as a single column and contains the copyright notice and a
horizontal menu. Its background is set to the CCM Contrast option, which gets a black textured
background image from the Salsa theme core CSS. This row is assigned a custom ID="footer",
which we use to write specific CSS rules that style the menu.

As you see in the screen capture above, each CCM structure is highlighted with a colored outline in
Dreamweaver. This is a default CCM feature, which you can read about in the CCM user guide.

Composer Pages.1 by PVII | ©2012 Project Seven Development

7
8 Composer Pages CSS fundamentals

Composer Pages CSS fundamentals

If you possess basic CSS skills you will find it very easy to customize your CCM Composer Pages. Since
the structural aspects of all Composer Page layouts are dependent on the core Salsa Theme CCM style
sheet, you will be using one of the 6 Composer Pages style sheets to customize your page. Each of the 6
layout style sheets is very similar. You can use Dreamweaver's CSS Styles panel to edit the styles or you
can edit them directly in the style sheet file.
Let's look at the CSS file for Layout 1, p7composer-set1-01.css:
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
min-width: 980px;
}
The Layout 1 main structure is auto width, but the nested structures in the second and third rows are
set to 980px fixed width. The min-width property of the body is set to 980px. Change this only if you edit
the width of the nested structures.

#masthead .p7ccm-col {
display: table;
table-layout: fixed;
position: relative;
width: 100%;
}
The column inside the masthead is set with the above properties to facilitate positioning of the logo
image and the menu. You should not edit this rule unless you are fully aware of what you are doing.

#masthead .p7ccm06-1col-column1-cnt {
display: table-cell;
vertical-align: bottom;
text-align: right;
height: 90px;
padding-left: 350px;
}
Change the text-align value to reposition your menu. The height value corresponds to the height of the
logo and the padding-left value corresponds to the width of the logo. Change these values to match the
dimensions of your logo.

Composer Pages.1 by PVII | ©2012 Project Seven Development

8
9 Composer Pages CSS fundamentals

#logo {
position: absolute;
left: 0px;
top: 0px;
}
The logo is positioned absolutely in the top left corner of the masthead. When you design your logo, you
should build top and bottom white space into the image so that you can keep the top and left positions
set to zero. If you do change either the left or top value, you will need to add them to the height and
padding-left values in the #masthead .p7ccm06-1col-column1-cnt rule. If you would like your logo to sit
above your menu, rather than next to it, remove the position: absolute line from this rule and the
padding-left line from the #masthead .p7ccm06-1col-column1-cnt rule.

.horizontal-menu, .footer-menu {
margin: 0px;
padding: 0px;
text-align: right;
width: 100%;
word-spacing: -1em;
vertical-align: bottom;
}
This rule orients the masthead and footer menus. You should not ordinarily be editing this rule.

.footer-menu {
text-align: center;
}
This rule centers the footer menu.

.horizontal-menu li, .footer-menu li{

display: inline-block;
list-style-type: none;
word-spacing: normal;
}
This rule turns the masthead and footer menus into horizontal menus.

Composer Pages.1 by PVII | ©2012 Project Seven Development

9
10 Composer Pages CSS fundamentals

.horizontal-menu a, .horizontal-menu a:visited,

.footer-menu a, .footer-menu a:visited {
color: #BBB !important;
text-decoration: none;
display: block;
padding: 5px 10px;
border-left: 1px solid;
border-color: #555;
}
This rule styles the masthead and footer menu links.

.horizontal-menu li:first-child a, .footer-menu li:first-child a {

border-left: none;
}
This rule turns off the left border for the masthead and footer menus.

.horizontal-menu a:hover, .horizontal-menu a:focus, .footer-menu a:hover,

.footer-menu a:focus {
color: #B45050 !important;
outline: none;
}
This rule styles the masthead and footer menu links when they are being hovered over or have focus.

.round-img {
display: block;
border-radius: 6px;
border: 2px solid;
border-color: #8E3636;
}
This is a utility rule that allows you to create rounded corners on an image. Simply assign this class to
any image on your page.

.image-speciale {
border-radius: 6px;
box-shadow: 0px 0px 30px #000;
}
This rule allows you to assign rounded corners and a drop shadow to an image. Simply assign this class
to any image on your page.

Composer Pages.1 by PVII | ©2012 Project Seven Development

10
11 Composer Pages CSS fundamentals

.right-aligned {
text-align: right;
}
This utility class can be used to set an element to align right.

.no-margin {
margin: 0;
}
This utility class can be used to remove the margin on an element.

#footer {
font-size: 85%;
text-transform: uppercase;
text-align: center;
}
This rule styles the elements inside the footer row.

.copyright {
font-size: 85%;
text-align: center;
letter-spacing: 0.3em;
}
This class is assigned to the paragraph in the footer that contains the copyright notice.

.p7ccm-col a.button-link, .p7ccm-col a.button-link:visited {

display: inline-block;
color: #000;
text-decoration: none;
background-color: #666666;
padding: 5px 15px;
border-radius: 6px;
box-shadow: inset 0px 0px 20px #444,0px 0px 10px #000;
font-size: 90%;
text-transform: uppercase;
}
This class can be assigned to any link (except those in the masthead or footer menus) to give them a
cool buttonized look. To do this, select the link and assign the button-link class to the link's <a> tag, like
this: <a href="your-link.htm" class="button-link">Sample Button</a>

Composer Pages.1 by PVII | ©2012 Project Seven Development

11
12 Composer Pages CSS fundamentals

.p7ccm-col a.button-link:hover, .p7ccm-col a.button-link:focus {

box-shadow: inset 0px 0px 20px #444,0px 0px 5px #000;
background-color: #757575;
outline: none;
}
Hover and focus styles for the custom button-link class.

.icon-bullet {
background-image: url(img/bullet-check.png);
background-repeat: no-repeat;
padding-left: 24px;
background-position: left center;
font-weight: normal;
text-transform: uppercase;
}
Assign this class to headings, for example, and the heading will appear with a page icon next to it.

h1, h2, h3, h4 {

margin: 0px;
font-weight: normal;
}
These are the styles for heading tags.

h3, h4 {
text-transform: uppercase;
}
Exception rules for level 3 and 4 headings.

p {
margin: 3px 0px 15px 0px;
}
We set margins for all paragraphs on the page.

Composer Pages.1 by PVII | ©2012 Project Seven Development

12
13 Composer Pages CSS fundamentals

CCM Composer Pages on mobile devices

By default, Composer Pages display beautifully (and identically) on desktop and mobile devices. If you
have special needs that require you to customize a particular part of your presentation for mobile
devices, we've provided media query blocks inside your Composer Pages CSS file. Feel free to use them
as you see fit. They are at the bottom of each file and look like this:
/*Mobile Devices*/
/*Smartphones*/
@media only screen and (max-device-width: 480px) {
.sample-class {font-size: 14px;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px) {
.sample-class {font-size: 14px;}
}

Composer Pages.1 by PVII | ©2012 Project Seven Development

13
14 Converting Composer Pages Menus
to Pop Menu Magic menus

Converting Composer Pages Menus

to Pop Menu Magic menus
You can easily convert the masthead menu or vertical sidebar menu in your page to a Pop Menu Magic
(version 2 or higher) menu.
Please see the online tutorial

Composer Pages.1 by PVII | ©2012 Project Seven Development

14
15 Support and Contact info

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the
business.

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips,
and techniques relating to our products, as well as to general web development issues..
Open the Knowledge Base | View the 10 Most Recent Additions

PVII Communities
PVII maintains separate and distinct Web Forum and Newsgroup communities. We do this to ensure you
always have access via your preferred medium and device.

1. The PVII Web Forums

The PVII Web Forum is a modern browser-based community, accessible to both desktop and mobile
devices and requires no additional software or plugins.
Visit The PVII Web Forum community now...

2. PVII Newsgroup forums

The Project VII Newsgroup is available via private and secure NNTP servers. In order to subscribe to a
newsgroup you must have a newsgroup-capable client installed such as:
1. Mozilla Thunderbird
2. Windows Live Mail
3. Windows Mail/Outlook Express
4. Opera Mail
5. Entourage
Server: forums.projectseven.com

Composer Pages.1 by PVII | ©2012 Project Seven Development

15
16 Support and Contact info

Need help setting up a newsgroup?

Setting up a new newsgroup account in Windows Mail (Vista)
Setting up a new newsgroup account in Mozilla Thunderbird
If you have another newsgroup-capable program that you are using, please see its documentation to
learn how to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with UseNet feeds that may be provided by your ISP. That is,
you will not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our
news server as a new account.

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not
sure how to subscribe, please check this page:
PVII RSS Info

Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with your
product. Please include your Dreamweaver version, as well as your computer operating system type in
all support correspondence.
E-Mail:
support@projectseven.com
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.

Snail mail
Project Seven Development
339 Cristi Lane
Dobson, NC 27017

Composer Pages.1 by PVII | ©2012 Project Seven Development

16