Frames

Creating a Frame   -   Saving   -   Modifying  -   Borders   - Deleting a Frame   -   Frame Inspector   -   Frame Info: New or Adding an Existing Page   -   Setting Up Links & Targets  

Library Frames Page  - 2 Column Frame Example - 3 Row Frame Example  - Row & Column Frame Example

Frames are used to organize websites and offer additional navigational aids. Frames share the same layout look as tables.

Allow the viewer to see more than one page at a time, without cluttering up the screen. Each page displays in its own window.

• Used for navigation instead of menu bars or tables so a table of contents can be "linked" to a window of detailed information.
• Display banners that are contained on all pages while other parts of the web page change
• Load pages faster since they are part of a layout - banner / contents / data pages

One of the biggest drawbacks is maintaining frames. You need to know exactly how each HTML page will be loaded. As you add and remove pages, you will need to remember just which frame files show up where and where the linked documents from a particular page should show up.

Other concerns with frames include:

• viewers can't bookmark individual pages within a frame
• often require many clicks to return to the main page
• problems with screen resolutions and font sizes
• search engines have a problem "indexing" framed pages
• secure servers handling online ordering can't display the "key" icon for Netscape on framed pages
  printing problems
• often cause users to scroll in multiple locations

Frames could be called 'windowpanes'. Each pane displays different information. You decide how many panes your window will have, size of each, borders, and if scroll bars should be included or not. Each frame contains its own web page and theoretically can be viewed independently.

Some information displays better vertically and some displays better horizontally. Frames will display information either in rows (horizontally), vertically (columns) or a combination of both.

A common frames configuration is to have a stationary banner frame across the top of your page with a dynamic frame down the left side that lists the table of contents for your 'frame page'. The main area of the screen may be a contents frame, data that changes whenever the viewer clicks on a new topic in the table of contents.

Prior to coding:

• Sketch out the page layout. A frames page is actually a combination of several other HTML pages! Thus, if you create the layout look shown below, you will need to create a minimum of 3 pages!
• Determine the specifics of what the "frame page" will look like: size of each frames and if the frames should be in rows (horizontal) or columns (vertical) or a combination.
• Determine which type of frames will be utilized: dynamic frames, stationary banner frames, and/or contents frames.

In order for the browser to display a frame, a special web page, called a FRAMESET, is created. The FRAMESET tells the browser where and how to display each of the HTML pages that are part of the FRAMESET. The FRAMESET itself doesn't contain any text or graphics - it describes the number, size, and placement of the frame pages.

TIP: You can take a template and break it down into several pages. For example, one page would contain only the logo, a second page would contain only a left-side navigation bar, and a third page would only contain content.

Dreamweaver has an unusual way of creating framesets. Rather than the standard HTML way of creating the pages separate from the frameset, Dreamweaver has you build the frameset around a page.

Return to the Top

Creating a Frameset

• Create a new folder entitled FRAMES within your site.
• Open a new blank page that will be part of the frameset.
• View > Visual Aids > Frame Borders (create the frameset with the borders appearing in the Dreamweaver document window)
• Create the frameset of frames within the document window.
• Objects > frames > (select a template)
• Insert > Frames >
• Modify > frameset > split frame left / right / up / down
  • (this may be a bit more complicated but is useful for nested frames)
  • This allows you to "split" the normal screen into sections

When you have selected your "framework layout", borders will appear around the frames you've created. Dreamweaver has created the frameset - a web page that describes the sizes and positions of each page contained within the frameset.

Dreamweaver has created several new untitled blank web pages - one for each frame. Name each frame by clicking in the title field and naming it. This is purely to make it easier to know at any given time which frame you are working in.

Save your frameset and frames before you continue.

Return to the Top

Saving Frames and/or Frameset

Dreamweaver offers context clues - if you are working within the frameset, only those save features are available to you. If you are working within a frame, only frame save features are available to you.

TIP: The Title Bar will alert you as to what frame or frameset you are in.

Frameset:

File > Save Frameset > (name the frameset)

Frames:

File > Save Frame
or
File > Save All Frames (Dreamweaver will make you name each page if you haven't prior to this!)

TIP: It is best to SAVE ALL FRAMES as you work within the frameset - otherwise you may forget which frame you've edited

Return to the Top

Modifying the Frameset

Window > Frames > Frames Panel

Click any of the frameset borders and the Frameset Property Inspector opens.

Return to the Top

Setting Frame Borders

Add a value to any of the border options displayed in the Frameset Property Inspector:

• borders -
  • yes-to display borders in three dimensional color
  • no-display borders in gray
  • default-browser default (most default to yes)
• border color -
  • select a color from the color picker
• border width -
  • width in pixels for all frames within the frameset
  • invisible borders - zero (default)

Make sure you add a title to the frameset!

The down arrow will open up additional options. You can change the size of each frame: making them relative (percentage of the screen) or absolute (absolute number of pixels).

Click on either a row or col to edit through the RowCol Selection:


• Value: # of pixels or percentage of the screen
• Units: Pixels or %

Optional method to resize: Drag the frame borders to resize the frames within the frameset

Deleting a Frame

You can delete a frame by dragging the frame border all the way out of the document window

Return to the Top

Setting Up the Individual Frames

Windows > Frames > Frames Panel

Click inside the frame you wish to work with. The Frame Property Inspector displays.

Frame Property Inspector

• Frame Name: nickname used to "target" the page within the frameset - used in linking the frame to other frames
• Src: Locate the source of the frame
• Borders: yes for 3D, no for gray
• Scroll: specify if you wish scroll bars to appear or not in the frame
  • Yes - displays scroll bars (whether needed or not)
  • No - turns off scroll bars
  • Auto - displays only if needed (default)
• NoResize: restricts the size of the frame and prevents users from dragging the frame borders
• Border Color: select a color from the color picker
• Margin Width: specify the distance (in pixels) between the left and right borders of a frame and its content
• Margin Height: specify the distance (in pixels) between the top and bottom borders of a frame and its content

Return to the Top

Creating New Content Within a Frame

• In the Frame Name field, give the frame a name.
• From the Scroll menu, determine if scrollbars will appear on the page
• Select your border properties.
• Set resize options.
• Set margins.
• Set the page properties for the frame -
  • Right-click in the frame (opens up a context menu)
  • Select the appropriate page properties
  • Create the page content.

NOTE: Each page within the frameset must have its own page properties set.

Return to the Top

Inserting Existing Pages Into a Frame

The best way to select a frame is to use the FRAMES panel. Click a frame inside the FRAMES panel and that FRAME is highlighted for you.

• Make sure you have saved the Frameset first (File > Save Frames)
• Windows > Frames > Frames Panel
• The Frames panel displays a miniature layout of your frameset.
• Click inside the frame in the Frames panel that corresponds to the frame in which you want to insert the page. The frame's properties will display in the Frame Property Inspector.
• Click the folder icon next to SRC and locate the desired page.
• TIP: Edit the pages from within the frameset - you do not have to open the pages separately!

Individual Frame Borders

• Select the frame by clicking inside it or by clicking the frame in the Frames Panel.
• Add a value to any of the border options displayed in the Frame Property Inspector:
  • borders -
    • yes-to display borders in three dimensional color
    • no-display borders in gray
    • default-browser default (most default to yes)
  • border color -
    • select a color from the color picker

Return to the Top

Frame Links

Frames are used to open up various pages of information without leaving the frameset. Links are used to "target" various pages into a particular frame.

The target attribute uses a frame's name to identify which frame to display.

To create a target within an existing frame:

• Click in the links frame.
• Highlight the text that will become a link.
• Open up the Text Property Inspector.
• Click the field titled TARGET.

The TARGET menu will display a list of the named frames within the current frameset, as well as:

• _blank: opens the linked page in a new window, with the old page in the background
• _parent: the linked page opens up in the innermost frameset
• _self: the linked page opens up in the same frame (replacing the previous frame page - replaces itself)
• _top: opens the linked page beyond the frameset(replaces all the contents of the page). This is recommended if you are using an absolute link (to someone else's website)