HTML Multi-Window page (Frames)

Last Update:2017-02-28 Source: Internet

Author: User

Tags border color window

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic syntax

<------Basic------->

The text after the <noframes> tag will only appear in browsers that do not support FRAMES.

        <HTML>        <HEAD>        </HEAD>        <FRAMESET>             <frame src= "url" >             < Noframes> ... </NOFRAMES>        </FRAMESET>        </HTML>

<--################## Size ########################-->

Size settings for each window

<------COLS------->

To arrange multiple windows vertically:

<frameset cols=30%,20%,50%><frame src= "a.html" ><frame src= "b.html" ><frame src= "C.html" > </frameset> Example

<------ROWS------->

To arrange multiple windows horizontally:

<frameset rows=25%,25%,50%><frame src= "a.html" ><frame src= "b.html" ><frame src= "C.html" > </frameset> Example

<------COLS & ROWS------->

COLS & ROWS

To arrange multiple windows horizontally:

<frameset cols=20%,*><frame src= "a.html" > <frameset rows=40%,*> <frame src=     "B.html" >     <frame src= "c.html" >     </frameset></frameset> Example

A	B
C

<------No Resize------->

Do not allow each window to change size <frame noresize>

The

default setting is to allow each window to resize.

<--################## Frame Target ########################-->

Interoperate between windows (Frame Target)

<------NAME------->

Window identification (Frame Name)
<frame name=#>
<a Href=url target=#>

<frameset cols=50%,50%><frame src= "a.html" ><frame src= "b.html" name= "HELLO" ></frameset> Sample

<------Special Target------->

Special 4-class operations (very useful!)

<a href=url target=_blank> New Window
<a href=url target=_self> This window
<a href=url target=_parent> Parent window
<a href=url target=_top> Entire browser window

Sample

<--################## Frame appearance ########################-->

Appearance of Frame (appearance)

<------BORDER------->

Settings for each window border <frame frameborder=#> #=yes, NO/1, 0

<frameset rows=30%,*><frame src= "acol.html" Frameborder=1><frameset cols=30%,*>     src = "bcol.html" frameborder=0>     <frame src= "ccol.html" frameborder=0></frameset></frameset> Sample

(A has a border, B, C not)

A
B	C

<------Frame Spacing------->

Settings for blank areas between windows
Size of <frameset framespacing=#> #= blank area

<frameset rows=30%,* framespacing=100><frame src= "acol.html" ><frameset cols=30%,*>     src= "bcol.html" >     <frame src= "ccol.html" ></frameset></frameset> example

A
B	C

<------Border Color------->

Border color <frameset bordercolor=#>

#=rrggbb 16 RGB Digital, or the following predefined color names:
Black, Olive, Teal, Red, Blue, maroon, navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, yellow , Aqua .

<frameset rows=30%,* bordercolor=red><frame src= "acol.html" ><frameset cols=30%,*>     src= "bcol.html" >     <frame src= "ccol.html" ></frameset></frameset> example

A
B	C

<------MARGIN------->

Page Blank (Margin) <frame marginwidth=# marginheight=#>

<frameset cols=50%,50%><frame src= "a.html" ><frame src= "a.html" marginwidth=50 marginheight     =50></frameset> Sample

Aaaa

Aa
Aa

<------SCROLLBAR------->

Roll bar set <frame scrolling=#> #=yes, no, auto

the default value for #= is auto.

<--################## Floating Frame ########################-->

Floating window (floating Frame)

<------floating Frame------->

<center><iframe src= "a.html" name= "Window" > here is   A floating frame</iframe><br><br ><a href= "a.html" target= "window" >load a</a><br><a href= "b.html" target= "window" >Load B </a><br><a href= "ccol.html" target= "window" >load c</a><br></center> Example

Display a.html

Load A
Load B
Load C

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More