MERCURY BY PVII - Project Seven · MERCURY BY PVII Mercury is a single-page Web site, a design...

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.

http://www.projectseven.com/products/menusystems/pmm/user_guide/getting_started/before_define.htm

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;


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

http://www.fontsquirrel.com/


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;

}


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-size: 44px;



padding: 5px 10px;

color: #EEE;


margin: 0;

border-bottom: 1px solid #FFF;

position: fixed;

z-index: 999999;

width: 100%;

left: 0px;

top: 0px;

}

.navigation {


background-color: #C97170;

}

h1, h2, h3, h4 {



color: #000;

text-align: center;

}


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: '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.

http://www.fontsquirrel.com/fontface


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

http://www.projectseven.com/tutorials/servers/iis-woff/index.htm


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:



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;


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;


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.

http://www.w3.org/TR/css3-background/#the-box-shadow

http://www.w3.org/TR/css3-background/#the-box-shadow


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:


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);


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


overflow: hidden;




}


float: left;

width: 38%;

margin-right: 4%;

}


width: 58%;

margin-right: 0;

}

2 COLUMNS, EACH 60% LEFT - 40% RIGHT


overflow: hidden;




}


float: left;

width: 58%;

margin-right: 4%;

}

27 CSS Columns

Page 27


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>



</div>

</div>

Markup for 60%/40% columns <div class="div.css-column-6040">



</div>



</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;


background-color: #F1F1F1;

border: 1px solid #CCC;

width: 100%;

}

/*Data Table CSS3 Properties*/

table.data-table {

background-color: rgba(240,240,240,.5);



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;


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.




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.


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.

http://www.projectseven.com/products/templates/mercury/mercury_01.htm#section-2

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.

http://www.projectseven.com/support/questions.asp?type=cat1&id=265

http://www.projectseven.com/support/questions.asp?type=recent

news://forums.projectseven.com/pviiwebdev

news://forums.projectseven.com/dreamweaver

news://forums.projectseven.com/fireworks

news://forums.projectseven.com/css

http://www.projectseven.com/support/oe.htm

http://www.projectseven.com/support/tbird.htm

http://www.projectseven.com/support/entourage.htm

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:

[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

http://www.projectseven.com/xml/index.htm

mailto:[email protected]

Date post:	08-May-2020
Category:	Documents
Upload:	others
View:	6 times
Download:	0 times

MERCURY BY PVII - Project Seven · MERCURY BY PVII Mercury is a single-page Web site, a design...

Documents