mercury by pvii - project seven · mercury by pvii mercury is a single-page web site, a design...
TRANSCRIPT
MERCURY BY PVII
Mercury is a single-page Web site, a design approach that works very well for sites that would
comprise three to six traditional pages of closely related content. A brochure site for an artist,
entertainer, movie, author, or a typical restaurant would work very well. Landing pages for short-term
promotions, offers and contests would too. On the other hand, a large site like Amazon.com would not
be a good candidate. Mercury works for both desktop and mobile device browsers. Mercury is a CSS
page building tool. That means you can create Mercury documents automatically with a neat PVII
interface that is accessible from inside Dreamweaver.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII
2 Mercury by PVII
Page 2
CONTENTS Mercury by PVII ............................................................................................................................................................................................. 1
Install the extension ..................................................................................................................................................................................... 5
Work in a defined Dreamweaver site ..................................................................................................................................................... 5
Creating a Mercury page ............................................................................................................................................................................ 6
Assets folders ................................................................................................................................................................................................. 7
Uploading to your server ....................................................................................................................................................................... 7
Modifying a Mercury page ......................................................................................................................................................................... 8
Menu items ................................................................................................................................................................................................ 8
Item link text .............................................................................................................................................................................................. 9
Link only - no associated content ................................................................................................................................................... 9
Link Path ...................................................................................................................................................................................................... 9
Option: animation duration .................................................................................................................................................................. 9
Option: Enable Looping on Previous / Next Buttons (arrows) .................................................................................................. 9
Command Buttons ................................................................................................................................................................................ 10
From the top down: how Mercury pages work ............................................................................................................................... 10
Mercury on mobile devices ............................................................................................................................................................... 10
Mercury with JavaScript disabled .................................................................................................................................................... 10
Feature-rich, accessible, and usable .................................................................................................................................................... 11
A logo crafted in pure text using CSS ................................................................................................................................................... 12
Advanced techniques you'll learn ......................................................................................................................................................... 14
Font Embedding .................................................................................................................................................................................... 14
Font files and licensing ................................................................................................................................................................... 14
Setting @font-face source CSS .................................................................................................................................................... 15
Setting @font-face page CSS ........................................................................................................................................................ 16
Previewing in Dreamweaver ......................................................................................................................................................... 17
Where can I find more custom fonts? ....................................................................................................................................... 17
Browser issues with embedded fonts ....................................................................................................................................... 18
CSS rounded corners ............................................................................................................................................................................ 19
border-radius syntax ....................................................................................................................................................................... 19
CSS shadows ........................................................................................................................................................................................... 21
3 Mercury by PVII
Page 3
box-shadow syntax .......................................................................................................................................................................... 21
Editing and determining RGBA colors ............................................................................................................................................ 22
Dynamic Image Sizing .......................................................................................................................................................................... 24
CSS Columns ................................................................................................................................................................................................ 25
2 Columns, each 50% wide ............................................................................................................................................................ 25
2 Columns, each 40% left - 60% right ........................................................................................................................................ 26
2 Columns, each 60% left - 40% right ........................................................................................................................................ 26
Boilerplate markup for columns .................................................................................................................................................. 27
The data table styles ................................................................................................................................................................................. 28
Mercury CSS fundamentals .................................................................................................................................................................... 30
body ...................................................................................................................................................................................................... 30
.p7Mercury-menu ............................................................................................................................................................................ 30
.p7Mercury-menu a ......................................................................................................................................................................... 30
.p7Mercury-menu a:hover, .p7Mercury-menu a:focus ....................................................................................................... 30
.p7Mercury-menu a.down ............................................................................................................................................................ 30
h1, h2, h3, h4 ..................................................................................................................................................................................... 30
h1 ........................................................................................................................................................................................................... 30
h2, h3, h4 ............................................................................................................................................................................................ 30
h3 ........................................................................................................................................................................................................... 30
h4 ........................................................................................................................................................................................................... 30
span.subheading, p.subheading .................................................................................................................................................. 31
div.section-content .......................................................................................................................................................................... 31
.section-content strong .................................................................................................................................................................. 31
.section-content em ........................................................................................................................................................................ 31
.section-content a, .section-content a:visited ........................................................................................................................ 31
.section-content a:hover, .section-content a:focus .............................................................................................................. 31
#footer .footer-content .................................................................................................................................................................. 31
.highlight-box ..................................................................................................................................................................................... 31
.highlight-box a, .highlight-box a:visited, #footer a, #footer a:visited ............................................................................ 31
.highlight-box a:hover, .highlight-box a:focus, #footer a:hover, #footer a:focus ....................................................... 32
.section-content ul.grunged.......................................................................................................................................................... 32
.reverse-text ....................................................................................................................................................................................... 32
4 Mercury by PVII
Page 4
.previous-next .................................................................................................................................................................................... 32
.skip-links............................................................................................................................................................................................. 32
.p7HPS_mobile .................................................................................................................................................................................. 32
Stacking order (z-index) ........................................................................................................................................................................... 33
Linking to Page Sections form External Pages .................................................................................................................................. 33
Linking to Page Sections from within your page .............................................................................................................................. 34
Support and Contact info ...................................................................................................................................................................... 35
PVII Knowledge Base ............................................................................................................................................................................ 35
Newsgroup forum communities .................................................................................................................................................. 35
RSS News Feeds ................................................................................................................................................................................ 36
Before you Contact us .................................................................................................................................................................... 36
Snail mail ............................................................................................................................................................................................. 36
5 Install the extension
Page 5
INSTALL THE EXTENSION Look for the extension installer file p7_Mercury_115.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 after completing
the installation.
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 - on a page that
is saved within that site. This is necessary so that Dreamweaver knows how to link required assets to
your page. If you are new to Dreamweaver or need to learn how to define a web site, please see this
tutorial: Defining a Dreamweaver Web Site.
6 Creating a Mercury page
Page 6
CREATING A MERCURY PAGE Let's see how easy it is to create a page. To create a page, choose: File > New PVII PagePack > Mercury
The interface will open.
Select a layout from the Page Design column and the 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.
7 Assets folders
Page 7
ASSETS FOLDERS When your page is created, the Page Pack system generates the following folders
p7Mercury
This folder contains your Mercury CSS files and script
a. Fonts
This sub-folder contains the embedded fonts used on your page and the CSS to declare
the font file sources.
b. Images
This sub-folder contains several images in Mercury pages.
The Page Pack system will create these folders in the same folder where you save your Page Pack 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 need to upload the entire p7Mercury folder.
Upload the entire p7Mercury folder to your Web server
8 Modifying a Mercury page
Page 8
MODIFYING A MERCURY PAGE Mercury comes with an automated Modify interface that allows you to add, remove, and re-order
page sections. To access the Modify interface choose
Modify > Studio VII > Modify Mercury Page Scroll by PVII
The PVII Page Scroll Magic interface will open
MENU ITEMS The Menu Items list displays each of the default menu item links on your page. A row of command
buttons above the menu items list allows you to Add new menu items, Delete existing ones, or move
items Up or Down.
Add: Clicking the Add button adds a new menu item below the currently selected one, with the
default Item Link Text value of "Menu Item".
9 Modifying a Mercury page
Page 9
Delete: Click the Delete button to delete a menu item. The associated page content section will also
be removed.
Note: Before you delete a menu item remember that its related content section will also be removed.
Up: To move a menu item higher in the list, select the menu item and click the Up button one or more
times.
Down: To move a menu item lower in the list, select the menu item and click the Down button one or
more times.
ITEM LINK TEXT The Item Link Text box contains the link text for the link currently selected in the Menu Items list.
LINK ONLY - NO ASSOCIATED CONTENT Enable this option if you want to have a link that loads another page. If you select an existing menu
item and enable this option, that menu item's associated page content section will be removed.
LINK PATH The Link Path box is activated whenever the Link Only box is checked. Enter the path to the
destination page or use the Browse button to open the Select File to Link dialog box. If no entry is
made, the system will automatically supply a null "javascript:;" link.
OPTION: ANIMATION DURATION By default, we set the animation duration to 600 milliseconds. This means that the animation will last
600 milliseconds no matter how long a section is. Increase the number to lengthen the duration and
decrease it to shorten it.
OPTION: ENABLE LOOPING ON PREVIOUS / NEXT BUTTONS (ARROWS) This option is unchecked by default. When this option is checked, the system will configure the
previous and next arrows to loop. Looping means that when you click the next arrow while on the
last page, it will scroll the first page into view—while a click on the previous arrow while on the first
page, will scroll the last page into view.
10 From the top down: how Mercury pages work
Page 10
COMMAND BUTTONS The following command buttons are available.
OK: When you are done, click the OK button. The system will verify your changes and alert you to any
problems that need your attention. If there are no problems, the interface will close and your page will
be updated.
Cancel: Click the Cancel button to completely abort the current session. This will close the interface
and no changes will be made to your page.
Help: Click the Help button to open the relevant help file in your browser. The help page can remain
open for easy reference while you continue working in the interface.
FROM THE TOP DOWN: HOW MERCURY PAGES WORK The first thing you'll notice about Mercury pages are the fixed-position elements, such as menus,
logos, and footers. Depending on the layout you choose, one or more of these elements will be fixed—
that is, the element will remain in a fixed position while the rest of the page scrolls. Navigation via
mouse, keyboard, and screen reader are all supported.
MERCURY ON MOBILE DEVICES Modern mobile devices such as iPads, iPhones, and Androids, work by touch and do not support fixed
positioning. For those devices, all content is fully accessible, but the navigation bar and footer move
with the page in the traditional way.
MERCURY WITH JAVASCRIPT DISABLED Mercury pages work with script disabled. The navigation links are actually page anchors so when script
is disabled they work like normal same-page named anchors. The script is an enhancement to the
default page behavior, adding animation and state management. The page is totally accessible without
script.
11 Feature-rich, accessible, and usable
Page 11
FEATURE-RICH, ACCESSIBLE, AND USABLE Mercury uses modern CSS such as fixed positioning, embedded fonts, rounded corners, and shadows.
This makes it extremely easy for you to maintain and customize your site. The advanced CSS we use is
deployed in ways that enhance modern browsers while assuring an attractive and accessible
presentation in older ones. The idea is to start with a solid foundation that is accessible to all browsers
and devices and then enhance it for those that support advanced CSS. The result is that your page is
accessible to all, attractively designed for all, and absolutely gorgeous for many. Some techniques,
such as the embedded fonts used for section headings and menu items, work in almost all browsers—
even back to Internet Explorer version 5. Here are the key features:
Choose fixed width layouts or layouts that automatically adjust to the size of your visitor's
browser window.
Mercury is fully navigable whether using a mouse, keyboard, pointing device, touch device, or
a screen reader.
If you use your tab key to navigate and reach a link in the next page section, the system will
automatically detect this and scroll that section fully into view.
Accessing a new page section will smoothly glide your window to the top, ensuring that no
content is ever overlooked.
The previous and next arrows automatically display the title of the next or previous page when
you hover over them.
The previous and next arrows can be set to loop or to stop at the first and last page sections.
Mobile devices are automatically detected and served special style rules to address device-
specific issues.
12 A logo crafted in pure text using CSS
Page 12
A LOGO CRAFTED IN PURE TEXT USING CSS Both Mercury logos are purely CSS—they are not images.
To edit them, simply edit the text and the CSS. No image editing is required. Of course, you can replace
the text-based logos with images if you need to. Simply remove the text and span tags inside the logo
DIV:
<div id="logo">Mercury <span class="logo-shape2">Planetary</span> <span class="logo-
shape3">Dudes</span></div>
And replace it with your image:
<div id="logo">insert your image here</div>
Here are the CSS rules that serve to style the logo. The first rule sets up the container and positions it
fixed. It also declares the basic text attributes:
#logo {
text-align: center;
font-family: 'KingthingsPrintingkitRegular', Calibri, Geneva, Helvetica, sans-serif;
font-size: 44px;
line-height: normal;
text-transform: uppercase;
padding: 5px 10px;
color: #EEE;
background-color: #222;
margin: 0;
border-bottom: 1px solid #FFF;
position: fixed;
z-index: 999999;
width: 100%;
left: 0px;
top: 0px;
}
13 A logo crafted in pure text using CSS
Page 13
The page or layout spanning logo container is given a shadow:
#logo {
-moz-box-shadow: 0px 0px 30px #AAA;
-webkit-box-shadow: 0px 0px 30px #AAA;
box-shadow: 0px 0px 30px #AAA;
}
This rule styles the middle section of the logo. Each section can have one or more words.
#logo .logo-shape2 {
font-size: 50%;
color: #C05A5A;
background-color: #333;
padding: 6px;
margin-left: -0.5em;
border: 2px solid #C05A5A;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
position: relative;
top: -6px;
}
This rule styles the third and last section of logo text:
#logo .logo-shape3 {
font-size: 40%;
color: #000;
background-color: #C05A5A;
padding: 6px;
margin-left: -1em;
-moz-border-radius: 0 6px 6px 0;
-webkit-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
position: relative;
top: -6px;
}
14 Advanced techniques you'll learn
Page 14
ADVANCED TECHNIQUES YOU'LL LEARN The Mercury user guide will teach you how to use these CSS techniques:
Font Embedding
Rounded Corners
Box Shadows
RGBA colors
Dynamic Image Sizing
FONT EMBEDDING Font embedding allows the fonts used in the creation of a document to travel with that document,
ensuring that a user sees documents exactly as the designer intended them. Font embedding
technology was built into Microsoft Internet Explorer version 4, bringing embedded fonts to the Web.
It is now supported by all current modern browsers. Of the many techniques used, @font-face is the
easiest to deploy, the most accessible and it's the one we use in Mercury.
Tip: Using custom fonts for headings or call-out type boxes (as we do in Mercury) works really well. Using custom fonts for
general content text will look good on modern browsers running on newer computers, but could make your page hard to read
on older computers.
FONT FILES AND LICENSING In the past, font licensing has presented a major stumbling block to using embedded fonts on the web.
Naturally, the major font foundries want to be paid for their work and so font use is restricted. You
can't just buy a font and use it on the Web unless the license grants you that right. Because of this,
some sites now offer free fonts with licensing appropriate to use on the Web. For Mercury, we are
using Font Squirrel. Font Squirrel offers free fonts for the Web with appropriate licenses.
When you create a Mercury page, the system creates a folder named p7Mercury. Inside this folder is a
folder named fonts, which contains all of the font files and assets necessary to embed them in your
Mercury page. The entire p7Mercury folder must be uploaded to your Web server .
Each of the 2 fonts used in Mercury requires 4 file formats for cross-browser compatibility:
TTF for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4+
EOT for Internet Explorer 4+
WOFF for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG for iPad and iPhone
15 Advanced techniques you'll learn
Page 15
SETTING @FONT-FACE SOURCE CSS The CSS to deploy embedded fonts using @font-face is a 2-step process:
1. @font-face rules to declare the font source files and the font-family name
2. Normal font-family property to assign the font to a particular element on your page
Your Mercury fonts folder contains a CSS file named p7Mercury_fonts.css in which we define the font-
family name and the URLs to the source files. This is what's in that CSS file:
@font-face {
font-family: 'RieslingRegular';
src: url('riesling-webfont.eot'); /* IE9 Compat Modes */
src: url('riesling-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('riesling-webfont.woff') format('woff'), /* Modern Browsers */
url('riesling-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('riesling-webfont.svg#webfontQZPrATMZ') format('svg'); /* Legacy iOS */
}
Note: While the CSS file and the fonts do not need to be in the same folder, this makes it easier to manage the source path. If
you move the CSS file, you are responsible for adjusting the paths to the source font files. We recommend that you do not
move the CSS file.
@font-face {
font-family: 'KingthingsPrintingkitRegular';
src: url('Kingthings_Printingkit-webfont.eot'); /* IE9 Compat Modes */
src: url('Kingthings_Printingkit-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('Kingthings_Printingkit-webfont.woff') format('woff'), /* Modern Browsers */
url('Kingthings_Printingkit-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('Kingthings_Printingkit-webfont.svg#webfontfTfcyTMc') format('svg'); /* Legacy iOS */
}
The font-family value contains the font's semantic name, which is what we'll use in our normal page
style sheet. The first EOT format is for IE9 when in Compatibility View. The second Microsoft EOT
format is declared with a question mark after the EOT file name. This prevents MSIE 8 (and under)
from attempting to download the remaining font files, which would cause an error.
h1, h2, h3, h4 {
font-weight: normal !important;
font-style: normal !important;
}
16 Advanced techniques you'll learn
Page 16
If we were to use CSS to set a custom font to be bold or italicized, the results might be bad—
especially on Macs. So we set the elements that will be using the custom fonts to render normal
weight and style—with an important notation to ensure you don't accidentally override it. Do not edit
this rule.
Tip: If you decide you want to use an embedded font for your main body text, then make sure you choose a font that comes
with separate regular, bold, and italics versions. You would then need to ensure that you create rules for em and strong that
call the appropriate version of the font.
SETTING @FONT-FACE PAGE CSS Mercury comes with 2 designs called Grunge and Silk. The Grunge layouts use the
KingthingsPrintingkitRegular font set by these rules in the p7Mercury01-p7Mercury04 CSS files:
#logo {
text-align: center;
font-family: 'KingthingsPrintingkitRegular', Calibri, Geneva, Helvetica, sans-serif;
font-size: 44px;
line-height: normal;
text-transform: uppercase;
padding: 5px 10px;
color: #EEE;
background-color: #222;
margin: 0;
border-bottom: 1px solid #FFF;
position: fixed;
z-index: 999999;
width: 100%;
left: 0px;
top: 0px;
}
.navigation {
font-family: 'KingthingsPrintingkitRegular', Calibri, Geneva, Helvetica, sans-serif;
background-color: #C97170;
}
h1, h2, h3, h4 {
font-family: 'KingthingsPrintingkitRegular', Calibri, Geneva, Helvetica, sans-serif;
line-height: normal;
color: #000;
text-align: center;
}
17 Advanced techniques you'll learn
Page 17
The Silk layouts use the RieslingRegular font set by the #logo, .navigation, and h1, h2, h3, h4 rules in
the p7Mercury05-p7Mercury08 CSS files.
You can assign your embedded fonts to any element you wish simply by setting that element's CSS
font-family to one of these:
font-family: 'KingthingsPrintingkitRegular', Calibri, Geneva, Helvetica, sans-serif;
font-family: 'RieslingRegular', Calibri, Geneva, Helvetica, sans-serif;
The font-family property uses a font stack as its values. That is, a comma-separated list of fonts
beginning with the primary one. An old browser that does not support embedded fonts will look at the
list and use the first one it finds that is available on the user's computer.
Note: This fallback technique is important for old browser support, as well as for times when a visitor's connection fails before
the font files are loaded.
PREVIEWING IN DREAMWEAVER Neither Dreamweaver Design View nor Live View will display your embedded fonts. Instead, it will use
the first fallback font in the stack that it finds. To preview locally, you must use Preview in Browser
with the Preview using Temporary File option turned off in Dreamweaver preferences. A local
testing server will also work.
WHERE CAN I FIND MORE CUSTOM FONTS? Font Squirrel offers hundreds of free @font-face kits. Each kit contains all the necessary font files and
even an example CSS file.
18 Advanced techniques you'll learn
Page 18
BROWSER ISSUES WITH EMBEDDED FONTS There are no major issues. This is a very stable and reliable technique. For a split second, Firefox and
Opera will display the first alternate font, while MSIE and Webkit (Safari and Chrome) will simply
reserve a space before the embedded font is loaded. Because of the way MSIE processes the source
font directive, the link to the p7Mercury_fonts.css file should always be listed above any script tags in
the head. Mercury pages are created this way by default. If you are running IE9 and your server is a
Windows server, you may need to configure the woff file type. If you have a shared server, simply ask
your hosting company to set up the woff file extension as:
.woff file Extension and application/x-woff MIME Type
If you are running your own Windows server, or a dedicated Windows server, you can easily set up the
file mime type on the server by following the instructions in this tutorial:
Adding Woff Mime Type to Windows Server
19 Advanced techniques you'll learn
Page 19
CSS ROUNDED CORNERS We use CSS border-radius to round corners on certain Mercury elements such as menu links, the
highlight-box and the data table. Border radius is expressed using 3 properties. The first 2 are
proprietary browser-specific names and the third one is the actual W3C specified CSS3 name:
1. -moz-border-radius — Firefox
2. -webkit-border-radius — Safari and Chrome
3. border-radius — IE9, Opera 10, Safari 5, Chrome 10
Note: CSS3 border-radius is supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9. Older browsers
default to rectangular corners
BORDER-RADIUS SYNTAX Consider the highlight-box rule:
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
We use the 2 browser-specific property names and the W3C specified one. In the case of highlight-box,
it's quite simply a 6px radius curve at all 4 corners, which is expressed with a single value.
Tip: To increase the amount of curve, increase the radius value. To decrease the curve, reduce it.
You can also set a unique radius for each corner of an element. The border-radius property allows for 4
separate values, one for each corner. The values are expressed starting with the top-left and moving
clockwise to the top-right, the bottom-right, and the bottom-left. While we don't use this technique in
Mercury, it can come in handy.
-moz-border-radius: 10px 20px 0px 40px;
-webkit-border-radius: 10px 20px 0px 40px;
border-radius: 10px 20px 0px 40px;
20 Advanced techniques you'll learn
Page 20
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 30px 0 0 30px;
-webkit-border-radius: 30px 0 0 30px;
border-radius: 30px 0 0 30px;
21 Advanced techniques you'll learn
Page 21
CSS SHADOWS The CSS box-shadow property is expressed using 3 properties. The first 2 are proprietary browser-
specific names and the third one is the actual W3C specified CSS3 name:
1. -moz-box-shadow — Firefox
2. -webkit-box-shadow — Safari and Chrome
3. box-shadow — Opera and IE9
Note: CSS3 box-shadow is supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9.
BOX-SHADOW SYNTAX The box-shadow property is extremely powerful and far more nuanced than border-radius. We'll cover
some basics and how it's used in Mercury. For additional insight, we recommend reading the W3C
specification.
Consider this simple rule:
.theDIV {
box-shadow: 10px 10px 20px #000;
}
The values represent:
box-shadow {
horizontal offset | vertical offset | blur | color
}
Don't forget the browser-specific property names for moz and webkit browsers.
22 Advanced techniques you'll learn
Page 22
You can declare multiple shadows for an element, which we do for the navigation container in
Mercury. We use a regular shadow, followed by an inset shadow to create a bevel effect.
The 2 shadows are separated by a comma:
-moz-box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;
-webkit-box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;
box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;
EDITING AND DETERMINING RGBA COLORS RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows
you to set a transparency level for the element being colored—be it a background color, a text color,
or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to
determine the RGB values using its standard color picker tool.
In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6.
Open the color picker. Then click the System Color Picker icon:
23 Advanced techniques you'll learn
Page 23
The System Color Picker will open:
Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value
to:
rgba(102,204,102,1);
Remember, the "1" at the end is the alpha value and means your color is fully opaque (no
transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50%
transparency, your values would be:
rgba(102,204,102,.5);
24 Advanced techniques you'll learn
Page 24
DYNAMIC IMAGE SIZING Setting images to dynamically resize allows you to use images in your pages without worrying about a
perfect fit. The images will shrink to fit as you reduce the size of your browser window, and will expand
as you increase the window size—while always maintaining its proper aspect ratio. The maximum size
for your image will always be its natural size.
To maintain this functionality, always remove the tag attributes that Dreamweaver adds when you
insert an image. To remove the tag attributes, select your image in Design View and clear the W and H
boxes on the property inspector:
This feature is controlled by a single style rule:
div.section-content img {
max-width: 100%;
}
25 CSS Columns
Page 25
CSS COLUMNS Some Mercury pages display 2 columns:
We packed the style sheet with several classes you can use for 2-column configurations where the
column widths, from left to right, are:
50% and 50%
40% and 60%
60% and 40%
The CSS classes are in sets. Each set has a wrapper, which contains the floated columns inside and sets
a vertical border separator down the middle.
2 COLUMNS, EACH 50% WIDE
Wrapper div.css-column-5050 {
overflow: hidden;
background-image: url(images/vertical-rule.gif);
background-repeat: repeat-y;
background-position: 50% 0%;
}
Both columns div.css-column-5050-left, div.css-column-5050-right {
float: left;
width: 48%;
margin-right: 4%;
}
26 CSS Columns
Page 26
Right Column only div.css-column-5050-right {
margin-right: 0;
}
2 COLUMNS, EACH 40% LEFT - 60% RIGHT
Wrapper div.css-column-4060 {
overflow: hidden;
background-image: url(images/vertical-rule.gif);
background-repeat: repeat-y;
background-position: 40% 0%;
}
Both columns div.css-column-4060-left, div.css-column-4060-right {
float: left;
width: 38%;
margin-right: 4%;
}
Right Column only div.css-column-4060-right {
width: 58%;
margin-right: 0;
}
2 COLUMNS, EACH 60% LEFT - 40% RIGHT
Wrapper div.css-column-6040 {
overflow: hidden;
background-image: url(images/vertical-rule.gif);
background-repeat: repeat-y;
background-position: 60% 0%;
}
Both columns div.css-column-6040-left, div.css-column-6040-right {
float: left;
width: 58%;
margin-right: 4%;
}
27 CSS Columns
Page 27
Right Column only div.css-column-6040-right {
width: 38%;
margin-right: 0;
}
Tip: If you customize, remember that the column widths and margin must add up to 100%—and you will need to reposition
the background image.
BOILERPLATE MARKUP FOR COLUMNS If you want to add a 2-column section anywhere on your page, you can copy and paste the base
markup below. In Code View, make a new line where you want your columns to be. Make sure the
new line is within one of your section-content DIVs and is outside any paragraph, span, table, or other
tags. Paste the appropriate markup on the new line.
Markup for 50%/50% columns <div class="css-column-5050">
<div class="css-column-5050-left">
Content for left column
</div>
<div class="css-column-5050-right">
Content for right column
</div>
</div>
Markup for 40%/60% columns <div class="div.css-column-4060">
<div class="css-column-4060-left">
Content for left column
</div>
<div class="css-column-4060-right">
Content for right column
</div>
</div>
Markup for 60%/40% columns <div class="div.css-column-6040">
<div class="css-column-6040-left">
Content for left column
</div>
<div class="css-column-6040-right">
Content for right column
</div>
</div>
28 The data table styles
Page 28
THE DATA TABLE STYLES The CSS 3 Browser Support section of a default Mercury page contains a data table, nicely styled—
including CSS 3 corners. You'll find the rules toward the bottom of each style sheet:
div.data-table-wrapper {
margin: 12px auto;
max-width: 800px;
}
table.data-table {
font-size: 12px;
padding: 20px;
color: #000;
line-height: normal;
background-color: #F1F1F1;
border: 1px solid #CCC;
width: 100%;
}
/*Data Table CSS3 Properties*/
table.data-table {
background-color: rgba(240,240,240,.5);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
table.data-table th {
font-weight: normal;
text-align: left;
padding: 5px;
border: 1px dotted #CCC;
}
table.data-table td {
border: 1px solid #999;
text-align: center;
padding: 2px;
background-color: #CCC;
color: #000;
}
table.data-table .no {
background-color: #C05A5A;
color: #000;
border-color: #C05A5A;
}
29 The data table styles
Page 29
table.data-table .transparent {
border: 0;
}
.dt-caption {
font-family: Candara, Geneva, Arial, Helvetica, sans-serif;
display: block;
font-size: 11px;
color: #000;
text-transform: uppercase;
max-width: 800px;
margin: 6px auto;
}
To use these styles on another table, create a new DIV, assign it the data-table-wrapper class and then
assign the data-table class to the table inside.
30 Mercury CSS fundamentals
Page 30
MERCURY CSS FUNDAMENTALS If your CSS skills are intermediate or advanced, you will find it very easy to customize your Mercury
pages. If you are a beginner, you should be able to undertake some basic customizations by opening
the CSS files and reading them. The key rules contain comments.
Here are some rules to use when wanting to customize basics such as text size and colors:
BODY Change the font-family for general content. Change the page background color.
.P7MERCURY-MENU Set the text size for the main menu
.P7MERCURY-MENU A Change the menu link color, border colors, or padding. Padding controls the perceived height and
width of the link box.
.P7MERCURY-MENU A:HOVER, .P7MERCURY-MENU A:FOCUS Edit the hover state properties for menu links. The focus state is an accessibility aid for keyboard users.
As they tab, or otherwise put focus on a link, the link behaves as it would when hovered with a mouse.
.P7MERCURY-MENU A.DOWN This rule controls the properties of the menu links when they are in the selected state—that is, when
they have been clicked.
H1, H2, H3, H4 Use this rule for properties common to all heading levels, such as font-family.
H1 Set specific properties for just level 1 headings.
H2, H3, H4 Use this rule for properties common to all heading levels 2, 3, and 4.
H3 Set specific properties for just level 3 headings.
H4 Set specific properties for just level 4 headings.
31 Mercury CSS fundamentals
Page 31
SPAN.SUBHEADING, P.SUBHEADING This class can be assigned to some of the text at the end of a heading to create a sub-heading type of
effect. Consider this heading from a default Mercury page:
<h1 class="section-header">
What is Mercury? <span class="subheading"> mercury is a Planet. It's also a very cool new Single-Page CSS Template</span>
</h1>
This is how it looks:
DIV.SECTION-CONTENT Edit text size and padding for the main content sections.
.SECTION-CONTENT STRONG Define how strong text should look. Strong is a tag that Dreamweaver wraps around text when you
use the Bold button on the property inspector.
.SECTION-CONTENT EM Define how emphatic text should look. EM is a tag that Dreamweaver wraps around text when you use
the Italics button on the property inspector.
.SECTION-CONTENT A, .SECTION-CONTENT A:VISITED Style links inside the main content sections.
.SECTION-CONTENT A:HOVER, .SECTION-CONTENT A:FOCUS Style hovered links inside the main content sections.
#FOOTER .FOOTER-CONTENT Style the content inside the footer.
.HIGHLIGHT-BOX Set text and box properties for content inside the highlight box elements.
.HIGHLIGHT-BOX A, .HIGHLIGHT-BOX A:VISITED,
#FOOTER A, #FOOTER A:VISITED Set link attributes for links inside the shadow boxes and the footer.
32 Mercury CSS fundamentals
Page 32
.HIGHLIGHT-BOX A:HOVER, .HIGHLIGHT-BOX A:FOCUS,
#FOOTER A:HOVER, #FOOTER A:FOCUS Style hover and focus links for the shadow box and footer elements.
.SECTION-CONTENT UL.GRUNGED Assign this class to an unordered list to display special "star" bullets.
.REVERSE-TEXT Assign this class to any text on your page to display white text on a black background.
.PREVIOUS-NEXT Use this class to edit the position of the Previous and Next arrows.
.SKIP-LINKS Use this class (and its related classes) to edit the position and appearance of the skip links provided for
accessibility.
.P7HPS_MOBILE Use any of the classes prefixed with ".p7HPS_mobile" to edit rules for mobile devices and tablets.
Only mobile devices and tablets will see these rules.
33 Stacking order (z-index)
Page 33
STACKING ORDER (Z-INDEX) Since Mercury uses fixed position elements, z-index is assigned to ensure that the page content scrolls
underneath the fixed elements. There may be times when you need to adjust the stacking order.
Stacking order is set, via the z-index property, on the following CSS rules:
#logo
.navigation
#bottom-fixed-wrapper
.previous-next
.skip-links
Depending on the layout you are using, only some of the above rules will have a z-index declared. The
higher the z-index value, the higher the element will be in the page stacking order.
LINKING TO PAGE SECTIONS FORM EXTERNAL PAGES In the event you would like to give someone a link to your Mercury site that goes directly to a
particular page section, use this format for the link:
http://www.projectseven.com/products/templates/mercury/mercury_01.htm#section-2
Simply add a # symbol and the ID of the section you want to go to. This method works for links from
external sources only – not for links that are within the actual page.
34 Linking to Page Sections from within your page
Page 34
LINKING TO PAGE SECTIONS FROM WITHIN YOUR PAGE In the event you want to have a link (or links) within the content of a Mercury page section that links to
another section, you can use a built-in JavaScript function. Let’s say you want to have a text link in
section one that goes to section 3. Create your link text “See more on page 3”. Use Dreamweaver’s
property inspector to turn that text into a link using a same-page anchor for the link value. The anchor
value will be a # symbol followed by the page section ID. The link would look like this in Code View:
<a href="#section-3">See more on page 3</a>
Now add an onclick action calling the P7_HPSctrl function, with the number of the page section you
want to target in parentheses:
<a onclick="P7_HPSctrl(3)" href="#section-3">See more on page 3</a>
Now add a return false to the onClick event to prevent the anchor link being processed unless
JavaScript is disabled:
<a onclick="P7_HPSctrl(3);return false" href="#section-3">See more on page 3</a>
That’s it. The link will now scroll your Mercury site to page section 3.
35 Support and Contact info
Page 35
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
NEWSGROUP FORUM COMMUNITIES The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day.
Choose from the following newsgroups:
1. The PVII Webdev Newsgroup
2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup
Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new
account and point it at the following server:
forums.projectseven.com
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.
36 Support and Contact info
Page 36
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:
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