Welcome!

Studio VII Design Packs™ are your ticket to producing quick and gorgeous web sites. Most of the really hard work's already been done! These packs are designed specifically for (and work best with) the Macromedia Dreamweaver-Fireworks 3 Studio.

Printing The Help File

To print a desktop reference for this Design Pack™, preview this page in your browser and click here. Once the page opens, simply select print from browser's menu or toolbar. The help file is located in the local_files\help folder and is called help.htm.

As with any valuable resource, it's recommended that you make a backup of this site and keep it in a safe place. It's also recommended that you read the documentation that came with your copies of Dreamweaver and Fireworks. Another great resource is the Dreamweaver Bible by Joe Lowery, a valuable addition to your desktop reference collection.

Style Sheets

This site's text and background are driven via Linked CSS. Text styles are contained in an external file in the root directory of the site that is named: dpone.css... The main fonts used in this site are Verdana and Trebuchet. These fonts are pretty much universal (see also, the sidebar note on this page).

Important

The <td> tag has been redefined via our Style Sheet. Typing into a table automatically renders text as:
{font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 13px; color: #666666}.

If you want to change the style of a table cell, select its <td> tag and pick a style from the CSS Styles Palette. Feel free to edit the styles as you please. To edit a style:

1. Click the middle icon in the group of 3 at bottom of styles palette (if it's not open, press F7).
2. Select dpone.css (link), then click the edit button.
3. Select a style, then click edit again.
4. Edit the style.

Cursor Styles

We've also changed the cursor style for links in the Style Sheet. These styles are applied automatically. Note that these cursors will only appear in IE4 and 5. All other browsers will render them as traditional (hand) cursors. To disable the cursors, open the Style Sheet Editor, select each link style (link, active, visited, and hover) then go the the Extensions category and clear the cursor field.

The Page Background is contained in each html page you generate from the Master Pages or the .dwt template, and is not in the external CSS because Netscape 4 will not render CSS-defined page backgrounds unless the style is hard-coded in the page. The background image is very small and configured through CSS to tile only along the x-axis. The name of the style that controls the background is pgbg.

Browser Compatibility

This site will work in all version-3 browsers and up. IE3 (Windows) will not perform the swap images (rollovers) but the links will function without error. NN3 and IE3 will not render the CSS background, and body text will appear in whatever style and size visitors have set in their browser preferences. But we've provided an alternate background image if you'd like v3 browsers to render the background across the entire page. It's a larger file, so the choice is yours. This will be completely covered on the Images page. If you want to test its application and learn more about its benefits and limitations...
Go here to see it on a live page.

Alignment and Fluidity

The content tables we've designed are set to a fixed width of 600 pixels and will always be centered with a user's browser window. The navigational bar at the top of page is 600 pixels... so combined with the table structure, this site will scale down to a window size of 640 x 480 without generating horizontal scrollbars.

1. We suggest that you make a directory called Studio7 to contain this and any other Design Packs™ you've acquired.
2. Unzip the StudioDP_Tech.zip file into this directory.
3. Keep this as an archive only. To build your actual site, you will copy and paste files from this archive.

Archive Your Design Pack™

1. We suggest that you make a directory called Studio7 to contain this and any other Design Packs™ you've acquired.
2. Unzip the StudioDP_Tech.zip file into this directory.
3. Keep this as an archive only. To build your actual site, you will copy and paste files from this archive.

Define Your New Site

1. Create a new directory on your hard drive and give it a meaningful name, i.e. C:\MyNewSite
2. Navigate to the StudioDP_Tech folder and copy (select all) files and folders. Do not copy the parent folder, just its contents (the root folders and files).
3. Paste the contents of the StudioDP_Tech folder into the new directory you set up in Step 1.
4. Open Dreamweaver, then Open the Dreamweaver Site Manager window.
5. Select the Site Menu, then New Site.
6. Enter a meaningful name for your new site.
7. Click the folder icon to Browse to the directory you created in Step 1 and click Select.
8. Click OK, also click OK if Dreamweaver asks to create cache.
9. Your new site is now setup and ready for use. To view the site, open index.htm and press F12. The site should preview in your browser. Be sure to familiarize yourself with each page and the general organizational layout of the site.

Now you have a defined site ready to go.

Creating Your New Pages

1. Open one of the four Master Pages located in the root folder of this Design Pack™. Add your content and you're on your way! Just remember the navigational logic of this site is that it's based on 4 main categories defined as:

• Home
• Customization
• Images
• Support

Of course, you will change these categories and their respective navbar images to reflect the site you are actually developing. Once your categories are defined:

1. Open a Master Page
2. Add your content
3. Save it with (Save As) an appropriate name
4. Do this for each of your categories

To add a sub-topic page

1. Open the corresponding main category page
2. Add your content
3. Save it with your new name

It's important to use the correct Master Page because that will ensure that your navbar shows the correct down state image when the page is loaded.

Templates

Dreamweaver templates are powerful tools that save you enormous amounts of time. Unlike the templates that come with other programs, Dreamweaver templates are created by you (or in this case, us!). But you are free to modify it to your heart's content. Each time you change it and save it, you will be asked if you'd like to update the pages that are based on it.

To create a new page based on the template:

1. From Site manager or Editor windows, select New From Template from the File menu.
2. A list will open. Select tctmplte.dwt from the list. This is the template for the index (home) page... and all sub-topic pages related to it. The page will appear but it will look incomplete. This is because Dreamweaver is waiting for you to save it! Save the new file making sure you are in the current site. Once saved, the page will look perfect and previewing will work correctly

Note: Creating pages from a Dreamweaver template (.dwt) will necessitate foregoing the more sophisticated features of the navigation interface unless you use all 4 templates provided in the templates folder. There is one template for each page corresponding to each of the buttons in the NavBar.

See also: Creating a new Page with full Navigation Bar Effects.