frames an overview. why frames frames allow you to show several documents in one page. useful for...

11
Frames An overview

Upload: laurel-hopkins

Post on 23-Dec-2015

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Frames

An overview

Page 2: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Why frames

• Frames allow you to show several documents in one page.

• Useful for navigation.

• Useful for attaching pages from other sites.

Page 3: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

The Tags

• There are 3 tags you need to know for frames: <frameset>, <frame> and <noframe>

• <frameset>and <noframe> must always be closed. <frame> does not.

Page 4: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

<frameset>

• Function: define a collection of frames

• Main Attributes: Cols, rows

• Other Attributes: border, bordercolor, class, id, style, title, frameborder, framespacing,

• Javascript Attributes: onblur, onfocus, onload, onunload

Page 5: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Rows, cols

• By pixel: rows=“100,200,100”– With variable: rows=“20,*,20”

• By percentage: rows=“25%,50%,25%”– With variable: rows=“20%,10%,*”

Page 6: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

<frame>

• Function: define a single frame in a <frameset>

• Main Attributes: src, id– src: the url for the page to display– id: a name for the frame for later reference– scrolling = yes or no

Page 7: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

<noframe>

• Function: Supply content for non-frame-capable browsers

Page 8: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

<html><frameset rows=“60%,*” cols=“60,20%,*”>

<frame src=“frame1.html”><frame src=“frame2.html”><frame src=“frame3.html” name=”f3”><frame scrolling = yes src=“frame4.html”><frame src=“frame5.html”><frame src=“frame6.html”>

<noframes>Sorry this document requires a frame capable browser

</noframes></html>

Page 9: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Targeting

• You can use the target attribute of the anchor tag to make the link open in a frame or window.<a target=“myframe” href=“http://web.mit.edu”>– If the there is a frame of window with the name

“myframe” it will be opened there.– So be carefull when you name your frames and

windows. If you give the same name to a frame and a window the browser will get confused.

Page 10: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Special targets

• There are seveal special values for target: top, new, and blank.

• If you set the target equal to blank or new the document will open in a new window.– Eg: <a target=“new” href=“http

://www.someoneshomepage.com”>

• top refers to the window containg a frame.– If there are no frames in a page top point to the

window, but you wouldn’t really need it.

Page 11: Frames An overview. Why frames Frames allow you to show several documents in one page. Useful for navigation. Useful for attaching pages from other sites

Examples

• Leaving a frames page:

<a target=“top” href=“http://web.mit.edu/aiti/noframes.html”>

• <a target=“google” href=“http://www.google.com”>