Make it Your Own!

The whole idea behind Design Packs™ is to provide you with a 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 Development Tools.

You may change the background color(s) of any table cell, or the entire table itself. If you change the color of the table above (that borders the top of this table), its background image will no longer look right. To correct this, you will edit and re-export the background image (tch1tbltop.gif) from Fireworks. This is discussed in detail on the images page.

If you are using the CSS-controlled background style, you can change the background color in the CSS editor (make sure you leave the background image as is, and just change the color).

You may also delete this entire table and begin from scratch building your own page layout. But don't delete the NavBar table!

Site Plan and Navigational Logic

Techdesign is a fictional company. This web site is composed of four main sections accessible from the navigational interface across the top of each page:

  • Home
  • Customization
  • Images
  • Support

Creating New Pages with full Navigation Bar Effects (non-template)

To create a new page, here's what to do:

  1. Open the Master Page of the section you desire (the Master Pages are in the root folder). You'll know you're in the Master Page because all it will say is Add your content here! This is important because the script will be already set to show the proper images in Down State when the page is loaded. Sublinks within a Section should logically go in the left or right sidebars.
  2. Open the File menu and select Save As.
  3. Enter a name for your new page.
  4. Click OK.
  5. Edit or type over the existing content.

More on Templates

If you choose to use templates for your site, we'd recommend all four templates provided so that you'd have a template for each main section. That way, you could manage the links to sub-section pages by placing them in locked regions of the side column. We cannot emphasize enough the power of Dreamweaver Templates and urge you to thoroughly read through both the printed and online documentation provided by Macromedia. Remember, Dreameaver templates are not like Front Page themes!

Libraries

This Design Pack contains a library item called masterlnks.lbi (stored in the Library folder) which in turn contains the text links you see along the bottom of each page. As you add or change links, simply open the library palette (F6) and click the edit button at the bottom right of the palette (it's the middle button). Upon saving your changes, Dreamweaver will ask if you'd like to update all pages that contain the library item. Say yes and you'll see the updates appear immediately.

And don't forget to read about the Navbar Behavior and how we implemented it. Go there now!

 

learn about the java scripted navbar used in this Design Pack™

The navbar across the top of these pages is wonderfully complex. Read more about them here...

More on Style Sheets...

To examine the Styles contained in this site's CSS, open the CSS Styles Palette. You'll see the custom styles listed. Never, never select one of these styles unless you are ready to apply it somewhere.

To review or edit a style, click the middle of the three buttons on the lower right of the palette window. You'll then see the Linked sheet called dpone.css and the single page-based style that controls the background. Make a selection to gain access to the edit button.

Further Reading:

The Studio VII CSS Tutorial
(connect to web before clicking!)

 

HomeCustomize and AdaptImagesSupportTop of This Page