Frames
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
Frames
E N D
Presentation Transcript
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 2 Frame 3 filename.html 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 <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> header.html middleframe bottomframe home.html footer.html
Partitioning the Screen Vertically body <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> main.html menu menubar.html index.html
Creating a Grid index.html frame1 frame2 frame1.html frame2.html frame3 frame4 frame3.html 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>