Chapter 9 multi-window interface framework
9-1 The meaning and basic structure of the Framework
The framework divides a browser window into several small windows, and each window can display different URL web pages. By using the framework, you can easily browse different page effects in a browser, and complete navigation conveniently.
All frame tags should be placed in an HTML document. The document body tag <body> Of the HTML page is replaced by the framework set tag <frameset>, then, the <frameset> subwindow tag <frame> is used to define the page attributes of each subwindow and subwindow.
Syntax format:
<HTML>
<Head>
</Head>
<Frameset>
<Frame src = "url 1">
<Frame src = "url 2">
......
<Frameset>
</Html>
Each URL value of the src attribute of the frame sub-framework specifies an HTML file (this file must be prepared in advance) address. The address path can be an absolute or relative path, this file will be loaded into the corresponding window.
The framework structure can be divided into three types based on the fragment attributes of the framework set tag <frameset>:
9-2 framework set <frameset> Control
<Frameset> attributes
| Genus | Description |
| Border | Set the Border width. The default value is 5 pixels. |
| Bordercolor | Set border color |
| Frameborder | Specify whether to display the border: "0" indicates that the border is not displayed, "1" indicates that the border is displayed |
| Cols | Separate left and right windows with "elephant prime number" and "%", and "*" indicates the remaining part |
| Rows | Use "elephant prime number" and "%" to separate upper and lower windows. "*" indicates the remaining part. |
| Framespacing = "5" | Indicates the gap between the framework and the framework. |
| Noresize | The setting framework cannot be adjusted. As long as the preceding settings are set, the subsequent settings will inherit |
If you want to split the browser into multiple Windows horizontally, you need to use the left-right split window attribute Cols of the framework set. split the values of Cols in several windows. The value is defined as width, which can be a number (in pixels) or a percentage or a remaining value. Values are separated by commas. The remaining values are represented by "*", and the remaining values represent the remaining parts after all window settings. When "*" appears only once, the size of the subwindow is automatically adjusted according to the size of the browser window. When "*" appears more than once, the remaining window space is split proportionally. The default value of Cols is a window.
For example: <frameset Cols = "40%, 2 *, *"> divide the window into 40%, 40%, 20%
<Frameset Cols = "100,200, *">
<Frameset Cols = "100, *, *"> evenly allocate windows other than 100 pixels
<Frameset Cols = "*, *, *"> divide the window into three equal parts.
2. up/down split window attribute: rows
The attribute settings of the upper and lower split windows are the same as those of the left and right windows. Refer to the preceding description.
9-3 sub-window <frame> label settings
<Frame> is a single tag. <frame> the tag must be placed in frameset of the framework set. <frameset> when several subwindows are set, the <frame> tags must be matched, in addition, a webpage file (src = "*. html ", which has the following common attributes:
<Frame> common attributes
| Genus | Description |
| SRC | Indicates the address of the loaded URL file. |
| Bordercolor | Set border color |
| Frameborder | Indicates whether a border is required. 1 indicates the border, and 0 indicates the border. (Yes or No is not recommended) |
| Border | Set Border Width |
| Name | Indicates the framework name, which is the parameter required by the target of the link tag. |
| Noresize | Indicates that the window size cannot be adjusted. If this option is omitted, the window size can be adjusted, |
| Scorlling | Indicates whether a scroll bar is required. Auto will appear automatically as needed. Yes, no |
| Marginwidth | Sets the distance between the content and the left and right sides of the window. The default value is 1. |
| Marginheight | Sets the margin between the content and the upper and lower margins of the window. The default value is 1. |
| Width | The default width and height of the frame window are width = "100" Height = "100" |
| Align | Optional values: Left, right, top, middle, and bottom |
The sub-window is arranged from left to right and from top to bottom.
1. Left and Right settings of the window:
Instance 1 sl9-1.html
.
<HTML>
<Head>
</Head>
<Frameset rows = "20%, 2 *, *" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl1.html">
<Frame src = "sl2.html">
<Frame src = "sl3.html">
</Frameset> <noframes> </noframes>
</Html>
Ii. Window upper and lower settings
Instance two sl9-2.html
<HTML>
<Head>
</Head>
<Frameset rows = "20%, *, 200" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl1.html">
<Frame src = "sl2.html">
<Frame src = "sl3.html" noresize = "noresize">
</Frameset> <noframes> </noframes>
</Html>
3. Window nesting settings
Instance 3 sl9-3.html
<HTML>
<Head>
</Head>
<Frameset Cols = "20%, *" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl1.html">
<Frameset rows = "300,500" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl2.html">
<Frame src = "sl3.html">
</Frameset>
</Frameset> <noframes> </noframes>
</Html>
Instance 4 sl9-4.html
<HTML>
<Head>
</Head>
<Frameset rows = "20%, *" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl1.html">
<Frameset Cols = "20%, *" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl2.html">
<Frame src = "sl3.html">
</Frameset>
</Frameset> <noframes> </noframes>
</Html>
Instance 5 sl9-5.html
<HTML>
<Head>
</Head>
<Frameset rows = "20%, *, 15%" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl1.html">
<Frameset Cols = "20%, *" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "# ff00ff">
<Frame src = "sl2.html">
<Frame src = "sl3.html">
</Frameset>
<Frame src = "sl4.html">
</Frameset> <noframes> </noframes>
</Html>
As you can see, there is a pair of <noframes> </noframes> labels in the above file, even if this pair is not found during the frame set webpage, the <noframes> tag is automatically generated when the file is parsed by many browsers. This tag is used by the browser when the browser is too old and does not support the framework function, what he sees will be blank. To avoid this problem, you can use the <noframes> flag, you can see the content between <noframes> your browser does not support frame webpages </noframes>, rather than blank spaces. This content can be used to remind you to switch to a new browser, or even a webpage without a framework, or automatically switch to a version without a framework.
9-4 window name and link
If you want to create a link in the window, you must name each subwindow so that it can be used for the link between Windows. The window name must have certain rules and the name must be a single English word, slide lines are allowed, but hyphens (-), periods (periods), and spaces are not allowed. Names must start with letters, numbers are not allowed, and keywords retained in web scripts are not allowed, A new property "targe" is also used in the window link. With this property, the linked content can be placed in the window to be placed.
The following instances are the names and links in the window.
The code snippet in file No. 1 is in the following format:
<A href = "sl1.html" target = "Aa2"> love is in the late autumn </a>
<A href = "sl2.html" target = "aa3"> horizontal center of text in an image </a>
<A href = "sl3.html" target = "Aa2"> distance between images and texts </a>
<A href = "sl4.html" target = "aa3"> image size setting </a>
<A href = "http://www.sina.com.cn" target = "aa3"> Sina website </a>
The code snippet of file 2 is in the following format:
<Frame src = "ml.html" name = "aa1">
<Frame src = "sl1.html" name = "aa3">
<Frame src = "sl2.html" name = "Aa2" noresize = "noresize">
File 1:
Ml.html
<HTML>
<Head>
<Title> untitled document </title>
</Head>
<Body>
<Center>
<H2> directory </H2>
<HR>
<P> <a href = "sl1.html" target = "Aa2"> love is in the late autumn </a> </P>
<P> <a href = "sl2.html" target = "aa3"> horizontal center of text in an image </a> </P>
<P> <a href = "sl3.html" target = "Aa2"> distance between images and texts </a> </P>
<P> <a href = "sl4.html" target = "aa3"> image size setting </a> </P>
<P> <a href = "http://www.sina.com.cn" target = "aa3"> Sina website </a> </P>
</Center>
</Body>
</Html>
File 2:
Sl94.html
<HTML>
<Head>
</Head>
<Frameset Cols = "20%, *, 200" framespacing = "1" frameborder = "yes" border = "1" bordercolor = "#99 CCFF">
<Frame src = "ml.html" name = "aa1">
<Frame src = "sl1.html" name = "aa3">
<Frame src = "sl2.html" name = "Aa2" noresize = "noresize">
</Frameset> <noframes> </noframes>
</Html>
9-5 floating window <IFRAME>
<IFRAME> This tag applies only to IE browsers. It can be embedded in a browser window to display another file. It is a blocking mark, but the surrounding words are displayed only when the browser does not support IFRAME marking, such as <noframes>. IFRAME usually works well with a Java Script that identifies the browser. If JavaScript recognizes that the browser is not Internet Explorer, it switches to another version.
<IFRAME> parameter setting format:
<IFRAME src = "iframe.html" name = "test" align = "center" width = "300" Height = "100" marginwidth = "1" marginheight = "1" frameborder =" 1 "scrolling =" yes ">
<IFRAME> attribute meaning
| Genus | Meaning |
| SRC | The path of the page file to be displayed in the floating window can be relative or absolute. |
| Name | The box name, which is required by the target parameter of the link tag, |
| Align | Optional values: Left, right, top, middle, and bottom. |
| Height | The height of the frame window, in pixels. |
| Width | The width of the frame window, in pixels. |
| Marginwidth | The space reserved by the inserted file and the border. |
| Marginheight | The space reserved by the inserted file and the border. |
| Frameborder | 1 indicates the display border, and 0 indicates the display. (Yes or no) |
| Scrolling | If yes is used, the volume is allowed (inner). If no is used, the volume is not allowed. |
Sl95.html
<HTML>
<Head>
<Title> floating frame </title>
</Head>
<Body bgcolor = "# e1ffe1">
<Center>
<IFRAME src = "ml1.html" name = "AA" width = "600" Height = "400" marginwidth = "30" marginheight = "20" align = "center" allowtransparency =" true ">
This is a floating window
</Iframe>
<P> <a href = "sl1.html" target = "AA"> love in late autumn </a> </P>
<P> <a href = "sl2.html" target = "AA"> horizontal center of text in an image </a> </P>
<P> <a href = "sl3.html" target = "AA"> distance between images and texts </a> </P>
<P> <a href = "sl4.html" target = "AA"> image size setting </a> </P>
<P> <a href = "http://www.sina.com.cn" target = "aa3"> Sina website </a> </P>
</Center>
</Body>
</Html>
Note: Internet Explorer 5.5 supports transparent content of floating frameworks. To define transparent content for a floating framework, the following conditions must be met.
The allowtransparency label attribute used with the IFRAME element must be set to true.
In the IFRAME content source document, the bgcolor label attribute of the background-color or body element must be set to transparent.
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
