A Cutting Edge DHTML Site

This site is Dynamic in its HTML implementation. Things move, objects change. This is accomplished through the use of DHTML... a combination of HTML, Javascript, and CSS. Needless to say, WebTech is designed for viewing in MSIE4, MSIE5, MSIE5.5, Netscape 6, and Netscape 4. With the exception of Netscape 4, all the features used in the site's design will work perfectly. Netscape 4 lacks support for some of the CSS implementations... but this is only a cosmetic issue that will not affect the ability to view the site in its entirety.

What Features can I find in WebTech?

WebTech uses some cutting edge techniques to achieve our goal of an exciting site with intuitive navigation:

  1. Flyout Menus constructed with Dreamweaver Behaviors and Extensions.
  2. A visually attractive menu system made almost entirely with plain HTML text and Style Sheets. The only images used in the menu are the little flyout arrows. This makes WebTech extremely fast to download!
  3. Popup informational layers.
  4. Inline Frames (I-Frames) to present large amounts of information in a way that is cohesive with the design as a whole.
  5. An ingenious technique to provide alternate means for browsers not supporting I-Frames to see all of the content in an attractive way. The majority of visitors will see your beautiful scrollable I-Frame while Netscape 4 users will have a convenient hyperlink to open a popup window containing the same exact content.

Why Do We Use Templates?

The Menu system throughout the site is far easier to set up initially when you use Dreamweaver Templates. Templates allow you to make changes to the menu and have those changes update all pages in the site that are attached to the Template. We have supplied 2 Templates:

  1. maintemplate.dwt
  2. portfoliotmp.dwt

Why 2 Templates? The majority of pages in the site are attached to maintemplate. But the Portfolio Page has a special need. The Portfolio frame uses a dual stacked i-frame setup in the right sidebar to present both a menu of thumbnails and its related content... in separate windows. The effect is dramatic and very intuitive. Since Dreamweaver cannot "translate" i-frames (you can't see them in your Dreamweaver window) we wanted to safeguard against accidental deletion of the i-frame code. Therefore, each i-frame configuration is driven by its own template. The locked and editable regions are set up to prevent "accidents"!

The only pages that are not attached to Templates are the News Pages and the Portfolio Content Pages.

Are there any Disadvantages to Using Templates?

The benefits of using Templates far outweigh any disadvantages. The biggest disadvantage is that you cannot add behaviors to pages based on Templates. You can edit and change existing javascript behaviors in attached pages so long as:

  1. The javascript event is applied to an image or text that is within an editable region.
  2. The javascript in question does not write to the body or append itself when you make your changes. You can, for example, edit a popup window behavior to change the source file or the window properties. You can edit a swap image behavior but cannot add a new image to the scripts unless preload is turned off... because the preload function writes to the body tag.

Of course, you can always detach a page from its Template if you have any special needs. Once detached, the page can be edited in any way you choose. However, updates made to the Template will no longer update detached page(s). If you are not familiar with Dreamweaver Templates, please take some time to go through your Dreamweaver Documentation and learn about this wonderful productivity tool.

How do Templates Work?

Templates contain 2 types of content:

  1. Editable
  2. Locked

Important: Only Changes made to Locked Regions are reflected in the pages based upon a Template. Changes made to the Editable Regions of Templates will not be reflected in the other pages. As you read through your Design Pack™ documentation, we will reference content as being in either Locked or Editable regions of a page.

 

How do I add new Pages or Change the names of pages supplied with this Design Pack™?

Add new pages by:

  1. Selecting File --> New from Template.
  2. Choose which Template to base your new page on and click Select.

Changing the names of existing pages:

  1. Select the file in the Site Manager window.
  2. Open the File Menu and choose Rename (or press F2).
  3. Rename the file (make sure you include the .htm extension!)
  4. Dreamweaver will prompt you to choose whether you want to update all pages linked to this page. This will even update the links in all of your menus!
  5. Select Update.

Warning: Do not change file names or site structure from outside the Dreamweaver Site Window to avoid corrupting links and rendering your site unnavigable.

Why are there some Framesets in this site?

The 2 framesets in WebTech serve one purpose: To provide a means for Netscape browsers (other than version 6) to see the content otherwise seen in the inline frames embedded in the right sidebar of each page. These framesets use the same pages that load into the I-Frames. You should not have to edit these framesets. Simply editing any of the News pages, or the Portfolio pages will automatically take care of the framesets. Note that we use identical names for the I-Frames and the frameset frames for the Portfolio pages (portoFrame)... so your links will work in both the framesets and the I-Frames! Here's a brief overview of the logic involved:

The Portfolio Page (portfolio/portfolio.htm) houses 2 I-Frames in the right sidebar:

  1. The top I-Frame loads portfolio/menu.htm
  2. The bottom I-Frame loads portfolio/content.htm... the name of this I-Frame is portoFrame. So all links in the menu must target portoFrame. This will also cause the Netscape frameset to link correctly, too!

The frameset portfolio/nsframeset.htm is comprised of 2 frames:

  1. The left frame loads portfolio/menu.htm
  2. The right frame loads portfolio/content.htm. The name of this Frame is portoFrame. So all links in the menu must target portoFrame.

So, to change the content or look of the portfolio, you only need work with:

  1. portfolio/menu.htm
  2. portfolio/content.htm

The same logic applies to the I-Frames throughout the rest of the site that load the various News Pages... with one difference. The Netscapenews folder contains a page called nnewsmenu.htm, which contains hyperlinks to all the news pages. If you add a news page, you'll need to update this page so that the Netscape News Frameset (nnewsframeset.htm) has access to all the News Pages.

Modifying the Design

As with all Design Packs™, the look of WebTech is a breeze to makeover. The Layers and Table Tutorial comprehensively covers the nuts and bolts of how to build a WebTech page. The Images Tutorial explains how easy it is to edit the included Fireworks images. Typestyles are driven purely by linked Style Sheets. Change a style, and you automatically change the look of all pages linked to that style's CSS File. So, in a very short time, you can turn WebTech into a totally unique site that expresses your individual style.

For further assistance on Style Sheets, visit our support forum