Frames - OoCities
Download
Report
Transcript Frames - OoCities
Frames
What are frames?
• The ability to divide the browser window
into sections that can function
independently of one another.
• Navigation within the site can be
accomplished by creating a static menu bar.
• Table of Contents
• Also content that you do not want to change
as the person moves through your site.
• Controversial
The Anatomy of Frames
Frame 2
filename.html
Frame 1
filename.html
Underlying page
filename.html
Frame 1
filename.html
Frame 3
filename.html
Frame 2
filename.html
Creating the Frame Structure
• You create the frame partitions in a “base”
Web page
• To set up the structure, use the
<FRAMESET>..</FRAMESET> tags in
place of the <BODY> tags.
• To partition the screen into columns, use the
COLS attribute.
• To partition the screen into rows, use the
ROWS attribute.
The Frame Tags
• Each frame is defined with the <FRAME> tag
(with no ending tag).
<FRAME SRC=“filename.html” NAME=“name of frame”>
Shows which file will be
loaded into the frame.
Names the frame for easy reference.
Partitioning the Screen Horizontally
index.html
topframe
header.html
bottomframe
footer.html
middleframe
home.html
<HTML> <HEAD> <TITLE> My Web Page </TITLE> </HEAD>
<FRAMESET ROWS=”15%,70%,15%">
<FRAME SRC=“header.html” NAME=“topframe”>
<FRAME SRC=“home.html” NAME=“middleframe”>
<FRAME SRC=“footer.html” NAME=“bottomframe”>
</FRAMESET>
</HTML>
Partitioning the Screen Vertically
body
main.html
menu
menubar.html
index.html
<HTML> <HEAD> <TITLE> My Web Page </TITLE> </HEAD>
<FRAMESET COLS=”25%,75%">
<FRAME SRC=“menubar.html” NAME=“menu”>
<FRAME SRC=“main.html” NAME=“body”>
</FRAMESET>
</HTML>
Creating a Grid
frame1
frame1.html
frame3
frame3.html
index.html
frame2
frame2.html
frame4
frame4.html
<HTML> <HEAD> <TITLE> My Web Page </TITLE> </HEAD>
<FRAMESET COLS=”25%,75%” ROWS=“50%,50%”>
<FRAME SRC=“frame1.html” NAME=“frame1”>
<FRAME SRC=“frame2.html” NAME=“frame2”>
<FRAME SRC=“frame3.html” NAME=“frame3”>
<FRAME SRC=“frame4.html” NAME=“frame4”>
</FRAMESET> </HTML>
Some Other <FRAME> Attributes
• SCROLLING- if you want scroll bars in each
frames (used as SCROLLING=“yes” or “no”)
• MARGINHEIGHT and MARGINWIDTH- to
adjust the margin between the edge of the
frame and the content in the frame (# value)
• FRAMEBORDER- to change the size of the
border around the frame (a # value is supplied)
• NORESIZE- does not allow the user to resize
the size of the frame. It does not have a value
Targets (Why did we name the frames?)
• Targets are used to describe where a page will
be displayed when the hyperlink is clicked on.
• In the HTML document with the hyperlinks the
TARGET attribute is used.
<A HREF="link" TARGET="name of frame">
• Looking at our example with the 2 vertical frames,
there is the following link in menubar.html.
<A HREF=“http://www.cnn.com” TARGET=“body”>
CNN </A>
(The CNN page will appear in the frame named body)
Other TARGET Values
• <A HREF=”http://www.cnn.com"
TARGET=_top> CNN </A> covers the whole
screen
• <A HREF=”http://www.cnn.com"
TARGET=_blank> CNN </A> opens the new
page in a new window
The <NOFRAME> tags
• Used to create an alternative for those whose browsers
do not support frames.
• Whatever is between these tags will be displayed by a
browser that doesn't support frames. If frames are
supported, it is ignored.
<NOFRAME>
<H1 ALIGN=CENTER>Your browser does not support
frames!</H1>
<P>To view this frames tutorial, you must have a
browser capable of viewing frames. </P>
</NOFRAME>