A browser document window can only display one web page file, but it can display more than one page in the same browser window by using a framework. The page using a frame mainly contains two parts, one is the frame set and the other is the specific frame file.
Framework is mostly used for the layout of website backend or intranet systems.
1. Frameset (<frameset></frameset>): It is used to define this HTML file as a framework mode and set the file how to divide the window. To put it simply, a framework set is a file that stores the framework structure and an entry file that accesses the framework file. If a web page consists of two left and right frames, in addition to the two left and right web page files, there is also a total frame set file. In a page that uses a frame, the <body> body tag is replaced by the frame tag <frameset>. For each frame contained in the frame page, it is defined by the <frame> tag.rows attribute: horizontal split window. A horizontal split window is to cut the page in a horizontal direction, that is, to divide the page into multiple windows arranged up and down. Multiple values can be taken in rows, each value represents the horizontal width of a frame window, and its units can be pixels or percentages of the browser. However, it should be noted that generally when setting the values of several rows, there are several frameworks, that is, there are corresponding number of <frame> parameters.
<html> <head> <title>Effect of horizontal splitting window</title> </head> <frameset rows=30%,70%> <frame> <frame> </frameset> </html>
cols property: vertical split window. A vertical split window is to divide the page into multiple windows in a vertical direction, that is, to divide the page into multiple windows arranged left and right. Multiple values can be taken in cols, each value represents the horizontal width of a frame window, and its units can be pixels or percentages of the browser. The same as the horizontal segmentation window, generally when setting the values of several cols, there are several frameworks, that is, several <frame> parameters.
<html> <head> <title>The effect of vertical splitting window</title> </head> <frameset cols=20%,55%,25%> <frame> <frame> <frame> <frame> </frameset> </html>
frameborder property: Set border. By default, there is a border line around the frame window. The frameborder parameter can be used to adjust the display of the border line. The syntax is:
<frameset frameborder=whether it is displayed> or <frameframeborder=whether it is displayed>. The value of frameborder can only be 0 or 1. If the value is 0, the border line will be hidden; if the value is 1, the border line will be displayed. Setting in frameset will be valid for the entire framework, and setting in frame will only be valid for the current framework.
<html> <head> <title>Set the border display effect of the frame window</title> </head> <frameset rows=20%,55%,25%> <frameframeborder=1> <frameset cols=35%,65% frameborder=0> <frame > <frame> </frameset> <frameframeborder=0> </frameset> </html>
framespacing property: The border width of the frame. The frame's border width is 1 pixel by default, and it can be resized by the parameter framespacing.
Syntax: <frameset framespacing=border width>
Note: The border width is the width of the line between each border in the page, in pixels. This parameter can only be used for framework sets and is invalid for a single framework.
<html> <head> <title>Set the frame border width</title> </head> <frameset rows=30%,70% framespacing=10> <frame> <frameset cols=20%,55%,25% framespacing=30> <frame> <frame> <frame> <frame> </frameset> </frameset> </html>
bordercolor property: the border color of the frame. Use the parameter bordercolor to set the border color of the frame set.
Syntax: <frameset bordercolor=color code>
Note: This parameter is also valid only for the entire framework set and is not valid for a single framework.
<html> <head> <title>Set the frame border color</title> </head> <frameset rows=30%,70% framespacing=10 bordercolor =#CC99FF> <frame> <frameset cols=20%,55%,25% framespacing=30 bordercolor =#9900FF> <frame> <frame> <frame> </frameset> </frameset> </html>2. Frame (<frame>) and src attributes.
Each page in the framework structure is a separate text, and these files are set through the src parameter.
Syntax: <frame src=page source file address>
Note: The page file is the specific content of the frame page. It has no effect on a frame without setting the source file and just a blank page. The source file of the page can be a normal HTML file, or a picture or other file.
<html> <head> <title>Set page source file</title> </head> <frameset rows=30%,70%> <frame src=pic01.gif> <frame src=src01.html> </frameset> </html>3.<noframes></noframes> tags
The <noframes></noframes> tag is used to display page content when the browser does not support frames.
<html> <frameset cols=25%,50%,25%> <frame src=/example/html/frame_a.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> <noframes> <body> Your browser cannot handle the framework! </body> </noframes> </frameset> </html>2. Floating frame (<iframe>)
A floating frame is a relatively special frame. It nests a child window in a browser window. That is, the entire page is not a frame page, but it contains a frame window. Display the corresponding page content in the frame window. Floating frames are also called inline frames, and they are therefore named.
Syntax: <iframe src=page source file></iframe>
Note: Similar to the ordinary frame structure, a floating frame can also set many parameters, such as name, scrolling, frameborder, etc. However, compared with ordinary frames, the floating frame does not contain framespacing and bordercolor parameters.
src attribute: The most basic parameter in a floating framework is src. It is used to set the source file address of the floating framework page and is also a necessary parameter for the floating framework page. Because only when the content of the source file is set, the floating framework makes sense. Syntax: <iframe src=page source file>
width and height properties: In a normal framework structure, since the framework is the entire browser window, it does not need to set its size. However, in a floating frame, it is inserted into a normal HTML page, and the entire frame can be resized. Syntax: <iframe src= src=Floating frame page source file width=page width height=page height>, the width and height values of the page are in pixels.
<html> <body><iframe src=/i/eg_landscape.jpg width=550 height=310 ></iframe> <p>Some old browsers do not support iframes. </p> <p>If supported, the iframe is not visible. </p> </body> </html>3. An example of a framework layout
<html> <head> <title>Frame homepage</title> </head> <frameset rows=20%,*><!--Frameset set, container for control file --> <frame name=topFame src=3.html noresize/> <frameset cols=240px,*> <frame name=leftFrame src=1.html/> <frame name=rightFrame src=2.html marginwidth=20px scrolling=no/> </frameset> <noframes> <!--noframes tags can contain body tags --> <body> This page does not support frameset tags! </body> </noframes> </frameset> </html>4. How to get out of the framework of links
In the website backend layout, frameworks are used more frequently. In many cases, we need to jump out of the framework and reload the page. So how can links break out of the framework? In fact, you only need to specify the target attribute of the <a></a> tag to be _top. Here is a simple example.
<html> <body> <p>Is it locked in the frame? </p> <a href=/index.html target=_top>Please click here! </a> </body> </html>