Documente Academic
Documente Profesional
Documente Cultură
Graffiti
A PVII CSS Page Pack
PVII Page Packs are automated page tools that enable you to create a professionally styled
web page with a single click. Once your page is created, you can customize it by editing styles
with Dreamweaver's CSS editor and by editing images with Fireworks. Everything you need is
included.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen
PVII
Note: If the installer file name ends with a different number than listed above, don't panic. It simply means that there
was a revision to the extension that occurred after this user guide was written.
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.
Browse to a folder in your defined site. You can also use this dialog to create a new folder if you
like.
Enter a file name in the File name box.
Click the Save button.
It's really that easy. You’ve got a fully-functioning page that is ready for previewing – and
customization.
Silkscreen
A free pixel font available at Kottke.org.
Cocaine Sans
This font is used for the logo. It is a commercial font which we cannot distribute freely, so the
logo is flattened to a bitmap. You can use your own fonts to recreate the logo or you can
purchase Cocaine Sans here.
The web layer will be visible - showing green overlays that mark the document's slices. These
slices define the boundaries of the individual web graphics (GIFs and JPGs) that your Graffiti
page uses.
If your Layers panel is not accessible, open it by choosing Windows - Layers (or F2).
Hide the Web Layer by clicking the "eye" icon to the left of its name.
The green overlays are now hidden and you're ready to edit the elements on your canvas.
On your Property Inspector, click the + symbol to open the Filters menu.
Click OK.
.
Choose the Text tool.
Select Cocaine Sans from the font list on your Property Inspector and set the font size to 96.
Click in the general vicinity of where the logo was and type fotoMagiK.
Select the Pointer tool and click a blank part of the page to change editing modes.
Select the text object and use the X and Y boxes on your Property Inspector to position the text
L: 24 and Y: 260.
Set the web layer to visible so you can see your slice overlays.
If you’ve used the Cocaine Sans font, and positioned it as instructed, your logo will be a little
wider than your slice.
Select the slice and set its width using the Property Inspector. Set W: 280.
Now it fits.
The logo image is a GIF optimized with a transparency that allows it to seamlessly blend into
the background texture. We set this transparency based on the solid color rectangle behind the
logo. Since we edited the background texture to a bluish hue, we need to set the rectangle to a
solid shade of blue that matches the background texture - and then reset the transparency
optimization.
Note: Because we are working with a texture, your color number might be different from ours.
The rectangle is now blue – in a shade that compliments the background texture.
Now let’s re-optimize the logo image to set its new transparent color.
Make your Web Layer visible so you can see the slice overlays.
Press the Preview button
Click the Add color to transparency icon. Your cursor will change to an eyedropper.
We’re ready to Export the edited images back to our Dreamweaver site.
Leave the File name as is (it's actually irrelevant since you will be exporting slices).
Set the Export option to Images Only ( HTML will become disabled or grayed out).
Set the Slices option to Export Slices.
Make sure Include areas without slices is unchecked.
Click Export.
Since you are overwriting the existing images, Fireworks will ask you to confirm that this is what
you want to do:
Click OK.
Switch back to Dreamweaver and your page will reflect the changes.
Note: If you do not see the revised images, save and close the page, then reopen it.
The three-tiered graphic is the background image for the top-level (root) menu bar links. The
background is repositioned with CSS to create three distinct states: Default, Over, and Down.
The numbers on the left correspond to the CSS top position value that sets the appropriate
state. The entire image is 360px high and is divided into 3 segments or rows - each row being
120px high.
The CSS rule for the default link state, sets the background top position to 0 - so only the top
row of the image shows. The 120px height ensures that even if text is made larger, only the top
row will be visible.
The CSS rule for the over (hover) state sets the background top position to -120px. This pulls
the entire image up by 120px, moving the second row to the top.
The CSS rule for the down state sets the background top position to -240px. This pulls the
entire image up by 240px and moves the third row to the top.
Note: If you completed the previous editing exercise without having closed Fireworks, the Hue/Saturation settings will
be recalled from your last task.
Click OK.
The third tier of the menubar image is now blue.
Click Export.
Click OK when asked if you'd like to overwrite existing files.
Save and close your Fireworks document.
Note: Single-Level menu users, edit the rule: #p7uberlink. To use this rule, you must assign the #p7uberlink ID to the
root link that corresponds to your current page. For Tab Bar Magic users, this feature is automated.
How do I edit the link styles for links in the main content, sidebar, and
footer areas?
For all links (except for the main menu bar) we allow the browser's default link and visited states
to render and set only the hover, focus, and active states, via this rule:
How do I edit the pull quote boxes that appear in the main content column
of some layouts?
The pull quote boxes are floated boxes within the main content columns of some layouts. Use
this rule to edit:
• .callout
We've already covered graf_wide.png and parts of the graf_menubar.png document. Let's
examine the rest of graf_menubar.png:
graf_menubar.png
The web layer is visible so you can see the boundaries of the web images involved. There are
two web images generated from this document - the menubar root links are on the left and the
menubar background is on the right. Work within the assigned dimensions of these elements.
The menubar background image tiles from left to right along the width of the menubar and acts
as the background channel for the root links.
Let's look at the remaining Fireworks documents.
graf_elements.png
The vertical dashed rule is used in the following CSS rules (in some layouts), to set a dashed
vertical border between columns:
• #mainbox
• #maincontent
The gradient background tile is used to create a gradient band along the bottom of the main
content box in the flexible-width layout.
graf_integrated.png
This document contains images specific to the shadowed layouts. Do not change the width of
any slice or the layout will break. You can change colors and the height of the masthead. If you
do change the masthead height, you must also edit the height property in this CSS rule:
#masthead {
background-image: url(../images/graf-masthead.jpg);
background-repeat: no-repeat;
height: 137px;
}
graf_integrated_elements.png
This document contains the grungy graffiti background image assigned to the main content box
in the shadowed layouts.
graf_elements_alpha.png
This document contains a special image used in the shadowed layouts. To seamlessly display
an image with a drop shadow over a textured background the image must be perfectly
transparent around its edges so that the shadow can blend into the underlying texture. To
accomplish this, we use an image optimized as a PNG32. The PNG32 format provides for alpha
channel transparency, which allows the photo image to sit anywhere on the grungy graffiti
background image – blending seamlessly around its edges.
PNG32 is supported in all modern browsers, including IE7, but is not natively supported by IE5.x
or IE6. For those browsers, we use a workaround. We wrap the image inside a container:
<div id="alpha-1">
<a href="#"><img src="images/graf_photo_alpha.png" alt="Spay Can" width="132" height="138"
border="0"></a></div>
Then we use an IE Conditional Comment to implement proprietary Microsoft filters. You’ll find
this Conditional Comment in the head region of the shadowed layout pages – in code view:
#alpha-1 {
height: 138px;width: 132px;
}
#alpha-1 img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); position: absolute;
}
#alpha-1{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/graf_photo_alpha.png');
}
The first rule sets the height and width of the image container. It must always match the
dimensions of the image.
The second rule sets the opacity of the image to 0 and positions it absolutely (within the
containing DIV).
The third rule runs the transformation on the image source (src). The source image is always
the same as the actual image that is inserted into the #alpha-1 DIV.
Important notes!
Dreamweaver's CSS panel gives you direct access to all style rules that govern how your page
looks. If you do not understand what a rule does, you should avoid editing it. The following
points are important and should be followed. If there are changes you'd like to make that you
don't know how to make, you should utilize our support options for assistance.
Do not change the names of any CSS rules or the IDs of any elements on the page unless you
know exactly what you are doing.
Do not change the widths of any elements on the page unless you understand the CSS box
model. There are dependencies that could be broken.
Do not delete or modify any of the MSIE Conditional Comments. They are included to fix
specific CSS issues in IE Windows. Conditional Comments always begin with an IE version
vector, such as:
<!--[if IE 5]>
<!--[if lte IE 6]>
<!--[if IE 7.0b]>
Do not edit the Skip Link styles:
#skips
#skips a, #skips a:visited, #skips a:hover
.p7fix a:active, #skips a:active, #skips a:focus
It is an accessibility feature that does not affect your visual page layout.
If you own Tab Bar Magic, the CSS sections in the Tab Bar Magic user guide are an excellent
resource for advanced CSS editing tips and techniques.
Managing a site
The Page Pack system will create assets folders inside each folder in which you create a Page
Pack page. That means that if you'd like to experiment with several different looks, simply create
a new folder for each test page you need. Your Page Pack page will only use the assets that it
finds within its own folder. When you are ready to publish a site, you should create your index
page in the root of the site and use the Page Pack assets folders that are generated in the root.
To create additional pages, use a site-wide management technology such as Dreamweaver
Templates or Server Side Includes.
Product Support
For all of your support concerns, please refer to the main Support Page at ProjectSeven.com for
options.
Note: You do not need to have a page open in Dreamweaver. The Page Pack will create and open the new page
automatically.
Note: The first listed pack will automatically be selected when the interface first opens.
Page Preview
The third panel provides a preview of the selected Page Design. This Preview will change
whenever you select a different Page Design.
Navigation Options:
Note: This option will be un-checked and grayed out if the Tab Bar Magic system is not installed.
-Use the navigation controls to navigate to an existing folder - or create a new folder - in which
to save your new Page Pack page. For this example we created a new folder named
Graffiti_tests. All of the related page assets (images, styles, scripts, as well as an editable
Fireworks document) will also be created in this folder.
-Enter a file name for the new page. In this example we entered myPage.htm as the file name.
Note: Be sure to enter a valid file extension (usually .htm or .html) for this page. If you do not enter a file extension
then the system will automatically assign .htm as the extension. You can enter any file extension you like (.asp, .cfm,
.php, .shtm, etc) - just be sure that it is valid web page file extension.
Note: Your actual file listing will be different depending on the Page Pack you are working on and the navigation
choice made in the interface.
We're Done! With just a few clicks we created a beautiful and functional new page based on the
design that we selected.