Adaptations by PVII
PVII Adaptations is a Dreamweaver extension that allows you to select from 5 unique responsive 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 PVII
2 Adaptations by PVII
Contents
Adaptations 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 Adaptations Pages ................................................................................................................. 5
Creating a Adaptations Page ............................................................................................................................... 5
Menu Type ...................................................................................................................................................... 5
Site Wide Management .......................................................................................................................................... 6
Assets folders .......................................................................................................................................................... 6
Uploading to your server .................................................................................................................................... 6
Adaptations Fundamentals ..................................................................................................................................... 6
Adaptations CSS Notes........................................................................................................................................ 7
Adding your own content ................................................................................................................................... 7
What about images? ........................................................................................................................................... 7
What about videos? ............................................................................................................................................ 8
Adaptations CSS and Script Guide .......................................................................................................................... 9
Adaptations Conditional Comments ..................................................................................................................... 10
PVII Adaptations
2
3 Adaptations by PVII
Support and Contact info ...................................................................................................................................... 11
PVII Knowledge Base ......................................................................................................................................... 11
PVII Communities .......................................................................................................................................... 11
RSS News Feeds ............................................................................................................................................ 13
Before you Contact us................................................................................................................................... 13
Snail mail ....................................................................................................................................................... 13
PVII Adaptations
3
4 Install the extension
Install the extension
Look for the extension installer file p7_Adaptations_107.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. Restart Dreamweaver once the installation
is complete.
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 the name of the 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.
PVII Adaptations
4
5 Creating and Editing Adaptations Pages
Creating and Editing Adaptations Pages
You create pages using the Adaptations interface.
Creating a Adaptations Page
Let's see how easy it is to create a page. To create a page, choose: File > New PVII PagePack >
Adaptations. The interface will open.
Select a Page Design and the Preview image will change to reflect your choice. Choose a Menu Type
and then click the Create Page 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.
Menu Type
If PVII Tree Menu Magic 2 or Pop Menu Magic 2 is installed on your system, you will be able to include
those menus, automatically, in your Adaptations pages. If not, the system includes a nicely styled static
menu.
PVII Adaptations
5
6 Site Wide Management
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 Adaptations system generates the following folder:
p7adaptations
This folder contains your core CSS files, images, and the PVII Equal Height Columns script
If you choose an optional PMM2 or TMM2 menu, the system will also generate a p7pmm or p7tmm
folder, as well as a fireworks folder that contains editable arrow images for your TMM2 menu.
The Adaptations system will create these folders in the same folder where you save your Adaptations
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
Make sure you upload all asset folders to your Web site.
Adaptations Fundamentals
Adaptations is all about responsive design. Responsive pages respond to the width of your browser or
mobile device in real time. The overall design theme is constant, but columns reflow and text size is
adjusted to ensure a usable and readable experience in all devices at all times. Whether you are viewing
on a 27 inch monitor, an iPhone, an iPad, or an Android, your page will always fit. All modern mobile
devices (iPhone, iPad, Android) have full support for the responsive CSS techniques we use, as do
modern desktop browsers (IE9, IE10, Firefox, Safari, and Chrome). Older browsers display a perfect page
using a conventional CSS min-width.
PVII Adaptations
6
7 Adaptations Fundamentals
Adaptations CSS Notes
If you possess basic CSS skills you will find it very easy to customize the core CSS for your Adaptations
page. If you get stuck, let us know and we'll be happy to help you.
The responsive aspects of all Adaptations layouts are dependent on the CSS media queries inside the
p7adapt-0X-response style sheets. Please be careful in editing the responsive CSS files unless you have a
good understanding of how media queries work. If you'd like to learn more about CSS media queries,
this is an excellent article.
Adding your own content
Since Adaptations pages are responsive and adaptive, the content you add should be flexible width—
not fixed width.
What about images?
If you're wondering how you can manage adding images to your pages without risking breakage caused
by an image's inherent fixed proportions, we've got you covered. Each core Adaptations CSS file comes
with 3 special CSS classes that you can assign to an image:
img.scaled
Use this class when you want your images to scale as wide or narrow as your page. This class also
contains a neat border/shadow effect.
img.scaled-max
Use this class when you want your images to scale with your page but only up to the maximum natural
width of the image. This class also contains a neat border/shadow effect.
img.scaled-max-plain
Use this class when you want your images to scale with your page but only up to the maximum natural
width of the image. This class omits border/shadow effects.
PVII Adaptations
7
8 Adaptations Fundamentals
What about videos?
Videos can present an issue in a responsive design—unless you make your video responsive. This is quite
easy if you are using a standardized YouTube or Vimeo movie carried inside an iframe tag. Simply wrap
your iframe inside a DIV and give that DIV a class of .video-wrapper. Then add these rules to your style
sheet:
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
PVII Adaptations
8
9 Adaptations CSS and Script Guide
Adaptations CSS and Script Guide
The HTML head region of each Adaptations layout page includes links to CSS and script files. This is what
you will find in Layout 1 pages when using a TMM2 menu:
<script type="text/javascript" src="p7adaptations/p7EHCscripts.js"></script>
This is a link to the PVII Equal Height Columns script, which can be further explored in this online
tutorial.
<script type="text/javascript" src="p7tmm/p7TMMscripts.js"></script>
This is a link to the Tree Menu Magic 2 script. If you were using a Pop Menu Magic menu, the link would
be to the PMM2 script. If you are using a static menu, there will be no linked menu script.
<link href="p7tmm/p7TMM15.css" rel="stylesheet" type="text/css" media="all" />
This is a link to the Tree Menu Magic 2 CSS. If you were using a Pop Menu Magic menu, the link would
be to the PMM2 CSS file. If you are using a static menu, there will be no linked menu CSS.
<link href="p7adaptations/p7adapt-01-tmm.css" rel="stylesheet" type="text/css" />\
This is the core Adaptations CSS file for Layout 01 with a TMM menu. If you were using a PMM menu,
the file would be named p7adapt-01-tmm.css instead. If you were using a static menu, the file would be
p7adapt-01.css.
<link href="p7adaptations/p7adapt-01-response.css" rel="stylesheet" type="text/css" />
This style sheet carries the CSS media queries that enable the responsive behavior in Adaptations pages.
p7adapt-01-response.css is used for Layout 01 pages, no matter which of the menu options you have
chosen.
<link href="http://fonts.googleapis.com/css?family=Federo" rel="stylesheet" type="text/css">
This is a link to Google's font service. It allows us to use a custom font for the logo and headings in your
Adaptations pages. Learn more about Google Web fonts here.
PVII Adaptations
9
10 Adaptations Conditional Comments
Adaptations Conditional Comments
Each layout uses several Conditional Comments to work around CSS issues in various versions of
Internet Explorer. Layout 01 has these Conditional Comments in the head:
<!--[if lt IE 9]>
<style>body {min-width: 760px;}#columns {zoom: 1;}</style>
<![endif]-->
<!--[if lt IE 8]>
<style>.three-column-column2 {width: 30%;}.main-content {width: 59%;}</style>
<![endif]-->
<!--[if lte IE 6]>
<style>#masthead, #columns, #footer {width: 980px;}</style>
<![endif]-->
Do not remove these unless you know what you are doing.
PVII Adaptations
10
11 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
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...
PVII Adaptations
11
12 Support and Contact info
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
Need help setting up a newsgroup?
Setting up a new newsgroup account in Windows Mail (Vista)
Setting up a new newsgroup account in Outlook Express
Setting up a new newsgroup account in Mozilla Thunderbird
Setting up a new newsgroup account in Entourage
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.
PVII Adaptations
12
13 Support and Contact info
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:
[email protected] 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
PVII Adaptations
13
