HTML thorough analysis (10) frame marking

Source: Internet
Author: User
Tags add border color end range relative reserved version window

Frame marker

  <FRAMESET> <FRAME>
  <NOFRAMES>
  <IFRAME>

To understand this "HTML thorough analysis" of the mark classification, please see " Mark List ".
Please also understand the distinction between containment and empty tags, see "HTML concept ."

Framework Concept:

The frame is that the Web page is divided into several box windows, while obtaining multiple URLs. Just <FRAMESET> <FRAME>, all the frame tags need to be placed in a total HTML file that only records how the frame is segmented, does not display any data, so you do not have to put in the <BODY> tag, Browse this frame must read this file face is not the other box window file. <FRAMESET> is used to divide the frame window, each window frame is marked by a <FRAME> mark,<frame> must be used in <FRAMESET> scope. The following example:

<frameset cols= "50%,*" > <frame name= "Hello" src= "up2u.html" > <frame name= " Hi "src=" me2.html ">
</frameset>

In this example <FRAMESET> the screen into the left and right part of the up2u.html, the right side will show the me2.html the file,<frame> marked by the box window is always on the top down, from left to starboard order.

 
<FRAMESET> <FRAME>: ▲top

<FRAME>
Usage: Define a Frame
Start/End identification: mandatory/illegal
Properties: Name= "..." defines the name of the frame
Scr= "..." defines the source of the content displayed in the frame
Frameborder= "..." defines the bounds between frames (0 or 1)
Margwidth= "..." Sets the spacing between the bounds of the frame and the contents of it
Margheight= "..." Sets the bounds of the frame and the spacing between the contents
Noresize= "..." to keep the frame size unchanged
Scrolling= "..." Sets the way the scroll bar is represented (auto, yes, no)
Null: Not Allowed

<FRAMESET>...</FRAMESET>
Usage: Defines the layout of frames in a window
Start/End Identification: must/must
Attribute: rows= the number of "..." Set lines
Cols= "..." Set the number of columns
Internal event triggers when a document is loaded
Onunload= "..." internal event triggers when unloading a document
Null: Not Allowed
Note: Frameset can be nested

The above is just the simplest frame setting, and if you want to achieve a more appropriate effect, add or modify the following parameters.

  • cols= "90,*"
    Vertical cutting screen (such as about two frames), accept the integer value , the percentage , * represents occupy the remaining space. The number of values represents the number of windows divided into and separated by commas. For example, cols= "30,*,50%" can be cut into three windows, the first window is the width of pixels, for an absolute segmentation, the second window is when the first and third window after the allocation of the remaining space, the third window is the entire window screen 50% width for a relative split. You can adjust the numbers yourself .

  • rows= "120,*"
    This is the transverse cutting, the picture is separated from top to bottom, numerical setting. COLS and ROWS two parameters should not be placed in the same <FRAMESET> tag, because Netacape accidentally can not show this type of frame, as far as possible using multiple segmentation, as in the above examples.

  • frameborder= "0"
    Sets the frame's border with values of only 0 and 1, 0 for No borders, and 1 for borders.

  • border= "0"
    Sets the border thickness of the frame, in pixels.

  • bordercolor= "#008000"
    Sets the border color of the frame. Color values Please refer to the " Principle of tinting ".

  • framespacing= "5"
    Represents the distance between a frame and a frame that remains blank.

Tags:<FRAME>
Example: <frame name= "Top" src= "a.html" marginwidth= "5" marginheight= "5" scrolling= "Auto" frameborder= "0" noresize framespacing= "6" bordercolor= "#0000FF" >
Function: Set the parameter properties in each frame window.
Parameters:

  • src= "a.html"
    Set this window to display the file name of the page, each window must correspond to a page file.

  • Name= "Top"
    Set the name of the box window so that you can specify the frame as a link, but it must be named arbitrarily.

  • frameborder=0
    Sets the frame's border with values of only 0 and 1, 0 for No borders, and 1 for borders.

  • Framespacing= "6"
    Represents the distance between a frame and a reserved space between frames.

  • Bordercolor= "#008000"
    Sets the border color of the frame.

  • scrolling= "Auto"
    Set whether to display the scroll, YES to show the scroll, no to show the scroll in any case, AUTO depending on the situation.

  • Noresize
    Setting does not allow the user to change the size of the box, without setting this parameter, the user can arbitrarily pull the frame to change its size.

  • marginhight=5
    Represents the space reserved by the edge of a frame's height.

  • Marginwidth=5
    Represents the space reserved by the edge of the frame width.
Here are some examples:

Example HTML Code
<frameset rows= "80,*" >
<frame name= "Top" src= "a.html" >
<frame nam e= "Bottom" src= "b.html" >
</frameset>
example html Code
 
 
<frameset rows= "80,*,80" & Gt
<frame name= "Top" src= "a.html" >
<frame name= "Middle" src= "b.html" ">
<frame name=" Bottom "src=" c.html ">
</frameset>
example html Code
  &NBSP;
 
<frameset cols= "150,*" ;
<frameset rows= "80,*" >
<frame name= "Upper_left" src= "a.html" >
dd> <frame name= "Lower_left" src= "b.html" >
</frameset>
<frame Name= "Right" src= "c.html" >
</frameset>
example html Code
 
 
<frame name= "Top" src= "a.html" >
<frameset cols= "150,*" >
<frame name= "Lower_left" src= "b.html" >
<frame name= "lower_right" src= "c.html" >
</frameset>
</frameset> /dd>
Example HTML Code
<frameset cols= "150,*" >
<frame name= "left" src= "a.html" >
<frameset rows= "80,*" >
<frame name= "upper_right" src= "b.html" >
Frame name= "Lower_right" src= "c.html" >
</frameset>
</frameset>

 
<NOFRAMES>: ▲top

Usage: To replace the displayed content when the frame is not supported by this structure
Start/End Identification: must/must
Properties: None
Null: Not Allowed

When someone else is using a browser that is too old to support frame functionality, he sees a blank space. To avoid this situation, you can use <noframes> this token, when the user's browser does not see the frame, he will see < Noframes> the content between and </NOFRAMES> , rather than being blank. This can be used to alert viewers to new browsers, or to a Web page without frames or a link to a version without frames.

Apply method:
Add </NOFRAMES> tag to <frameset> tag range, here is an example:

<frameset rows= "80,*" >

<noframes>
<body>
is very modest, the browser you are using does not support Framework features, please use the new version of the browser.
</body>
</noframes>

<frame name= "Top" src= "a.html" >
<frame name= "Bottom" src= "b.html" >
</frameset>

If the browser supports the framework, it will not ignore the contents of <noframes>, but if the browser does not support the framework, because do not know all the frame tags, unknown tags are skipped, tag surrounded by the content will be interpreted, so in <noframes> The text in the range is displayed.

 
<IFRAME>: ▲top

Usage: Create an inline frame
Start/End Identification: must/must
Properties: Name= "..." defines the name of the frame
Scr= "..." defines the source of the content displayed in the frame
Frameborder= "..." defines the bounds between frames (0 or 1)
Margwidth= "..." Sets the spacing between the bounds of the frame and the contents of it
Margheight= "..." Sets the bounds of the frame and the spacing between the contents
Align= "..." is opposed. Control alignment (left, center, right, justify)
Noresize= "..." to keep the frame size unchanged
Scrolling= "..." Sets the way the scroll bar is represented (auto, yes, no)
Height= "..." the height of the frame
Width= the width of "..." frame
Null: Not Allowed

  This tag applies only to IE. its role is to insert a box window in the middle of a page to display another file. It is a containment mark, but the containment is displayed only when the browser does not support the IFRAME tag, such as <noframes>, which can be used as a reminder. It is usually better to match an IFRAME with a browser-aware Java Script, and if JavaScript recognizes that the browser is not Internet Explorer, it will switch to another version.

The <iframe> parameters are as follows:
Example: <iframe src= "iframe.html" name= "Test" align= "middle" width= " " Height= " marginwidth" = "1" marginheight= "1" frameborder= "1" scrolling= "Yes" >

    • src= "iframe.html"
      The file source that you want to display in this box window, in addition to the file name, must be accompanied by a relative or absolute path.
    • name= "Test"
      This is the name of the box window, which is required for the target parameter of the link tag.
    • Align= "Middle"
      The optional value is left, right, top, middle, bottom, not very useful
    • width= "$" height= "100"
      The width and length of the frame window are in pixels units.
    • marginwidth= "1" marginheight= "1"
      The space that is reserved for the inserted file and the box edge.
    • frameborder= "1"
      Use 1 to show the border, and 0 not to display it. (Can be yes or no)
    • scrolling= "Yes"
      Use Yes to allow scrolling (default), No is not allowed.

Example:

Original code <center> <iframe src= "/index.htm" name= "test" align= "Middle" width= "5" height= "Marginwidth=" marginheight= "5" frameborder= "1" >
Very modest, your browser does not support IFrame, not normal browsing my web page. </iframe>
</center>
Show results



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.