Sie sind auf Seite 1von 39

Graffiti Page Pack by PVII 1 of 39

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

©2006 Project Seven Development. All Rights Reserved 1 of 39


Graffiti Page Pack by PVII 2 of 39

Graffiti A PVII CSS Page Pack .................................................................................................. 1


Install the Graffiti extension .................................................................................................... 3
Before you begin ...................................................................................................................... 3
Creating a Page Pack page.................................................................................................... 4
Customizing your page............................................................................................................ 7
Special Fonts used............................................................................................................................................7
Customizing the masthead ..............................................................................................................................7
Change the Background Image ....................................................................................................................10
Change the logo type......................................................................................................................................12
Exporting the edited web images..................................................................................................................17
Customizing the menu bar root links ............................................................................................................19
Editing the root menu link background.........................................................................................................20
Exporting the menu bar web images............................................................................................................22
Editing CSS properties in Dreamweaver............................................................................ 24
Additional CSS Editing Tips.................................................................................................. 25
How do I change the menu font? ..................................................................................................................25
How do I edit the properties of my root (top-level) menu links? ...............................................................25
How do I edit the properties of my sub-menu links? ..................................................................................26
How do I edit the font-family for my page? ..................................................................................................26
How do I edit the heading properties............................................................................................................26
How do I edit properties for my main content and sidebar columns?......................................................27
How do I edit the link styles for links in the main content, sidebar, and footer areas? .........................27
How do I edit the pull quote boxes that appear in the main content column of some layouts?...........27
The Fireworks images ........................................................................................................... 28
graf_menubar.png ...........................................................................................................................................28
graf_elements.png...........................................................................................................................................29
graf_integrated.png .........................................................................................................................................30
graf_integrated_elements.png.......................................................................................................................31
graf_elements_alpha.png...............................................................................................................................32
Important notes!...................................................................................................................... 33
Managing a site ...................................................................................................................... 33
Product Support...................................................................................................................... 33
Appendix: Interface Help Files ............................................................................................. 34
Before you begin .............................................................................................................................................34
Creating a Page Pack page...........................................................................................................................34
Open the PMM Page Pack Interface............................................................................................................34
Navigation Options:.........................................................................................................................................36

©2006 Project Seven Development. All Rights Reserved 2 of 39


Graffiti Page Pack by PVII 3 of 39

Install the Graffiti extension


Look for the extension installer file p7_graffiti_106.mxp 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. Once the installation is
complete, restart Dreamweaver.

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.

Before you begin


Before you begin, make sure you are working inside a defined Dreamweaver web site. This is
necessary so that Dreamweaver knows how to link your page's assets. 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

©2006 Project Seven Development. All Rights Reserved 3 of 39


Graffiti Page Pack by PVII 4 of 39

Creating a Page Pack page


Let's use the Page Pack interface to create a new page.
Choose File - New PVII Page Pack - Tab Bar Magic Page Packs.
The Page Pack window will open.

Click Graffiti in the Set panel.


Click Flexible -Left SB w Pull quote in the Design panel.
If you own Tab Bar Magic, leave the first Navigation Option selected. Otherwise, leave the
second Option selected.
Click the Create button.

©2006 Project Seven Development. All Rights Reserved 4 of 39


Graffiti Page Pack by PVII 5 of 39

The Save As dialog window will open.

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.

©2006 Project Seven Development. All Rights Reserved 5 of 39


Graffiti Page Pack by PVII 6 of 39

Your page is created.

It's really that easy. You’ve got a fully-functioning page that is ready for previewing – and
customization.

©2006 Project Seven Development. All Rights Reserved 6 of 39


Graffiti Page Pack by PVII 7 of 39

Customizing your page


Your Graffiti page is designed with CSS. Even the menu bar is CSS-based. The look and feel of
our page is achieved with images deployed as backgrounds on the various elements that
comprise the page. Let's change the feel of our page by editing the included Fireworks graphics
file.

Special Fonts used


Before you edit the graphics, please be sure you have all of the fonts you need. The fonts used
in our graphics are:

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.

Customizing the masthead


We'll be working in Fireworks to edit the page graphics. If you do not have Fireworks, there is a
free 30-day trial available.
When you created your page, the Page Pack system generated an editable Fireworks
document and placed it inside a new folder called Fireworks. Locate that folder and inside you'll
find 5 files:
1. graf_elements.png
2. graf_elements_alpha.png
3. graf_integrated.png
4. graf_integrated_elements.png
5. graf_menubar.png
6. graf_wide.png
These files contain all of the graphical elements you'll need.

©2006 Project Seven Development. All Rights Reserved 7 of 39


Graffiti Page Pack by PVII 8 of 39

Launch Fireworks and open graf_wide.png

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.

©2006 Project Seven Development. All Rights Reserved 8 of 39


Graffiti Page Pack by PVII 9 of 39

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.

©2006 Project Seven Development. All Rights Reserved 9 of 39


Graffiti Page Pack by PVII 10 of 39

Change the Background Image


The brownish Graffiti background image can be easily edited using Fireworks.
Select the background image object by clicking it.

On your Property Inspector, click the + symbol to open the Filters menu.

Choose Adjust Color – Hue/Saturation…

©2006 Project Seven Development. All Rights Reserved 10 of 39


Graffiti Page Pack by PVII 11 of 39

Check the Colorize box.


Set Hue to 220, Saturation to 25, and Lightness to 0.

Click OK.

You now have a blue background texture.

©2006 Project Seven Development. All Rights Reserved 11 of 39


Graffiti Page Pack by PVII 12 of 39

Change the logo type


The Graffiti logo is a bitmap. To replace it, delete the logo object and use a font of your choice
to enter your own logo text. We’ll use the Cocaine Sans font. If you have not purchased it,
choose any installed font.
Delete the existing logo object.

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

©2006 Project Seven Development. All Rights Reserved 12 of 39


Graffiti Page Pack by PVII 13 of 39

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.

©2006 Project Seven Development. All Rights Reserved 13 of 39


Graffiti Page Pack by PVII 14 of 39

Select the brownish rectangle behind the logo.


Click the color square on your toolbar to open the color picker.
Use the eyedropper tool to select a blue shade from the background texture.

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.

©2006 Project Seven Development. All Rights Reserved 14 of 39


Graffiti Page Pack by PVII 15 of 39

Make your Web Layer visible so you can see the slice overlays.
Press the Preview button

Click the logo to select it.


Open the Optimize panel by choosing Window – Optimize. Alternatively, you can press your
F6 key.

Open the Transparency drop down menu and choose No Transparency.

Click the Add color to transparency icon. Your cursor will change to an eyedropper.

©2006 Project Seven Development. All Rights Reserved 15 of 39


Graffiti Page Pack by PVII 16 of 39

Click the blue rectangle behind the logo.


The Transparency mode will change to Index Transparency.

The blue rectangle will be replaced by a transparency grid.

Switch from Preview mode back to Original Image mode.

We’re ready to Export the edited images back to our Dreamweaver site.

©2006 Project Seven Development. All Rights Reserved 16 of 39


Graffiti Page Pack by PVII 17 of 39

Exporting the edited web images


To update the existing web images on your page, you'll export the images defined on the
Fireworks web layer to your web site.
Choose File - Export.
The Export window will open.
Browse to your Dreamweaver site and locate the images folder that is in the same folder as
your Page Pack page.

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.

©2006 Project Seven Development. All Rights Reserved 17 of 39


Graffiti Page Pack by PVII 18 of 39

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.

Your page reflects your image edits.


Save your Fireworks and Dreamweaver documents.

©2006 Project Seven Development. All Rights Reserved 18 of 39


Graffiti Page Pack by PVII 19 of 39

Customizing the menu bar root links


The menu bar root link background image is contained in the Fireworks file graf_menubar.png
- go ahead and open it now.
Hide the web layer to prepare for editing.

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.

©2006 Project Seven Development. All Rights Reserved 19 of 39


Graffiti Page Pack by PVII 20 of 39

Editing the root menu link background


The three-tiered graphic is actually 3 separate elements. We'll change the red one to change
the look of the down-state root menu links.
Click to select the large red rectangle in the third tier.
On your Property Inspector, click the + symbol to open the Filters menu.
Choose Adjust Color – Hue/Saturation…

©2006 Project Seven Development. All Rights Reserved 20 of 39


Graffiti Page Pack by PVII 21 of 39

Check the Colorize box.


Set Hue to 220, Saturation to 25, and Lightness to 0.

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.

©2006 Project Seven Development. All Rights Reserved 21 of 39


Graffiti Page Pack by PVII 22 of 39

Exporting the menu bar web images


We have a decision to make before we proceed. Your menu bar images need to be exported to
one of two Dreamweaver folders, depending on the Navigation option you selected when you
created your Page Pack page. Choose one of the following two browse destinations:
1. If you are using the Tab Bar Magic Navigation Option, then browse to the p7tbm/img folder.
2. If you are using the Single Level CSS Buttons Option, then browse the images folder.
The screen capture below assumes you are using the Tab Bar Magic Navigation Option.
Choose File - Export to open the Export window.

Click Export.
Click OK when asked if you'd like to overwrite existing files.
Save and close your Fireworks document.

©2006 Project Seven Development. All Rights Reserved 22 of 39


Graffiti Page Pack by PVII 23 of 39

Preview the page in Dreamweaver


Switch to Dreamweaver.
Preview the page in a browser.
Click the second menu button to set its down state.

©2006 Project Seven Development. All Rights Reserved 23 of 39


Graffiti Page Pack by PVII 24 of 39

Editing CSS properties in Dreamweaver


Editing the background images in Fireworks has taken you most of the way to the goal of
transforming the page. The remaining task is CSS-based.
Open test1.htm in Dreamweaver.
The down state background image was changed to a blue shade, so let's change the
corresponding CSS style to have a matching background color. That way, if a visitor has a slow
connection and there is a slight delay in loading the background image, a complimentary color
will provide a smooth transition.
In your CSS panel, right-click the rule:
#p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover
Choose Edit.
Change the Background color to #91A0BC.

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.

©2006 Project Seven Development. All Rights Reserved 24 of 39


Graffiti Page Pack by PVII 25 of 39

Additional CSS Editing Tips


If you're new to CSS, we recommend that you work within the general layout structure of a
page. If you wish to make a change that is beyond your present capabilities, we urge you to log
on to our support newsgroup or email our support center and ask for assistance.

How do I change the menu font?


The menu font is assigned in the #menubar CSS rule. Edit this rule to change only the font-
family and font size for your menu. If you want to edit the font color, please see the next tip.

How do I edit the properties of my root (top-level) menu links?


Root menu link colors are assigned in the following rules:

Default link state


• #p7TBMroot .p7TBMtext li a
• #p7TBMroot li a (Single-level CSS Button Option)

Over (Hover) state


• .p7ie6Fix:active,
#p7TBMroot .p7TBMtext .p7TBMon,
#p7TBMroot .p7TBMtext li a:focus,
#p7TBMroot .p7TBMtext li a:active
• #p7TBMroot li a:hover,
#p7TBMroot li a:focus,
#p7TBMroot li a:active (Single-level CSS Button Option)

Down State (also marks current page)


• #p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover
• #p7uberlink (Single-level CSS Button Option)
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.

©2006 Project Seven Development. All Rights Reserved 25 of 39


Graffiti Page Pack by PVII 26 of 39

How do I edit the properties of my sub-menu links?


Sub-menus are only available with the Tab Bar Magic Navigation Option.

Default link state


• .p7TBMsub li a

Over (Hover) state


• .p7TBMsub li a:hover,
.p7TBMsub li a:active,
.p7TBMsub li a:focus

Current Page Marker (You are Here!)


• .p7TBMsub .p7TBMmark,
.p7TBMsub .p7TBMmark:hover,
.p7TBMsub .p7TBMmark:active,
.p7TBMsub .p7TBMmark:focus

How do I edit the font-family for my page?


The font-family is assigned on the body selector. It governs the font for all parts of the page
except for the menu and the headings.

How do I edit the heading properties


The heading properties are assigned via these selectors:
• h1
• h1, h2, h3, h4
• h2
• h3
• #sidecontent .topheading

©2006 Project Seven Development. All Rights Reserved 26 of 39


Graffiti Page Pack by PVII 27 of 39

How do I edit properties for my main content and sidebar columns?


The main content and sidebar rules that can safely be edited are all prefaced with:
• #maincontent
• #sidecontent

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:

Page link styles


• #layout a:hover, #layout a:active, #layout a:focus,
#footer a:hover, #footer a:active, #footer a:focus

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

©2006 Project Seven Development. All Rights Reserved 27 of 39


Graffiti Page Pack by PVII 28 of 39

The Fireworks images


There are six Fireworks image documents that are generated when you create a Page Pack
page:
1. graf_elements.png
2. graf_elements_alpha.png
3. graf_integrated.png
4. graf_integrated_elements.png
5. graf_menubar.png
6. graf_wide.png

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.

©2006 Project Seven Development. All Rights Reserved 28 of 39


Graffiti Page Pack by PVII 29 of 39

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.

©2006 Project Seven Development. All Rights Reserved 29 of 39


Graffiti Page Pack by PVII 30 of 39

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

©2006 Project Seven Development. All Rights Reserved 30 of 39


Graffiti Page Pack by PVII 31 of 39

graf_integrated_elements.png

This document contains the grungy graffiti background image assigned to the main content box
in the shadowed layouts.

©2006 Project Seven Development. All Rights Reserved 31 of 39


Graffiti Page Pack by PVII 32 of 39

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.

©2006 Project Seven Development. All Rights Reserved 32 of 39


Graffiti Page Pack by PVII 33 of 39

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.

©2006 Project Seven Development. All Rights Reserved 33 of 39


Graffiti Page Pack by PVII 34 of 39

Appendix: Interface Help Files


The following pages are copies of the help files that you can also access by clicking the help
button in the Page Pack interface. They are copied here to give you a convenient way of printing
them.

Before you begin


Before you begin, make sure you are working inside a defined Dreamweaver web site. This is
necessary so that Dreamweaver knows how to link your page's assets. 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

Creating a Page Pack page


This exercise will use the Graffiti Page Pack as an example, your actual Page Pack Sets and
Page Designs will be different depending on the Page Pack you are working but all of the steps
will work with actual Page Pack.

Open the PMM Page Pack Interface


-Choose File > New PVII Page Pack > Tab Bar Magic Page Packs from the main
Dreamweaver menu.

Note: You do not need to have a page open in Dreamweaver. The Page Pack will create and open the new page
automatically.

©2006 Project Seven Development. All Rights Reserved 34 of 39


Graffiti Page Pack by PVII 35 of 39

The Page Pack Interface will open.

Select the Page Pack Set


The Page Pack Set panel will list all of your installed Tab Bar Magic Page Packs.

Note: The first listed pack will automatically be selected when the interface first opens.

-Select a Page Pack Set in the left panel.

Select a Page Design


The center panel lists all of the page designs available for the selected Page Pack Set. Each
Page Pack is usually shipped with a variety of layout approaches, based on a central theme, to
allow you to pick a layout that best approximates your needs.
-Select a Page Design from the list in the center panel.

©2006 Project Seven Development. All Rights Reserved 35 of 39


Graffiti Page Pack by PVII 36 of 39

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:

Include Tab Bar Magic Menu


If you've already purchased and installed the Tab Bar Magic menu system, the Include Tab Bar
Magic Menu option will be checked by default and a TBM menu will automatically be inserted
on your Page Pack page. The menu will be color-coordinated with your Page Pack.

Note: This option will be un-checked and grayed out if the Tab Bar Magic system is not installed.

Use Single Level CSS Buttons


This box will be checked by default if you do not have a Tab Bar Magic system installed. The
system will create a static (no pop-ups) CSS-styled list menu that is color-coordinated with your
Page Pack.

No Menu (Placeholder Text Only)


Choose this option of you wish to add your own menu system to the page. The system will
create the page with simple "place holder" text where the custom menu should be inserted.
Simply replace this text with your custom navigation system.
-Choose the Navigation Option.

©2006 Project Seven Development. All Rights Reserved 36 of 39


Graffiti Page Pack by PVII 37 of 39

Create the New Page


-Click the Create button to create your Page Pack page.
The Save As dialog box will open.

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

©2006 Project Seven Development. All Rights Reserved 37 of 39


Graffiti Page Pack by PVII 38 of 39

-Click the Save button to create the new page.

The Finished New Page


A new Page Pack page will be created using the filename that you entered. The page will then
open directly in Dreamweaver - ready for you to preview or edit. The page has already been
saved so you can go ahead and Preview or Modify right away.

©2006 Project Seven Development. All Rights Reserved 38 of 39


Graffiti Page Pack by PVII 39 of 39

The Page Assets


The system has also created several sub-folders that contains the related page assets.

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.

©2006 Project Seven Development. All Rights Reserved 39 of 39

Das könnte Ihnen auch gefallen