Contents

• Installing the Design Pack and Defining your Site
  • Site Plan
    
    
• Customizing the Pages
  
  • Style Sheets
  • Adding New Pages
  • Templates
  • Navbar Images
    
    
• Adding Content to the tables
  

Additional User Guide Section: Advanced Techniques Image and Scripts Guide

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_DP8.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_DP8 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_DP8 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 that your site is set up you can begin to edit the content directly in Dreamweaver. Simply highlight the existing text and begin to type in your own content. You will, of course, want to change the navigational bar headings and descriptions as well as the color and text styles. These topics are discussed below.

top

Site Plan and Navigational Logic

This web site is composed of six main pages:

• Home Page (index.htm)
• About Page (about.htm)
• Services Page (services.htm)
• Press Page (press.htm)
• Events Page (events.htm)
• Questions Page (faq.htm)

Note:

To use this Design Pack™ successfully, we suggest you group your content under the six main topics... adding sub-topic pages under the banner of a main topic page. You would normally insert links to these pages on a sidebar column within the main and sub-topic pages. You are not, however, constrained to just the six topics. You can add many more. (see the Advanced Techniques section for more details).

Summary

The whole idea behind Design Packs™ is to provide you with a cutting edge web site that you can quickly tailor to suit your needs... or your client's needs. In that respect, you might call Design Packs™ Rapid Web Excitement Tools! If you work within the organizational layout of the Design Pack™, you can easily produce a top-notch web site in less than 2 hours— the bulk of your time devoted to content rather than design!

top

Editing the Style Sheet

This site's text is driven via CSS. Text styles are contained in an external file in the root directory of the site that is named: dp8.css. The styles have been carefully chosen to complement the graphic design of this site and we suggest that you work with the pre-defined styles for consistent results. If you wish to change the fonts and color, the Style Sheet is easily modified:

To Edit a Style

1. Press F7 to open the CSS Styles window.
2. Open the Style Sheet by clicking the middle icon in the lower right of the window.
3. Select timcs.css (link), then click Edit.
4. Select the style type to modify and click Edit.
5. Change the font, size, color, etc. and click OK, then Save.
6. The changes will now affect the entire site.

Fonts

The CSS Fonts used in this site are: Verdana and Trebuchet. If for some reason, you do not have these fonts, log onto to the internet and go to www.microsoft.com/typography/fontpack/default.htm to download your free copies for either Windows or Mac.

Creating New Pages

If you need to add additional pages, follow the instructions below carefully.

To Create a New Page without using a Dreamweaver Template:

1. Pick one of the six existing main pages as a basis for your new page.
2. Open that existing page
3. Open the File menu and select Save As.
4. Enter a name for your new page.
5. Click OK.
6. Edit or type over the existing content to create the new content for this page.
7. Create necessary links to and from this new page by editing your Fireworks menu images (see below) and updating the menus on all other pages.

To Create a New Page using a Dreamweaver Template:

1. Select File > New From Template
2. Pick one of the six existing Template as a basis for your new page.
3. Click Select
4. Overwrite the placeholder content in the main and sidebar cells of the main content table with your own.
5. Save the file. You will be prompted to name it.

Note on Templates:

The Templates we've built contain a single editable region which encompasses the main content table and sidebar. You cannot edit the navigation buttons or the header images. To do so, you must open the corresponding template file (.dwt) and make your changes there. Changes you make in non-editable regions of a template will allow you to automatically update all pages based on that template. Dreamweaver will prompt you to update when you save the template file. We urge you to read the help topics on Templates in your Dreamweaver online help system, or in the printed Dreamweaver manual.

The Navbar Images

For advanced techniques on image editing, see the Advanced Image Guide (imageguide.htm)

The main navbar images are contained in a sliced Fireworks image called dp8iface.png, which can be found in the ..\Local_Files\Fireworks folder of your Design Pack™ web site.

To Edit dp8iface.png...

1. Start Fireworks and open …<your site directory>…\Local_Files\Fireworks\dp8iface.png
2. On the docked toolbar (usually on the left), click the Hide Hotspot and Slices button to enable object editing (it's way at bottom). The image should now display in normal color and you should be able to select each object (click on each image and red borders will appear). Now turn on Slices for a moment and note the approximate size of each slice. Your edited elements will have to fit into their slice areas. Here's what it looks like:
   
   
   
   
3. Turn off Slices to proceed.

   The Frames:

   There are 6 frames to this Fireworks image. Open the Frames Window ( Alt-K) and be sure that the Frames tab is selected. You will see a list of 6 frames. Click a frame name to view or edit that frame. Select all frames and familiarize yourself with the text and image layout and compare it against the behavior of the actual Homepage menu. You'll notice that the purpose of the frames is to:

   1. Allow us to make the different states for the buttons that change when the user rolls over or clicks one.
   2. Allow us to enter the six different descriptive messages that appear in the lower part of the navbar when a user rolls over the buttons.

Make the Changes:

• To Edit Text: double-click the text to open the Text Editor. Type your desired text, apply any color, font or effects and click OK. Be sure to change all frames containing the text in a similar manner (you can simply use Copy and Paste).
• To Edit Fills or Stroke Effects: Select the object and change it's fill, stroke or effects properties from the appropriate tab on the Fill window. Be sure to change all frames in a similar manner (you can simply use Copy and Paste).
• To Change the Background Color: Select Modify-Canvas Color form the menu. Choose a color from the color palette and click OK. This changes all frames.

Inspect all frames of the image to make certain everything is correct. Upon completing your edit, preview the image (F12) to make sure it looks good, then follow the updating instructions below.

To update the changes to your site:

1. Select Frame 1 in the frames palette.
2. Select Export from the File menu.
3. Make sure that Slicing: Current Frame is selected and that HTML Style is set to None.
4. Browse to the proper folder within your Dreamweaver site. You must make certain you export your frame1 images, for example, to the frame1 folder of your web site. (navimages/frame1) So long as you remained within the existing slice size and structure, your existing Dreamweaver tables will be perfectly updated.
5. Repeat this process for the remaining frames.

View the revised site:

1. Open your Dreamweaver site, if not already open.
2. Select index.htm and press F12. The site will now open in your browser with all of the modifications you made.

top

Here is the image that appears accross the top of each page:

The master Fireworks image that is used for the top images is \Local_Files\Fireworks\thumbsa.png. Since there are no rollover effects employed on this image, it is a single frame Fireworks image. But it is sliced into 5 sections for faster download. Use the method described above for editing the dp8iface.png image to edit this image. And even though there is but one frame, use the same export technique so that all 5 slice images are updated. The folder to export this image to is: \tblhdrimg

Adding Content to the Main Table

The main editable table in each page is a 2-column table nested within the large table that houses the navbar images. The left column is where you enter your main content. The right column is the sidebar and is where you should enter links for all pages related to the main section page corresponding to the template used. If this page is based on the home page template, all links should be to sub-topic pages relating to the home page. You should not attempt to resize these columns if you are not familiar with how Dreamweaver works with tables!

Tip:

Never resize a table in Dreamweaver by dragging its borders. Always use the property inspector. Place your cursor inside the table and use the tags that appear on the Dreamweaver status bar to select either the entire table <table>, a row, <tr>, or a cell <td>. The Property Inspector will change contextually.

top