AppendixA HTML A-1 <frameset> <frame> <noframes> A-2 A-3
A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar)
HTML 框架元素 l A-3 1. <frameset> 2. 3. <frame> 4. <noframes> <frameset> <frameset> cols="..." ( ) 10% 100 <frameset cols="10%,100,*">... rows="..." ( ) border="n" (n IE) bordercolor="color #rrggbb" ( IE) 2-2-1 2-2-2 注意 HTML 5 <frame> <frameset> <noframes> CSS <iframe> 6
A-4 l 跨裝置網頁設計 <frame> <frame> <frameset> frameborder="{1,0}" (1 0 ) border="n" (n IE) bordercolor="color #rrggbb" ( IE) marginheight="n" (n ) marginwidth="n" (n ) name="..." ( ) noresize scrolling="{yes,no,auto}" src="uri" 2/3 top 1.html 1/3 bottom 2.html <frameset rows="2*,*"> <frame name="top" src="1.html"> <frame name="bottom" src="2.html"> 2-2-1 2-2-2 <noframes> <noframes> 2-2-1 2-2-2
HTML 框架元素 l A-5 A-1-1 <frameset> cols rows <title> </title> a <frameset rows="100,200"> b <frame name="top" src="1-1.html"> c <frame name="bottom" src="1-2.html"> d a 100 200 b c d <frameset> <body> HTML <\Appendix\ 1.html>
A-6 l 跨裝置網頁設計 <title> </title> <body> 100 <\Appendix\1-1.html> <title> </title> <body> 200 <\Appendix\1-2.html>
HTML 框架元素 l A-7 <title> </title> a <frameset cols="100,300"> b <frame name="left" src="1-3.html"> c <frame name="right" src="1-4.html"> a 100 300 b c <\Appendix\ 1.html> <title> </title> <body> 100 <\Appendix\1-3.html> <title> </title> <body> 300 <\Appendix\1-4.html>
A-8 l 跨裝置網頁設計 <title> </title> a <frameset rows="10%,30%,60%"> b <frame name="top" src="2-1.html"> c <frame name="middle" src="2-2.html"> d <frame name="bottom" src="2-3.html"> a 10% 30% 60% b c d <\Appendix\ 2.html>
HTML 框架元素 l A-9 <title> </title> <body> 10% <\Appendix\2-1.html> <title> </title> <body> 30% <\Appendix\2-2.html> <title> </title> <body> 60% <\Appendix\2-3.html>
A-10 l 跨裝置網頁設計 (*) (*) <frameset> rows 2 3 1/6 2/6 3/6 <title> </title> a <frameset rows="*,2*,3*"> b <frame name="top" src="3-1.html"> c <frame name="middle" src="3-2.html"> d <frame name="bottom" src="3-3.html"> a 1/6 2/6 3/6 b c d <\Appendix\ 3.html>
HTML 框架元素 l A-11 <title> </title> <body> 1/6 <\Appendix\3-1.html> <title> </title> <body> 2/6 <\Appendix\3-2.html> <title> </title> <body> 3/6 <\Appendix\3-3.html>
A-12 l 跨裝置網頁設計 A-1-2 <frameset> cols rows <frame> name <frame> src <frame name="bottom" src="3-3.html"> <\Appendix\.html> 25% a1.html 75% a2.html (movie0.jpg movie1.jpg ~ movie6.jpg) a2.html movie1.html ~ movie6.html ( <a> target )
HTML 框架元素 l A-13 <title> </title> <frameset cols="25%,75%"> a <frame name="left" src="a1.html"> b <frame name="right" src="a2.html"> <\Appendix\.html> a b <body background="bg1.jpg"> <a href="a2.html" target="right"><img src="movie0.jpg" border="0"></a> <a href="movie1.html" target="right"><img src="movie1.jpg" border="0"></a> <a href="movie2.html" target="right"><img src="movie2.jpg" border="0"></a> <a href="movie3.html" target="right"><img src="movie3.jpg" border="0"></a> <a href="movie4.html" target="right"><img src="movie4.jpg" border="0"></a> <a href="movie5.html" target="right"><img src="movie5.jpg" border="0"></a> <a href="movie6.html" target="right"><img src="movie6.jpg" border="0"></a> c d <\Appendix\a1.html> c d <body bgcolor="#ffffac"> <img src="movie8.jpg" align="center"> <p> </p> <\Appendix\a2.html>
A-14 l 跨裝置網頁設計 A-1-3 <frame> <frame> scrolling "no" scrolling "yes" scrolling "auto" scrolling= "auto" scrolling="no"
HTML 框架元素 l A-15 <frame> noresize <frame name="left" src="a1.html" noresize> <frame> frameborder="0" <frame name="left" src="a1.html" frameborder="0"> <frame> marginheight="n" <frame> marginwidth="n" <frame> marginwidth 30 30 marginwidth="30" 30
A-16 l 跨裝置網頁設計 A-1-4 <noframes> <noframes> <title> </title> <frameset cols="25%,75%"> <frame name="left" src="a1.html"> <frame name="right" src="a2.html"> <noframes> a <body> b <p> </p> </noframes> <\Appendix\noframes.html> a <body> b 注意 <frameset> <body> HTML <body> <noframes>
HTML 框架元素 l A-17 A-2 1/2 60% 1/2 20% 20% 1/5 2/5 2/5 1. <frameset> cols <title> </title> <frameset cols="*,2*,2*"> 1/5 2/5 2/5
A-18 l 跨裝置網頁設計 2. 1. <frameset> <frameset> rows 1/2 <title> </title> <frameset cols="*,2*,2*"> <frameset rows="*,*"> 3. 1. <frameset> <frameset> rows 60% 20% 20% 1/2 <title> </title> <frameset cols="*,2*,2*"> <frameset rows="*,*"> <frameset rows="60%,20%,20%"> 60% 20% 20%
HTML 框架元素 l A-19 4. <frame> ( l1.html l2.html m.html r1.html r2.html r3.html \Appendix ) <title> </title> <frameset cols="*,2*,2*"> <frameset rows="*,*"> 1 <frame name="left_top" src="l1.html"> 2 <frame name="left_bottom" src="l2.html"> 3 <frame name="middle" src="m.html"> <frameset rows="60%,20%,20%"> 4 <frame name="right_top" src="r1.html"> 5 <frame name="right_middle" src="r2.html"> 6 <frame name="right_bottom" src="r3.html"> <\Appendix\.html> 1 2 3 4 5 6
A-20 l 跨裝置網頁設計 A-3 A-1 <\Appendix\.html> <a> target <\Ch04\zoo.html> <.html> 65% left <.html> 35% right <.html> africa.html bird.html night.html 1.
HTML 框架元素 l A-21 2. 4 bird.html HTML <.html> <.html> <.html> africa.html bird.html night.html <title> </title> <frameset cols="65%,35%"> <frame name="left" src=".html"> <frame name="right" src=".html"> <\Appendix\.html>
A-22 l 跨裝置網頁設計 <title> </title> <body> <img src="zoo.jpg" border="0" alt=" " usemap="#taipei_zoo"> <map name="taipei_zoo"> <area shape="circle" coords="173,152,34" href="africa.html" alt=" " target="right"> <area shape="rect" coords="42,159,110,227" href="bird.html" alt=" " target="right"> <area shape="poly" coords="338,106,396,125,400,200,300,185" href="night.html" alt=" " target="right"> <area shape=default noref> </map> <\Appendix\.html> <title> </title> <body> <img src="zoo2.jpg"> <p> </p> <\Appendix\.html>
HTML 框架元素 l A-23 A-3-1 <base> target <\Appendix\.html> (target frame) "right" HTML <base target="right"> target <base target="right"> <\Appendix\.html> <title> </title> <base target="right"> <body> <img src="zoo.jpg" border="0" alt=" " usemap="#taipei_zoo"> <map name="taipei_zoo"> <area shape="circle" coords="173,152,34" href="africa.html" alt=" "> <area shape="rect" coords="42,159,110,227" href="bird.html" alt=" "> <area shape="poly" coords="338,106,396,125,400,200,300,185" href="night.html" alt=" "> <area shape=default noref> </map> <a> <area> <base> target <a> target <area> target <base> target
A-24 l 跨裝置網頁設計 A-3-2 target <frame> target target="myframe" target="_self" target="_blank" target="_parent" target="_top" myframe target="_blank" target="_top" target target <base> target <base> target target <base> target
( ) 1. A. <iframe> B. <frame> C. <noframes> D. <frameset> ( ) 2. A. <iframe> B. <frameset> C. <noframes> D. <frame> ( ) 3. A. <frame> cols B. <frameset> cols C. <frame> rows D. <frameset> rows ( ) 4. A. <frameset> noresize B. <frame> noresize C. <frameset> noscroll D. <frame> noscroll ( ) 5. 3:2:1 A. <frameset rows="3*,2*,*"> B. <frameset rows="*,2*,3*"> C. <frameset cols="3*,2*,*"> D. <frameset cols="*,2*,3*"> ( ) 6. <frameset> <body> A. B. ( ) 7. <body> <noframes> A. B. ( ) 8. A. <frame> B. <a> C. <area> D. <base>
( ) 9. A. target= "_top" B. <base> target C. target="_blank" D. target ( )10. HTML A. <frame> B. <frameset> C. <iframe> D. <noframes> 1. <\Appendix\.html> <.html> flower1.jpg flower2.jpg <.html> <.html> ( \Appendix flower.txt )
a b c a left_top 1/2 200 <.html> flowera.gif b right_top 1/2 200 <.html> c bottom <.html> flowerb.jpg <frameset rows="200,*"> <frameset cols="50%,50%"> <frame name="left_top" src=".html"> <frame name="right_top" src=".html"> <frame name="bottom" src=".html"> <\Appendix\.html>
2. <\Appendix\.html> a b c a 180 link.html b 80 title.html c content.html 3. <\Appendix\.html> 1/3 1/4 1/4 2/4 1/3 1/3 30% 70%