eaiovnaovbqoebvqoeavibavo ugpage_site_del_rolldown.htm000064400000012560147623465360012342 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Deleting an existing Rolldown

Each page in Jazz contains several rolldown buttons and their associated layers; all pages in Jazz contain the "Spotlight" and "In the News" rolldowns. By design, these rolldowns are NOT part of the Jazz template. This allows you to design each page with your own, page-specific rolldowns or to not use them at all on certain pages.

This exercise will walk you through the process of removing the "In The News" rolldown layer on the "Artists" page.

Open the /mainpages/page1.htm page.

Removing an existing Rolldown layer is a 4 step process:

  1. Modify the Snap Layers behavior in the "runembase" editable region.
  2. Remove the table that contains the rolldown images.
  3. Remove the related popup layer.

1. Modify the Snap Layers behavior in the "runembase" editable region.

We have created an editable region in the Template called "runembase" that simply contains a <p> tag. We use this <p> tag to assign events that we would like to run when the page loads or resizes. These events are actually fired by using "runEm" on the <body> tag, onLoad or onResize. In this way each page can have page-specific onLoad or onResize events even though the page is tied to the Template (on a Template-based page the <body> tag is in a "locked" region).

We have placed a Snap Layers event on this <p> tag that will snap the rolldown layers to their corresponding image. When the user resizes the browser window, this Snap event will be fired by the runEm event that is contained on the <body> tag, onResize.

Locate the editable region name "runembase" on /mainpages/page1.htm. It is in middle of the first column, on the left side of the page.

Click inside the editable region to select the <p> tag.

On the Behaviors Panel, double-click the Snap Layers by PVII behavior to open the interface.

Select the line that references the rolldown that we want to remove. In this example, select 'rollsb1 (layer "rollupsidebar1",0,19)', this is the "In the News" rolldown.

Click the minus (-) button to remove this rolldown from the list.

Click OK to apply the changes.

2. Remove the table that contains the rolldown images.

The rolldown images (the title image, plus button and close button) are contained in a one row, one column table. We will simply remove the entire table.

Click the "In The News" image.

Click the rightmost <table> tag at the bottom left of the main window to select the table. The table should now be highlighted.

Hit the Del (Delete) key to remove the entire table.

3. Remove the related popup layer.

Open the Layers Panel

Click on the line containing the "rollupsidebar1" layer to select it.

Hi the Del (Delete) key to remove the layer and all of its contents.

That's it! The "In The News" rolldown layer, and all references to it, are now completely removed from this page.

Note: This was NOT a template-based operation and will only affect the page you are working on. If you want to completely remove this rolldown from all pages of the site, you will need to repeat this removal procedure on all of the other pages that contain this rolldown layer.

 
ugpage_prep01.htm000064400000010615147623465360007740 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

How to Install an Extension

This DesignPack™ relies heavily on specialized JavaScripts to render the pages properly, create the effects and animation, and cure many of the cross-browser compatability issues. We have created Dreamweaver Extensions to enable you to manage and modify the site for all of these scripts. These extensions must be installed before you begin to work on your DesignPack™.

The Extension Manager

All of the extensions included with this DesignPack™ are designed to be installed using the Macromedia Extension Manager. The current version is 1.2 and is the same version that is shipped with Dreamweaver 4. You can download the latest version of the Extension Manager from the Macromedia Dreamweaver Exchange site.

The Jazz Extensions

These extensions should be installed using the Extension Manager, we'll show you how in the next section. If you already have some of them installed, be sure that you are using the very latest version... if in doubt, you can safely install the supplied version to automatically replace the version you are currently using.

  • Snap Layers by PVII
  • AutoLayers by PVII
  • MultiClass Changer by PVII
  • N4autoHide by PVII
  • ReDoIt by PVII
  • runEm by PVII
  • N4 Return False Fix
  • IE Link Scrubber
  • Jazz Objects

Install each of these extensions now, using the following technique:

1. Installing an Extension

The extensions required for this DesignPack™ are located in your \local_files\extensions folder and contain a .mxp file extension. Mxp is the file type that the Extension Manager will recognize as an installable extension. This example will show you how to install the AutoLayers by PVII extension.

Open the Extension Manager

Click the Install New Extension button, it's the first button on the left.

Using the folder icon, navigate to the /local_files/extensions directory and select the extension you wish to install, in this case let's select autoLayers.

Click the Install button.

Click the Accept button to acknowledge the Macromedia Disclaimer notice.

The Extension Manager may provide a warning message if the same or older version of this extension is already installed, click Yes to install this version.

The Extension Manager will now install all of the files necessary for this extension, including any supplied Help Files, and display a success message:

Click OK. Note that Dreamweaver should be restarted in order for the new extensions to become effective. Restart Dreamweaver after you have installed all of the extensions.

Repeat steps 2 through 8 to install each of the extensions required for this DesignPack™.

 

 
ugpage_support.htm000064400000006010147623465360010337 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

support

the pviiwebdev forum

PVII Design Pack™ support is second to none. It all starts at the pviiwebdev newsgroup forum... a thriving community of Design Pack™ users from all over the globe. The group is a place where you can get quick informed answers to your most pressing concerns relating to:

  • Design Packs™
  • The Dreamweaver Magic Book Series
  • Dreamweaver in general
  • Fireworks in general
  • PVII Extensions
  • Web development issues in general

There are 2 ways to log on to the Newsgroup:

  1. If you have MSIE set up as your default browser and Outlook Express as your default newsreader, simply click this link:

    forums.projectseven.com/pviiwebdev

  2. If you have any other newsreader/browser combo, you'll need to open your default newsreader and use its procedure for setting up a new news account. When prompted for the news server name, use:

    forums.projectseven.com

    Once you subscribe, your newsreader will likely download the available newsgroups on our server. When the list comes up, choose pviiwebdev. That's all there is to it.

the project seven web site and the pvii infobase

The Support section of our site contains News, Updates, Tutorials, and lots more. Visit us regularly at:

www.projectseven.com/dreamweaver

The PVII InfoBase contains regularly updated Tech Notes in a searchable interface:

www.projectseven.com/dreamweaver/studio/dpfaq/index.htm

e-mail

In the event you need to reach us, send mail to:

info@projectseven.com

snail mail

Direct all correspondence to:

Project Seven Development
2684 Rockford Road
Dobson, NC 27017

 

 

 

 

ugpage_termplates02.htm000064400000011060147623465360011146 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

templates

adding new pages

adding a new page to your Jazz site is a 2-step process:

  1. Create a new file based on the jazz template (index.dwt).
  2. Edit the runembase JavaScript behaviors to set a Down State button on the main menu.

Adding a new page to your Jazz site is easy. Follow the instructions carefully and it'll take less than a minute.

1. creating a new file from the template

Choose File - New From Template

Select Templates: index

Make sure to leave the Update Page when Template Changes box checked!

Click the Select button

A new page will be created that is identical to the template. Before doing anything else, choose File - Save As

In the Save As dialog, browse to your site folder, type a name for your new page and click the Save button.

You can save the file in the site root (as the illustration depicts) or in the mainpages folder... and Dreamweaver will adjust all the links for you.

That's all there is to it!

2. editing the runembase javascripts

The runembase editable region contains 2 behaviors applied to its paragraph <p> tag:

  1. PVII Down Class: This event sets the table cell background color, beneath one of the main menu buttons, to a Down State by applying the menucellover class. It works in concert with PVII MultiClass to make sure it stays that way!
  2. PVII SnapLayers: This event ensures that the rolldown layers stay properly positioned when the browser window is resized.

Place your cursor inside the runembase editable region.

Open the Behaviors Panel

Note the title bar reads: Behaviors - <p> Actions and that the Events column lists 2 onDblClick events (dwonClass by PVII and Snap Layers by PVII)

Double-click the first onDblClick event to open the downClass by PVII window.

Change the Select Object to choose the ID of the menu table cell <td> you wish to show in the down state.

Leave Select Style: menucellover as is to show your ID'd cell object in its Down State.

The onDblClick SnapLayers by PVII event needs to be edited only if you remove one of the rolldown layers or add a new one. Otherwise leave it alone.

 

Optional Tip:

Once you get comfortable with Jazz, the optimal way of dealing with a Jazz-based site is to first get the Template (index.dwt) exactly the way you want it. Once the template is perfect, create a new page from the template and when you save that page, overwrite the root index page. Then repeat to overwrite each page that ships with Jazz (all the pages in the mainpages folder). This way, all the content in your template... both in the locked and the editable regions... will get replicated. This will save you time editing the individual pages. And because you are overwriting the existing files and keeping the same file names, the links will all work as before!

 

 

 

ugpage_site_misc_img03.htm000064400000004266147623465360011614 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

images

editing the background images

The Jazz Design Pack contains 3 background images:

1. bg.gif is the main page background.
2. tblbg1.gif is the background for the table cell atop the main content area (the cell that contains the home.gif image).
3. tblbg2.gif is the background for the table cell atop the sidebar content area (the cell that contains the phone.gif image).

The images are very simple with a subtle hint of texture. We use Fireworks line textures because they lend an air of sophistication while keeping file size very small.

To edit a background image, select it and inspect its fill and texture on the Fireworks Fill Panel.

 

ugpage_prep03.htm000064400000013731147623465360007744 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Installation and Site Definition

This section will provide you with step-by-step instructions for unpacking and archiving your new DesignPack™ and also creating your new site in Dreamweaver.

1. Archiving Your DesignPack™

We strongly suggest that you follow these guidelines to create a permanent "Archive" copy of your Designpack™. This will allow you always have a "unaltered" version of the pack to use as a reference or backup.

Create a directory named "Studio7" to store this and any other DesignPacks™ you have acquired.

Unzip the StudioDP_Jazz.zip file into this directory. The folders and files should look like this:

Keep this as an archive only. Never make any changes to the files in this folder. To build your actual site, you will copy and paste files from this archive.

 

2. Define Your New Site

Now we'll create a new working site in Dreamweaver. This site is the one you will be making modifications to and eventually publishing.

Create a new directory on your hard drive and give it a meaningful name . For this example we will use the name "MyNewSite" and we will create a new directory: C:\MyNewSite.

Navigate to the StudioDP_Jazz archive folder you created earlier and Copy (select all) files and folders in that directory. Do not copy the parent folder, just copy the folder's contents.

Paste the contents of the StudioDP_Jazz folder into the new site directory you created in step 1. Your new site folder should look like this:

Open Dreamweaver

Open the Site Manager window if it is not already open.

Choose Site>New Site... on the Site manager menu.

Enter a meaningful name for your site in the Site Name box, we have used MyNewSite for this example.

Click the folder icon to Browse to the directory you created in Step 1 and click Select. We have used C:\MyNewSite for this example.

Click OK to create the new site.

Also click OK if Dreamweaver asks you to create initial site cache.

Your new site is now set up and ready for use. The Site Manager window should look similar to this:

To view the site, double-click index.htm to open the page. Familiarize yourself with the layout but make no changes yet.

Press F12 to preview the page in your default browser. Go ahead and test all of the functionality on the page and check all of the links to be sure that each page of the site loads correctly.

Now is the time to familiarize yourself with the general organizational layout of the site, as well as all of the various special features. Preview each page and become familiar with the overall design concept, the styles being used and the various dynamic features of the site.

3. Before You Begin To Make Changes

The Jazz Designpack™ is driven by CSS Style Sheets and specialized JavaScripts to obtain the functionality of the site. Therefore, edits and modifications MUST be made using the techniques we outline in the remaining chapters of this User Guide.

DO NOT ATTEMPT TO MODIFY THIS SITE without first reading the Site Modifications sections of the User Guide.

The Jazz DesignPack™ utilizes some groundbreaking techniques to manage and modify the site content and appearance. We suggest that you approach any modifications by first reviewing, and working with, the following sections:

  1. CSS in Jazz -will familiarize you with the style sheets used in this DesignPack™ and show you how to build your own styles from the ground up.
  2. Site Modifications -will walk you through the step-by-step process of making all of the various menu modifications, including a unique approach to managing the images.
  3. Site Themes -will show you how easily this site can be radically changed with just a few simple steps.

Things Not to Do

  • Don't dive right in and attempt to make changes to the site. You may fix something that was not broken.
  • Don't make any text edits using the Property Inspector. This site is totally CSS driven and in-line font tags will have undesirable effects.
  • Don't make any changes to the Style Sheets without first reading the CSS Style Sheet section.

 
ugpage_prep04.htm000064400000004021147623465360007735 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Publishing your new site

We hope that you have enjoyed working with this DesignPack™ and wish you every success with your finished site. Please follow theses guidelines when publishing your finished site.

Folders and Files to Publish

Your published site requires only the actual site pages and dependent images to work correctly. All other folders should not be published to the web. These are the files and/or folders that you should publish:

  1. Files in the root folder:
    1. index.htm
    2. dp12orange.css
    3. dp12orangew3c.css
  2. The assets folder and all files within it
  3. The mainpages folder and all files within it

That's it! All the other files and folders are for local use only and should not be published to the web.

Please be aware that you are prohibited from publishing, or making available in any form, the contents of the local_files folder contained in this DesignPack™, including the User Guide and the Fireworks .png source files.

 
ugpage_intro.htm000064400000011615147623465360007765 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

overview

the jazz design pack™ by project vii

Join us as we teeter perilously close to the cutting edge! PVII Jazz redefines the concept of layer positioning and empowers us to make DHTML menus that were once thought impossible. The fact that Jazz works in all v4 browsers and up, including Netscape 6 and Opera 5, makes this groundbreaking new Design Pack™ all the more special. Jazz marries the safe, structured, and comfortable world of html tables to CSS Layers and bleeding edge DHTML.

This Pack was created with Dreamweaver 4 and Fireworks 4. This Pack can be edited using version 3 software, but you will find subtle differences in Screen Captures. If you'll be using Dreamweaver 3 or Fireworks 3 for editing, feel free to post questions on our PVIIWebDev newsgroup. We'll be happy to point out the differences.

We hope you enjoy working with this DesignPack™,

Al Sparber and Gerry Jacobsen

it works like this

The main Jazz menu bar sits inside a table and is located close to the center of the page. As you resize your browser window, the table structure flows to fill the available space. As expected, the menu bar follows along for the ride. However, this is no ordinary menu bar... it is a state-of-the-art flyout/popup menu system. The flyout and popup menus are anchored to the menu bar. No matter how many times you resize the browser, the menus will be perfectly positioned!

In addition to the flyout menus, Jazz has inline rolldown layers that are arranged within the page text flow. These little widgets are likewise fluid and are always perfectly placed... no matter how you resize the browser window.

Dynamic layer anchoring is made possible with PVII Snap Layers... a Dreamweaver behavior. Included in this Pack are the following PVII Dreamweaver Extensions:

  • PVII Snap Layers
  • PVII Auto Layers
  • PVII N4 AutoHide
  • PVII MultiClass
  • PVII Redoit
  • PVII RunEm!
  • N4 Return False Fix
  • The Scrubber
  • Jazz Objects

We will explain how these extensions work in the course of this User Guide.

The rollover effects on the menu are accomplished without swapping images. We've married CSS with our PVII MultiClass Dreamweaver Extension to accomplish these rollovers while also setting a "downstate" on specific pages. This technique also allows the pop-up menu flyout layers to be color-keyed to the rollover.

We have taken the "pain" out of working with template-based sites with the introduction of PVII RunEm. Now you can add JavaScript behaviors to Template-based pages at will... even when the behavior needs to access the body tag.

Previous DHTML menu techniques relied on the use of a menucloser layer or timeout-based menu closing systems (like the infamous Fireworks Popup). With Jazz we show you how to use a combination of our N4 AutoHide extension and W3C compatible event handlers to make menu maintenance a "breeze".

We also provide you with "ready-made" and easy-to-insert Jazz Objects. These are Jazz-specific helper extensions that enable you to quickly insert menu layers and more.

You will also want to experiment with our unique approach to Site Themes. Quickly convert your Jazz site to a completely different look. Watch for soon-to-be-released Jazz ThemePacks™ that will allow you to quickly transform your Jazz site.

Tip: We commonly refer to opening this or that panel in Dreamweaver. If you are new to Dreamweaver 4, panels are what used to be palettes in Dreamweaver 3! All panels can be opened via the Window menu along the top of your Dreamweaver screen.

 
ugpage_prep02.htm000064400000046662147623465360007754 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

How the Extensions Work

This section will describe how each extension works in relation to the Jazz DesignPack™. Before you make any modifications to this site it is important to have an understanding of the role each of the extensions plays.

Snap Layers by PVII

By now you probably have noticed that the menu system in Jazz is in the center of the page, and that the popup layers all align perfectly with the menu regardless of how the browser window is sized. Heretofore, pop-up menu systems were always tied to the left and/or top of the page so that the pop-up layers would be positioned correctly. Normally, layers would be positioned on the page and will not move as the browser window is resized, so there is no way to position a layer that properly aligns to other elements of the page because you do not know where those elements will be on the rendered page... until now.

Snap allows you to position one or more layers relative to any HTML element on the page, once you supply an id (name) for that element. We call this element an "anchor". Once we have defined an anchor we can use Snap to position a layer relative to the position of the anchor. The most commonly used anchor is an image, and in Jazz, each of the menu buttons is an anchor image. Each of these images has an onMouseOver event that triggers an instance of Snap Layers. The Snap script then calculates the position of the image on the page and moves the pop-up layer relative to that position. We can also tell Snap to place the layer a set amount of pixels away from the anchor image, this is called the "offset" amount. The "offset" can be set to position the layer in both horizontal and vertical directions from the anchor.

Images aren't the only anchors that Snap can use, in fact, in modern browsers (IE5+ and N6) you can use almost any HTML element as an anchor, as long as you define an id name for that element's tag. Netscape4, however, will only allow us to use images or other layers as anchors, so in Jazz, we use only images as anchors.

When using Snap to position the pop-up layers with onMouseOver and onMouseOut events we really don't have to worry about repositioning the layers in case the browser window is resized because the layers are only visible when the user mouses over a menu button and the layer is "Snapped" on each mouseover. Jazz also contains several "Rollup" pop-ups, like the Spotlight buttons. These are set to onClick, and will remain visible until the user clicks the X button to close it. If the user resizes the browser window while these pop-ups are visible we will need a way to quickly reposition the pop-up to align it with the spotlight (anchor) image, so we place an instance of Snap on the onResize event to move the layers to the correct positions (actually, we use another "trick", the runEm extension to do this).

We'll show you how to use Snap in step-by-step fashion in the Menu Modifications section of the User Guide and, of course, the Help button in the extension itself will provide complete details for each of the interface items.

AutoLayers by PVII

Well, we eventually got tired of repeatedly applying vast amounts of show/hide layer events to each and every menu button... so we designed AutoLayers.

In Jazz, each pop up layer, for both the menu and the rollups, start out as "hidden", not visible when the page loads. When the user mouses over the first menu button we trigger an AutoLayer event to show the specified layer; make it "visible". AutoLayers will remember this layer and will automatically hide it the next time AutoLayers is run. When we mouse over the second menu button we tell AutoLayers to show the second popup layer, and AutoLayers will automatically hide the first layer. Next, we mouse over the third menu button, AutoLayers will show the third pop-up layer and hide the first two. So, all we ever really do is tell AutoLayers what to show, and it will take care of the hiding automatically... saves a lot of code and time.

There are cases when we want to hide all of the layers, like when we mouse off the menu entirely. AutoLayers makes this even easier, since all we have to do is apply an "empty" instance of AutoLayers... telling AutoLayers to show nothing also means that it will hide every other layer!

In Jazz, we use AutoLayers to control all of the menu pop-up layers as well as the rollup layers. However, we don't want the rollup layers to hide every time we mouse over a menu button, the rollup layers should remain visible until the user clicks the X button. Fortunately, AutoLayers has a feature that will allow us to use any of ten separate "layer sets". We have assigned the menu layers to belong to "set one", so that any time the menu buttons are activated all of the layers in "set one" will be affected. The Spotlight rollup uses an AutoLayer with "set two", and the In The News rollup uses "set three". In this way, we can use AutoLayers to handle the show/hide of only those layers that belong to that group.

We'll show you how to use AutoLayers in step-by-step fashion in the Menu Modifications section of the User Guide and, of course, the Help button in the extension itself will provide complete details for each of the interface items.

MultiClass Changer by PVII

Jazz is completely driven by style sheets, including the menu rollovers! Each menu button image has a transparent center, allowing the color of the cell background to show though. When the page initially loads each cell is set to a grey background color, using a style name "menucelloff". This style simply applies a grey background color. When the user mouses over the button the cell's background color is changed to black by assigning it the "menucellover" style. When the user mouses away from the menu, we change the style back to gray (set the style back to "menucelloff"). These style changes are easily accomplished with the MultiClass Changer extension.

1. MultiClass by PVII

MultiClass allows us to set up a whole series of style changes all within one event. A mouseover on one of the menu buttons will actually trigger MultiClass to set the background style for all 6 of the menu cells. The cell containing the clicked button will have it's style changed to "menucellover" while the remaining cells will have their style changed to "menucelloff".

We can apply a style change to just about any "named" element on the page. In Jazz, the menu cells have been named by assigning an id. The first menu cell is named "mb1" and is assigned by setting it's id: <td id="mb1">. Once named, the element will appear in the Object List in the MultiClass interface. For each named Object we can simply select the appropriate style from the list of valid styles on the page. In Jazz, the valid styles are all of the custom styles contained in the attached style sheets.

Style changes can be set for other objects on another part of the page. The little square dot on top of the Saxophone image also changes color as the user mouses over the menu buttons. The cell background for this cell is also changed to "menucellover" on each MultiClass event, sort of like a "disjointed rollover". We can also reset all of the background styles by using a MultiClass event to set all of the cells to the "menucelloff" style. We have placed just such an event on the main Jazz image so that when the user mouses over this image all of the menu cells will return to the "menucelloff" style: grey.

2. downClass by PVII

While MultiClass can handle a wide variety of syle change events it will become a bit overwhelming if we want to set a "downstate" color for the detail pages of the site. In Jazz, you may have noticed that when the Artists page opens, the Artist button is set to black, and whenever you mouse over the other buttons all will return to gray except the Artist button, which will insist on staying with the black color. This is the "downstate" button for the Artist page and in the default Jazz pages, is colored black.

The downClass extension is specially designed to work in "concert" with MultiClass to allow us to define the "downstate" class for any number of elements on each page. We simply tell downClass to assign the "menucellover" style to the "mb1" object, which in this case is the cell containing the Artist button.

Here's the good part... now that we have told downClass to set the downstate for the Artist button, MultiClass is smart enough to know that this cell should always be set to that style, regardless of other events that may tell it to change the style. So we can use all of the same MultiClass events we use on any other page without having to re-write or modify those events for the downstate object. What this means is that we can use the very same MultiClass events contained in the Template (or index page) on every other page as well with no modification, and yet still be able to set indiviudal objects to a downstate only for that page.

N4autoHide by PVII

No More MenuClosers! With N4autoHide we can finally say good-bye to all of the "work-arounds" to get Netscape 4 to automatically hide a layer when the user mouses off that layer. Up until now we had to resort to using "timeout tricks" or a rather large closing layer that had to be continually shown and hid with each layer popup.

N4autoHide allows us to select a series of layers that should be part of our pop-up menu system and will then convince Netscape 4 to automatically hide each of these layers when the user mouses off the layer. This saves a huge amount of coding and maintenance. In Jazz, we have added a N4autoHide event to the BODY tag, onLoad, listing each of the menu layers. When the page loads, the script sets up the layers and will handle the hiding onMouseOut automatically.

Modern browsers, IE5+ and N6, will allow us to put events on other tags, like the main <td> tag on the left side of the Jazz page and use an autoLayers event to handle the hiding. Netscape4 doesn't support this so until we no longer need to support it, we can easily use N4autoHide to handle it for us.

ReDoIt by PVII

When a user re-sizes the browser, the visible layers are automatically Snapped into the right positions by using a Snap event attached to the BODY tag, onResize. This works great in IE5+ and NN6, however, it will not work very well in Nestscape 4. This browser requires that we have the MM N4 Resize fix applied to the page, which forces NN4 to reload the page if the browser window is resized. Placing another event, like Snap, onResize, will re-define the resize event in NN4 and prevent it from actually running the Resize Fix... which is neccessary to force the browser to reload the page.

To prevent NN4 from bogging down, we apply a single ReDoIt event on the BODY, onResize event. The script will then intercept the event and automatically trigger the Resize Fix to force NN4 to reload the page. Of course, the script does nothing if you are viewing the page in a browser other than NN4 and will let the rest of the onResize events fire normally.

runEm by PVII

Wouldn't it be nice if we could modify behaviors that are part of a template on a template-driven page? Well, runEm will do just that!

runEm is an extension that allows you to select other, existing JavaScript functions on the page and actually execute them. Why? If we are using a template driven page we cannot modify the events to be fired onLoad because that region is locked by the Template. For example, in Jazz the downstate of each page is set by a downClass event to set the proper cell for the downstate color. Naturally, this will be different for each page so we cannot place this event on the BODY tag. If the event is not on the BODY onLoad event, there is no way to automatically fire the script.

To solve this dilemma, we place a runEm event on the BODY onLoad event of the Template. The runEm event is set to fire a downClass event. We also place an appropriate downClass event on a part of the editable region of the template so that this can be inspected and modified on each page. When the template-driven page first loads, the runEm event will then look for the FIRST instance of downClass on the page. When it finds that instance of downClass, it will read the downClass event arguments and fire the downClass script, which in turn sets the downstate classes for the page. So, we are really using runEm to look for and then run existing events on the page.

Let's save some more time... runEm works really well in Template situations, but can also comes in handy when we have a large number of repetitive events to apply. For example, in Jazz we use a MultiClass event on the Jazz image to change all of the background colors back to the "menucelloff" color. We also need to apply the exact same MultiClass event to the other sides of the menu: the <td> tag to the left of the menu, the image to the right of the menu, and the image and <td> at the bottom of the menu. Rather than applying individual MultiClass events to each of these elements we simply apply runEm, set to find and run the first instance of MultiClass on the page. Now, each of these events will fire the very same event that we applied to the Jazz image! If we ever need to change the MultiClass event, like when we add a new menu item, we only need to modify the single MultiClass event we placed on the Jazz image, the other objects will use runEm to run the now-modified MultiClass event.

N4 Return False Fix

Netscape 4x browsers will display a rather "ugly" hourglass cursor whenever a user clicks on a null link... and we use a lot of null links in Jazz. The unwanted "side-effect" can be cured by applying a "return false" to the end of the onClick event. Our N4 Return False Fix makes this a one click operation. It will scan the entire page and automatically add the "return false" to every <a> and <area> tag it finds. Jazz is delivered with this treatment already applied, so you only need to use it if you create any new null links. You can apply the fix as often as you like, the script will not touch any events that already have the return false applied.

On certain pages you may have text links firing with a onMouseOver and onMouseOut event. The N4 Return False Fix has an Option checkbox to tell the script to create an onClick event and then add the "return false" to these types of null links. This will prevent the hourglass if the user mouses down on the text link.

You can access the N4 Return False Fix from the Commands>Studio VII flyout on the main DW menu.

Access the N4 Return False Fix by choosing Commands - Studio VII - Apply N4 Return False Fix.

IE Link Scrubber

Scrub away those pesky lines around Clicked images in IE4-5 and Netscape6! This Command searches your document for links and applies the Scrubber script directly to each of them. You can apply the Scrubber as many times as you like. Each time you apply it, it will find any "untreated" links and apply the Scrubber script.

The Scrubber will work on Text Links, Image Links and Image Maps. In Jazz, we have already applied the Scrubber to all of the links. You will only need to use this if you create any new links.

Access the IE Link Scrubber by choosing Commands - Studio VII - IE Link Scrubber.

Jazz Objects

From time to time you may want to create new menu flyouts or new rollups. Building these layers and their table constructs from scratch is pretty tedious. To save you time, and to assure that each flyout or rollup will blend seamlessly into the design, we have created the Jazz Objects. With a few clicks you can instantly have a new flyout or rollup on your page. The interface allows you to set some properties as well as selecting which object to insert.

See the Menu Modifications section on Adding a new menu and also the Rolldown layers section on Adding a new rolldown layer for complete step-by-step details on the use of this Object.

Access the Jazz Objects by choosing Insert - P7 DesignPacks - Jazz Objects.

 
ugpage_site_del_but.htm000064400000007007147623465360011274 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Deleting a Menu Button

There are times when you may not need all six menu buttons in Jazz. This exercise will walk you through the process of removing one of the existing menu buttons: the "Reviews" button.

Removing the "Reviews" menu button is a 2 Step process:

  1. Modify each of the MultiClass behaviors to remove the affected <td> id name from the behavior.
  2. Remove the entire <td> tag that houses the menu button.

1. Adjust the MultiClass events

We will begin by removing all of the references to the id name of the <td> tag that contains our Reviews button. The id name of this <td> tag is "mb3". The MultiClass events are located on the main Jazz image at the top of the menu and also on each of the menu buttons.

Click on the Jazz image at the top of the menu

On the Behavior Panel, double-click the MultiClass behavior to open the interface.

Select the line that references the "mb3" object and then click the minus (-) button to remove this line from the list.

Click the OK button to apply the changes.

Now repeat this procedure for each of the menu button images; "Artists", "Festivals", "Interviews", "Genre" and "Information". Each time removing the "mb3" line from the listing.

2. Remove the entire menu button <td> tag

Now we can simply remove all of the items contained in the <td> tag that houses the "Reviews" menu button. This is easier than removing the button first, then removing the empty cell.

Select the "Reviews" button image.

Click on the <td.menucelloff> tag at the bottom left of the window. The entire cell should now be highlighted.

Hit the Del key to remove the entire cell.

That's it! The "Reviews" button, and all references to it, are now gone. You can save the template page now to update the rest of the site.

Of course, each menu button would usually have a pop-up menu layer associated with it. To finish the "housekeeping" we will want to remove that layer now. See Deleting an Existing Menu Layer.

 

 

 
ugpage_css03.htm000064400000023460147623465360007566 0ustar00 PVII Jazz User Guide

 

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Note: The methods described and screen captures used are based on Dreamweaver 4. If your version is different, please log on to our support newsgroup for quick assistance.

cascading style sheets

Creating and Adding New Styles (in Dreamweaver 4)

Now that you know how to edit styles, adding new ones is a piece of cake. Let's go through a step-by-step process to create an actual new style sheet and link it to this page. At the end of this section, you'll see the results right here on the page!

Start with the CSS Styles Panel

Click the New Style icon, to open the New Style window.

The New Style window

The New Style window contains 3 sections:

  1. Name
  2. Type
  3. Define In

For an overview of what the New Style window sections mean, see footnote 2 below.

Naming a new Custom Style in the New Style window

Choose the Type: Make Custom Style (class) radio button

Type .myparagraph into the name field. Custom styles are always preceded by a dot (if you forget it, Dreamweaver will add it for you).

We're going to choose Define In: New Style Sheet File!

Select New Style Sheet File in the Dropdown.

Click the OK button. A new window will open titled:

Save Style Sheet File As

Notice that Dreamweaver automatically browses to the active site folder. In the capture above, we are in the folder for the Jazz User Guide and you can see the 3 style sheets we are using to create the guide you are now reading:

  • ugstyles
  • ugstylesmenu
  • ugstylesmsie

Type a name for the new CSS file. Type in: mynewfile.css

Make sure Save as type: is set to: Style Sheet Files (*.css)

The URL is automatically entered by Dreamweaver based on the Relative To: choice. We suggest keeping the Relative To: set to Document.

Click the Save button.

Dreamweaver saves the new CSS file to your working site folder, automatically links it to the current page, then opens the Style Definition window for our new style .myparagraph

The Style Definition window for .myparagraph

Enter the following properties (leaving all others blank)

Font: Comic Sans MS, sans-serif

Size: 14 pixels

Color: #333333

If Comic Sans MS, sans-serif is not a choice, see footnote 1 (Edit font List).

Select the Box Category

Adding Box Properties

Enter the following properties (leaving all others blank)

Width: 300 pixels

Margins...

Top: 12 pixels
Bottom: 12 pixels
Left: 120 pixels

Click OK

Click Save on the mynewfile.css window that pops up

Click Done on the Edit Style Sheet window

Example!

This paragraph has been assigned the .myparagraph style. We assigned the class by right-clicking the paragraph marker on the status bar and then we chose Set Class - myparagraph. Review the Type and Box properties we set and compare them to the results you see here! Notice that Dreamweaver does not display the width properties but does display the margin settings.

Now let's make a contextual selector based upon .myparagraph. Let's do some creative hyperlink styles.

Contextual Selectors

Open the New Style window (click the icon at the bottom of the CSS Styles panel). The New Style window will open.

The New Style Window

In the Define In list, choose: mynewfile.css

Select the Use CSS Selector radio button

Type .myparagraph a:link into the Selector field atop the window

Click OK and the Style Definition window will open.

The Style Definition Window- Type Category

Set only the following Type Category properties (leave all others blank):

Weight: bold

Color: #999999

Switch to the Background Category

The Style Definition Window- Background Category

Set only the following Background Category property (leave all others blank):

Color: #333333

Click OK

Click Save

Click Done

Repeat to Make 2 More Contextual Selectors

Repeat the steps used to create the contextual selector .myparagraph a:link to make 2 additional selectors:

  1. .myparagraph a:visited
  2. .myparagraph a:hover

Make the .myparagraph a:visited selector identical to the .myparagraph a:link selector. That is:

Type / Weight: bold

Type / Color: #999999

Background / Color: #333333

Next...

Set .myparagraph a:hover with the following properties:

Type / Weight: bold

Type / Color: #333333

Background / Color: #999999

Example!

This paragraph has been assigned the .myparagraph style. We assigned the class by right-clicking the paragraph marker on the status bar and then we chose Set Class - myparagraph. This is a hyperlink and it uses the contextual selector .myparagraph a:link!

There we have it! One new style sheet and 4 cool new styles.

 

 

Footnotes

1. Edit Font List

Simply select your fonts from the Available Fonts list and click the << button to move them into the Chosen Fonts list, then click OK.

 

2. The New Style window options

There are 3 style Type options:

  1. Make Custom Style (class)
  2. Redefine HTML Tag
  3. Use CSS Selector

Depending on the Type you choose, the top field will be labeled contextually.

If Make Custom Style is chosen, the top field will be labeledName and .unamed1 will be pre-supplied as a placeholder to be overwritten with your own name.

If Redefine HTML Tag is chosen, the top field will be labeledTag. The dropdown box will contain Dreamweaver's list of valid HTML tags and will be populated with the tag name that corresponds to where your cursor was on the page when you opened the New Style window. When I took the screen capture above, my cursor was sitting in a paragraph, hence the p tag is pre-supplied.

If Use CSS Selector is chosen, the top field will be labeled Selector. Dreamweaver supplies 4 common selectors in the dropdown box to get you started:

  1. a:active
  2. a:hover
  3. a:link
  4. a:visited

These are styles that effect hyperlinks. Dreamweaver lists them in alphabetical order. The intention was good, but the order is incorrect. To deploy these selectors correctly, you need to pick them in the following order:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

These selectors are cool if you want all the links on your page to look the same. But that's neither creative nor flexible ;-)

The Define In section has 2 choices (you select one or the other by selecting the radio button to its left):

  1. A dropdown list containing all styles sheets that are either linked to or imported by the current page, plus an option to choose a New Style Sheet File.
  2. This Document Only
ugpage_site_add_but.htm000064400000012016147623465360011254 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

adding a menu button

adding a menu button is a 3-step process:

  1. Select one of the 4 spare buttons in your Fireworks PNG file and edit its caption.
  2. Export the button to your working images folder.
  3. Insert the button in the menu button table in your Jazz template.

1. making a new menu button in Fireworks

Open iface.png in Fireworks (local_files/Fireworks/iface.png)

Double-click the text <button7 inside the first spare button at the top left of the canvas

The entire text string is highlighted inside the text editor. Since the < character is a different color than button7, click inside the window and reselect... this time omitting the < so that only the characters button7 are highlighted.

With button7 highlighted, type the words hall of fame.

Click OK

2. exporting the new button to your Jazz site

Open the Layers Panel and select the Web Layer to show all the slices on the canvas.

Select the button7 slice

Choose File - Export

Browse to the correct destination folder (assets/images)

In the File name field, type button7

Save as type: Images Only

HTML: None

Slices: Export Slices

Check the box labeled Selected Slices Only (and make sure the other boxes are unchecked)

Click Save

3. inserting the new button in your Jazz template

Open index.dwt in Dreamweaver

Select the interviews button

Choose Modify - Table- Insert Rows or Columns...

The Insert Rows or Colums dialog will open

Turn on the Insert - Rows radio button

Number of Rows: 1

Where: Below the Selection

Click OK

A new row will appear below the interviews button

Right-click (ctrl-click) inside the new cell and choose Edit Tag <td>...

Change mb4 to: mb7 and press Enter (Return)

Open the Assets panel (F11)

Select the images category (the top icon in the left channel), and browse to button7.gif

Click inside the new empty table cell

Click the Insert button at the bottom of the Assets panel to insert button7 into your new table cell.

hall of fame now appears between interviews and genre.

Select the hall of fame button and type trig7 into the name field on your property inspector.

Type Hall of Fame into the Alt field.

Now refer to the Adding a New Menu Layer section to add a flyout menu and JavaScript behaviors.

 

 

ugpage_css01.htm000064400000035771147623465360007574 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

cascading style sheets

Jazz uses Cascading Style Sheets to drive its presentational design. This section will serve to explain how the Jazz-specific styles work. We will also discuss how to edit existing styles and how to create new ones.

The Main Style Sheet [dp12orange.css]

The main style sheet is linked to our Template page and therefore to each page that is based upon the Template.

The Headings

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; margin-right: 0px; margin-left: 12px; color: #666666; font-weight: bold; letter-spacing: 6px; margin-top: 12px; margin-bottom: 12px}

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; margin-right: 0px; margin-bottom: 0px; margin-left: 12px; font-weight: bold; color: #999999; letter-spacing: 3px ; margin-top: 12px}

h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333 ; margin-right: 6px; margin-left: 12px

These 3 style redefinitions 1 drive the headings used throughout the site. H1 is used for headings in the main content cell, H2 is used for headings in the sidebar cell, H3 is used for headings in the middle cell (below the main menu buttons) and also for the headings in both the flyout menus and the rolldown menus. H tags are applied using the property inspector's format dropdown. We've set the margins to provide a pleasing design with respect to the other styles on the page

Cursor Style

.pointer { cursor: default }

This simple custom style 2 sets the cursor to a default pointer. It is applied to images on the page that hold javascript events that we wish to be fired without the user knowing it. For instance, the transparent gif in the narrow table column between the main menu buttons and the sidebar hold events to hide the menu layers and reset the mouseover table cell backgrounds when a user moves his mouse off a button to the right. This little rule applied to the <img> tag of the gif serves to eliminate the hand cursor and show the default pointer. It is supported by MSIE and NN6 only. It's purpose is purely cosmetic.

The Menu Button Table Cells

.menucelloff { background-color: #999999; border-style: none }

.menucellover { background-color: #666666; border-style: none }

These custom styles 2 control the background colors of the table cells that contain the main menu buttons, as well as the background colors of the top cells in the flyout layer tables, and the bottom cells in the rolldown layer tables. With respect to the main menu button table cells, these are the styles that are manipulated by PVII MultiClass to execute the rollover effects as you mouse over the buttons. Menucellover is also used by PVII DownClass to set the down state of the button cell that relates to the current page. Border-style: none is used to work around a CSS bug in Opera 5 that sometimes causes borders to be cascaded unexpectedly from unrelated elements.

Ordered and Unordered Lists

ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #637173 }

ol { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #637173 }

These 2 styles redefine 1 the <ul> (bulleted list) and <ol> (numbered list) tags. Lists are deployed by clicking the 2 list buttons on your property inspector that are located directly below the bold (B) and Italics (I) buttons. You do not have to apply these styles manually.

The Main Content Table Cell

.maintable { background-color: #FFFFFF}

.maintable p { margin-top: 0px; margin-right: 36px; margin-bottom: 12px; margin-left: 36px ; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #999999}

.maintable b { color: #FF9900; font-weight: normal }

These 3 custom styles 2 are used in the main content table cell. Maintable is applied to the <td> tag of the main content table cell and determines its background color. Maintable p is a contextual selector 3 that serves to automatically style all paragraph text contained in a table cell to which maintable is applied. Maintable b is a contextual selector that automatically styles <b> bold text that is in a paragraph that is in a table to which maintable is applied. Margins are applied to create nice "white space" on our pages and eliminates the need to set table padding or spacing. Line-height is used to make our text easier to read and, applied via the <p> tag, is perfectly compatible with Netscape 4.

The Main Content Table Cell Hyperlinks

.maintable a:link { color: #669999; text-decoration: underline }

.maintable a:visited { color: #666666; text-decoration: underline }

.maintable a:hover { color: #333333; text-decoration: underline }

.maintable a:active { color: #669999; text-decoration: underline }

These powerful contextual selectors 3 permit us to have special link styles for all hyperlinks that are inside elements to which .maintable is applied (our main content table cell). These styles are automatically applied to .maintable elements. Hover is supported in all v4 and higher browsers except Netscape 4.

The Rolldown / Rollup Menu Layers

.rolltd { font-family: "Comic Sans MS", Arial, sans-serif; font-size: 12px; color: #333333; background-color: #FFCC00}

.rolltdheaderow { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; background-color: #CCCCCC}

These custom styles 2 are manually applied to the tables inside the second rolldown layer (choose artist) in the main table cell. Rolltd is applied to each cell in the content table. Rolltdheaderow is applied to the <tr> tag of the top row only.

The Rolldown / Rollup Menu Hyperlinks

.rolltd a:link { color: #333333; text-decoration: underline }

.rolltd a:visited { color: #333333; text-decoration: underline }

.rolltd a:hover { color: #FFFFFF; text-decoration: underline }

.rolltd a:active { color: #333333; text-decoration: underline }

These contextual selectors 3 power the hyperlinks in the tables inside the second rolldown layer (choose artist) in the main table cell.

The Middle Content Table Cell

.sidebarmid { color: #CCCCCC}

.sidebarmid p { margin-right: 12px; margin-left: 12px; border-style: none ; font-family: "Trebuchet MS", sans-serif; font-size: 12px; color: #CCCCCC}

These 2 custom styles 2 are used in the middle table cell (below the main menu buttons). They work just like .maintable and .maintable p described above.

The Middle Content Table Cell Hyperlinks

.sidebarmid a:link { color: #CCCCCC; text-decoration: underline }

.sidebarmid a:visited { color: #CCCCCC; text-decoration: underline }

.sidebarmid a:hover { color: #333333; text-decoration: underline}

.sidebarmid a:active { color: #CCCCCC; text-decoration: underline }

These contextual selectors 3 drive the hyperlinks in the middle table cell (below the main menu buttons).

The Flyout Menu Table Styles

.flyoutable { background-color: #CCCCCC; border-style: none }

.flyoutable p { font-family: "Comic Sans MS", Arial, sans-serif; font-size: 12px; color: #FFFFFF; margin-top: 12px; margin-right: 6px; margin-bottom: 0px; margin-left: 12px; border-style: none }

These 2 custom styles 2 are used in the table cells inside the flyout menu layers. They work just like .maintable and .maintable p described above.

The Flyout Menu Hyperlinks

.flyoutable a:link { color: #666666}

.flyoutable a:visited { color: #666666}

.flyoutable a:hover { color: #333333; text-decoration: underline}

.flyoutable a:active { color: #666666}

These contextual selectors 3 power the hyperlinks inside the flyout menu layers.

The Sidebar Content Table Cell

.sidebar { background-color: #FFFFFF}

.sidebar p { margin-top: 12px; margin-right: 16px; margin-bottom: 0px; margin-left: 24px ; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #999999}

These 2 custom styles 2 are used in the right sidebar table cell. They work just like .maintable and .maintable p described above.

The Sidebar Content Table Hyperlinks

.sidebar a:link { color: #FF9900; text-decoration: underline }

.sidebar a:visited { color: #FF9900; text-decoration: underline }

.sidebar a:hover { color: #FFFFFF; text-decoration: none; background-color: #FF9900 }

.sidebar a:active { color: #FF9900; text-decoration: underline }

These contextual selectors 3 drive the hyperlinks in the right sidebar table cell.

The Copyright Notice Style

.copyright { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #999999}

This custom style 2 is applied to the copyright notice at the bottom of each page.

 

The W3C Style Sheet [dp12orangew3c.css]

This style sheet is attached to the Template via the @import method. This technique allows us to use styles supported by modern browsers (MSIE5+, NN6, and Opera5), while shielding Netscape 4 from styles that would cause problems or crashes. Netscape 4 does not support the @import method and this style sheet is totally invisible to it. The linking and importing of our 2 style sheets will be covered in the next sections.

The Special Bordered Paragraph Style

.sidebarpq { color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-top: 6px; padding-right: 0px; padding-bottom: 6px; padding-left: 0px; border: #999999 solid; border-width: 2px 0px 1px}

This special custom style 2 is applied to certain paragraphs throughout our pages to create a nice highlighted section with thick and thin borders above and below it.

The Special Rolldown / Rollup Layer Style

.rollupdivs { border: 1px #999999 solid}

This special custom style 2 is applied to each of the rolldown layers to give them a nice pencil-thin border all around. We need to shield Netscape 4 from this style because that browser's support for CSS borders is very problematic.

The Special Flyout Menu Layer Style

.flyoutdivs { border: #999999 solid; border-width: 0px 0px 0px 1px }

This special custom style 2 is applied to the flyout menu layers and serves to render a single border on the left.

The Special "Choose Artists" Rolldown Table Style

.rolltd { padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px }

This special custom style 2 is a duplicate of a style contained in the main style sheet. It is applied to the <td> tags in the choose artist rolldown layer on Page 1. The style adds a rule that we do not want Netscape 4 to attempt to render! Actually, this rule is to work around a poor W3C CSS specification that serves to break down the padding in table cells when the table contains multiple rows and columns. This problem only seems to occur in Netscape 6. MSIE engineers seem to ignore or "adjust" CSS specs it deems illogical, while Netscape 6 tends to take everything very literally :-)

Footnotes

  1. Redefining a tag with a style means that all instances of that tag on your page will use the style. It does not have to be explicitly applied. This will be discussed in detail in the Creating or Adding Styles section.
  2. A custom style is more or less portable. That is, you can manually apply it to different elements on your page and it will override the default or any redefined style associated with that element. Custom styles are always preceded with a dot.
  3. Contextual Selectors are very powerful tools that make your CSS implementation super efficient. Essentially, a contextual selector tells the browser to apply a style contingent upon another. In the selector .maintable b {color: red} it tells the browser to make all bold text that is inside an element that has the .maintable class applied red. This can be further expanded to include only paragraph text by changing the selector to: .maintable p b {color:red}.
ugpage_site_add_rolldown.htm000064400000040444147623465360012330 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Adding a new Rolldown

You can easily add a new rolldown to any page of the Jazz site. These rolldowns are not part of the Template and as such must be created on each page that you want the rolldown to appear on.

This exercise will walk you through the process of adding a new rolldown layer on the "Artists" page. We will use the supplied "new pop one" image contained in the Fireworks iface.png file for this excesses. You will want to modify this image to suit your needs using the same techniques outlined in the Menu Buttons section the User Guide.

Open the /mainpages/page1.htm page.

Adding a new Rolldown is a 6 step process:

  1. Create a table to house the new rolldown images.
  2. Insert a new rolldown layer using the Jazz Objects command.
  3. Add the Snap and AutoLayer events the plus (+) image.
  4. Add a AutoLayer event to the close (x) image.
  5. Modify the Snap Layers behavior in the "runembase" editable region.
  6. Apply the N4 Return False Fix and Scrubber.

1. Create a table to house the new rolldown images.

We will insert the new rolldown on the right sidebar of the "Artists" page, just below the last line. The rolldown images are contained in a simple 1-row, 1-column table.

Place your cursor just below the last line of text in the right sidebar, just below the line that read: "Enter additional content here." to set the insertion point for the table.

Enter the following in the Insert Table dialog:

  • Rows: 1
  • Columns: 1
  • Width: 156 pixels
  • Border: 0
  • Cell Padding: 16
  • Cell Spacing: 0

Click OK to insert the new table.

Click inside the new table to set the insertion point for our images.

Choose Insert - Images

Click the folder icon to navigate to the /assets/images folder.

Select the "newpop1.gif" image and click Select.

Enter "rollmain3" as the name of the image. This is so we can refer to this image in some of the behaviors later on.

Choose Insert - Images and select the "plusbtton.gif" image. The image will line up underneath the "new pop one" image.... we'll fix that later.

Choose Insert - Images and select the "xbutton.gif" image.

Now we will force the images to stay on one line. Click on one of the images you just added. Now click the rightmost <td> tag on the bottom of the window. In the Property Inspector, click the "No Wrap" box.

The new table and images should now look like this:

2. Insert a new rolldown layer using the Jazz Objects command.

To assure that each of the rolldown layers are consistent in design, and to save you some time, we are going to use the Jazz Objects command to create the new rolldown layer. It will quickly add an entire rolldown layer completely formatted and styled with boilerplate text and links.

Scroll to the bottom of the page. You will see the six yellow "C" icons, a space and then the editable region named "thelayers". Inside this editable region you will see three yellow "c" icons. These represent the three rolldown layers that are already on the page. There is also a space to the right of the third "c" icon.

Position your cursor just to the right of the third icon and click to set the insertion point for the new layer. Be sure that the cursor is inside the editable region; "thelayers".

Choose Insert -P7 DesignPacks - Jazz Objects.

Set the Select an Object box to: Jazz RollDown Table

Set the pixel width of the new layer. In this example we will use the same width as the other rolldown layers: 142

Click the Browse button and navigate to the ..assets/images folder.

Click the shim.gif image and then click the Select button. This is the image that the command will use as a spacer to from the table properly.

Click the OK button to create the new rolldown layer. The new layer will appear on the page, fully styled and Jazz formatted. The name of the layer will be automatically assigned, in this example, the name will be "rollupmain3".

The z-index of the layer has been preset to 1, which will place it at the same z-index of the other rolldown layers. Be sure that this is always kept below the z-index of any menu popup layers.

The visibility of this new layer rolldown layer has been set to "default", keeping it visible in the Dreamweaver window. This makes for easier editing while you are setting the content of this new layer. Remember to set the visibility to "hidden" once you have finished your editing.

As you can see, the new rolldown layer looks just like the existing rolldown layers. It will pick up all of your style settings automatically.

Now that the layer has been created you can go ahead and modify the content to suit your needs. For this example, we'll jump right into the next section to add the behaviors that will make this pop-up work.

3. Add the Snap and AutoLayer events the plus (+) image.

We will add a Snap behavior to properly position the layer underneath the "new pop one" image.

Click on the plus (+) image just to the right of the of the new "new pop one" image.

Click the plus (+) button on the Behaviors Panel.

Choose Studio VII - Snap Layers by PVII to open the Snap interface.

Select the Anchor Object: rollmain3. This is the name of the "new pop one" image we added.

Select the Layer to Snap: rollupmain3. This is the name of the layer we just added.

Enter 0 (zero)in the Offset Left box. This will position the layer so that its left edge will line up exactly with the left edge of the image.

Enter 19 in the Offset Top box. This will position the layer 19 pixels from the top of the image. Since the image is 18 pixels high, this will will be portioned 1 pixel below the image.

Click OK to apply the behavior.

In the Behaviors Panel, be sure that the event listed is (onClick). The brackets () indicate that the event is being applied to the <a> tag and not the image itself.

We will add a AutoLayer behavior to make this layer visible when the user clicks the plus image.

Click on the plus (+) image just to the right of the of the new "new pop one" image.

Click the plus (+) button on the Behaviors Panel.

Choose Studio VII - Auto Layers by PVII to open the Auto Layers interface.

Click on the line that references layer "rollupmain3". This is the name of the new rolldown layer we added.

Click the "Show Layer" button.

Important: Select Set Three as the Set to Use. This is the layer set that we are using only for the right sidebar rolldown layers. Other layers on the page that use AutoLayers are set to use a different layer set.

Click OK to apply the behavior.

Set this behavior's event to: (onClick) in the Behaviors Panel.

The Behaviors Panel should look like this:

4. Add the AutoLayer event to the close (x) image.

We will add a Auto Layers event to the close button (x) to Hide the rolldown layer when the image is clicked.

Click on the plus (+) image just to the right of the of the new "new pop one" image.

Click the plus (+) button on the Behaviors Panel.

Choose Studio VII - Auto Layers by PVII to open the Auto Layers interface.

Do not select any layers. We will use an "empty" Auto Layers to tell Auto Layers to hide every layer in the Layer Set.

Select "Set Three" as the Set to Use. This is the layer set that we are using only for the right sidebar rolldown layers. Other layers on the page that use AutoLayers are set to use a different layer set, so hiding the Set Three layers will have no effect on the menu layers or the left side rolldown layers.

Click OK to apply the behavior.

Set this behavior's event to: (onClick) in the Behaviors Panel.

5. Modify the Snap Layers behavior in the "runembase" editable region.

We have created an editable region in the Template called "runembase" that simply contains a <p> tag. We use this <p> tag to assign events that we would like to run when the page loads or resizes. These events are actually fired by using "runEm" on the <body> tag, onLoad or onResize. In this way each page can have page-specific onLoad or onResize events even though the page is tied to the Template (on a Template-based page the <body> tag is in a "locked" region).

We have placed a Snap Layers event on this <p> tag that will snap the rolldown layers to their corresponding image. When the user resizes the browser window, this Snap event will be fired by the runEm event that is contained on the <body> tag, onResize.

Locate the editable region name "runembase" on /mainpages/page1.htm. It is in middle of the first column, on the left side of the page.

Click inside the editable region to select the <p> tag.

On the Behaviors Panel, double-click the Snap Layers by PVII behavior to open the interface.

Click the plus (+) button to add a new event.

Select the Anchor Object: rollmain3. This is the name of the "new pop one" image we added.

Select the Layer to Snap: rollupmain3. This is the name of the layer we just added.

Enter 0 (zero)in the Offset Left box. This should be the same as we used in the Snap event of the + image.

Enter 19 in the Offset Top box. This should be the same as we used in the Snap event of the + image.

Click OK to apply the changes.

Leave the event for this behavior set to onDblClick. This is just a placeholder for the behavior and is never meant to actually be triggered by the user.

One more step and we're done! Remember that we set the visibility of the new rolldown layer to "default". Now that we are finished working with the layer we will set the visibility to "hidden". This assures that the layer is not visible when the page first loads.

Locate the new rolldown layer, "rollupmain3", in the Layers Panel. The first column, the "Eyecon" column, controls the visibility settings for the layers.

Click the first column on the "rollupmain3" line to show a closed "eyecon".

6. Apply the N4 Return False Fix and Scrubber.

This is a good time to apply the N4 Return False Fix to the page. It will add a "return false" on all of the onClick events in <a> or <area> tags so that Netscape 4 will not show the hourglass cursor when the images are clicked (the Plus and X buttons we just added).

Choose Commands - Studio VII - Apply N4 Return False Fix.

Click the Apply button. The command will automatically apply the "return false" to any <a> tags that need it.

Optionally, you can also apply the IE Link Scrubber to hide the dotted outlines that IE4+ browsers show when you click on an image.

Choose Commands - Studio VII - IE Link Scrubber

Click the Scrub Em! button. The command will "treat" all of the links on the page.

That's it! The new "new pop one" rolldown layer, and all references to it, are now added to this page.

Note: This was NOT a template-based operation and will only affect the page you are working on. You will need to repeat this procedure on any other pages that you want this rolldown layer to appear on.
ugmenu.htm000064400000006265147623465360006607 0ustar00 Jazz User Guide Menu

 

Introduction

License Agreement

Overview

Images

Site Themes

Support

The Template

Overview

Adding New Pages based on the Template

Setup and Installation

Preparation

How to install an Extension

How the Extensions Work

Archiving Your Design Pack™

Defining your new Jazz site

Before You Begin to Make Changes

Publishing Your Jazz Site

CSS in Jazz

Managing the Style Sheets

Overview

Editing styles

Creating or adding styles

Site Modifications

The Main Menu Buttons & Flyout Layers

Changing an existing menu button

Deleting a menu button

Adding a new button

Adding a new menu layer

Deleting an existing menu layer

Modifying the Menu Bar Top and Bottom Images

The Rolldown Layers

Deleting an existing rolldown

Adding a new rolldown

Table Header Images

Editing the Home & Phone Buttons

Background Images

Editing the Background Images

Appendices

Pages

Images

Layers

 

ugpage_site_add_menlayer.htm000064400000042155147623465360012305 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Adding a New Menu Layer

Once you have added a new menu button image you can add the new menu flyout layer that corresponds to your new menu button. This exercise will walk you through the process of adding a new menu flyout menu layer and then adding the behaviors to make it all work. This step will assume that you have already added the new menu button as outlined in Adding a New Menu Button. If you have not already done so, please complete that step before attempting to complete this section because the behavior events will require that the new menu button has been created. For this exercise we will assume that you have created the "Hall of Fame" button, named "trig7".

Adding a new menu flyout layer is a 7 Step process:

  1. Insert a new menu layer using the Jazz Objects Command.
  2. Add a Snap behavior to the new menu trigger button.
  3. Add a AutoLayer behavior to the new menu trigger button.
  4. Add a MultiClass behavior to the new menu trigger button.
  5. Modify the MultiClass behaviors on all other menu buttons.
  6. Modify the N4 autoHide behavior on the BODY, onLoad event to add the new layer name to the behavior.
  7. Modify the Snap behavior on the BODY, onResize event to add the new menu layer name to the behavior.

1. Insert a new menu flyout layer

We have taken the pain out of creating a new menu flyout layer. To assure that each of the menu flyout layers are consistent in design, we are going to use the Jazz Objects Command to create the new layer. It will quickly add a new menu flyout layer to your page already pre-formatted with boilerplate text and links... ready-to-go!

Open the index.dwt page located in the Templates folder.

Scroll to the bottom of the page. You will see six yellow "C" icons and then a space. These are the menu flyout layer icons and are part of the "locked region" of the Template.

Position your cursor just to the right of the 6th icon and click to set the insertion point for the new layer. Be sure that you do not place the cursor in the "editable region" named "thelayers".

Choose Insert - P7 DesignPacks - Jazz Objects.

Set the Select an Object box to: Jazz menu Flyout Table

Set the pixel width of the new layer. In this example, we will use the same width as the other menu flyout layers: 200

Click the Browse button and navigate to the ../assets/images folder.

Click the shim.gif image and then click Select button. This is the image that the command will use as a spacer to form the tables properly.

Click the OK button to create the new menu flyout layer. The new layer will appear on the page, fully styled and Jazz formatted. The name of the layer will be automatically assigned, in this example, the name is "flym7".

The z-index of the layer been preset to 9, which will place it above the other existing menu layers. It is not necessary to change this since none of the menu layers will ever show at the same time. We just want to be sure that the z-index of the menu flyout layer is higher than any of the non-menu layers on the page.

The visibility of the new menu flyout layer has been set to "default", keeping it visible in the Dreamweaver window. This makes for easier editing while you are setting the content of this new layer. Remember to set the visibility to "hidden" once you have finished your editing.

As you can see, the new menu flyout layer looks just like the existing menu flyout layers. It will pick up all of your style settings automatically.

Now that the layer has been created you can go ahead and modify the content to suit your needs. For this example, we'll jump right into the next section to add the behaviors to integrate the new menu flyout layer into the menu system.

2. Add a Snap behavior to the new menu trigger button

We will add a Snap Layer behavior to properly position the new menu layer next to the new button image in the menu.

Click on the new menu button, the "Hall of Fame" button you added in the "Adding a New Menu Button" section.

Click the plus button (+) on the Behaviors Panel.

Choose Studio VII - Snap Layers by PVII to open the Snap interface.

Select "trig7" as the Anchor Object. This is the id name given to the image button that you created earlier. Use the actual id name of the image button that you created.

Select layer "flym7" as the Layer to Snap. This is the name of the layer we added in Step 1 above, use the actual name of the layer your created.

Enter -200 in the Offset Left box. This will position the layer 200 pixels to the left of the button image. Since the width of the layer is 200 px, this will align the right edge of the layer with the left edge of the image. Use the actual width of the layer that you created.

Enter 6 in the Offset Top box. This will position the layer 6 pixels down form the top edge of the image. We want to use this offset so that the top band of color on the layer aligns perfectly with the rollover color in the button.

Click OK to apply the behavior.

In the Behaviors Panel, click on the line that contains the Snap Layers behavior, then click on the down arrow of the Events column.

Select (onMouseOver) from the events listing. The brackets () indicate that the event is being applied to the <a> tag and not the image itself. Be certain that you have used the (onMouseOver) with brackets. If you do not find the (onMouseOver) event listed, be sure that the "Show Events for" flyout has "4.0 and later browsers" checked.

3. Add a AutoLayer behavior to the new menu trigger button.

We will add a AutoLayer behavior to make this layer visible when the user mouses over the new menu button. This will also automatically hide any of the other menu layers as well.

Click on the new menu button, the "Hall of Fame" button you added in the "Adding a New Menu Button" section.

Click the plus button (+) on the Behaviors Panel.

Choose Studio VII - Auto Layers by PVII to open the Auto Layers interface.

Click on the line that references layer "flym7". This is the name of the new menu flyout layer we added.

Click the "Show Layer" button.

Important: Be sure that the Set to Use box is set to: Set One. This is the layer set that we are using only for the menu flyout layers. Other layers on the page that use AutoLayers are set to use a different layer set.

Click OK to apply the behavior.

Set this behavior's event to: (onMouseOver) in the Behaviors Panel.

4. Add a MultiClass behavior to the new menu trigger button.

We will now add a MultiClass event to change the class of the <td> that contains the menu button image to the "menucellover" class. This will provide the rollover color.

Click on the new menu button, the "Hall of Fame" button you added in the "Adding a New Menu Button" section.

Click the plus button (+) on the Behaviors Panel.

Choose Studio VII - MultiClass by PVII to open the MultiClass interface.

Select "mhead" in the Select Object listing.

Select "menucellover" in the Select Style listing. This will set the "menucellover" class to the "mhead" object. The "mhead" object is the <td> that contains the main Jazz image, and setting this to menucellover class will change the color of the little square above the saxophone image.

Next we will add a number of events that will set all of the other menu button <td> classes to the "menucelloff" class:

1. Click the plus button (+) at the top of the MultiClass window to add a new event.

2. Select "mb1" in the Select Object listing.

3. Select "menucelloff" in the Select Style listing.

Repeat these 3 steps for each of the remaining original menu buttons:

  • mb2 (menucelloff)
  • mb3(menucelloff)
  • mb4(menucelloff)
  • mb5(menucelloff)
  • mb6(menucelloff)

Now we will add the event to set our new menu button <td> to the "menucellover" class.

Click the plus button (+) at the top of the MultiClass window to add a new event.

Select "mb7" in the Select Object listing. This is the id name of the newly added <td> tag that contains the newly added menu button.

Select "menucellover" in the Select Style listing.

Click OK to apply the behavior.

Set this behavior's event to: (onMouseOver) in the Behaviors Panel.

The Behavior Panel should now look like this:

Next we will modify a few of the existing behaviors to include a reference to our newly created layer and the <td> tag of its associated menu button image.

5. Modify the MultiClass behaviors on all other menu buttons.

Click on the Jazz image at the top of the menu.

On the Behaviors Panel, double-click the MultiClass behavior to open the interface.

Click the plus button (+) at the top of the MultiClass window to add a new event.

Select "mb7" in the Select Object listing. This is the id name of the newly added <td> tag that contains the newly added menu button.

Select "menucelloff" in the Select Style listing. This will set the background color to the "menucelloff" class.

Click OK to apply the behavior.

Repeat this process to add the "mb7(menucelloff)" event to each of the MultiClass events on the remaining original menu button images: the Artists, Festivals, Reviews, Interviews, Genre and Information images.

6. Modify the N4 autoHide behavior on the BODY, onLoad event to add the new layer name to the behavior.

The N4 autoHide event is fired onLoad to allow Netscape4 to properly hide the menu flyout layers. We will add the name of our new menu flyout layer, "flym7", to this behavior.

Select the <body> tag at the bottom left of the main window.

Open the Behaviors Panel and double-click the N4 autoHide by PVII behavior to open the interface.

Select the line that references layer "flym7" and click the "AutoHide" button to set this layer as "Selected".

Click OK to apply the behavior.

7. Modify the Snap behavior on the BODY, onResize event to add the new menu layer name to the behavior.

We placed a Snap behavior on the Body, onResize event that is designed to place all of the menu layers to the top-left of the page when the browser window is resized (this avoids spawning scrollbars). We will modify this event to add the new menu flyout layer.

Select the body tag at the bottom left of the main window.

Open the Behaviors Panel and double-click the Snap Layers by PVII behavior to open the interface.

Click the plus button (+) at the top of the Snap Layers window to add a new event. A new line appears with the same anchor object and offsets as the previous line.

Select layer "flym7" as the Layer to Snap. This is the name of the layer we added in Step 1 above, use the actual name of the layer your created. There is no need to change anything else on this line.

Click OK to apply the behavior.

One more step and we're done! Remember that we set the visibility of the new menu flyout layer to "default". Now that we are finished working with the layer we will set the visibility to "hidden". This assures that the layer is not visible when the page first loads.

Locate the new menu flyout layer, "flym7", in the Layers Panel. The first column, the "Eyecon" column, controls the visibility settings for the layers.

Click the first column on the "flym7" line to show a closed "eyecon".

 

That's it! The new menu flyout layer, and all of the script references to it, are now set up and functional. Preview the template page to be sure that the menu is functioning properly and all of the related events are working. You can save the template page now to update the rest of the pages in the site.

Note: After adding an image with events on the <a> tag, like this new menu button, you may want to apply our IE Link Scrubber to hide those "outlines" in IE4+ browsers.

 
ugpage_site_change_but.htm000064400000012275147623465360011760 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

changing a menu button

Changing a menu button is a 2-step process:

  1. Edit the button in Fireworks
  2. Export the button to your working images folder to overwrite the current version

1. editing a menu button in Fireworks

Open iface.png in Fireworks (the image is in your Local_Files/Fireworks folder). We'll use button1 (artists) for this exercise.

Double-click the text string <artists to open the Text Editor

The less than (<) symbol and the word artists are different colors. The < is the same color (#999999) as the default table cell that contains the button. This makes it invisible until you roll your mouse over the button (cool trick).

Leave all settings as they are because we are simply changing a single button and we need to make sure it looks like the others.

Select just the text artists and overwrite it with your own word.

Inspect the actual image on the canvas to see how the new word fits. Our superstars edit fits just fine and requires no tweaking. If your word is a bit too wide, you can change the Kerning Scale to a lower value to compress the text until it fits nicely. If you need more room, see Jumbo Buttons below.

Click OK to apply the changes.

Press Ctrl+S (Command+S) to save your Fireworks file.

2. exporting the changed button to your Jazz site

Open the Layers Panel and select the Web Layer to show all the slices on the canvas.

Select the button1 slice

Choose File - Export

Browse to the correct destination folder (assets/images)

Select File name button1, which is the image you have just edited

Save as type: Images Only

HTML: None

Slices: Export Slices

Check the box labeled Selected Slices Only (and make sure the other boxes are unchecked)

Click Save

Fireworks will prompt you to overwrite the existing file

Click OK

Since you have not changed the slice size, no modifications are necessary in Dreamweaver. Open any Jazz page and you will see the revised image.

the bonus jumbo button

If you need to pack a larger caption into a button, we've included an extra button that has added height to accomodate 2 lines. It's called button11.gif and here is how it looks:

To use it:

Edit the text using the techniques learned above

Turn on the Web Layer to show slices

Select the button11 slice

Export the selected slice

Use the technique described above, but this time type button11 into the File name field.

Click Save

You won't get an overwrite prompt because you are creating a new file.

Open your Jazz template (index.dwt)

Select the button you wish to change

Click the browse icon next to the Src field on your property inspector

Highlight button11 and click the Select button

Your button is instantly transformed!

note...

Because you are merely changing the source of the button, all JavaScripts will remain correctly applied.
ugpage_site_del_menlayer.htm000064400000010315147623465360012312 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Deleting a Menu Layer

There are times when you may not need all six menu buttons in Jazz. Once you have removed the menu button, you will also want to remove the associated menu flyout layer. This exercise will walk you through the process of removing one of the existing menu layers: the "Reviews" flyout layer.

Removing the "Reviews" menu flyout layer is a 3 Step process:

  1. Modify the N4 autoHide behavior on the BODY, onLoad event to remove the affected layer name from the behavior.
  2. Modify the Snap behavior on the BODY, onResize event to remove the affected layer name form the behavior.
  3. Remove the entire layer <div> tag that houses the menu layer and its contents.

1. Adjust the N4 autoHide event

The N4 autoHide event is fired onLoad to allow Netscape4 to properly hide the menu flyout layers. We will remove the name of the layer from this behavior. For our example, the menu layer name associated with the "Reviews" button is "flym3".

Select the <body> tag at the bottom left of the main window.

Open the Behaviors Panel and double-click the N4 autoHide by PVII behavior to open the interface.

Select the line that references layer "flym3" and click the De-Select button.

Click OK to apply the changes.

2. Modify the Snap behavior

We placed a Snap behavior on the Body, onResize event that is designed to place all of the menu layers to the top-left of the page when the browser window is resized (this avoids spawning scrollbars). We will modify this event to remove the reference to the "flym3" layer.

Select the body tag at the bottom left of the main window.

Open the Behaviors Panel and double-click the Snap Layers by PVII behavior to open the interface.

Select the line that references "anchmain (layer "flym3",0,0)" and click the minus (-) button to remove this line from the list.

Click the OK to apply the changes.

3. Remove the entire menu layer

Open the Layers Panel

Click on line containg the "flym3" layer to select it.

Hit the Del (Delete) key to remove the entire layer and its contents.

That's it! The "Reviews" menu layer, and all references to it, are now completely removed. You can save the template page now to update the rest of the pages in the site.

Note: This step assumes that you have already removed the corresponding menu button and its related references as well. If you hav not removed the menu button do so now by following the instructions in Deleting a Menu Button.

 

ugpage_css02.htm000064400000044246147623465360007572 0ustar00 PVII Jazz User Guide

 

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Note: The methods described and screen captures used are based on Dreamweaver 4. If your version is different, please log on to our support newsgroup for quick assistance.

cascading style sheets

Editing Styles (in Dreamweaver 4)

Dreamweaver 4 makes editing style sheets a snap. However, there are a few rules of wisdom we'd like to impart before we dive in!

PVII CSS Rules of Wisdom
Follow these rules no matter what you may read elsewhere. They are your friends :-)

  1. Always uncheck the Auto Apply box. If you select a style in the CSS Styles Panel (depicted above) and the auto Apply box is checked, the style will be applied to the tag closest to where your cursor happens to be on the page. Perhaps Dreamweaver will fix this in the next version, but for now we urge you to uncheck the box!
  2. Always use the context menus to apply custom styles. To apply a custom style to a tag, select the tag marker on the Dreamweaver status bar, right click (ctrl-click) and choose Set Class. To apply a custom style to a block of selected text... select the text and right-click (ctrl-click). Choose CSS Styles and select your style.


Choose a tag on the status bar and right-click (Ctrl-Click) to apply a custom style

Opening the CSS Editor to Edit a Style

The 2 quickest ways to open the Style Editor are:

  1. Click the Pencil Icon on the bottom of the CSS Styles panel
  2. Right-Click (Ctrl-click) anywhere on the page and choose CSS Styles | Edit Style Sheet

Either method will pop up the Edit Style Sheet window:

The Edit Style Sheet window lists the linked and/or imported Style Sheets attached to your document plus any styles embedded directly in the document's <head> between valid style tags. If you select one of the Style Sheet files (as we did), you will wind up with 4 active command buttons:

  1. Link: Use to attach an external Style Sheet to your page through either the Link or the Import method.
  2. New: Create a new style.
  3. Edit: Open the Styles list from which you can select an existing style to modify.
  4. Remove: Delete the selected style sheet from your page.

Select dp12orange.css and click the Edit button. The Style List window will open:

A list of all valid styles in the dp12orange.css file will appear in a scrolling box.

Scroll down the list of styles and select .maintable p

Click the Edit button

The Style Definition window will open:

The Style Definition window is comprised of Categories. Selecting a Category changes the available settings in the main part of the window contextually.

The Type Category

The Type Category is the first one you see and this is where you set the main typestyle definitions. The available settings are:

  • Font: Dreamweaver includes several cross-platform font families. Our style is using the Arial, Helvetica, sans-serif family. That means users will see the type in Arial. If Arial is not available on their system, the browser will look for Helvetica, and if that's not found the default sans-serif font will be used. Sans-serif means the font is comprised of straight lines. Arial is found on all Windows and some Macintosh systems. Helvetica is found on all Macs. A sans-serif font would be available if the user has an uncommon computer system or has somehow deleted some of his standard fonts.
  • Size: The only size parameters that should be used are:
    • Pixels- The most consistent cross-platform measurement
      (Note: Many modern browsers allow the user to easily override your settings).
    • Percentage- All things relative! The baseline of 100% is contingent upon your visitor's browser settings. So, if you make your main type size 90% it will be 10% smaller than the current browser setting. Headings, for instance, would typicaly be set higher than 100%.
    • Nothing- The setting that leaves it all to the browser. This is a good choice for simple text documents that need to be printed on older browsers.
  • Style: Your choices are normal, italic or oblique. We usually leave this blank since both italic and oblique (slanted) look horrible on the web. Normal is default and does not need to be declared unless the parent element is italic or oblique.
  • Line Height: Use the same measure as your text size. As an example, 14 pixel text and 28 pixel line-height is like choosing double-spaced on an old typwriter. Line-height should never be applied to a <table>, <tr>, or <td> style as that will cause problems in Netscape 4. Applied to a block element like a <p> works just fine. Used wisely, line-height makes text easier to read.
  • Decoration: These are generally reserved for hyperlink <a> styles. Blink is a Netscape 4 proprietary style and is considered gauche by most web design professionals.
  • Weight: The obvious choices are Normal and Bold. Modern browsers allow for fine-tuned settings. At this time, only Netscape 6 and MSIE 5-Mac support settings other than Bold or Normal.
  • Variant: You can choose Normal or Smallcaps. We just say no thank you and move on :-)
  • Case: This is something we hardly ever use. Modern browsers can present your text in a case other than how you typed it. All lowercase, all uppercase, or capitalized (first letter of each word).
  • Color: Dreamweaver's palette allows you to pick any color in the rainbow for your type... or you can enter the color in any CSS supported format (for advanced users only!) including, hex code, RGB, and CSS named colors. f you are not an advanced CSS user, we suggest using the color palette!

The Background Category

The available background settings are:

  • Background Color: Enter a color code or use the flyout palette.
  • Background Image: Use the browse button to browse to and select a valid image. If the file location is outside your defined site, Dreamweaver will prompt you to save a copy within your defined site. The background CSS property can be used for any element, but is best supported when used in concert with the <body> tag (for your page background image), with a <table> tag, or with a <td> tag. Netscape 4 often times has problems with CSS background images unless the image path is absolute. For example:

    http://www.mydomain.com/images/bgimage.gif.

    When using a background image you should always set a background color that is close to the dominant color in the image. Your browser will display the background color until the background image has fully loaded.
  • Repeat: Background images can be set to behave in interesting and creative ways. Here are the choices:
    • no-repeat- The image will be placed in the top left corner of the browser as if you inserted it. However, it will behave like a background image in that all of your content will appear on top of it.
    • repeat- This is the conventional and default behavior in which a background image is tiled equally along the x and y axes of the browser window, filling all available height and width.
    • repeat-x- The best way to describe this setting is to imagine a 1-inch black square in the left top corner of your window that repeats from left to right. The result is a 1-inch high black band that stretches the entire width of the browser.
    • repeat-y- Imagine our same black square. This time it repeats from top to bottom... creating a 1-inch wide band on the left side of your window that extends vertically to fill all available height.
  • Attachment: There are 2 choices here:
    • Fixed- This creates a watermark effect in supporting browsers (MSIE5+, NN6, Opera5) where tha background image remains fixed while the page content scrolls. This can be combined with Repeat settings to create interesting effects.
    • Scroll- This is the browser default and behaves as you would expect. That is, the background and the page scroll in unison. You need only declare this if there is a fixed property on a parent element. Otherwise, leave it blank.
  • Horizontal Position: This property can be used to set the position of a non-repeating image or even to set the starting point of a tiling image, relative to the top of the page. Settings can be in logical units of measure (pixels, e.g.) or explicit (Left, Center, Right). Very cool effects are achievable, except that Netscape 4 and MSIE4 will pretty much ignore you. So, for the immediate future, do not use this setting for anything critical to your design!
  • Vertical Position: Works the same as Horizontal positioning except that the explicit settings would be Top, Center, Bottom.

The Block Category

The available Block settings are:

  • Word Spacing: Sets the space between words. Use positive values to increase space and negative values to decrease space. Hint: I don't think I've ever used this definition. I have seen it used to quite ugly effect on www.fatbrain.com!
  • Letter Spacing: Sets the space between characters in a word. Use positive values to increase space and negative values to decrease space. This can yield quite attractive results if used prudently and with headings especially.
  • Vertical Alignment: Sets the vertical position relative to the parent element. The footnote markers on the CSS Overview page use a style with Vertical Alignment set to super, which raises the text above the surrounding text.
  • Text Align: Left or right is cool depending on your design. We tend to stay away from justified because it can sometimes produce undesirable results in Netscape 4.
  • Text Indent: Indents the first line of text in the applied element.
  • Whitespace: Another rare one. The default for all browsers is none and causes all space in the source code to collapse. Setting it to Pre allows you to preserve unusual spacing characteristics based on manually entered source code. Imagine the content inside a pair of <p> tags inside your source code looked like: <p>This     is some        funky spacing</p>. Using Pre would preserve that formatting. However, not very many browsers support this and the same result can be had by using the Preformatted setting in the Format dropdown on your property inspector. There is also a NoWrap option which works the same as the NoWrap setting for table cells. That is, your text will run on a single line until it encounters a soft <br> or hard <p> break. If you want to use pre in your style sheet, you must declare a W3C DTD. DTDs go at the very top of your document above the opening <html> tag. Here is an example of a DTD to use:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

The Box Category

The available Box settings are:

  • Width: Sets the width of any block element (it can be used to set table properties but Netscape 4 might take exception to this technique). Very cool design layouts can be made by combining margin and width settings to stagger entire paragraphs.
  • Height: Sets the height of any block element. The same concepts discussed above for Width apply to Height.
  • Padding: Sets the space between an element's border and its contents. You can set one side or all four. CSS Padding is not well-supported by Netscape 4.
  • Float: Positions an element to the left or right of the content flow on a page. The other content then wraps around the floated element. CSS Float is not very consistent across browsers. Netscpae 6, MSIE 5-Mac, and MSIE 6 have the best support. We don't recommend using this style property unless you are targeting a single-browser intranet.
  • Clear: Causes the element before the floated element to be pushed down below the floated element instead of wrapping around it.
  • Margin: Set Top, Right, Bottom, Left, or any combination thereof. Margins are pretty safe to use in all version 4 and higher browsers.

A note about margins and lists: Netscape 4 will display a bullet offset higher than the text if margins are applied to list items. We avoid this blemish by using the @import trick explained later in our CSS documentation.

The Border Category

The available Border settings are:

  • Width: Sets the width of the Top, Right, Bottom, and Left border. You can set some or all. Set any side that you do not wish to have a border to 0.
  • Color: Set the color for the corresponding border side. Each border can be a unique color.
  • Style: Choose from:
    • None
    • Dotted
    • Dashed
    • Solid
    • Double
    • Groove
    • Ridge
    • Inset
    • Outset

Netscape 4 has problems with all but Solid and None.

The List Category

The available List settings are:

  • Type: Choose from..
    • Disc: An open circle
    • Circle: A filled circle
    • Square: A filled square
    • Decimal: Numbers 1. 2. 3. followed by decimals
    • Lower-Roman: i ii iii iv v
    • Upper-Roman: I I III IV V
    • Lower Alpha: a. b. c. d. e.
    • Upper Alpha: A. B. C. D. E.
    • None: No bullet rendered.
  • Bullet Image: Replaces html bullets with an image of your choice. It's a good idea to make the image approximately 12px by 12px or it will look out of place. Netscape 4 will ignore this setting and display an ordinary bullet.
  • Position: Choose from...
    • Inside: Displays the bullet flush left with the text and indents the first line.
    • Outside: The default style for all browsers places the bullet to the left of the text, which is flush left.

The Positioning Category

The positioning category is beyond the scope of this Design Pack. Furthermore, Dreamweaver 4 has some anomolies with how it handles styles on layers which cause problems when declaring layer styles in a CSS file, if you later drag or resize the layer in the Dreamweaver window. We will cover CSS positioning properties on a need-to-know basis until Dreamweaver updates its support for CSS-P in new versions.

The Extensions Category

Extensions, at this point in time, cover proprietary MSIE features. Netscape may support some similar features in updates to its version 6 browser, but for now the bulk of the filters and extensions available are for MSIE only.

The available List settings include Page Break, part of the CSS-2 specification and not yet supported by the current crop of browsers. In fact, the Paged Media category is very extensive and goes way beyond just page breaks. You can actually set the paper size and many other attributes heretofor reserved for desktop publishing programs.

We do, in fact, use the Cursor attribute to set our cursor to a default pointer as discussed in the CSS Overview section. This is not supported by Netscape 4 but does provide a nice cosmetic touch to our pages in MSIE and NN6.

Of course, Filters are only supported by MSIE. Netscape 6 does have an Opacity property... but it's a bit tricky to set it up. Feel free to discuss this and other over-the-edge issues on the PVIIWEBDEV Newsgroup.
ugindex2.htm000064400000001717147623465360007031 0ustar00 PVII Jazz User Guide <body bgcolor="#FFFFFF" text="#000000"> </body> ugpage_termplates01.htm000064400000016632147623465360011157 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

templates

A single Dreamweaver template powers the Jazz web site. Dreamweaver stores templates in a root folder called Templates. The Templates folder must never be moved. Your site window for Jazz should look like this:

why use a template?

Using a Dreamweaver Template enables us to manage the Jazz menu system in a single file. Templates have two main component parts:

  1. Locked Regions
  2. Editable Regions

Editable regions are surrounded with special Dreamweaver tags. You create editable regions by selecting paragraphs, tables, or any part of your page and explicitly telling Dreamweaver to mark it as editable by selecting Modify - Template - New Editable Region. All editable regions must be created by the user, except one: The Document Title. Dreamweaver always creates an editable region around the page title. If you inspect the source code in a brand new template, you'll see this up close to the top:

<!-- #BeginEditable "doctitle" -->
<title>Project VII Jazz</title>
<!-- #EndEditable -->

All areas that are not editable are Locked. It's as simple as that.

When you make a change in a Locked Region of your template and save the file, Dreamweaver asks if you'd like to update pages based upon the template. If you say yes (which well you should!) then the changes made in the template will also appear in every page that is attached to that template. By having the Jazz menu buttons and menu layers in Locked Regions, we are able to manage our menu in a single file: the Template (index.dwt).

Changes you make to editable regions of your template will not cause your other pages to be changed. When you create a new file using File - New From Template, then the entire template is replicated and you get a brand new page that contains both the Locked and the Editable regions. Of course, the Locked regions remain locked and you can only edit the Editable regions.

the Jazz template file

The Jazz template file is located in your Templates folder and is named: index.dwt

The dwt extension stands for DreamWeaverTemplate. Let's take a look at how index.dwt looks

The Template shows you where the editable regions are by drawing a box around each one. In the left top corner of the box is a rectangle that bears the region name. Let's zoom in and hava a look at each of the editable regions.

editable regions

There are 5 editable regions in the Jazz template:

  1. Doctitle: So you can enter a unique title on each page. The title is accessed in one of two ways:
    1. The title field on your Dreamweaver toolbar
    2. By choosing Modify - Page Properties.
  2. maintbl: The left column of the main table where your primary content goes.
  3. runembase: This special editable region contains a single empty paragraph that exists to house the PVII RunEm events.
  4. thelayers: A special hand-coded region that allows you to add new layers on any page.
  5. midbar: The area below the main menu buttons.
  6. sidebar: The right column of the main table.

editable regions: maintbl- runembase- thelayers

editable region: maintbl

Everything within the blue box can be edited in pages attached to the template. The maintbl region includes paragraphs, but does not include the table cell itself. This prevents you, or someone else, from accidentally changing the table cell properties in your working pages.

The spotlight rolldown trigger is in this editable region so you can keep it, delete it, or add more rolldown layers to your pages.

editable region: runembase

This special editable region contains a single empty paragraph that exists to house the PVII RunEm events to set the menu button Down Class (down class by PVII) and the PVII Snap Layer event that positions the rolldown layers onResize.

editable region: thelayers

We thought this was a little stroke of genius. We hand-coded an editable region for you that includes the two rolldown layers. This way, you can delete them! But this method also allows you to add more layers to any of your pages. All you do is stick your cursor in the little space to the right of the second layer icon - then use the Insert Menu to create a new layer (you cannot use the Object Panel- Draw Layer Method).

editable region: midbar

The midbar editable region is located just below the main menu buttons. This is a great place to insert hyperlinks that relate to the current page.

editable region: sidebar

The sidebar editable region is located on the right side of the page. The in the news rolldown trigger is in this editable region so you can keep it, delete it, or add more rolldown layers to the sidebar in any page.

locked regions

Any part of your page that does not fall within one of the 5 editable regions is locked and can only be edited from within the template (index.dwt). Dreamweaver reminds you that a region is locked by dinging or by presenting a special cursor:

Locked Regions protect your site from accidental deletions of key components. With respect to Jazz, the following key design components are locked:

  • The menu buttons
  • The menu flyout layers
  • The main table structure (only the content inside is editable)
  • The Home button
  • The telephone number
  • The copyright notice
  • The page background

The above areas can only be modified from within the template and all changes made will be applied to every page in the Jazz site.

 

ugpage_sitethemes01.htm000064400000011627147623465360011150 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

site themes

jazz is 2 looks in one...

The Jazz Design Pack™ ships with 2 visual Site Themes:

  1. Orange: the default
  2. Teal: Optional

Note: if you want to preview the Teal Theme, open this file:

local_files/Themes/Teal/index_teal.htm

switching themes is a 3-step process

  1. Open the iface2.png image in Fireworks
  2. Export the iface2 slices to the main assets/images folder of your Jazz site
  3. Link your Jazz Template to the style sheets that are related to the Theme

1. Open iface2.png in fireworks

2. Export the slices

Choose File - Export

Browse to the main images folder in your Jazz site:

assets/images (use the illustration above as a guide)

Enter the following settings:

  • File name: atistpop (this is not really important because you will be overwriting all the images in the folder)
  • Save as type: Images Only
  • HTML: None
  • Slices: Export Slices
  • Leave all checkboxes unchecked

Click Save

Fireworks will prompt you to overwrite the current files

Click OK

Save your Fireworks iface2.png (this way it will remember the export path you just used)

Close Fireworks and open Dreamweaver

3. Switch your Style sheet links to the Teal CSS files

Open the Jazz Template (index.dwt)

Choose View - Code and Design

Scroll up to the Head region (way up top) and look for the following code:

<link rel="stylesheet" href="../dp12orange.css" type="text/css">
<style type="text/css">
<!--
@import url(../dp12orangew3c.css);
-->
</style>

Change the linked style sheet reference to: dp12teal.css

Change the @import reference to: dp12tealw3c.css

Your code should now look like this (the bold text is for reference only):

<link rel="stylesheet" href="../dp12teal.css" type="text/css">
<style type="text/css">
<!--
@import url(../dp12tealw3c.css);
-->
</style>

Why are we not using the Dreamweaver CSS Editor for this task?

Dreamweaver has a little anomoly when using its CSS Editor to link external style sheets when there are JavaScript functions in the page. For our linked and imported style sheets to work correctly, the imported style sheet needs to come below the linked one in our source code. When you create a brand new document in Dreamweaver, the CSS Editor correctly places the external style sheet links in the <head>. Once you add JavaScript to the page, however, Dreamweaver will not get it right and will place any new or edited linked style sheets below the closing </script> tag. That's still within the <head> tags, but not where we need them to be.

This would not be a serious problem, except that Dreamweaver does get the @import placement correct. What this means is that the Linked CSS will be below the Imported CSS in the source code and so will take precedence over the Imported CSS, thereby ruining our technique.

So that's why you need to make the changes in the source code!

 

 
ugpage_pageindex.htm000064400000010277147623465360010601 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Appendix 1 -Jazz Page Index

This page lists all of the pages included with this Designpack™ by the directory in which they are located. Please review the list and become familiar with the purpose or function of each page before attempting any modifications.

 

Directory Filename Purpose / Function
root dp12orange.css the main Jazz style sheet using the default Orange theme
dp12orangew3c.css the Jazz style sheet that contains the W3C based styles for the Orange theme. This is loaded using the @import method to prevent probelems in browsers that cannot support the W3C style.
dp12teal.css the main Jazz style sheet using the optional Teal theme
dp12tealw3c.css the W3C bases style sheet for the optional Teal theme
index.htm the Main Site Entry page -based on the index.dwt template
/mainpages page1.htm the "Artists" page -based on the index.dwt template
page2.htm the "Festivals" page -based on the index.dwt template
page3.htm the "Reviews" page -based on the index.dwt template
page4.htm the "Interviews" page -based on the index.dwt template
page5.htm the "Genre" page -based on the index.dwt template
/Templates index.dwt the main site template page .This is used as the template for all other pages in this site.

 
ugpage_site_misc_img01.htm000064400000006737147623465360011617 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

images

editing the top and bottom images in the Jazz menu bar

The Jazz menu bar has a top and bottom image that serve to give it a finished look. The two images involved are:

navtopper.gif

navbottom.jpg

These images are exported to your Jazz site when you do a complete export of slices from the Fireworks iface.png file.

To keep the integrity of your menu bar intact, you must not alter the width of these two objects. You can make them taller, though... and you can add your own graphic elements within the objects' borders.

the navtopper image

The navtopper is comprised of 5 parts:

  1. The underlying Orange Base Rectangle
  2. The dot atop the J: The dot is a rectangle that is colored red so that we have a distinct color to use as the transparent color when optimizing the navtopper slice. Setting the dot's color as the transparency index for the slice is how we get the table cell background to show through the image.
  3. The J-saxophone: The J-sax was created by using a musical instrument dingbat font. To enable you to see the J-sax in Fireworks, we converted it to a path. That's why you see so many blue selection points.
  4. The azz: The letters A, Z, and Z in 52pt Arial. Double-click the text to edit it.
  5. the dotcom: 11pt Arial with Range Kerning set to 62%. Double-click the text to edit it.

J-sax has a gradient fill, diagonal line texture, and a drop shadow.

azz has the same gradient fill, a Hatch texture, and a drop shadow.

the navtbottom image

navbottom.jpg is comprised of 2 parts:

  1. The Orange Base Rectangle
  2. A feathered Bitmap Image

We layed the feathered bitmap atop the orange rectangle to create the completed object. Simply replace it with your own bitmap to keep the look and feel of the Jazz site.

 

Tip: Fireworks gives us the ability to optimize each slice separately. To save bandwidth, we optimized the navbottom slice as a JPG, which is a more efficient format for complex bitmaps.
ugpage_layerindex.htm000064400000007242147623465360010777 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Appendix 3- Jazz Layers Index

This page lists all of the layers used in this Designpack™. Please review the list and become familiar with the purpose or function of each page before attempting any modifications.

 

Layer Name Purpose / Function
flym1

These are the menu layers that popup when the user mouses over a menu button. In other word, these are the Flyout Menu Layers! Each layer is similarly constructed to assure a consistent design. Each menu layer can contain a mix of graphics, text and links. You can create new versions of these layers using our PVII Jazz Objects command.

The Z-Index of the flyout menu layers should always be higher than the z-index of other layers on the page to assure that they will always be on top. That is, the z-index numbers should be higher.

 
flym2
flym3
flym4
flym5
flym6
rollupsidebar1

These are the layers that pop-up when the user clicks the plus(+) button on one of the rolldown menus. They will be referred to, throught the User Guide, as the Rolldown Layers. They provide an effective way to communicate special areas of interest or exciting topics. You can create new versions of these layers by using our PVII Jazz Objects command.

The Z-Index number of the rolldown layers should always be lower than the z-index of the flyout menu layers... so that the Flyouts are never obscured.

 
rollupmain1
rollupmain2

 
ugpage_images.htm000064400000006166147623465360010104 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

images

This section is an overview of our Jazz images. The images were created with Fireworks 4.

the fireworks png format

All images used in Jazz are derived from a single Fireworks file called iface.png

Fireworks PNGs are special extended versions of the PNG format and contain all the information required to keep the image editable and live.

the jazz iface.png

generating web images with slices

To generate web images, we use the Fireworks Insert - Slice command to mark the boundaries of each individual part of the main image that will later be exported as a separate and distinct web image. In the illustration above, we've selected the first button (artists) and are in process of executing the Insert - Slice command to mark its boundaries with a slice. That slice is then named and becomes the basis for the image called button1.gif that is created during the export process.

So, to populate our Jazz web site with its full complement of images, we use slices to mark the parts of our Fireworks image that are to become our web images. When we export the fireworks image to our Dreamweaver site, each slice will become a separate web image and its file name will be the same as its slice name.

naming slices

Web images (GIFs or JPGs) are created by slicing a Firworks image into pieces. Each slice/piece is named and that name is what Fireworks uses to name the individual web images that are exported to your Dreamweaver site. The above illustration depicts the slice we've placed around the artists button. We then used the Object panel to name the slice button1. When we export the Fireworks image, Fireworks will turn our slice names into file names and slice- button1 will become button1.gif.

Throughout the course of this User Guide, we will document the techniques and procedures necessary to complete each task that involves our images.

 

ugpage_imageindex.htm000064400000020513147623465360010741 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

Appendix 2 - Jazz Images Index

This page lists all of the images included with this Designpack™ by the directory in which they are located. Please review the list and become familiar with the purpose or function of each page before attempting any modifications.

All images are stored in the /assets/images folder.

We Image File and Location Purpose / Function
navtopper.gif These are the menu images in Jazz. Should you need more than the default 6 menu buttons, buttons 7 through 10 are supplied as extra buttons ready to use.
button1.gif
button2.gif
button3.gif
button4.gif
button5.gif
button6.gif
button7.gif
button8.gif
button9.gif
button10.gif
navbottom.jpg
artistpop.gif These images are used to construct the "rolldown" header. All rolldowns use the same plus (+) and close (x) buttons. The newpop1.gif image is supplied as an extra image should you need it.
spotpop.gif
newspop.gif
newpop1.gif
plusbutton.gif
xbutton.gif
home1.gif This is the "Home" image located at the top left of the page. This also provide a link back to the Home page.
phone.gif This is a design element that provides a nice way to display the phone number.
shim.gif This is a transparent image that we use to control the height and width of various objects throughout the site.
bg.gif The page backgound image, set directly in Page Properties.
tblbg1.gif This image is used to set the table cell background for the top-left header band and the "Notes" section below the menu.
tblbg2.gif This image is used to set the table cell background for the top-right table cell.

 
ugpage_site_misc_img02.htm000064400000007611147623465360011610 0ustar00 PVII Jazz User Guide

To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

images

editing the home and phone images

The Jazz menu buttons have a top and bottom image that serve to give the menu bar a finished look. The two images involved are:

home.gif
phone.gif

These images are exported to your Jazz site when you do a complete export of slices from the Fireworks iface.png file.

To keep the integrity of your menu bar intact, you must not alter the width of these two objects. You can make them taller, though... and you can add your own graphic elements within the objects' borders.

the home image

The home image object is comprised of a yellow rectangle, a gray rectangle, a triangle, and 2 text strings. The gray rectangle was used to set the transparency when the Fireworks slice was optimized. That allows the background image in the table cell in which home.gif is placed to show through. Like this:

the phone image

The phone image object is comprised of a yellow rectangle and a text string. The yellow rectangle was used to set the transparency when the Fireworks slice was optimized. This allows the background image in the table cell in which phone.gif is placed to show through. If you look at the image over a white background, you'll understand the effect of the transparency:

The image is almost invisible because it needs a yellow background beneath it.

Use your imagination and creativity to transform these images into your own personal art. Do note that both of these images should be the same height or you will create a gap in the table row that houses them.

Tip: Whenever you change an image's dimensions, you must change the dimensions of its slice. Turn on slices by slecting the Web Layer on the Fireworks Layers Panel.