CH. 7 Web Page Design –Page Layout with Frames

Mr. Ursone

Frame

• Frame: An area that acts as an independent browser window acts independently of other regions in the window.

• Frames divide a Web page into multiple, scrollable regions, or panes. Each frame contains its own source code.

• Typical Uses:– Displaying a navigation bar consisting of links in one frame and

displaying the corresponding Web pages in another– Placing a number of images in one frame and displaying the

descriptions in another– Placing a list of vocab words in one frame and their defs. In

another

Frames

• Static frame: A frame that is fixed and does not change its content

Static Frames

Advantages and Disadvantages of Frames

• Advantages– Navigation-related graphics do not have to be reloaded

for every page in the Web site– Each frame can have its own scroll bar– Static content remains fixed– Content and navigation can be separated from each

other

Advantages and Disadvantages of Frames

• Disadvantages – Some browsers will not support frames– Printing pages with frames may be a problem– Pages that are displayed in the main frame are

displayed in a smaller window than they would normally be

– May be difficult to bookmark or to add to favorites

Frameset and Frame Basics

• Frameset: Defines the layout of the frames when they are displayed on the screen

• Predefined Frameset Examples

Creating the Frameset

• Predefined Frameset: provides a visual representation of how the framed window will display. – You can modify predefined

framesets to your own specifications

Creating the Frameset

• Nested Frameset: A frameset inside another frameset.– Most framesets contain nested framesets– Any set of frames in which different numbers of frames

are in different rows or columns creates a nested frameset

A Nested and Non-Nested Frameset

• Nested • Not Nested

• What’s the difference?

Frameset Properties

• The RowCol Selection box is a visual representation of the frameset. On the top and left sides of the box are tabs. Click a tab on the left side to select (highlight) a row, or click a tab on the top to select a column. – When the row is selected you can enter its height.

When a column is selected you can enter its width.

Tabs

Row/Col Value Box & Units Box

Frameset Row and Column Size Measurements

Frames

• Frames and Framesets should be given titles• You can save the frameset file and each framed

document individually, or you can save the frameset file and all documents appearing in the frames at once.

• You can select each frame individually and change the properties of that individual frame

• To delete a frame: drag a frame border off the page or to the edge of the frameset

• When you add an image in the title frame if you place a 0 in the Margin height box this will assure the image will display properly in the browser

Understanding Flash Extensions & Inserting a Flash Button

• An extension, in this context, is the file type in which you are going to save a file. Ex. Anything.doc is a Microsoft Word document.

• Flash File (.FLA): is created in the flash program. You can then export the .fla file as an .swf or .swt file, which can be viewed in a browser

• Flash Movie File (.SWF): A compressed version of a .fla file and is optimal for viewing on the web

• Flash Template File (.SWT): This file type enables you to modify and replace information in a Flash movie file. It is also the extension for the Flash button objects.

• To insert a flash button into a frame, click Insert on the menu bar, point to media, and then point to Flash Button on the submenu.

Target

• Target: is where a link will open– In Ch. 7 we targeted the mainframe in the frameset for

the spot to open our links– There are other options other than the mainframe

• _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

Miscellaneous

• Frames are saved with a .htm extension• When you click the Units box arrow on the

frameset Property inspector, the three options displayed are Pixels, Percent, and Relative

• Web designers use frames to present information in a more flexible and useful fashion.

• Frames on a page function independently of one another.

• To open the frames panel go to the Window menu and click frames or Press Shift + F2