Top Banner
INTRODUCTORY Tutorial 9 Creating Frames
25

INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

Jan 18, 2018

Download

Documents

Cecily Allison

XP Objectives 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 CSS3
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

INTRODUCTORY

Tutorial 9

Creating Frames

Page 2: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 3: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 4: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 5: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 6: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 7: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPCreating Frames

New Perspectives on Blended HTML, XHTML, and CSS 7

Page 8: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 9: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPCreating a Column Frameset

New Perspectives on Blended HTML, XHTML, and CSS 9

Page 10: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 11: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 12: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 13: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPControlling Scrollbars and the Frame Size

New Perspectives on Blended HTML, XHTML, and CSS 13

Page 14: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPThe border Attribute• Eliminating borders creates a less cluttered look

to the screen– Seamless frames

New Perspectives on Blended HTML, XHTML, and CSS 14

Page 15: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 16: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPControlling the Frame Height and Width

New Perspectives on Blended HTML, XHTML, and CSS 16

Page 17: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 17

Page 18: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 18

Page 19: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPFrameset Attributes and Values

New Perspectives on Blended HTML, XHTML, and CSS 19

Page 20: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 21: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPCreating Inline Frames

New Perspectives on Blended HTML, XHTML, and CSS 21

Page 22: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPDocument Type Definitions

New Perspectives on Blended HTML, XHTML, and CSS 22

Page 23: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

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

Page 24: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPThe Future of Frames

New Perspectives on Blended HTML, XHTML, and CSS 24

Page 25: INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.

XPThe iframe Attributes

New Perspectives on Blended HTML, XHTML, and CSS 25