HTML Frame Frame Basics Web pages created using
HTML - Frame
Frame Basics � 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:
Frame Basics
Tags Linked to Frames 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> 2 frame Web page </TITLE> � </HEAD> � <FRAMESET COLS=“#, #” or ROWS=“#, #”> � <FRAME SRC=”html source file”> � <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.
<FRAMESET COLS=“ 350, *”> … </FRAMESET> Which in this instance describes a page with two columns, the first being 350 pixels wide with the second column taking up 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=“ 35%, 10%, 55%”> … </FRAMESET> 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=”html source file”> tag. �
Exercise 1: Creating a Framed document <HTML> � <HEAD><TITLE> 2 frame Web page </TITLE> � </HEAD> � <FRAMESET ROWS=“ 30%, 70%”> � <FRAME SRC=”one. html”> � <FRAME SRC=”two. html”> � <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=“ 50%, 50%”> tag to <FRAMESET COLS=“ 50%, 50%”> �
Exercise 2: Nesting Frames Use the code below to produce the four sectioned Web page. � <HTML> � <HEAD><TITLE> 2 frame Web page </TITLE></HEAD> � <FRAMESET rows="50%, 50%" COLS="50%, 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>
Exercise 3: Nesting Frames 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="50%, 50%"> � <FRAME SRC="one. html"> � <FRAMESET ROWS="50%, 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>
Exercise 4: Further Nested Frames � � � � <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>
Exercise 5: Using the NAME and TARGET attribute � � � � � <DOCTYPE HTML PUBLIC”-//w 3 c/dtd html 4. 01 transitional//EN”http: //www. w 3 c. org/TR/html 4/loose. dtd) <HTML> <HEAD> <TITLE> Exercise 30 </TITLE></HEAD> <FRAMESET ROWS="55, *, 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> <H 2 ALIGN=”center”> Please note This site uses frames, but apparently your browser does not support this feature. </H 2> </BODY> </NOFRAMES> </FRAMESET> </HTML>
Further Nested 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> tags and allow you to set the margins of the frame. They 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. Both values are set using a number of pixels with 1 being the smallest valid value. For example; <FRAME SRC="one. html" MARGINWIDTH="4" MARGINHEIGHT="6"> � 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. For example; <FRAMESET FRAMEBORDER=“ 0” ROWS=“ 100, *”> would � produce a two frame page without any border in both Firefox and Internet Explorer. � �
The Name and Target attribute � � � 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 =“Menu” SRC=“one. html”> 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=“update. html” TARGET=“display”> some text </a> this would place the file update. html into the frame named ‘display’.
The Name and Target attribute � 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’s also a good idea to put the ‘base target’ in the <HEAD> tag so that the instruction is defined when the page loads.
- Slides: 13