หน้าต่างเอกสารเบราว์เซอร์สามารถแสดงไฟล์เว็บเพจได้เพียงหนึ่งไฟล์เท่านั้น แต่สามารถแสดงมากกว่าหนึ่งหน้าในหน้าต่างเบราว์เซอร์เดียวกันโดยใช้เฟรมเวิร์ก หน้าโดยใช้เฟรมส่วนใหญ่มีสองส่วนหนึ่งส่วนคือชุดเฟรมและอีกเฟรมเป็นไฟล์เฟรมเฉพาะ
เฟรมเวิร์กส่วนใหญ่ใช้สำหรับเค้าโครงของเว็บไซต์แบ็กเอนด์หรืออินทราเน็ต
1. frameset (<frameset> </frameset>): มันถูกใช้เพื่อกำหนดไฟล์ HTML นี้เป็นโหมดเฟรมเวิร์กและตั้งค่าไฟล์วิธีแบ่งหน้าต่าง เพื่อให้ง่ายชุดเฟรมเวิร์กเป็นไฟล์ที่เก็บโครงสร้างเฟรมเวิร์กและไฟล์รายการที่เข้าถึงไฟล์เฟรมเวิร์ก หากหน้าเว็บประกอบด้วยเฟรมซ้ายและขวาสองเฟรมนอกเหนือจากไฟล์หน้าเว็บซ้ายและขวาสองไฟล์แล้วยังมีไฟล์ชุดเฟรมทั้งหมด ในหน้าเว็บที่ใช้เฟรมแท็ก <body> body จะถูกแทนที่ด้วยแท็กเฟรม <เฟรมเซ็ต> สำหรับแต่ละเฟรมที่มีอยู่ในหน้าเฟรมจะถูกกำหนดโดยแท็ก <frame>แอตทริบิวต์แถว: หน้าต่างแยกแนวนอน หน้าต่างแยกแนวนอนคือการตัดหน้าในทิศทางแนวนอนนั่นคือเพื่อแบ่งหน้าออกเป็นหลายหน้าต่างที่จัดเรียงขึ้นและลง สามารถใช้หลายค่าในแถวแต่ละค่าแสดงถึงความกว้างแนวนอนของหน้าต่างเฟรมและหน่วยของมันสามารถเป็นพิกเซลหรือเปอร์เซ็นต์ของเบราว์เซอร์ อย่างไรก็ตามควรสังเกตว่าโดยทั่วไปเมื่อตั้งค่าของหลายแถวมีหลายเฟรมเวิร์กนั่นคือมีจำนวนพารามิเตอร์ <เฟรม> จำนวนที่สอดคล้องกัน
<Html> <head> <title> เอฟเฟกต์ของหน้าต่างแยกแนวนอน </title> </head> <frameset rows = 30%, 70%> <frame> </dameet> </html>
Cols Property: หน้าต่างแยกแนวตั้ง หน้าต่างแยกแนวตั้งคือการแบ่งหน้าออกเป็นหลายหน้าต่างในทิศทางแนวตั้งนั่นคือการแบ่งหน้าออกเป็นหน้าต่างหลายบานที่จัดเรียงซ้ายและขวา สามารถใช้หลายค่าใน Cols แต่ละค่าแสดงถึงความกว้างแนวนอนของหน้าต่างเฟรมและหน่วยของมันสามารถเป็นพิกเซลหรือเปอร์เซ็นต์ของเบราว์เซอร์ เช่นเดียวกับหน้าต่างการแบ่งส่วนแนวนอนโดยทั่วไปเมื่อตั้งค่าของ COLS หลายตัวมีหลายเฟรมเวิร์กนั่นคือพารามิเตอร์ <เฟรม> หลายตัว
<html> <head> <title> เอฟเฟกต์ของหน้าต่างการแยกแนวตั้ง </title> </head> <frameset cols = 20%, 55%, 25%> <frame> <frame> <frame> </frameset> </html>
คุณสมบัติ FrameBorder: Set Border โดยค่าเริ่มต้นมีเส้นขอบรอบหน้าต่างเฟรม พารามิเตอร์ FrameBorder สามารถใช้เพื่อปรับการแสดงผลของเส้นขอบ ไวยากรณ์คือ:
<frameset frameBorder = ไม่ว่าจะปรากฏขึ้น> หรือ <frameFrameBorder = ไม่ว่าจะแสดงขึ้น> ค่าของ FrameBorder สามารถเป็น 0 หรือ 1 ถ้าค่าคือ 0 เส้นขอบจะถูกซ่อน หากค่าคือ 1 เส้นขอบจะปรากฏขึ้น การตั้งค่าในเฟรมเซ็ตจะถูกต้องสำหรับเฟรมเวิร์กทั้งหมดและการตั้งค่าในเฟรมจะใช้ได้เฉพาะกับเฟรมเวิร์กปัจจุบันเท่านั้น
<html> <head> <title> ตั้งค่าเอฟเฟกต์การแสดงผลเส้นขอบของหน้าต่างเฟรม </title> </head> <frameset rows = 20%, 55%, 25%> <frameframeBorder = 1> <frameset cols = 35%, 65%frameBorder = 0> <frameT>
คุณสมบัติ Framesping: ความกว้างของเส้นขอบของเฟรม ความกว้างของเส้นขอบของเฟรมคือ 1 พิกเซลโดยค่าเริ่มต้นและสามารถปรับขนาดได้โดยการกำหนดกรอบพารามิเตอร์
ไวยากรณ์: <frameet framespacing = ความกว้างของเส้นขอบ>
หมายเหตุ: ความกว้างของเส้นขอบคือความกว้างของเส้นแบ่งระหว่างแต่ละเส้นขอบในหน้าในพิกเซล พารามิเตอร์นี้สามารถใช้สำหรับชุดเฟรมเวิร์กเท่านั้นและไม่ถูกต้องสำหรับเฟรมเวิร์กเดียว
<Html> <head> <title> ตั้งค่าความกว้างของเฟรมเส้นขอบ </title> </head> <frameset rows = 30%, 70%framespacing = 10> <frame> <frameset cols = 20%, 55%, 25%framesping = 30> <frame> <frame>
คุณสมบัติ BorderColor: สีขอบของเฟรม ใช้พารามิเตอร์ BorderColor เพื่อตั้งค่าสีขอบของชุดเฟรม
ไวยากรณ์: <เฟรมเซ็ท BorderColor = รหัสสี>
หมายเหตุ: พารามิเตอร์นี้ใช้ได้เฉพาะสำหรับชุดเฟรมเวิร์กทั้งหมดและไม่ถูกต้องสำหรับเฟรมเวิร์กเดียว
<html> <head> <title> ตั้งค่าสีชายแดนเฟรม </title> </head> <frameset rows = 30%, 70%framespacing = 10 bordercolor =#cc99ff> <frame> <frameset cols = 20%, 55%, 25%framesping = 30 bordercoloror </html>2. เฟรม (<frame>) และแอตทริบิวต์ SRC
แต่ละหน้าในโครงสร้างเฟรมเวิร์กเป็นข้อความแยกต่างหากและไฟล์เหล่านี้ถูกตั้งค่าผ่านพารามิเตอร์ SRC
ไวยากรณ์: <เฟรม src = ที่อยู่ไฟล์แหล่งที่มาของหน้า>
หมายเหตุ: ไฟล์หน้าเป็นเนื้อหาเฉพาะของหน้าเฟรม มันไม่มีผลกระทบกับเฟรมโดยไม่ต้องตั้งค่าไฟล์ต้นฉบับและเพียงแค่หน้าว่าง ไฟล์ต้นฉบับของหน้าอาจเป็นไฟล์ HTML ปกติหรือรูปภาพหรือไฟล์อื่น ๆ
<html> <head> <title> ตั้งค่าไฟล์หน้าแหล่งที่มา </title> </head> <frameset rows = 30%, 70%> <frame src = pic01.gif> <frame src = src01.html> </frameset> </html>3. <noframes> </noframes> แท็ก
แท็ก <noframes> </noframes> ใช้เพื่อแสดงเนื้อหาหน้าเว็บเมื่อเบราว์เซอร์ไม่รองรับเฟรม
<html> <frameset cols = 25%, 50%, 25%> <frame src =/ตัวอย่าง/html/frame_a.html> <frame src =/ตัวอย่าง/html/frame_b.html> <frame src =/ตัวอย่าง/html/frame_b.html> <noframes> <body> เบราว์เซอร์ของคุณไม่สามารถจัดการกับเฟรมเวิร์กได้! </body> </noframes> </frameset> </html>2. เฟรมลอยตัว (<iframe>)
เฟรมลอยตัวเป็นเฟรมที่ค่อนข้างพิเศษ มันทำรังหน้าต่างเด็กในหน้าต่างเบราว์เซอร์ นั่นคือทั้งหน้าไม่ใช่หน้าเฟรม แต่มีหน้าต่างเฟรม แสดงเนื้อหาหน้าเว็บที่เกี่ยวข้องในหน้าต่างเฟรม เฟรมลอยตัวเรียกอีกอย่างว่าเฟรมแบบอินไลน์และดังนั้นจึงมีการตั้งชื่อ
ไวยากรณ์: <iframe src = ไฟล์แหล่งที่มาของหน้า> </iframe>
หมายเหตุ: คล้ายกับโครงสร้างเฟรมธรรมดาเฟรมลอยตัวสามารถตั้งค่าพารามิเตอร์จำนวนมากเช่นชื่อการเลื่อน, frameBorder ฯลฯ อย่างไรก็ตามเมื่อเทียบกับเฟรมธรรมดาเฟรมลอยไม่มีพารามิเตอร์เฟรมสเปซและพารามิเตอร์ขอบสี
แอตทริบิวต์ SRC: พารามิเตอร์พื้นฐานที่สุดในเฟรมเวิร์กลอยน้ำคือ SRC มันถูกใช้เพื่อตั้งค่าที่อยู่ไฟล์ต้นฉบับของหน้าเฟรมเวิร์กลอยน้ำและยังเป็นพารามิเตอร์ที่จำเป็นสำหรับหน้าเฟรมเวิร์กลอยน้ำ เนื่องจากเฉพาะเมื่อมีการตั้งค่าเนื้อหาของไฟล์ต้นฉบับเฟรมเวิร์กลอยตัวจึงสมเหตุสมผล ไวยากรณ์: <iframe src = ไฟล์แหล่งที่มาของหน้า>
คุณสมบัติความกว้างและความสูง: ในโครงสร้างเฟรมเวิร์กปกติเนื่องจากเฟรมเวิร์กเป็นหน้าต่างเบราว์เซอร์ทั้งหมดจึงไม่จำเป็นต้องตั้งขนาด อย่างไรก็ตามในเฟรมที่ลอยอยู่มันจะถูกแทรกลงในหน้า HTML ปกติและสามารถปรับขนาดเฟรมทั้งหมดได้ ไวยากรณ์: <iframe src = src = floating frame page หน้าแหล่งความกว้าง = ความกว้างความกว้างของหน้า = ความสูงของหน้า> ค่าความกว้างและความสูงของหน้าอยู่ในพิกเซล
<html> <body> <iframe src =/i/eg_landscape.jpg width = 550 ความสูง = 310> </iframe> <p> เบราว์เซอร์เก่าบางตัวไม่รองรับ iframes </p> <p> หากได้รับการสนับสนุน IFRAME จะมองไม่เห็น </p> </body> </html>3. ตัวอย่างของเค้าโครงกรอบ
<html> <head> <title> frame homepage </title> </head> <frameset rows = 20%,*> <!-ชุดเฟรม, คอนเทนเนอร์สำหรับไฟล์ควบคุม-> <ชื่อเฟรม = topfame src = 3.html noresize/> <frameet cols = 240px,*> < src = 2.html marginWidth = 20px scrolling = no/> </frameset> <noframes> <!-แท็ก noframes สามารถมีแท็กร่างกาย-> <body> หน้านี้ไม่รองรับแท็กเฟรม! </body> </noframes> </frameset> </html>4. วิธีการออกจากกรอบการเชื่อมโยง
ในเว็บไซต์เค้าโครงแบ็กเอนด์เฟรมเวิร์กจะใช้บ่อยขึ้น ในหลายกรณีเราต้องกระโดดออกจากกรอบและโหลดหน้าใหม่ แล้วลิงก์จะแยกออกจากกรอบได้อย่างไร? ในความเป็นจริงคุณจะต้องระบุแอตทริบิวต์เป้าหมายของแท็ก <a> </a> เป็น _top นี่คือตัวอย่างง่ายๆ
<html> <body> <p> มันถูกล็อคในเฟรมหรือไม่? </p> <a href =/index.html target = _top> กรุณาคลิกที่นี่! </a> </body> </html>