10.4.1 The difference between Frameset and Frame
First, let’s explain the difference between Frameset and Frame.
<Frameset></Frameset> is used to divide frames, each frame is marked by <Frame></Frame>. <Frame></Frame> must be used within <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 above example, <Frameset></Frameset> divides the page into two parts, the page in the left frame is admin_left.htm, and the page in the right frame is admin_center.htm.
Note: The frame order of <Frame></Frame> tags are left to right or top to bottom.
The difference between the two is as follows:
● <Frameset> is a frame tag, indicating that the web page document is composed of a frame, and sets the layout of the frames that make up the frame set in the document.
● <Frame> is used to set the properties of each frame that constitutes the frame.
10.4.2 Frameset parameter settings
<Frameset> needs to set some specific parameters, which 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 their meanings of the previous code are shown in Table 10.3.
Table 10.3 Frameset parameters
parameter | illustrate |
Border | Set the frame thickness in pixels |
frameborder | Set whether to display the frame border, 0 is not displayed, 1 is displayed |
FrameSpacing | Indicates the distance between the frame |
BorderColor | Set the frame border color |
Row | Divide the document into upper and lower frames. The value after Row can be a numerical value or percentage. * means that the remaining space is occupied. The number of numerical values represents the number of frames divided horizontally. For example, Rows="210,*,10%", which means that the page is divided into three upper, middle 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=*, which means that there is no upper and lower structure in the page. |
Cols | Set the same as Row |
Regarding the setting of Frame parameters, the code is as follows:
As shown in Table 10.4.
Table 10.4 Frame parameters
parameter | illustrate |
Name | The name of the setting framework must be in English |
Src | Set the page path and name displayed in the frame, which can be relative or absolute paths. |
Marginwidth | Indicates the distance from the left and right edges of the frame |
Marginheight | Indicates the distance from the upper and lower edges of the frame |
Scrollling | Set whether to display scroll bars in the frame, yes is displayed, no is not displayed, auto means that the scroll bars are automatically displayed when the content in the frame page exceeds the size of the frame. |
Frameborder | Set whether to display the frame's border, 0 is not displayed, and 1 is displayed |
Noresize | Set whether the user can change the size of this frame. Without setting this item, the viewer can pull the frame at will and change the size of the frame. |
Framespacing | Indicates the distance between the frame |
Bordercolor | Set the frame border color |
Frame and Iframe can achieve basically the same functions, but Iframe has more flexibility than Frame.
Iframe tags are also called floating frame tags. They can be used to embed an HTML document in an HTML display. The biggest difference between it and the Frame tag is that the content contained in <Iframe></Iframe> embedded in the web page is a whole with the entire page, while the content contained in <Frame></Frame> is an independent individual and can be displayed independently. In addition, the application Iframe can also display the same content multiple times on the same page without having to repeat the code of this content.
The page shown in Figure 10.21 is to use Iframe to create paging links on the top and bottom of the page. The codes on the top and bottom are the same. You only need to embed the same file in the web page, and there is no need to write the code repeatedly. For the actual effect of this case, please refer to the case /frame/iframe/see_infomore_iframe.htm in the book-accessor CD-ROM.
Iframe has another greater advantage, which is that it can set the frame to be transparent so that the background within the frame is the same as the background of the main page. In the above example operation, careful readers will find this problem. Let’s explain in detail how to set Iframe transparency. The specific operation steps are as follows:
(1) Open the case/frame/iframe/see_infomore_iframe1.htm in the book-allocation CD.
(2) Browse the file on this page in the browser and find that the background of the original cell is overwritten in the area where the Iframe is inserted, which is not the desired effect.
(3) Open the page.htm page, switch to the code view, and insert the code into the <body> tag as follows:
<body style="background-color=transparent">
Figure 10.21 Using Iframe to create page turn
(4) Switch see_infomore_iframe1.htm to the code view and view the code for inserting the Iframe cell on the page as follows:
<td colspan="4" >
<iframe name="main" 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">
The parameter settings and their meanings of the previous code
allowTransparency="true"
(6) The cell code for inserting the Iframe at this time is as follows:
<td colspan="4" >
<iframe name="main" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>
(7) Save the two pages pages.htm and see_infomore_iframe1.htm to browse the effect in the browser.