10.4.1 ความแตกต่างระหว่างเฟรมและเฟรม
ก่อนอื่นให้อธิบายความแตกต่างระหว่างเฟรมและเฟรม
<frameset> </frameset> ใช้ในการหารเฟรมแต่ละเฟรมจะถูกทำเครื่องหมายด้วย <frame> </frame> <frame> </frame> ต้องใช้ภายใน <frameset> </frameset> รหัสมีดังนี้:
<frameset border = 1 framespacing = 1 bordercolor =#47478d แถว =* cols = 180,*>
<frame src = "inc/admin_left.htm" ชื่อ = การเลื่อนซ้าย = ไม่มี id = "ซ้าย">
<frame src = "inc/admin_center.htm" ชื่อ = การเลื่อนหลัก = "ไม่">>
</frameset>
ในตัวอย่างข้างต้น <frameset> </frameset> แบ่งหน้าออกเป็นสองส่วนหน้าในเฟรมด้านซ้ายคือ admin_left.htm และหน้าในเฟรมขวาคือ admin_center.htm
หมายเหตุ: แท็กเฟรมของ <frame> </frame> แท็กจากซ้ายไปขวาหรือบนลงล่าง
ความแตกต่างระหว่างทั้งสองมีดังนี้:
● <เฟรมเซ็ต> เป็นแท็กเฟรมซึ่งระบุว่าเอกสารหน้าเว็บประกอบด้วยเฟรมและตั้งค่าเค้าโครงของเฟรมที่ประกอบขึ้นเป็นชุดเฟรมในเอกสาร
● <frame> ใช้เพื่อตั้งค่าคุณสมบัติของแต่ละเฟรมที่ถือเป็นเฟรม
10.4.2 การตั้งค่าพารามิเตอร์เฟรมเซ็ต
<เฟรมเซ็ต> จำเป็นต้องตั้งค่าพารามิเตอร์เฉพาะบางอย่างซึ่งกำหนดเค้าโครงของทั้งหน้าโดยตรง รหัสมีดังนี้:
<frameset border = 1 framespacing = 1 bordercolor =#47478d แถว =* cols = 180,*>
การตั้งค่าพารามิเตอร์และความหมายของรหัสก่อนหน้านี้แสดงในตารางที่ 10.3
ตารางที่ 10.3 พารามิเตอร์ Frameset
พารามิเตอร์ | อธิบาย |
ชายแดน | ตั้งค่าความหนาของเฟรมเป็นพิกเซล |
Frame Border | ตั้งค่าว่าจะแสดงเส้นขอบเฟรมหรือไม่ไม่ปรากฏขึ้น 0 จะปรากฏขึ้น 1 รายการจะปรากฏขึ้น |
การใส่กรอบ | ระบุระยะห่างระหว่างเฟรม |
ชายแดน | ตั้งค่าสีขอบเฟรม |
แถว | แบ่งเอกสารออกเป็นเฟรมบนและล่าง ค่าหลังแถวอาจเป็นค่าตัวเลขหรือเปอร์เซ็นต์ * หมายความว่าพื้นที่ที่เหลืออยู่ จำนวนของค่าตัวเลขแสดงถึงจำนวนเฟรมที่แบ่งออกเป็นแนวนอน ตัวอย่างเช่น rows = "210,*, 10%" ซึ่งหมายความว่าหน้านั้นแบ่งออกเป็นสามหน้าบนเฟรมกลางและล่าง เฟรมด้านบนอยู่ที่ 210px เฟรมด้านล่างจะอยู่ที่ 10% ของเอกสารทั้งหมดและพื้นที่ที่เหลือจะถูกครอบครองโดยกรอบกลาง * เป็นแนวคิดสัมพัทธ์เช่นแถว =* ซึ่งหมายความว่าไม่มีโครงสร้างบนและล่างในหน้า |
cols | ตั้งค่าเหมือนกับแถว |
เกี่ยวกับการตั้งค่าพารามิเตอร์เฟรมรหัสมีดังนี้:
ดังแสดงในตารางที่ 10.4
ตารางที่ 10.4 พารามิเตอร์เฟรม
พารามิเตอร์ | อธิบาย |
ชื่อ | ชื่อของกรอบการตั้งค่าจะต้องเป็นภาษาอังกฤษ |
SRC | ตั้งค่าเส้นทางหน้าและชื่อที่แสดงในเฟรมซึ่งสามารถเป็นเส้นทางที่สัมพันธ์กันหรือแน่นอน |
MarginWidth | ระบุระยะห่างจากขอบซ้ายและขวาของเฟรม |
ขอบหน้า | ระบุระยะห่างจากขอบด้านบนและล่างของเฟรม |
การเลื่อน | ตั้งค่าว่าจะแสดงแถบเลื่อนในเฟรมใช่จะปรากฏขึ้นหรือไม่ไม่ปรากฏขึ้นอัตโนมัติหมายความว่าแถบเลื่อนจะแสดงโดยอัตโนมัติเมื่อเนื้อหาในหน้าเฟรมเกินขนาดของเฟรม |
Frame Border | ตั้งค่าว่าจะแสดงเส้นขอบของเฟรมหรือไม่ 0 จะไม่ปรากฏขึ้นและ 1 จะปรากฏขึ้น |
ทำให้เป็นสีน้ำตาล | ตั้งค่าว่าผู้ใช้สามารถเปลี่ยนขนาดของเฟรมนี้ได้หรือไม่ โดยไม่ต้องตั้งค่ารายการนี้ผู้ชมสามารถดึงเฟรมได้ตามต้องการและเปลี่ยนขนาดของเฟรม |
การใส่กรอบ | ระบุระยะห่างระหว่างเฟรม |
ชายแดน | ตั้งค่าสีขอบเฟรม |
เฟรมและ iframe สามารถบรรลุฟังก์ชั่นเดียวกันโดยทั่วไป แต่ iframe มีความยืดหยุ่นมากกว่าเฟรม
แท็ก iframe เรียกอีกอย่างว่าแท็กเฟรมลอย พวกเขาสามารถใช้ในการฝังเอกสาร HTML ในจอแสดงผล HTML ความแตกต่างที่ใหญ่ที่สุดระหว่างมันกับแท็กเฟรมคือเนื้อหาที่มีอยู่ใน <iframe> </iframe> ที่ฝังอยู่ในหน้าเว็บนั้นมีทั้งหมดกับทั้งหน้าในขณะที่เนื้อหาที่มีอยู่ใน <</framed> เป็นบุคคลอิสระและสามารถแสดงได้อย่างอิสระ นอกจากนี้แอปพลิเคชัน iFrame ยังสามารถแสดงเนื้อหาเดียวกันหลายครั้งในหน้าเดียวกันโดยไม่ต้องทำซ้ำรหัสของเนื้อหานี้
หน้าแสดงในรูปที่ 10.21 คือการใช้ IFRAME เพื่อสร้างลิงก์เพจที่ด้านบนและด้านล่างของหน้า รหัสที่ด้านบนและด้านล่างเหมือนกัน คุณจะต้องฝังไฟล์เดียวกันในหน้าเว็บและไม่จำเป็นต้องเขียนรหัสซ้ำ ๆ สำหรับผลจริงของกรณีนี้โปรดดูกรณี/frame/iframe/see_infomore_iframe.htm ใน cd-rom ผู้เข้าถึงหนังสือ
Iframe มีข้อได้เปรียบที่ยิ่งใหญ่กว่าซึ่งก็คือสามารถตั้งค่าเฟรมให้โปร่งใสเพื่อให้พื้นหลังภายในเฟรมเหมือนกับพื้นหลังของหน้าหลัก ในการดำเนินการตัวอย่างข้างต้นผู้อ่านอย่างระมัดระวังจะพบปัญหานี้ มาอธิบายรายละเอียดเกี่ยวกับวิธีการตั้งค่าความโปร่งใส iframe ขั้นตอนการดำเนินการเฉพาะมีดังนี้:
(1) เปิดเคส/เฟรม/iframe/see_infomore_iframe1.htm ในซีดีการจัดสรรหนังสือ
(2) เรียกดูไฟล์ในหน้านี้ในเบราว์เซอร์และพบว่าพื้นหลังของเซลล์ดั้งเดิมถูกเขียนทับในพื้นที่ที่มีการแทรก IFRAME ซึ่งไม่ใช่เอฟเฟกต์ที่ต้องการ
(3) เปิดหน้า page.htm สลับไปที่มุมมองรหัสและแทรกรหัสลงในแท็ก <body> ดังนี้:
<body style = "พื้นหลังสี = โปร่งใส">
รูปที่ 10.21 การใช้ iframe เพื่อสร้างหน้าเปิด
(4) สลับ see_infomore_iframe1.htm ไปที่มุมมองรหัสและดูรหัสสำหรับการแทรกเซลล์ iframe บนหน้าดังนี้:
<td colspan = "4">
<iframe name = "main" frameBorder = "0" border = 0 scrolling = "no" marginWidth = "0" marginHeight = "0" src = "page.htm"> </iframe>
</td>
(5) ในแท็ก <frame>
<frame name = "left" src = "index_manager/admin_left.htm" marginWidth = "1" marginHeight = "1" scrolling = "no" frameBorder = "1" framespacing = "2" BorderColor = "#CC0000">>
การตั้งค่าพารามิเตอร์และความหมายของรหัสก่อนหน้า
NowlTransParency = "true"
(6) รหัสเซลล์สำหรับแทรก iframe ในเวลานี้มีดังนี้:
<td colspan = "4">
<iframe name = "main" frameBorder = "0" border = 0 scrolling = "no" marginWidth = "0" marginHeight = "0" src = "page.htm" levertransparency = "true"> </iframe>
(7) บันทึกสองหน้าหน้า htm และ see_infomore_iframe1.htm เพื่อเรียกดูเอฟเฟกต์ในเบราว์เซอร์