Understanding Web Pages Created Using Frames
Web pages created using frames consist of a "master" HTML document describing the frameset arrangement. Frames are arranged on the page using FRAMESET and FRAME tags. The basic structure of a framed document includes HTML, HEAD, FRAMESET, FRAME, NOFRAMES, and BODY tags. Frames can be sectioned off using COLS or ROWS attributes with values in pixels, percentage, or asterisk. Each frame requires an associated HTML file. Changing the FRAMESET attributes affects the layout of the web page. Save and view the file to see the changes.
Uploaded on Dec 13, 2024 | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Web pages created using frames consist of a "master" HTML document. This describes the Frameset or the way that frames are arranged on the page. This page is the document that loads the frame structure and the one that represents the URL for the framed page. There are many ways to split the web page area for example: In each of the above examples each sub section (Frame in the Frameset) requires a separate HTML file, for example:
The first step in describing Frames and their use is to look at the basic structure of a framed document and to describe each tag. The basic structure of a framed document is: <HTML> <HEAD> <TITLE> </HEAD> <FRAMESET COLS= <FRAME SRC= <FRAME SRC= <NO FRAMES> <BODY> <P>Your Browser does not support Frames </P> </BODY> </NOFRAMES> </FRAMESET> </HTML> All frames begin with the <FRAMESET> tag. This tag replaces the <BODY> and determines how the page is sectioned off. <HTML> <HEAD> <TITLE> 2 </HEAD> <FRAMESET COLS= #,# <FRAME SRC= html source file <FRAME SRC= html source file <NO FRAMES> BODY> <P>Your Browser does not support Frames </P> </BODY> </NOFRAMES> </FRAMESET> </HTML> <FRAMESET> tag. This tag replaces the <BODY> and determines how the page is sectioned off. 2 frame Web page </TITLE> frame Web page </TITLE> #,# or ROWS= html source file > html source file > or ROWS= #,# > > #,# > >
<FRAMESET COLS= Which in this instance describes a page with two columns, the first being 350 the remaining of the screen. The ROW attribute works like the COLS, in that the value can take the form of a size set by pixels, percentage, or the asterisk. Similarly values must be separated by a comma. For example <FRAMESET ROWS= Each section (frame) of the page will require a standard html file to be associated with it. This association is made with the <FRAME SRC= <FRAMESET COLS= 350 350,* ,* > > </FRAMESET> </FRAMESET> 350 pixels wide with the second column taking up the remaining of the screen. ROW attribute works like the COLS, in that the value can take the form of a size set by pixels, percentage, or the asterisk. Similarly values must be separated by a comma. For example <FRAMESET ROWS= 35 frame) of the page will require a standard html file to be associated with it. This association is made with the <FRAME SRC= html source file pixels wide with the second column taking up 35%, %, 10 10%, %, 55 55% % > > </FRAMESET> </FRAMESET> html source file > tag. > tag.
<HTML> <HEAD><TITLE> </HEAD> <FRAMESET ROWS= <FRAME SRC= <FRAME SRC= <NOFRAMES> <BODY> <P>Your browser does not support Frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> Save and view the file Check the effect of changing the <FRAMESET ROWS= <FRAMESET COLS= <HTML> <HEAD><TITLE> 2 </HEAD> <FRAMESET ROWS= 30 FRAME SRC= one.html <FRAME SRC= two.html <NOFRAMES> <BODY> <P>Your browser does not support Frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> 2 frame Web page </TITLE> frame Web page </TITLE> 30%, %,70 > > 70% % > > one.html > two.html > <FRAMESET ROWS= 50 50%, %,50 50% % > tag to > tag to <FRAMESET COLS= 50 50%, %,50 50% % > >
Use the code below to produce the four sectioned Web page. <HTML> <HEAD><TITLE> <FRAMESET rows=" <FRAME SRC= <FRAME SRC= <FRAME SRC= <FRAME SRC= <NOFRAMES> <BODY> <P> Unfortunately your browser does not support Frames and so this page is unavailable to you.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> <HTML> <HEAD><TITLE> 2 <FRAMESET rows="50 <FRAME SRC= one.html <FRAME SRC= two.html <FRAME SRC= three.html <FRAME SRC= four.html <NOFRAMES> <BODY> <P> Unfortunately your browser does not support Frames and so this page is unavailable to you.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> 2 frame Web page </TITLE></HEAD> 50%, one.html > two.html > three.html > four.html > frame Web page </TITLE></HEAD> %,50 > > > > 50%" COLS=" %" COLS="50 50%, %,50 50%"> %">
You can nest frames by adding additional <FRAMESET> tags this next exercise is used to illustrate the technique. Create a Web page using the html code below. <HTML> <FRAMESET COLS=" <FRAME SRC="one.html"> <FRAMESET ROWS=" <FRAME SRC="one.html"> <FRAME SRC="three.html"> </FRAMESET> <NOFRAMES> <BODY> <P>This page requires a Browser that supports Frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> <HTML> <FRAMESET COLS="50 <FRAME SRC="one.html"> <FRAMESET ROWS="50 <FRAME SRC="one.html"> <FRAME SRC="three.html"> </FRAMESET> <NOFRAMES> <BODY> <P>This page requires a Browser that supports Frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> 50%, %,50 50%"> %"> 50%, %,50 50%"> %">
<HTML> <FRAMESET ROWS=" <FRAME SRC="one.html"> <FRAMESET COLS=" <FRAME SRC= <FRAME SRC="three.html"> <FRAME SCR="four.html"> </FRAMESET> <NOFRAMES> <BODY> <P>This page requires a Browser that supports frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> <HTML> <FRAMESET ROWS="30 <FRAME SRC="one.html"> <FRAMESET COLS="50 <FRAME SRC= two.html <FRAME SRC="three.html"> <FRAME SCR="four.html"> </FRAMESET> <NOFRAMES> <BODY> <P>This page requires a Browser that supports frames</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> 30%,*%"> %,*%"> 50%,*%"> two.html > %,*%"> >
<DOCTYPE HTML PUBLIC transitional// <HTML> <HEAD> <TITLE> Exercise <FRAMESET ROWS=" <FRAME NAME="top" SRC="top.html"> <FRAMESET COLS=" <FRAME NAME="menu" SRC="left.html"> <FRAME NAME="display" SRC="right.html"> </FRAMESET> <FRAME NAME="bottom" SRC="bottom.html" > <NOFRAMES> <BODY> <H apparently your browser does not support this feature. </H </BODY> </NOFRAMES> </FRAMESET> </HTML> <DOCTYPE HTML PUBLIC - -//w transitional//EN <HTML> <HEAD> <TITLE> Exercise 30 FRAMESET ROWS="55 <FRAME NAME="top" SRC="top.html"> <FRAMESET COLS="24 <FRAME NAME="menu" SRC="left.html"> <FRAME NAME="display" SRC="right.html"> </FRAMESET> <FRAME NAME="bottom" SRC="bottom.html" > <NOFRAMES> <BODY> <H2 apparently your //w3 3c/ c/dtd c.org/TR/html4 4/ /loose.dtd 30 </TITLE></HEAD> dtd html html 4.01 4.01 EN http http://www.w ://www.w3 3c.org/TR/html loose.dtd) ) </TITLE></HEAD> 55,*, ,*,55 55"> "> 24%,*"> %,*"> 2 ALIGN= ALIGN= center center > Please note This site uses frames, but > Please note This site uses frames, but </H2 2> > </BODY> </NOFRAMES> </FRAMESET> </HTML>
Frames are always defined left to right for columns and from top to bottom for rows. The MARGINWIDTH and MARGINHEIGHT attributes are placed inside the < <FRAME SRC> allow you to control the space between the borders of the frame and its content. The MARGINWIDTH controls the space on the left and right sides and the MARGINHEIGHT controls the space on the top and bottom. are set using a number of pixels with For example; < <FRAME SRC=" Frames are created with a border, but many Web designers prefer borderless frames. Firefox and Internet Explorer create these frames in different ways. To ensure that your page will work with both, you should use the FRAMEBORDER and BORDER attributes in the first frameset of you page. < <FRAMESET FRAMEBORDER= produce a two frame page without any border in both Firefox and Internet Explorer. MARGINWIDTH and MARGINHEIGHT attributes are placed inside the FRAME SRC> tags and allow you to set the margins of the frame. allow you to control the space between the borders of the frame and its content. MARGINWIDTH controls the space on the left and right sides and the MARGINHEIGHT controls the space on the top and bottom. Both values are set using a number of pixels with 1 For example; FRAME SRC="one. tags and allow you to set the margins of the frame. They They Both values 1 being the smallest valid value. being the smallest valid value. one.html" html" MARGINWIDTH=" MARGINWIDTH="4 4" " MARGINHEIGHT=" MARGINHEIGHT="6 6"> "> FRAMEBORDER and BORDER attributes in the first frameset of you page. For example; FRAMESET FRAMEBORDER= 0 0 BORDER= produce a two frame page without any border in both Firefox and Internet Explorer. For example; BORDER= 0 0 ROWS= ROWS= 100 100,* ,* > > would would
The next attribute to be considered is the NAME attribute. This attribute becomes very important when you are linking pages. It allows you to click on a link in one frame and open the page in another frame, the same frame or as a new page outside any of your frames. The use of the NAME attribute is best described using an example. Suppose you have a frame into which you intend to load a file named one.html and you wished to name that frame menu, the tag would take the form: <FRAMENAME = There is one more attribute to introduce in this lesson, the TARGET attribute. The TARGET attribute is placed inside the anchor tag and is used in conjunction with the NAME attribute to determine the frame the new page is to open in. If you do not specify a target name in the anchor tag, the page will load in the same frame as the anchor tag. Suppose you have a link to a file called update.html and in a particular frame that you want to open in a second frame named display the anchor tag would be: <A HREF= place the file update.html into the frame named NAME attribute. This attribute becomes very important when you are linking pages. It allows you to click on a link in one frame and open the page in another frame, the same frame or as a new page outside any of your frames. NAME attribute is best described using an example. Suppose you have a frame into which you intend to load a file named one.html and you wished to name that frame menu, the tag would take the form: <FRAMENAME = Menu Menu SRC= SRC= one.html one.html > > TARGET attribute. The TARGET attribute is placed inside the anchor tag and is used in conjunction with the NAME attribute to determine the frame the new page is to open in. If you do not specify a target name in the anchor tag, the page will load in the same frame as the anchor tag. update.html and in a particular frame that you want to open in a second frame named display the anchor tag would be: <A HREF= update.html place the file update.html into the frame named display update.html TARGET= TARGET= display display > > some text </a> this would display . . some text </a> this would
Since all the files requested from this frame are to be loaded into the display frame it is more efficient for the code for this page to include the tag <base target= "display"> rather than have to write the TARGET tag in every time you create a link. It idea to put the tag so that the instruction is defined when the page loads. <base target= "display"> rather than have to write the TARGET tag in every time you create a link. It s also a good idea to put the base target tag so that the instruction is defined when the page loads. s also a good in the <HEAD> base target in the <HEAD>
