Dw 2004 Frames

Macromedia Dreamweaver MX 2004

Macromedia Dreamweaver 2004 41

A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window. A frameset is an HTML fi le that defi nes the layout and properties of a set of frames.

To view a set of frames in a browser, enter the URL of the frameset fi le; the browser then opens the relevant documents to display in the frames.

The following example shows a frame layout consisting of three frames: one narrow frame on the side that will contain a navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame that takes up the rest of the page that will contain the main content. Each of these frames displays a separate HTML document.

In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame navigation bar contains links; clicking one of these links changes the content of the main content frame, but the contents of the side frame itself remain static. The main content frame on the right displays the appropriate document for whichever link the visitor clicks on the left.

Note that a frame is not a fi le. It’s easy to think of the document that currently appears in a frame as an integral part of the frame, but the document isn’t actually part of the frame. The frame is a container that holds the document--any frame can display any document.

The word page can be used loosely to refer either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTML documents appear at once. The phrase “a page that uses frames,” for example, usually refers to a set of frames and the documents that initially appear in those frames.

A site that appears in a browser as a single page comprising three frames actually consists of at least four separate HTML documents: the frameset fi le, plus the three documents containing the content that initially appears in the frames. When you design a page using framesets in Dreamweaver, you must save each of these four fi les in order for the page to work properly in the browser.

Frames



Deciding whether to use frames

The most common use of frames is for navigation. A set of frames often includes one frame containing a navigation bar and another frame to display the main content pages.

However, designing with frames can be confusing, and in many cases you can create a web page without frames that accomplishes many of the same goals as a set of frames. For example, if you want a navigation bar to appear on the left side of your page, you can either replace your page with a set of frames, or just include the navigation bar on every page in your site.

Many professional web designers prefer not to use frames, and many people who browse the web dislike frames. When frames are used well they can be very useful for some sites.

Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, always provide a noframes section in your frameset, for visitors who can’t view them. You may also want to provide an explicit link to a frameless version of the site, for visitors whose browsers support frames but who don’t like using frames.

Advantages to using frames include the following: • A visitor’s browser doesn’t need to reload the navigation-related graphics for every page. • Each frame has its own scroll bar (if the content is too large to fit in a window), so a

visitor can scroll the frames independently.

For example, a visitor who scrolls down to the bottom of a long page of content in a frame doesn’t need to scroll back up to the top to use the navigation bar if the navigation bar is in a different frame.

Disadvantages to using frames include the following: • Precise graphical alignment of elements in different frames can be difficult. • Testing the navigation can be time-consuming. • The URLs of the individual framed pages don’t appear in browsers, so it can be difficult

for a visitor to bookmark a specific page (unless you include a behavior that forces a page to load in a frameset).

Frames



Using a predefi ned frameset

Predefi ned framesets make it easy for you to select the type of frameset you want to create. The New Document dialog creates a new empty frameset. The frameset icons provide a visual representation of each frameset as applied to the current document.

Many of the framesets are really two framesets nested together. For example, the fi xed top nested left frameset consists of a frameset with a fi xed top and a adjustable bottom. In the bottom frame, you have a second frameset with a fi xed left and an adjustable right. Knowing if you are working with a nested frameset will be important if you use the link target _parent.

You can also insert a predefi ned frameset using the Layout tool bar.

Frames

About frames and framesets

A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window.

A frameset is an HTML fi le that defi nes the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset fi le itself doesn’t contain HTML content that displays in a browser, except in the noframes section; the frameset fi le simply provides information to the browser about how a set of frames should look and what documents should appear in them.



FramesSelecting frames and framesets

To make changes to the properties of a frame or 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. It’s generally easier to select framesets in the Frames panel than in the Document window.

Selecting frames and framesets in the Frames panelThe Frames panel provides a visual representation of the frames within a frameset. It shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.

To select a frame in the Frames panel: • Click the frame in the Frames panel. A selection outline appears around

the frame in both the Frames panel and the Document window’s Design view.

To select a frameset in the Frames panel: • Click the border that surrounds the

frameset in the Frames panel.

A selection outline appears around the frameset in both the Frames panel and the Document window’s Design view.



FramesSelecting frames and framesets in the Document windowIn the Document window’s Design view, 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 light dotted line.

Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are various operations (such as setting frame properties) for which you must select a frame.

To select a frame in the Document window: • Alt-click (Windows)

or Option-Shift-click (Macintosh) inside a frame in Design view.

A selection outline appears around the frame.

To select a frameset in the Document window: • Click one of the

frameset’s internal frame borders in Design view. (Frame borders must be visible to do this; select View >Visual Aids > Frame Borders to make frame borders visible if they aren’t.)

A selection outline appears around the frameset.



Viewing and setting frameset properties

Use the Property inspector to view and set most frameset properties.To view or set frameset properties: 1. Select a frameset by doing one of the following: • Click a border between two frames in the frameset in the Document window’s Design view. • Click the border that surrounds a frameset in the Frames panel (Window > Frames). 2. Make changes as necessary.

To set a title for a frameset document: 1. Select a frameset by doing one of the following: 2. In the Title field of the Document toolbar, type a name for the frameset document.

When a visitor views the frameset in a browser, the title appears in the browser’s title bar.

Frames

Setting frameset Property inspector options

Use this Property inspector to set borders and frame sizes for a frameset.

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.

To specify border properties for the selected frameset: 1. Change the following border options as desired:

• Borders determines whether borders should appear around frames when the document is viewed in a browser. To display borders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to determine how borders are displayed, select Default.

• Border Width specifies a width for all the borders in the frameset.

• Border Color sets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a color.



FramesSetting frameset Property inspector options (continued)

2. To set frame sizes for rows and columns of the selected frameset, click a tab on the left side or top of the RowCol Selection area; then enter a height or width in the Value text box.

3. To specify how much space the browser allocates to each frame, select from the following choices in the Units menu:

Pixels sets the size of the selected column or row to an absolute value. This option is the best choice for a frame that should always be the same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before frames with sizes specified as percent or relative. The most common approach to frame sizes is to set a left-side frame to a fixed pixel width and to set a right-size frame to relative, which enables the right frame to stretch to take up all the remaining space after the pixel width is allocated.

If all of your widths are specified in pixels, and a visitor views the frameset in a browser that’s too wide or too narrow for the width you specified, then the frames stretch or shrink proportionately to fill the available space. The same applies to heights specified in pixels. Thus, it’s generally a good idea to specify at least one width and height as relative.

Percent specifies that the selected column or row should be a percentage of the total width or height of its frameset. Frames 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 selected column or row be allocated the rest of the available space after Pixels and Percent frames have had space allocated; that remaining space is divided proportionally among the frames with sizes set to Relative.Note: When you select Relative from the Units menu, any number you’ve entered in the Value field disappears; if you want to specify a number, you must re-enter it. If there’s only one row or column set to Relative, though, there’s no need to enter a number, since that row or column receives all the remaining space after the other rows and columns have space allocated. To be certain of full cross-browser compatibility, you can enter 1 in the Value field; that’s equivalent to entering no value.



FramesViewing and setting frame properties and attributes

Use the Property inspector to view and set most frame properties. You may also want to set some frame attributes, such as the title attribute (which is not the same as the name attribute), to improve accessibility. You can enable the accessibility authoring option for frames to set attributes when you create frames, or you can set attributes after you insert a frame.

To view or set frame properties: 1. Select a frame by doing one of the following: • Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document

window’s Design view. • Click a frame in the Frames panel (Window > Frames). 2. Make changes as necessary.

To set accessibility values for a frame: 1. In the Frames panel (Window > Frames), select a frame by placing the insertion point in

one of the frames. 2. Select Modify > Edit Tag. The Tag editor appears. 3. Select Style Sheet/Accessibility from the category list on the left. 4. Enter values as desired. 5. Click OK.

To edit accessibility values for a frame: 1. Display Code view or Code and Design views for your document, if you’re currently in

Design view. 2. In the Frames panel (Window > Frames), select a frame by placing the insertion point in

one of the frames. Dreamweaver highlights the frame tag in the code. 3. Right-click (Windows) or Control-click (Macintosh) in the code, then select Edit Tag. The tag editor appears. 4. Make changes as necessary. 5. Click OK.

To change the background color of a frame, set the background color of the document in the frame in page properties.To change the background color of a document in a frame: 1. Place the insertion point in the frame. 2. Select Modify > Page Properties. The Page Properties dialog box appears. 3. Click the Background color pop-up menu, then select a color. 4. Click OK.



Setting frame Property inspector options

Use this Property inspector to name a frame and to set borders and margins.

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.

To specify properties for the selected frame: 1. Name the frame:

• Frame Name is the name used by a link’s target attribute or by a script to refer to the frame. A frame name must be a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in JavaScript (such as top or navigator) as frame names. To make it easier to create cross-frame links later, name each of your frames when you create it.

2. Change the following options as desired: • Src specifies the source document to display in the frame. Click the folder icon to

browse to and select a file. • Scroll specifies whether scroll bars appear in the frame. Setting this option to Default

doesn’t set a value for the corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame.

• No Resize prevents visitors from dragging the frame borders to resize the frame. • Borders shows or hides the borders of the current frame when it’s viewed in a

browser. Selecting a Borders option for a frame overrides the frameset’s border settings. Border options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.

• Border Color sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset. The underlying logic to which frame borders have a given border color applied to them is complex; it may be difficult to understand why certain borders change color when you specify a border color.

3. Set the following margin options if you wish. Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties dialog box:

• Margin Width sets the width in pixels of the left and right margins (the space between the frame borders 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).

Frames



FramesOpening a document in a frameYou can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing document in a frame.

To open an existing document in a frame: 1. Place the insertion point in a frame. 2. Select File > Open in Frame. 3. Select a document to open in the frame. The document appears in the frame. 4. (Optional) To make this document the default document to display in the frame when the

frameset is opened in a browser, save the frameset.

Controlling frame content with linksTo use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens. For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main content frame on the right, you must specify the name of the main content frame as the target for each of the navigation bar links. When a visitor clicks a navigation link, the specified content opens in the main frame.

To target a frame: 1. In Design view, select text or an object. 2. In the Link field in the Property inspector, do one of the following: • Click the folder icon, then select the file to link to. • Drag the Point to File icon to the Files panel to select the file to link to. 3. In the Target pop-up menu in the Property inspector, select the frame or window in

which the linked document should appear: • _blank opens the linked document in a new browser window, leaving the current

window untouched. • _parent opens the linked document in the parent frameset of the frame the link

appears in, replacing the entire frameset. • _self opens the link in the current frame, replacing the content in that frame. • _top opens the linked document in the current browser window, replacing all frames. • Frame names also appear in this menu. Select a named frame to open the linked

document in that frame.

Frame names appear only when you’re editing a document within a frameset. When you edit a document in its own Document window, frame names do not appear in the Target pop-up menu. If you’re editing a document outside of the frameset, you can type the target frame’s name in the Target text box.

Tip: If you’re linking to a page outside of your site, always use target=”_top” or target=”_blank” to ensure that the page doesn’t appear to be part of your site.



Saving frame and frameset files

Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that will display in the frames. You can save each frameset file and framed document individually, or you can save the frameset file and all documents appearing in frames at once.

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

If the frameset file has not previously been saved, these two commands are equivalent.

To save a document that appears in a frame: • Click in the frame, then select File > Save Frame or File > Save Frame As.

To save all files associated with a set of frames: • Select File > Save All Frames.

This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the frameset in the Design view, and a dialog box enables you to select a filename. For each frame that hasn’t yet been saved, a heavy border appears around the frame and a dialog box enables you to select a filename.

If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.

Frames

Dw 2004 Frames

Documents

Transcript of Dw 2004 Frames