TUTORIAL 8 - FRAMES

NOTE: These days, (circa mmviii)  about 99% of the web pages you look at have NOTHING TO DO WITH FRAMES - most sites display material dynamically using php or asp, and these types of  web architecture generally don't work as well with frames. Plus, ADVERTISING and WEB SEARCH ENGINES really hate frames, so there you go. But, they're pretty useful under the right circumstances.

 

Using Frames allows you to display more than one HTML page in a browser window at one time. 

 

To do this, you need to create an HTML document that holds all the information on how the frames are arranged, their relative size and position, borders, etc. This HTML document is called the FRAMESET document. You can't have frames without it. However many frames you have in a frame structure, you need one more HTML page (the FRAMESET) to hold all the frames together.

 

FRAMES are very easy to set up and use in Dreamweaver, but they present special challenges to the web designer in terms of CLARITY : of NAVIGATION, and of ORGANIZATION of content.

 

 

When designing with frames, keep in mind:

 

 

NAVIGATION: Always visible (comfort zone for user) vs. You Need to Scroll to Get to it (more annoying for the user)

 

 

ORGANIZATION: LIBRARY - Information has priority over visual content . GALLERY - Visual content has priority over information Navigation along left side allows for an "outline" approach to organizing the information.

 

 

NOTE: FOR THE SAKE of our friends who have ancient browsers that can't read frames, you should include a link to a non-frames page. But seriously, do you know anybody who uses a version 3.0 browser? This was even before Firefox, Safari, and Opera even popped onto the browser scene.

 

A. HOW TO USE FRAMES - VISUALIZE

 

 

First, visualize how frames will help you organize the information on your site. USUALLY, it's best to think of each FRAME in a FRAMESET as performing a SPECIFIC FUNCTION in your site: LOGO, BANNER, NAVIGATION (main menu, submenu), CONTENT.

 

Here are some frame designs:

  

Classic 1994-look Default

 

One frame devoted to navigation, one to content (or the dreaded banner/navigation/content frameset).

 

Advantage: loads only content each time you click navigation. Navigation and content in separate frames alows each to be loaded independently of the other: could be different media types (i.e., a flash navigation that opens a streaming video in the content window.

 

Disadvantage: SOOOOO 1994. Visual cliches abound. An invitation to be very useful, with very boring design.

 

 

Three Row Structure

 

Advantage: same as above, plus more visually appealing (according to me); scales well to different browser window sizes. Content frame can load horizontal or vertical content, other framesets, and even other media types, and still be visually "framed" by your navigation.

 

Disadvantage: A little trickier to set up.

 

 

A 9-Frame Structure

 

Advantage: A little more complicated; can handle more complex organization of information.

 

Disadvantage: A little more complicated; may need to swap out several frames (or entire frameset) for different levels of organization to really work.

 

 

B. HOW TO USE FRAMES - STRUCTURALIZE

 

This is where the rubber meets the road. 

 

In Dreamweaver, select File> New > and select "Page From Sample". Select the "Framests" folder, and behold the various frameset available to you! Get familiar with what's available.

 

When you press "Create", you'll be given a FRAMESET document with UNTITLED FRAMES as the SOURCE (src, or inital/default page) for each of the frames in the frameset. You'll also get a dialogue box "Frame Tag Accessibility Attributes", where you get to NAME each of your frames. This is important because you might want to name your frames according to FUNCTION (Navigation, Menu, Content, Banner, Logo, etc) instead of merely POSITION (topframe, mainframe, bottomframe, etc.). Name EACH FRAME in the  Frame (drop-dow) menu, THEN press "OK".

 

Right away, CLICK ON each of the FRAMES of the frameset and SAVE them (that is, save each HTML page in the frameset). THEN, CLICK on any extreme EDGE of your frameset. The TITLE of the window should change to UNTITLED FRAMESET - if it doesn't, you can also pull open the FRAMES window (Window > Frames) and you'll see a complete thumbnail of your frameset and all the frames.

 

SAVE your FRAMESET.

 

 

 

C. FRAME RULE:

 

Use the smallest number of frames necessary to best present the information VISUALLY and STRUCTURALLY. Remember, you have lots of other options, such as the iframe, too. But, if you're doing a boutique site with not a huge amount of content that won't be updated dynamically, and that doesn't support advertising, FRAMES are for you!