The Frame Conversion page contains three tags: Frame, Iframe, and Frameset. Beginners can easily confuse the three. The following describes the differences between the three.

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.