The difference between Frame, Iframe and Frameset

Source: Internet
Author: User
Tags border color
the difference of 10.4 Frame, Iframe and Frameset

Frame page has frame, Iframe, Frameset 3 marks, beginners easy to confuse the three, the following respectively explain the difference between the three. the difference between 10.4.1 frameset and frame

First, explain the difference between frameset and frame.

<Frameset></Frameset> is used to divide the frame, each frame by <Frame></Frame> tag. <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> the page is divided into about two parts, the left frame of the page is admin_left.htm, the right frame of the page is admin_center.htm.

Note the frame order of the:<frame></frame> tag is left-to-right or from top to bottom.

The difference between the two is as follows:

<Frameset> for the frame tag, describe the Web page document as a frame, and set the layout of the frame in the document that makes up the frame set.

<Frame> sets the properties that make up each frame in the frameset. 10.4.2 Frameset Parameter setting

<Frameset> need 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 various parameter settings for the previous code and their meanings are shown in table 10.3.

Table 10.3 Frameset Parameters

Parameters

Description

Border

Sets the border thickness of the frame, in pixels

Frameborder

Sets whether the frame is displayed, 0 is not displayed, and 1 is displayed

Framespacing

Represents the distance between a frame and a frame

BorderColor

Set the border color of a frame

Row

The document is divided into the upper and lower frames, row values can be a value or a percentage, * represents the rest of the space, the number of numbers represents the level of the number of frames, such as rows= "210,*,10%", said that the page is divided into the next three frames page, the top frame occupies 210px, The bottom frame occupies 10% of the entire document, and the remaining space is occupied by the middle frame. * is a relative concept, such as row=*, that represents a frame layout with no upper and lower structure in the page

Cols

Set the same row

10.4.3 Frame parameter setting

For the setting of the frame parameter, the code is as follows:

<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 for the previous code and their meanings are shown in table 10.4.

Table 10.4 Frame Parameters

Parameters

Description

Name

Set the name of the frame to be in English

Src

Sets the page path and name displayed in the frame, which can be a relative path or an absolute path

Marginwidth

Indicates the distance between the frame and the left and right edges

Marginheight

Indicates the distance between the frame and the top and bottom edges

Scrollling

Sets whether scroll bars are displayed in frames, yes is displayed, no is not displayed, and auto means scroll bars are automatically displayed when content in frames page exceeds the frame in large hours

Frameborder

Sets whether frame borders are displayed, 0 is not displayed, 1 is displayed

Noresize

Set whether the user can change the size of the frame, do not set this allows the viewer to arbitrarily pull the frame, change the size of the frame

Framespacing

Represents the distance between a frame and a frame

BorderColor

Set the border color of a frame

the difference between 10.4.4 frame and IFrame

The functions of frame and IFRAME are basically the same, but the IFRAME has more flexibility than frame.

The IFRAME tag is also called a floating frame marker, which you can use to embed an HTML document in an HTML display. The biggest difference between it and the Frame tag is that the embedded <Iframe></Iframe> in the Web page is a whole page, and the <Frame></Frame> contains a single individual , it can be displayed independently. In addition, the application of an IFRAME can also display the same content multiple times on the same page without having to repeat the code for that piece of content.

As shown in Figure 10.21 of the page is the application of the IFRAME in the page to create a page of the link, up and down the code is the same, just embed the same file in the Web page, do not need to write a duplicate code, the actual effect of this case refer to the case of the CD-ROM/frame/iframe/see_ Infomore_iframe.htm. 10.4.5 set IFRAME transparent

An even bigger advantage of IFRAME is that you can set the frame to be transparent so that the background within the frame is the same as the home page background. In the previous example, the attentive reader will find the problem, and the following details how to set up iframe transparency. The specific steps are as follows:

(1) Open the case/frame/iframe/see_infomore_iframe1.htm in the CD.

(2) Browse the page file 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 Code view, insert the code in the <body> tag as follows:

<body style= "Background-color=transparent" >

Figure 10.21 Applying an IFRAME to create a page

(4) switch see_infomore_iframe1.htm to Code view, and view the code for the page that inserts the IFRAME as follows:

<TD height= "colspan=" 4 ">

<iframe name= "main" width= "100%" height= "" frameborder= "0" border=0 scrolling= "no" marginwidth= "0" marginheight= " 0 "src=" page.htm "></iframe>

</td>

(5) in the <Iframe> tag, insert the code as follows:

Allowtransparency= "true"

(6) The cell code that inserts the IFRAME at this point is as follows:

<TD height= "colspan=" 4 ">

<iframe name= "main" width= "100%" height= "" frameborder= "0" border=0 scrolling= "no" marginwidth= "0" marginheight= " 0 "src=" page.htm "allowtransparency=" true "></iframe></td>

(7) Save page.htm and see_infomore_iframe1.htm two pages, browsing the effect in the browser.

10.5 Summary of this chapter

The framework can be divided into different windows, through the framework to establish links between the site to achieve the unity of style. This chapter mainly introduces how to create the framework, as well as the framework of the properties and frame, Iframe, frameset differences between the application of noframe can also effectively optimize the page, so that the search engine can correctly index the content information on the frames page, Breaking through the frames of the Web page cannot be restricted by search engine indexing correctly.

The framework is dominant until the template is present. The application framework can establish fast links, accelerate the browsing speed of the Web site, improve the efficiency of the browser, because of this advantage, frames pages are widely used in navigation.

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.