หนวยที่ 9 การสรางเฟรม
แบงโครงสรางในเว็บเพจด เพจดวยแท็ ยแท็ก <frameset> ชื่อแท็ก frameset และ frame ชื่อแอททริบิวท cols และ rows ตําแหนงของแท็ก frameset ใชแทนตําแหนงแท็ก<boby>…</body> (ถาใช frameset จะไมมีแท็ก body) frame อยูภายในแท็ก <frameset>..<frameset>
แบงโครงสรางในเว็บเพจด เพจดวยแท็ ยแท็ก <frameset> รูปแบบ <frameset cols/rows=“สวน 1%, สวน2%”> <frame name=“ชื่อเฟรมสวนที่ 1” src=“ชื่อไฟล HTML ที่แสดงในเฟรม”> <frame name=“ชื่อเฟรมสวนที่ 2” src=“ชื่อไฟล HTML ที่แสดงในเฟรม”> </frameset>
กําหนดไฟล HTML ที่ใชในแตละชองเฟรม • ชื่อแอททริบิวท src • ตําแหนงของแอททริบิวท อยูภายในแท็ก <frame..> • รูปแบบ <frame src=“ชื่อไฟล HTML”>
การกําหนดลักษณะของกรอบเฟรม • • • •
border bordercolor frameborder framespacing
กําหนดความหนาใหกับกรอบของเฟรม กําหนดสีใหกับกรอบของเฟรม เปด/ปดการแสดงเสนกรอบ กําหนดความหางระหวางเฟรม
การกําหนดลักษณะของกรอบเฟรม • ชื่อแอททริบิวท border,bordercolor,frameborder,framespacing • ตําแหนงของแอททริบิวทท อยูภายในแท็กเปด <frameset..> • รูปแบบ border=“ความหนา” bordercolor=“สี” frameborder=“สถานะ” framespacing=“ความหาง”
กําหนดชองวางระหวางเว็บเพจกับเฟรม • marginwidth ดานขวา • marginheight ดานลาง
กําหนดชองวางทางดานซายและ กําหนดชองวางทางดานบนและ
การกําหนดชองวางระหวางเว็บเพจและเฟรม • ชื่อแอททริบิวท marginwidth และ marginheight • ตําแหนงของแอททริบิวท อยูภายในแท็กเปด <frame..> • รูปแบบ marginwidth=“ระยะหาง” marginheight=“ระยะหาง” • คาที่กําหนดใหใช คาระยะหนวยเปนพิกเซล
การกําหนดชองวางระหวางเนื้อหากับเว็บเพจ • ชื่อแอททริบิวท bottommargin,leftmargin,rightmargin,topmargin,margin height,marginwidth • ตําแหนงของแอททริบิวท อยูภายในแท็กเปด <body..> • รูปแบบ bottommargin leftmargin rightmargin topmargin=“คาระยะหาง หนวยเปนพิกเซล”
ปองกันไมใหปรับขนาดเฟรม • • • •
ชื่อแอททริบิวท noresize ตําแหนงของแอททริบิวท อยูภายในแท็กเปด <frame..> รูปแบบ <frame noresize=“noresize” คาที่กําหนดใหใช มีคาเดียวคือ “noresize”
การใชแถบเลื่อนในเฟรม • • • •
ชื่อแอททริบิวท scrolling ตําแหนงของแอททริบิวท อยูภายในแท็กเปด <frame..> รูปแบบ <frame scrolling=“auto | no |yes”> คาที่กําหนดใหใช auto (ใหบราวเซอรตัดสินใจวาควรมีแถบ เลื่อนหรือไม ปกติถาไมใสจะใชคานี้), no (ไมแสดงแถบเลื่อน),yes (แสดงแถบเลื่อนตลอดเวลา)
การใชลิงคเปลี่ยนหนาเว็บในเฟรม • ขั้นที่ 1 กําหนดชื่อใหกับเฟรม –ชืชื่อแอททริบิวท name –ตําแหนง อยูภายในแท็กเปด <frame..> –รูปแบบ <frame name=“ชื่อเฟรม”
การใชลิงคเปลี่ยนหนาเว็บในเฟรม • 2 สรางลิงคแบบระบุเฟรม –ชื่อแอททริบิวท target –ตําแหนง อยูภายในแท็กเปด <a..> –รูปแบบ <a href=“ชื่อไฟล HTML” target=“ชื่อ เฟรม”></a>
การใชลิงคเปลี่ยนหนาเว็บในเฟรม • ขั้นที่ 3 ทดสอบการทํางาน • นอกจากระบุชื่อเฟรมในแอททริบิวท target ยังมีการกําหนดคา เฉพาะ ซึ่งมีดังนี้ – Target=“_blank” เปดไฟลลิงคนั้นในหนาตางใหม – Target=“_parent” เปดไฟลลิงคนันเต็มพื้นที่กรอบของเฟรมพอ – Target=“_self” เปดไฟลลิงคนั้นในพื้นที่เฟรมของตนเอง – Target=“_top” เปดไฟลลิงคนั้นเต็มพื้นที่กรอบบราวเซอร
ทําการแทรกเฟรมภายในเว็บเพจ • • • •
ชื่อแท็ก iframe (Floating Frame) ชื่อแอททริบิวท src ตําแหนงของแท็ก อยูในแท็ก <body>…</body> นอกจากนี้ยังมีแอททริบิวทอื่นๆ – Width – Height – Align
กําหนดความกวางของ iframe กําหนดความสูงของ iframe จัดวางตําแหนงของ iframe
ปองกันบราวเซอรที่ไมสนับสนุนเฟรม • ชื่อแท็ก noframes (no frame support content) • ตําแหนง อยูภายในแท็ก <frameset>..</frameset> • รูปแบบ <noframes> หนาเว็บที่เผื่อไวในกรณีดูเฟรมไมได </noframes>