Docstoc

Frames overview

Document Sample
Frames overview Powered By Docstoc
					Frames overview

Frames are used in a Web page to divide it into multiple HTML pages. For example, a Web page
consists of three frames. One thin frame on the side that contains a scrolling menu, one frame
that runs along the top that contains the logo and title of the Web site, and one large frame that
takes up the rest of the page and contains the main content. Each of these frames is an
independent HTML page. They all work together on the page through the use of one or more
framesets, which is an HTML page that defines the structure and properties for the Web page,
including information about the number of frames displayed on a page, the size of the frames,
the source of the page loaded into a frame, and other definable properties. The frameset page
isn't displayed in a browser; it simply stores information about how the frames on a page will
display. (It is the page you should preview when you use Preview in Browser, however.)




In this example, the top frame would remain static and never change from page to page in the
site. The side frame menu will have links that change the content of the main frame area, but
otherwise remain static. The main frame area is the dynamic area, that changes depending on
what menu item you choose.

You can format all of the frames and framesets in your page through the Property inspector.
You can set scrolling on or off, set width and height, name each page, and more. For more
information, see About frame and frameset properties.

A Web page that contains three frames consists of four separate HTML pages: the frameset file
and the three files containing the content that appears inside the frames. When you design a
page using framesets, you must save each of these four files in order for the page to work
properly in the browser. For more information about how to create successful Web pages that
utilize frames, see About creating frame-based Web pages.


Deciding whether to use frames

The most common use of frames is for navigation. A Web page can use one frame to hold the
navigation menu and another frame to hold the page content. Since the navigation menu is in a
frame, a visitor to your site can click a menu item and the content will appear in the content
frame, but the navigation menu does not change at all. This can keep the user oriented within
your site.




Frames can be confusing to implement, however, and you can often create a Web page without
frames that accomplishes the same goals as a page using frames. For example, if you want the
navigation on the left side of your page, you can either split your page into two frames, or just
include the left navigation on every page in your site. The difference is that with frames you
only have to create the navigation one time. If you do decide to go ahead and use frames in
your Web site, make sure that you understand the relationship between frames and framesets
because linking with frames can be confusing.


About creating frame-based Web pages

Frames can be a great tool for Web designers, but they must be implemented correctly in order
to work. Complete the following steps to ensure that your Web page works correctly (not
necessarily in any particular order):


  Create the frameset and frames in your page. See Creating frames.
  Save every file used in the site. Remember that each frame and frameset is an independent
  HTML page and each page must be saved. See Saving frame and frameset files.
  Set the properties for each frame and frameset. This includes naming each frame and
  frameset, setting scrolling and non-scrolling options, and more. See About frame and
  frameset properties.
  Make sure all your links include targets so the linked content appears in the correct area. See
  Controlling frame content with links.




Creating frames

There are two ways to create a frameset in Macromedia Dreamweaver: you can design it
yourself, or you can select from several predefined framesets. Choosing a predefined frameset
automatically sets up all the framesets and frames needed to create the layout and is the
easiest way to quickly insert a frame layout into your page. You can only create frames in the
Document window's Design view.


Inserting a predefined frameset

Predefined framesets make it easy for you to select the type of frameset you want to create.
The predefined frameset icons in the Frames category of the Objects panel provide a visual
representation of each frameset as applied to a selected document.




The selected frameset surrounds the current document—the document in which the insertion
point is located. The blue area of a predefined frameset icon represents the currently selected
page or frame in a document, and the white area represents the new frame or frames.

To insert a predefined frameset:


1 Place the insertion point in the document.
2 Then do one of the following:
   In the Frames category of the Objects panel, select a predefined frameset. To insert the
   frameset, you can click an icon or drag an icon directly to the document.
   To select a predefined frameset, choose Insert > Frames > Left, Right, Top, Bottom, Left and
   Top, Left Top, Top Left, or Split.




Designing and inserting a frameset

Before creating a frameset or working with frames, make the frame borders visible in the
document window.

To view frame borders in a document, choose View >Visual Aids > Frame Borders.

When frame borders are displayed, space is added around the document border, providing you
with a visual indicator of the frame areas in your document.

To create a frameset, do one of the following:


  Choose Modify > Frameset > Split Frame Left, Right, Up, or Down.
  Drag one of the frame borders into the Document window to split the document vertically or
  horizontally. Drag a frame border from one of the corners to divide the document into four
  frames.
  Use Alt-drag (Windows) or Option-drag (Macintosh) if you are splitting an inner frame.


To delete a frame:

Drag the frame border off the page or to the border of the parent frame.


Creating a nested frameset

A frameset inside another frameset is called a nested frameset. Each new frameset you create
includes its own frameset HTML document and frame documents. Most Web pages that use
frames are actually using nested frames, and several of the predefined framesets in
Dreamweaver also use nesting.

For example, a document with three frames might display a company's logo in a frame at the
top of the document, navigation controls in a frame on the left side of a document, and content
in a third frame.




To create a nested frameset:


1 Place the insertion point in the frame where you want to insert a nested frameset.
2 Do one of the following:
  Choose Modify > Frameset > Split Frame Up, Down, Left, or Right.
  In the Frames category of the Objects panel, select a frameset icon.
  Choose Insert > Frames > Left, Right, Top, Bottom, Left and Top, Left Top, Top Left, or Split.
Selecting a frame or frameset

Frames and framesets are individual HTML documents. To make changes to a frame or to the
frameset, begin by selecting the frame or frameset you want to change. You can select a frame
or frameset either in the Document window or by using the Frames panel.

When you select a frame or the frameset, selection lines appear in both the Frames panel and
the Document window.


Frames panel

The Frames panel provides a visual representation of the frames within a document. You can
click a frame or frameset in the Frames panel to select that frame or frameset in the document,
and then you can view or edit the properties of the selected item in the Property inspector. See
About frame and frameset properties.

The Frames panel shows the hierarchy of the frameset structure in a way that may not be
apparent in the document window. In the Frames panel, a thick three-dimensional border
surrounds a frameset; frames are surrounded by a thin gray line, and each frame is identified
by a frame name.




To display the Frames panel, do one of the following:


  Choose Window > Frames.
  Press Ctrl+F10 (Windows) or Command+F10 (Macintosh).


To select a frame in the Frames panel:

Click the frame in the Frames panel.

To select a frameset in the Frames panel:

Click the border that surrounds the frames in the Frames panel.


      Selecting a frame or frameset in the Document
window

In the Document window, when a frame is selected, its borders are outlined with a dotted line;
when a frameset is selected, all the borders of the frames within the frameset are outlined with
a dotted line.

Select frames and framesets to change their properties. The Property inspector displays the
properties of the selected frame or frameset. See About frame and frameset properties.

To select a frame in the Document window:
Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame.

To select a frameset in the Document window:

Click a frame border in the Document window.

To move the selection to another frame, do one of the following:


   To move the selection to the next frame, Hold down Alt (Windows) or Command (Macintosh),
   and press the Left or Right Arrow key.
   To move the selection to the parent frameset (containing nested frames), Press Alt-Up Arrow
   (Windows) or Command-Up Arrow (Macintosh).
   To move the selection to the child frame (the frame that is nested in another frame), Press
   Alt-Down Arrow(Windows) or Command-Down Arrow (Macintosh).


Saving frame and frameset files

A frameset file and its associated frame files must be saved before you can preview the page in
a browser. You can individually save a frameset page or a frame page, or you can save all open
frame files and the frameset page.

When you use Dreamweaver to create frame documents, each new frame document is given a
temporary file name—for example, UntitledFrame-1 for the frameset page, Untitled-1, Untitled-
2, and so forth for the frame pages.

When you select one of the save options, the Save File dialog box opens ready to save a
document with its temporary file name. Because each file is "untitled," it may be difficult for you
to determine which frame file you are saving. Look at the frame selection lines in the Document
window to identify the current document being saved. The selected area identifies the frame
currently referenced in the Save File dialog box. The file name of the selected frame or frameset
also appears in the title bar.




To save a frameset file:


1 Select the frameset in the Frames panel or the Document window.
2 Choose one of the following:
  To save the frameset file, choose File > Save Frameset.
  To save the frameset file as a new file, choose File > Save Frameset As.




To save a document that is inside a frame:

Click in the frame to select it, then choose File > Save Frame or File > Save Frame As.

To save all files in a frameset:

Choose File > Save All Frames.

This saves all open documents, including individual documents, frame documents, and frameset
documents.

Note: Use the frame selection lines in the Document window to help you identify frameset and
frame documents as you are saving files.


About frame and frameset properties

Frames and framesets each have a Property inspector.


  Frame properties determine the frame name, source file, margins, scrolling, resizing, and
  borders of individual frames within a frameset.
  Frameset properties control the dimensions of the frames and the color and width of the
  borders between frames.


To view frame properties:


1 Choose Window > Properties to display the Property inspector if it isn't already open.
2 Do one of the following:
   Alt-click (Windows) or Option-Shift-click (Macintosh) a frame.
   Click a frame in the Frames panel.
   See Setting frame properties.


Setting frame properties

Use the Property inspector to name a frame and to set borders and margins. To see all of the
frame properties, click the expander arrow in the lower right corner of the Property inspector.
Naming each of your frames is necessary for your page links to work properly

To specify frame properties:


1 Select a frame by doing one of the following:
   Click a frame in the Frames panel.
   Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the Document window.
2 Choose Window > Properties to open the Property inspector. Click the expander arrow in the
  lower right corner to see all the properties.
3 To name the frame, type a name in the Frame Name field.
   Note: Frame Name determines the name of the current frame to use for hyperlink target
   and scripting references. A frame name should be a single word. Underscores (_) are
   allowed, but hyphens (-), periods (.), and spaces are not. Frame names should start with a
   letter (as opposed to a numeral). Don't use JavaScript reserved words (such as top or
   navigator) for frame names.
4 Choose from the following frame options:
   Src determines the source document for the frame. Enter a file name or click the folder icon
   to browse to and select the file. You can also open a file in a frame by placing the pointer in
   the frame and choosing File > Open in Frame.
   Scroll determines whether scroll bars appear when there is not enough room to display the
   content of the current frame. Most browsers default to Auto.
   No Resize restricts the size of the current frame and prevents users from dragging the frame
   borders. You can always resize frames in the Document window; however, if this option is
   selected a user can't resize frames in their browser.
   Borders controls the border of the current frame. The options are Yes, No, and Default.
   Choosing a Borders option overrides border settings defined for the frameset. (See Setting
   frameset properties.) Most browsers default to Yes. A border can be turned off only when all
   adjacent frames are set to No or when they are set to Default with the parent frameset set
   to No.
   Border Color sets a border color for all borders adjacent to the current frame. This setting
   overrides the border color of the frameset. See Setting frameset properties.
5 Set the following margin options (if margin options aren't visible, click the expander arrow in
  the lower right corner):
   Margin Width sets the width in pixels of the left and right margins (the space between the
   frame border and the content).
   Margin Height sets the height in pixels of the top and bottom margins (the space between
   the frame borders and the content).


Setting frameset properties

Use frameset properties to set borders and frame size. Setting a frame property overrides the
setting for that property in a frameset. For example, setting border properties in a frame
overrides the border properties set in the frameset.

Predefined framesets are used to quickly apply a frameset to a document. Predefined framesets
share the following default property values: no borders, no scroll bars, and no resizing of frames
when viewed in a browser. To change the default values, select the options you want in the
Property inspector.

To view frameset properties:


1 Choose Window > Properties to display the Property inspector, if it isn't already open.
2 Do one of the following:
  Click a border between two frames in the Document window.
  Click the border that surrounds the frames in the Frames panel.
3 To see all the frameset properties, click the expander arrow in the lower right corner of the
  Property inspector.




To specify frameset properties:


1 Select a frameset.
2 In the Borders pop-up menu, select whether you want to display borders around frames
  when the document is viewed in a browser.
   If you want to display borders, select Yes.
   If you don't want to display borders, select No.
   If you want the user's browser to determine how borders are displayed, select Default.
3 In the Border Width field, type a number to specify the width of the borders in the current
  frameset.
4 In the Border Color field, use the color picker to select a color for the border, or type the
  hexadecimal value for a color.
5 To select frame size options, click the tabs on the RowCol Selection box to select a row or the
  tabs on top to select a column. Then in the Value field, type a number to set the size of the
  selected row or column, and in the Units pop-up menu, set the unit of measure for the
  number in the Value field.


Naming a frameset document

To add a title to a frameset page, you use the page properties option.

To name a frameset page:


1 Select a frameset by doing one of the following:
   Click the border of the frameset in the Frames panel.
   Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the Document window. You
   may have to press Alt-Up Arrow (Windows) or Command--Up Arrow (Macintosh) to select the
   frameset.
2 Choose Modify > Page Properties.
3 In the Title field, type a name for the document.




Specifying frame sizes

Drag a frame border in the Document window to set approximate sizes for frames; then use the
Property inspector to specify how much space the browser allocates to a frame when the screen
size doesn't allow the frames to display at full size.

To specify frame sizes:


1 Click a frame border to select the frameset.
   Choose View > Visual Aids > Frame Borders if the borders aren't visible.
2 In the Property inspector, click the expander arrow to view all properties.
3 In the RowCol Selection box, click the row or column you want to change.




4 To specify how space is allocated when the browser window is resized, enter a number in the
  Value field and choose from the following Units options:
   Pixels sets the size of the selected column or row at an absolute value. This option is the best
   choice for a frame that should always be the same size, such as a navigation bar. If you set
   a different Units option for the other frames, they are allocated space only after frames
   specified in pixels are their full size.
   Percent specifies that the current frame should make up a specified percentage of its
   frameset. Frames specified with units set to Percent are allocated space after frames with
   units set to Pixels, but before frames with units set to Relative.
   Relative specifies that the current frame be allocated space proportionally to other frames.
   Frames with units set to Relative are allocated space after frames with units set to Pixels and
   Percent, but they fill all of the remaining space in the browser window.


Setting frame and frameset borders

You can specify how frame and frameset borders appear in a document. When you specify
border options for a frame, the corresponding frameset option is overridden.

To set frame borders:


1 Select the frame by Alt-clicking (Windows) or Option-Shift-clicking (Macintosh) or click the
  frame in the Frames panel.
2 Set the following options in the Property inspector:
  Borders controls the border of the current frames. The options are Yes, No, and Default. Most
  browsers default to Yes. A border can be turned off only when all adjacent frames are set to
  No (or set to Default with the parent frameset set to No).
  Border Color sets a border color for all borders adjacent to the current frame.




To set frameset borders:
1 Select the frameset by clicking a frame border in the Document window or clicking the
  border enclosing the frames in the Frames panel.
2 Set the following options in the Property inspector:
   Borders controls the border of frames within the current frameset. Choose Yes to display
   borders in three-dimensional color, choose No to display borders as flat and gray, or choose
   Default to let the browser determine how borders are displayed. Most browsers default to
   Yes.
   Border Color sets a color for all borders in the current frameset. This setting can be
   overridden for a single frame by a setting a border color for that frame.
   Border Width specifies the width of the borders in the current frameset. Enter 0 to specify no
   borders.


Changing the background color of a frame

You change the background color of a frame by setting the background color of the document in
the frame.

To change the background color of a document in a frame:


1 Do one of the following:
  Place the pointer in the frame and choose Modify > Page Properties.
  Right-click (Windows) or Control-click (Macintosh) inside the frame and choose Page
  Properties from the context menu.
2 Click the Background pop-up menu to select a color.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:30
posted:3/17/2010
language:
pages:11