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

New Perspectives on Blended HTML, XHTML, and CSS 3

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

New Perspectives on Blended HTML, XHTML, and CSS 4

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

New Perspectives on Blended HTML, XHTML, and CSS 5

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

New Perspectives on Blended HTML, XHTML, and CSS 6

XPCreating Frames

New Perspectives on Blended HTML, XHTML, and CSS 7

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

New Perspectives on Blended HTML, XHTML, and CSS 8

XPCreating a Column Frameset

New Perspectives on Blended HTML, XHTML, and CSS 9

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

New Perspectives on Blended HTML, XHTML, and CSS 10

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

• The base tag automates the process of targeting links

New Perspectives on Blended HTML, XHTML, and CSS 11

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.

New Perspectives on Blended HTML, XHTML, and CSS 12

XPControlling Scrollbars and the Frame Size

New Perspectives on Blended HTML, XHTML, and CSS 13

XPThe border Attribute• Eliminating borders creates a less cluttered look

to the screen– Seamless frames

New Perspectives on Blended HTML, XHTML, and CSS 14

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

New Perspectives on Blended HTML, XHTML, and CSS 15

XPControlling the Frame Height and Width

New Perspectives on Blended HTML, XHTML, and CSS 16

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 17

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 18

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 19

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

New Perspectives on Blended HTML, XHTML, and CSS 20

XPCreating Inline Frames

New Perspectives on Blended HTML, XHTML, and CSS 21

XPDocument Type Definitions

New Perspectives on Blended HTML, XHTML, and CSS 22

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

New Perspectives on Blended HTML, XHTML, and CSS 23

XPThe Future of Frames

New Perspectives on Blended HTML, XHTML, and CSS 24

XPThe iframe Attributes

New Perspectives on Blended HTML, XHTML, and CSS 25