Document directory
- 10.4.3 Frame parameter settings
- 10.4.4 differences between Frame and Iframe
- 10.4.5 set Iframe to transparent
The Frame page contains three tags: Frame, Iframe, and Frameset. Beginners can easily confuse the three. The following describes the differences between the three.
10.4.1 difference between Frameset and Frame
First, we will explain the differences between Frameset and Frame.
<Frameset> </Frameset> is used to divide frames. Each Frame is marked by <Frame> </Frame>. <Frame> </Frame> must be used in <Frameset> </Frameset>. The Code is as follows:
<FRAMESET border = 1 frameSpacing = 1 borderColor = # 47478d rows = * cols = 180, *>
<FRAME src = "inc/admin_left.htm" name = left scrolling = no id = "left">
<FRAME src = "inc/admin_center.htm" name = main scrolling = "no">
</FRAMESET>
In the preceding example, <Frameset> </Frameset> begin.
Note: The Frame sequence marked by <Frame> </Frame> is from left to right or from top to bottom.
The differences between the two are as follows:
● <Frameset> indicates that the webpage document is composed of a framework and sets the layout of the Framework in the framework set.
● <Frame> set the attributes of each framework in the framework set.
10.4.2 Frameset parameter settings
<Frameset> you need to set some specific parameters that directly determine the layout of the entire page. The Code is as follows:
<Frameset border = 1 frameSpacing = 1 borderColor = # 47478d rows = * cols = 180, *>
The parameter settings and meanings of the preceding code are shown in Table 10.3.
Table 10.3 Frameset Parameters
Parameter |
Description |
Border |
Set the Border thickness of the frame, in pixels. |
Frameborder |
Set whether to display the frame border, 0 is not displayed, 1 is displayed |
FrameSpacing |
The distance between the framework and the framework. |
BorderColor |
Set the frame border color |
Row |
The document is divided into upper and lower frameworks. The value after the Row can be a numerical value or a percentage. * indicates that the remaining space is occupied. The number of numerical values indicates the number of horizontally divided frameworks. For example, Rows = "210, *, 10% "indicates that the page is divided into three upper and lower frame pages. The upper frame occupies 210px, the lower frame occupies 10% of the entire document, and the remaining space is occupied by the middle frame. * Is a relative concept, such as Row = *, indicating that there is no frame layout in the upper and lower structures of the page. |
Cols |
Set the same Row |
10.4.3 Frame parameter settings
The code for setting Frame parameters is as follows:
As shown in table 10.4.
Table 10.4 Frame parameters
Parameter |
Description |
Name |
Set the framework name in English. |
Src |
Set the page path and name displayed in the framework, which can be a relative path or an absolute path |
Marginwidth |
The distance between the frame and the left and right edges. |
Marginheight |
The distance between the frame and the upper and lower edges. |
Scrollling |
Set whether to display the scroll bar in the frame, yes to display, no to not display, auto to automatically display the scroll bar when the frame page content exceeds the frame size |
Frameborder |
Set whether to display the frame border, 0 is not displayed, 1 is displayed |
Noresize |
Set whether the user can change the size of the Framework. If this option is not set, the viewer can pull the framework and change the size of the framework. |
Framespacing |
The distance between the framework and the framework. |
Bordercolor |
Set the frame border color |
10.4.4 differences between Frame and Iframe
The functions of Frame and Iframe are basically the same, but Iframe is more flexible than Frame.
Iframe mark is also called floating frame mark, which can be used to embed an HTML document into an HTML file for display. The biggest difference between it and Frame tag is that the content embedded in the <Iframe> </Iframe> In the webpage is a whole with the whole page, the content contained in <Frame> </Frame> is an independent entity and can be displayed independently. In addition, the application Iframe can display the same content multiple times on the same page without repeating the content code.
The page shown in 10.21 is that the application Iframe creates pagination links on the pages and up and down the code is the same. You only need to embed the same file in the webpage, you do not need to write the code repeatedly. For the actual results of this case, see the case/frame/iframe/see_infomore_iframe.htm on the CD-ROM.
10.4.5 set Iframe to transparent
Iframe also has a bigger advantage: You can set the framework to transparent, so that the background inside the framework is the same as the homepage background. In the above example, careful readers will find this problem. The following describes in detail how to set Iframe transparency. The procedure is as follows:
(1) Open the case/frame/iframe/see_infomore_iframe1.htm in the book assignment disc.
(2) browse the page file in the browser and find that the background of the original cell is overwritten in the inserted Iframe area, which is not the desired effect.
(3rd) Open the page.htm page, switch to the Code view, and insert the code in the <body> tag as follows:
<Body style = "background-color = transparent">
Figure 10.21 page flip of applying Iframe
(4e_switch see_infomore_iframe1.htm to the Code view. The code for inserting an Iframe cell on the page is as follows:
<Td height = "30" colspan = "4">
<Iframe name = "main" width = "100%" height = "30" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm"> </iframe>
</Td>
(5) In the <Iframe> tag,
<Frame name = "left" src = "index_manager/admin_left.htm" marginwidth = "1" marginheight = "1" scrolling = "no" frameborder = "1" noresize framespacing = "2" bordercolor = "# cc0000">
Parameter settings and meanings of the previous Code
AllowTransparency = "true"
(6) The code for inserting an Iframe cell is as follows:
<Td height = "30" colspan = "4">
<Iframe name = "main" width = "100%" height = "30" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm" allowTransparency = "true"> </iframe> </td>
(7)save page.htmand see_infomore_iframe1.htm to view the effect in the browser.