Tips | page frame window is a complex page technology, the Application frame window allows users to browse the contents of different Web sites in the same browser window, you can issue a query command in a small window and receive query results in another small window. The idea of implementing frame window is to divide the browser window into several small windows by function. Each window should have its own HTML page, grouped together in a certain way to achieve special effects.
Split windows in HTML using <frameset> (split window tags),<frameset> in multiple window pages is equivalent to <body> status in the ordinary Single Window page, in the page with <frameset >......</frameset> logo page Main part of the starting and ending position. And the,<frameset> tag determines how the window is divided, and the position and size of each window. Its basic grammatical structure is as follows:
<frameset Cols=n Rows=n Frameborder=yes|no Border=n Bordercolor= #n Framespacing=n> |
Cols and rows: The two parameters that determine how a page is split. Split the left and right windows with cols, the left and right widths of each frame are expressed as a percentage of the width of the window. For example: cols= "30%,40%,*" means that the horizontal direction is divided into three windows, respectively, the percentages of the total width of 30%,40% and 30%. where "*" means the remainder, that is, "*" the corresponding small window width is the remaining width. Divide the upper and lower windows with rows, using the same percentage setting method.
Frameborder: Specifies whether the window (ye) is to be bordered or not (no), and if the box is added, specify the width of the border with the border parameter, bordercolor the color of the specified border.
Framespacing: Used to set the interval size between windows, the default value is 0.
When the window is split with the <frameset> tag, the properties of each window are defined with the HTML <frame> tag, so the <frameset> tag must contain the <frame> tag. Used to define the properties of each window. The syntax is as follows:
<frame ALIGN=LEFT|CENTER|RIGHT|TOP|BOTTOMV Name=framename Src=url Noresize Scrolling=yes|on|auto Frameborder=yes|no Bordercolor=#n Marginheight=n Marginwidth=n> |
Align: Sets the window position by left, right, center (center), Upper (top), or bottom (bottom).
Name: is used to specify the names of the windows, and SRC is used to specify the HTML page address for the splitter window.
Noresize: It is for the user, when the <frame> tag contains this parameter, the user can not adjust the size of the window with the mouse.
Scrolling: Set whether the window should scroll bar. Scrolling=no when not scroll bar, scrolling=yes when the scroll bar, Scrolling=auoto when the actual situation automatically set the scroll bar.
Frameborder and BorderColor: is the set window has no border and border color. However, the object is limited to a window with the <frame> tag.
Marginheight and Marginwidth: Sets the width of the top and bottom edges of the window and the left and right edges respectively.
With the above two tags, you can implement a multiple-window page, as illustrated below.
1, left small right big two window
This kind of page usually puts a website navigation page in the left window, puts the website page content to the right. Production method:
First, with <frameset> tag and by setting its cols parameters, split horizontally into two windows, the left window takes up 20%, the right window takes the rest, and the <frame> tags define the properties of the two windows respectively. The completed frames page source code is as follows:
<title> frame Window Example </title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <frameset cols= "20%,*" > <frame name= "Leftframe" noresize src= "ahtml.htm" > <frame name= "MainFrame" noresize src= "bhtml.htm" > </frameset> <noframes> <body> <p> I'm sorry! This is a frames page, but because your browser does not support, so can not browse! </p> <p>sorry! This page uses frames,but your browser doesn support ' t them. </body></noframes> |
From the code above, the Design frame window page is not as complex as you might think, but here are some things to be aware of:
1 when using the <frame> tag to define the window properties, pay attention to the order in the <frameset> tag, do not mess up;
2 The name of the window can be set arbitrarily, but it is better to have its location named better;
3) The scrolling (scroll bar) of the window is generally taken its default value "Auto" is better;
4 Although in the end often do not point to the border of the window, but in the design phase, or set to have a border better, so in the editor at a Glance;
5 The above page code in the following sentence generally plus as good, because some browser version does not support the frame page, if not add that word, the user's browser does not support the frame, see is a blank, I do not know how it is, there is a hint of that sentence to understand.
2. One left and one right page
First look at the source code for this frame-by-page:
<frameset rows= "20%,*" > <frame name= "Topframe" scrolling= "NO" noresize src= "toppage.htm" > <frameset cols= "18%,*" > <frame name= "Leftframe" noresize src= "leftpage.htm" > <frame name= "MainFrame" src= "mainpage.htm" > </frameset> </frameset> |
As you can see from the code above, the way to build a complex frame page is from simple to complicated, as in this case, first use <frameset> to define its rows parameter, divide the window into two windows, and then use <frame> The tag defines the upper window, because the lower window still needs to be divided, so you don't have to <frame> define its properties, but instead use the <frameset> tag to set its cols parameter, and then divide it into about two windows, and then start using <frame> Tags define the properties of the left and right two windows.
As long as remember: first rough, after subdivision, cols transverse, rows longitudinal points, no need to divide the window with <frame> defined attributes, these basic principles, make the frame window page will be easy.