Frameset label design page, frameset label page
Important:The <frameset> </frameset> label cannot be placed in the <body> </body> label. And HTML5 does not support the use of frameset labels !!!
1. The frameset element defines a framework set, which is used to organize multiple windows (frames ). Each Framework contains independent documents. With the use of the <frame> </frame> framework, we can split the page and refresh it locally. Reasonable Use will bring excellent user experience.
2. Several attributes of frameset:
①,Cols:Defines the number and size of columns in the framework set. Vertical Cut screen (such as divided between the left and right pictures), accept the integer, percentage, * indicates that the remaining space is occupied. The number of values indicates the number of windows to be divided by commas. For example, COLS = "30, *, 50%" can be divided into three windows. The first window is the width of 30 pixels, which is an absolute split, the second window is the space left after the first and third windows are allocated, and the third window occupies 50% of the width of the entire window. You can adjust the number by yourself.
②,Rows:Defines the number and size of rows in the framework set. This is horizontal cutting. The picture is separated up and down, and the value is set to the same as above. The COLS and ROWS parameters should not be placed in the same tag as far as possible, because Netacape occasionally cannot display this type of framework, and multiple splits should be used as far as possible.
③,Frameborder:Set the frame border. The value is only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed.
④,Border:Set the Border thickness of the frame.
⑤,Bordercolor:Set the border color of the frame.
⑥,Framespacing:The gap between the framework and the framework.
3. attributes of the frame tag:
①,Name:Set the framework name. This is a required attribute.
②,Src:Set the webpage name or path to be displayed for this framework. This is a required attribute.
③,Scrolling:Set whether to display the scroll bar. Set the value to auto, yes, no.
④,Bordercolor:Set the border color of the frame.
⑤,Frameborder:Set whether to display the frame border. The set values are only 0 and 1. 0 indicates no border, and 1 indicates that the border is to be displayed.
⑥,Noresize:Set whether the frame size can be adjusted manually.
7,Marginwidth:Set the width between the frame boundary and the content.
Average,Marginhight:Set the height between the frame boundary and the content.
Average,Width:Set the frame width.
Average,Height:Set the frame height.
4. frameset instances:
If you want to achieve the following results
The page is divided into three parts: Top, left and right. Click the hyperlink on the left, and the framework page on the right changes accordingly.
Overall page: main.html
1 <frameset rows="11%,*" border="1px" framespacing="0">2 <frame src="top.html" name="top" frameborder="0" />3 <frameset cols="12%,*" framespacing="0" framespacing="0">4 <frame src="left.html" name="left" scrolling="auto"/>5 <frame src="right.html" name="right" scrolling="auto"/>6 </frameset>7 </frameset>
Top.html,right.htmlwhen an empty page, left.html is as follows:
1 <! -- 2 <div> 3 <ul> 4 <li> <a href = "taskCreate.html" target = "right" id = "taskCreat"> task creation </ a> </li> 5 <li> <a href = "taskManage.html" target = "right"> task management </a> </li> 6 <li> <a href = "#" target = "right"> dataset management </a> </li> 7 <li> <a href = "#" target = "right"> model management </a> </li> 8 </ul> 9 </div>
The hierarchical display of the page is mainly used for cols and rows in the frameset label, and is nested with the frame label. To reach the menu bar on the left, and the frame on the right changes accordingly, you must understand the attributes.
Target: specifies where to open the link document. The browser will load and display the documents in the framework or window named by the href attribute of this tag with the same name as the target. In main.html,<Frame name = "target value">,The value of name here is equal to the value of <a target = "name"> In left.html.
5. How to obtain the elements in other frames in the frameset of the parent page from the Child page?
That is, how to obtain the attribute values of <a> </a> tags in left.html in right.html?
Metadata (parent.parent.mainframe.doc ument). contents (). find ("body" ).html (); // manFrame refers to the id of the frame you want to view
For example, in the left.html page above, the ID created by the task is taskCreat, so we can obtain and change its class attribute like this.
Parameters (parent.parent.left.doc ument). contents (). find ("# taskCreat"). attr ("class", "list-group-item ");
6. Advantages and Disadvantages of frameset
We know that the current HTML5 standard does not support frameset. Although you do not need to reload the entire page when using it to reload the page, you only need to reload a frame page in the page (reducing data transmission, to speed up the download of web pages ). However, it also has many disadvantages. For example, the browser's back-up button is useless; it will generate many pages and is not easy to manage; the Code is complicated and not easy to search by search engines; small mobile devices are not completely displayed; multi-framework pages will add Server http requests and so on. Therefore, we need to be careful when using frameset, and the current DIV + CSS can be used to implement this function.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
