introductory tutorial 9 creating frames. xp new perspectives on blended html, xhtml, and css2...

INTRODUCTORY

Tutorial 9

Creating Frames

XP

New Perspectives on Blended HTML, XHTML, and CSS 2

Objectives• Decide when to use frames for a Web site• Learn the components of framesets• Create a frameset document• Size frameset windows• Target individual frame windows

XPObjectives• Identify the purpose of inline frames• Create an inline frame• Target an inline frame window• Use the meta tag to create a slide show


XPUsing Frames on a Web Page• Frames divide a Web page into several windows

called frames– Each frame allows you to see a different Web page in the

same browser window• To create frames, you first need to create a frameset

document• Frames are similar to tables in that frames establish

rows and columns• The frameset document uses the <frameset>

</frameset> tags


XPCreating a Row Frameset• To create a rows frameset, enter the following

code:<frameset rows="value1, value2, ..."></frameset>where value1 is the height of the first row, value2 is the height of the second row, and so forth. The values should be expressed as a percentage

• Optionally, use the (*) wildcard character as the last value or if the rows will be of equal height


XPCreating Frames• To create frames, enter the following code:<frame src="filename.htm" name="framename" />where filename is the name of the file that will be displayed in the frame and framename is the name of the frame


XPCreating Frames


XPCreating a Column Frameset• To create a columns frameset, enter the following code:<frameset cols="value1, value2, etc."></frameset>where value1 is the width of the first column, and value2 is the width of the second column, and so forth. The values should be expressed as a percentage

• Optionally, use the (*) wildcard character as the last value or if the columns will be of equal width


XPCreating a Column Frameset


XPOpening a Document in a Specific Frame• By default, a link in a frameset document will

open in the same frame• Use the target attribute in the <a> tag– The target attribute should be set to the name of the

frame in which you wish to open the Web page


XPUsing Magic Targets• Magic targets have special meanings in HTML– _top– _blank– _self

• The base tag automates the process of targeting links


XPControlling Scrollbars and the Frame Size• To control the appearance of scrollbars and the

size of a frame, enter the following code:<frame src="filename.htm" scrolling="scroll_value"noresize="noresize" />where scroll_value is either auto, yes, or no, and noresize has a value of noresize to disable screen resizing.


XPControlling Scrollbars and the Frame Size


XPThe border Attribute• Eliminating borders creates a less cluttered look

to the screen– Seamless frames


XPControlling the Frame Height and Width• To control the height and width of a frame, enter

the following code:<frame src="filename" marginheight="value" marginwidth="value2" />where value is the height of the frame in pixels and value2 is the width of the frame in pixels


XPControlling the Frame Height and Width


XPFrameset Attributes and Values


XPCreating Inline Frames• Inline frames create a frame window within a document

without your having to create a frameset• To create an inline frame, enter the following code:<iframe src="filename" name="target_name"></iframe>where filename is the name of the file that will initially be displayed in the inline frames window and target_name is the name of the inline frames window


XPCreating Inline Frames


XPDocument Type Definitions


XPUsing the meta Tag to Create a Slide Show• To create a slide show, enter the following code:<meta http-equiv="refresh" content="number_seconds; url=filename">where number_seconds is the number of seconds you want as the interval until the next file is displayed and filename is the name of the next file to be displayed in the slide show


XPThe Future of Frames


XPThe iframe Attributes


introductory tutorial 9 creating frames. xp new perspectives on blended html, xhtml, and css2...

Documents