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.