1 / 12

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

maik
Download Presentation

Frames

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frames

  2. 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

  3. 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

  4. 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.

  5. 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.

  6. 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

  7. 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

  8. 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>

  9. 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

  10. 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)

  11. 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

  12. 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>

More Related