หน่วยที่ 9
TRANSCRIPT
หน่�วยที่�� 9 แบ่�งหน่ าจอโดยใช้ เฟรม
ลองสร างเฟรม<frameset>,<frame> วิ�ธี�การสรางเฟรมนั้��นั้ต้องเร��มจากการแบ่�งโครงสรางส�วินั้ต้�างในั้หนั้าเวิ�บ่เพจก�อนั้ด้วิย
ค!าส��งจากนั้��นั้ก!าหนั้ด้ชื่#�อเวิ�บ่เพจที่��ต้องใหแสด้งเข้าไปในั้เฟรมข้องเรา
แบ่�งโครงสร างเว�บ่เพจด วยแที่�ก <frameset> ใชื่ก!าหนั้ด้ลั�กษณะข้องเฟรมบ่นั้หนั้าจอวิ�าจะแบ่�งแต้�ลัะส�วินั้เป,นั้แนั้วิต้��ง หร#อแนั้วินั้อนั้
การสร างเฟรมซ้ อน่ก น่ เราสามารถเฟรมซ้อนั้ก�นั้ได้ ซ้/�งจะได้การแบ่�งร0ปแบ่บ่หลัายร0ปแบ่บ่ก!าหน่ดไฟล#HTMLที่��ใช้ แต่�ละเฟรม ในั้แต้�ลัะชื่�องเฟรมค#อ 1 เวิ�บ่เพจ หมายควิามวิ�าเราต้องแบ่�งบ่ราวิเซ้อร1เป,นั้ 2 เฟรม
เราจะสามารถด้0เวิ�บ่เพจ 2 หนั้าพรอมก�นั้จากข้างต้นั้ที่��เราสรางโครงข้องหนั้าเวิ�บ่เพจไวิเร�ยบ่รอยแลัวิ ในั้ที่��นั้��เราจะไม�ระบ่2ไฟลั1เวิ�บ่ลังไป
โด้ยแต้�ลัะส�วินั้แสด้งเวิ�บ่เพจชื่#�อ web1.html, web2.html แลัะ web3.html ต้ามลั!าด้�บ่
เม&�อผู้( ใช้ เปิ*ดด(เฟรมไม�ได <noframes> ในั้กรณ�ม�ผู้0ใชื่บ่างคนั้ที่��ใชื่บ่ราวิเซ้อร1ร2 �นั้เก�าที่��ไม�สามารถแสด้งเฟรมได้ เราสามารถ
ก!าหนั้ด้ข้อควิามแสด้งใหผู้0ใชื่ที่ราบ่ได้ โด้ยการใชื่แที่�ก noframes ด้�งต้�วิอย�าง เม#�อผู้0ใชื่ใชื่บ่ราวิเซ้อร1ที่��ไม�สนั้�บ่สนั้2นั้การแสด้งเฟรม ข้อควิาม บ่ราวิเซ้อร1ที่��ที่�านั้ใชื่งานั้อย0�
ไม�สามารถแสด้งเฟรมได้จะปรากฏข้/�นั้โด้ยปกต้�ส�วินั้ข้อง noframes ก�ค#อส�วินั้หนั้าเวิ�บ่เพจธีรรมด้านั้��นั้เอง
การก!าหน่ดล กษณะของกรอบ่เฟรม เราสามารถก!าหนั้ด้ลั�กษณะข้องกรอบ่เฟรมเชื่�นั้ การใหแสด้งกรอบ่หร#อไม�แสด้ง ก!าหนั้ด้
ควิามหนั้าข้องกรอบ่ ม�ต้�วิเลั#อกด้�งนั้�� Border ก!าหนั้ด้ควิามหนั้าใหกรอบ่เฟรม Bordercolor ก!าหนั้ด้ส�ใหกรอบ่ข้องเฟรม Frameborder เป5ด้/ป5ด้การแสด้งเสนั้กรอบ่ Framespacing ก!าหนั้ด้ควิามห�างระหวิ�างเฟรมต้�วิอย�างต้�อไปนั้�� จ!าก!าหนั้ด้ควิามหาข้องกรอบ่
การก!าหน่ดช้�องว�างระหว�างเว�บ่เพจก บ่เฟรม เราสามารถก!าหนั้ด้ต้!าแหนั้�งข้องเวิ�บ่เพจ HTML ที่��อย0�ในั้เฟรมได้ เพ#�อควิามสวินั้งาม
โด้ยการก!าหนั้ด้ชื่�องวิ�างระหวิ�างเวิ�บ่เพจเฟรม ด้�งนั้�� Marginwidth ก!าหนั้ด้ชื่�องวิ�างที่างซ้ายแลัะข้วิา Maeginlght ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้บ่นั้แลัะลั�าง จากต้�วิอย�างที่��ผู้�านั้มา ลัองเพ��มแอต้ที่ร�บ่�วิต้1นั้��เข้าไปไปเฟรมที่�� 1 เพ#�อก!าหนั้ด้ระยะห�างข้อง
ข้อม0ลัในั้เฟรม
การก!าหน่ดช้�องว�างระหว�างเน่&.อหาก บ่เว�บ่เพจ <body> นั้อกจากระยะห�างระหวิ�างเฟรมก�บ่เวิ�บ่เพจแลัวิ ย�งม�ระยะห�างระหวิ�างเวิ�บ่เพจก�บ่เนั้#�อหาในั้เวิ�บ่เพจ
เด้�ยวิก�นั้ ซ้/�งการเวินั้ระยะในั้กรณ�นั้�� เราจะเลั#อกก!าหนั้ด้แอต้ที่ร�บ่�วิต้1ในั้แที่�ก body ในั้ไฟลั1 HTML ที่��แสด้งในั้เฟรมนั้��นั้
แอต่ที่ร/บ่/วต่#ที่��ก!าหน่ดโดย Intemet Exolorer แอต่ที่ร/บ่/วต่#ที่��ก!าหน่ดโดย Netscape
Bottommargin ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้ลั�าง Marginheight ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้บ่นั้แลัะด้านั้ลั�าง
Ieftmargin ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้ซ้าย Marginwidth ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้ซ้ายแลัะด้านั้ข้วิา
Rightmargin ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้ข้วิา Topmargin ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้บ่นั้Marginwidth ก!าหนั้ด้ชื่�องวิ�างที่างด้านั้ซ้ายแลัะด้านั้ข้วิา
ต้�วิอย�างนั้��เราจะใชื่ไฟลั1 web1.html ในั้เฟรมที่�� 1 มาแกไข้ในั้ส�วินั้ข้อง body
การปิร บ่ขน่าดเฟรม เฟรมที่��สรางในั้ต้�วิอย�างที่��ผู้�านั้สามารถปร�บ่ข้นั้าด้ได้ โด้ยการคลั�กเมาส1ที่��กรอบ่ข้อง
เฟรมจะปรากฏเคอร1เซ้อร1เป,นั้ส�ญลั�กษณ1 ↕ที่!าใหเราลัากเมาส1ปร�บ่ข้นั้าด้ที่��ต้องการได้
ปิ0องก น่ไม�ให ปิร บ่ขน่าดเฟรม โด้ยที่��วิไปเวิ�บ่ไซ้ต้1จะถ0กออกแบ่บ่ใหม�ข้นั้าด้เฟรมที่��แนั้�นั้อนั้ แลัะไม�ต้องการปร�บ่ข้นั้าด้ได้
โด้ยใชื่แอต้ที่ร�บ่�วิต้1 noresize
การใช้ แถบ่เล&�อน่ใน่เฟรม โด้ยปกต้�เฟรมที่��ม�พ#�นั้ที่��ไม�เพ�ยงพอส!าหร�บ่แสด้งเนั้#�อหา จะม�แถบ่เลั#�อนั้ เพ#�อใหผู้0
สามารถเลั#�อนั้ด้0ข้อม0ลัในั้ส�วินั้ที่��เหลั#อได้ ซ้/�งแถบ่เลั#�อนั้ด้�งกลั�าวิเราสามารถควิมค2มเป5ด้/ป5ด้ได้โด้ยใชื่แอต้ที่ร�บ่�วิต้1 Scrolling
การใช้ ล/งก#เปิล��ยน่หน่ าเว�บ่ใน่เฟรม เม#�อเราแบ่�งหนั้าจอเป,นั้เฟรม การก!าหนั้ด้ลั�งก1เพ#�อเชื่#�อมต้�อก�บ่เวิ�บ่เพจหนั้าอ#�นั้จะต้อง
ระบ่2เฟรมที่��จะใหเวิ�บ่เพจหนั้านั้��นั้ไปเป5ด้แสด้งด้วิยข้��นั้ที่�� 1 ก!าหนั้ด้ชื่#�อใหก�บ่เฟรม การต้��งชื่#�อใหก�บ่เฟรม เพ#�อระบ่2ต้!าแหนั้�งที่��เราต้องการใหเวิ�บ่ที่��เชื่#�อมโยงก�บ่ลั�งก1ไปแสด้งที่��
เฟรมนั้��นั้ต้�วิอย�างการต้��งชื่#�อเฟรม ใหเราลัองต้��งเฟรมแลัวิต้��ง 2 เฟรม ต้��งชื่#�อวิ�า menu แลัะ main
ต้ามลั!าด้�บ่
ข้��นั้ที่�� 2 สรางลั�งก1แบ่บ่ระบ่2เฟรม การสรางลั�งก1เราจะใชื่แที่�ก a สรางข้/�นั้มาแลัะระบ่2แอต้ที่ร�บ่�วิต้1 target เพ#�อระบ่2เฟรม
ปลัายที่��จะใชื่ในั้การเป5ด้ลั�งก1นั้��นั้ ในั้ต้�วิอย�างก�อนั้หนั้านั้��เราสรางเฟรมแนั้วิต้��งมา 2 เฟรมเฟรมซ้ายเป5ด้ไฟลั1 HTML ชื่#�อ
menu.html เฟรมข้วิาเป5ด้ไฟลั1 HTML ชื่#�อ web1.html เราจะสรางลั�งก1ในั้ไฟลั1 menu.html ด้�งนั้��
ข้��นั้ที่�� 3 ที่ด้สอบ่การที่!างานั้ ใหเราลัองเป5ด้หนั้าเฟรมในั้ข้��นั้ที่�� 1 อ�กคร��งที่��นั้��ลัองคลั�กที่��ลั�งก1ที่��เราสรางในั้ข้��นั้ที่�� 2 การ
เปลั��ยนั้หนั้าเวิ�บ่ข้จะไปปรากฏในั้ส�วินั้ข้องเฟรมที่��เราระบ่2นั้อกจากการระบ่2ชื่#�อเฟรมในั้แอต้ที่ร�บ่�วิต้1 target เราย�งสามารถก!าหนั้ด้ค�าเฉพาะที่��ในั้ HTML
ได้ซ้/�งค�าเฉพาะแลัะควิามหมาย จะม�ด้�งนั้��Target=”_blank” เป5ด้ไฟลั1ลั�งก1นั้��นั้ในั้หนั้าต้�างใหม�Target=”_parent” เป5ด้ไฟลั1ลั�งก1นั้��นั้เต้�มพ#�นั้ที่��กรอบ่ข้องเฟรมTarget=”_self” เป5ด้ไฟลั1ลั�งก1นั้��นั้ในั้พ#�นั้ที่��เฟรมข้องต้นั้เองTarget=”_top” เป5ด้ไฟลั1นั้��นั้เต้�มพ#�นั้ที่��กรอบ่บ่ราวิเซ้อร1เราลัองแกไข้ไฟลั1 menu.html เป,นั้ด้�งนั้��
ที่!าการแที่รกเฟรมภายใน่เว�บ่เพจ <iframe> ต้�วิอย�างที่��ผู้�านั้มาเราม�เฟรมแลัวิเอาเวิ�บ่เพจไปใส�ในั้เฟรม แต้�ในั้ห�วิข้อนั้��เราจะสลั�บ่ม�
เวิ�บ่เพจแลัะแที่รกเฟรมอย0�ในั้กรอบ่ภายในั้เวิ�บ่เพจ นั้อกจากนั้��จะม�แอต้ที่ร�บ่�วิต้1อ#�นั้ๆ ที่��นั้�าสนั้ใจ ด้�งนั้�� Width ก!าหนั้ด้ควิามกวิางข้อง iframe Height ก!าหนั้ด้ควิามส0งข้อง iframe Align จ�ด้วิางต้!าแหนั้�งข้อง iframe
ปิ0องก น่บ่ราวเซ้อร#ที่��ไม�สน่ บ่สน่3น่เฟรม <noframes> โด้ยที่��วิไป Internet ,Netscape แลัะ Firefox จะไม�ม�ป:ญหาเร#�องการแสด้งผู้ลั
เฟรม แต้�จะม�บ่างบ่ราวิเซ้อร1ที่��ม�ป:ญหา ฉะนั้��นั้ที่างที่��ด้�เราควิรจะเพ#�อกรณ�บ่ราวิเซ้อรที่��ม�สนั้�บ่สนั้2นั้การแสด้งผู้ลัแบ่บ่เฟรมด้วิย
เราสามารถแสด้งใหเป,นั้ข้อควิามแจงใหที่ราบ่
หร#อสรางเป,นั้หนั้าเวิ�บ่เพ��มข้/�นั้มาใหสามารเร�ยด้0ได้ แมบ่ราวิเซ้อร1จะไม�สนั้�บ่สนั้2นั้การที่!างานั้แบ่บ่เฟรม