Home > Developer > Web Develop
First, we need to understand the role of this framework set:
To implement the purpose of accessing multiple HTML pages in a page frameset usage:
Defining the framework Set
<frameset>
<frame src= "demo.html"/>
</frameset>
The properties of frame are:
SRC: URL of the link
ID: Name
Name: Names
Scrolling: whether to scroll (Yes/no/auto)
Noresize: "noresize" prevents resizing of the mouse frame
The properties of the frameset are:
Rows: "Number of rows"
Cols: "Number of columns"
Frameborder: "YES/NO/0/1"
Use of IFRAME:
<src= "iframe.html" frameborder= "0"></ iframe >
It accepts all the frame properties
Instance:
Below we design a head with IFrame introduced, on the left is a navigation list, the right side is the page that displays the content
The following are the key instance codes:
Frame Set Page first.html:
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8" /> <title>First</title> </Head><!--
[Email protected]
Date: 2014-06-24
Description: Note that the body tag is not present here (Noframes only)
-<Framesetrows= "10%,90%"> <Framesrc= "top.html"name= "Top"/> <Framesetcols= "15%,*"> <Framesrc= "home.html"name= "Home"/> <Framesrc= "index1.html"name= "Index1"/> </Frameset> <noframes> <Body>your browser does not support frame</Body> </noframes> </Frameset> </HTML>
top.html page already iframe page
//top Page<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8" /> <title>Top</title> </Head> <Body> <iframesrc= "iframe.html"Border= "0"frameborder= "0"></iframe> </Body></HTML>//iframe Page<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8" /> <title>Top</title> </Head> <Body>I was introduced by the IFRAME top</Body></HTML>
Left navigation page home.html
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8" /> <title>Home</title> </Head> <Body> <ul> <!--[email protected] Time: 2014-06-24 Description: The key point is the target property, which needs to be consistent with the Name property of the display page - <Li><ahref= "index1.html"Target= "Index1">Index1</a> </Li> <Li><ahref= "index2.html"Target= "Index1">Index2</a></Li> <Li><ahref= "index3.html"Target= "Index1">Index3</a></Li> </ul> </Body></HTML>
Navigation Link page:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet="" /> <title></title> </Head> <Body>index1</Body></HTML>
Final effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
