การสร้างแฟรม HTML

บทนำ
         การสร้างเฟรม (Frame) คือการแบ่งหน้าจอของเว็บเพ็จออกเป็นส่วนต่าง ๆ ทางด้านแนวตั้งและแนวนอนตามที่เราต้องการ ซึ่งในแต่ละส่วนสามารถแสดงผลได้อย่างอิสระ และสามารถแสดงผลได้มากกว่า 1 ไฟล์ เราสามารถใช้แถบเลื่อน(Scroll Bar) เลื่อนดูข้อมูลในแต่ละเฟรมได้ การสร้างเฟรมเป็นการแบ่งส่วนของพื้นที่แสดงผลหน้าจออย่างมีประสิทธิภาพ นอกจากนี้ยังสามารถเชื่อมโยงไปยัง ไฟล์และเว็บไซด์อื่น ๆ ได้อีกด้วย
1. รูปแบบคำสั่งการสร้าง Frame
        การสร้างเฟรม (Frame) คือการแบ่งหน้าจอของเว็บเพ็จออกเป็นส่วนต่าง ๆ ทางด้านแนวตั้งและแนวนอนตามที่เราต้องการ ซึ่งในแต่ละส่วนสามารถแสดงผลได้อย่างอิสระ และสามารถแสดงผลได้มากกว่า 1 ไฟล์ เราสามารถใช้แถบเลื่อน(Scroll Bar) เลื่อนดูข้อมูลในแต่ละเฟรมได้ โดยทั่วไปคำสั่ง ที่ใช้ในการสร้างเฟรมมีดังต่อไปนี้คือ

<FRAMESET>........</FRAMESET> ใช้ในการแบ่งส่วนของเฟรมเป็นลักษณะแนวนอนและ
แนวตั้ง(ROWS AND COLS) มีรูปแบบคำสั่งดังนี้

<FRAMESET COLS ="VALUE 1,VALUE 2,......VALUE n"> แบ่งหน้าจอตามแนวตั้ง
<FRAMESET ROWS ="VALUE 1,VALUE 2,......VALUE n"> แบ่งหน้าจอตามแนวนอน

<FRAME > ใช้ในการกำหนดการแสดงผลในแต่ละเฟรม
มีรูปแบบดังนี้

<FRAME NAME="ชื่อเฟรม" SRC="ชื่อไฟล์.html"> เป็นส่วนที่ใช้แสดงไฟล์ html ในกรณีที่ต้อง
การแสดงไฟล์ใดก็ให้กำหนดเรียกไฟล์นั้น ๆ ตามต้องการ
2. ประเภทการสร้างเฟรมแบบต่าง ๆ
2.1 การแบ่งหน้าจอโดยกำหนดหน่วยตามความละเอียด
          การแบ่งหน้าจอโดยกำหนดหน่วยตามความละเอียดจอภาพ จะมีหน่วยเป็นพิกเซล ( Pixel )เช่น 640 X 480 , 800 X 600 และ 1,024 X 768 เป็นต้น การแบ่งหน้าจอจะต้องคำนึงถึงผู้ใช้ทั่วไปว่า ส่วนใหญ่กำหนดความละเอียดมาตรฐานกี่พิกเซล ควรออกแบบหน้าเว็บเพ็จให้เหมาะสมและมีความ สวยงามโดยมีรูปแบบการใช้งานคำสั่งดังนี้คือ
<FRAMESET COLS/ROWS = “VALUE 1,VALUE 2,......VALUE n”>
ตัวอย่างการใช้งาน
<FRAMESET COLS = “400,150,150”> แบ่งหน้าจอตามแนวตั้งเป็น 3 ส่วน คือ 400,150,150
<FRAMESET COLS = “400,400”> แบ่งหน้าจอตามแนวตั้งเป็น 2 ส่วน คือ 400,400
<FRAMESET ROWS = “200,200,200”> แบ่งหน้าจอตามแนวนอนเป็น 3 ส่วน คือ 200,200,200
<FRAMESET ROWS = “350,350”> แบ่งหน้าจอตามแนวนอนเป็น 2 ส่วน คือ 350,350
ตัวอย่าง

Code ของตัวอย่างการแบ่งเฟรมแบบกำหนดขนาด

ผลลัพท์จากการแบ่งเฟรม





2.2 การแบ่งหน้าจอโดยกำหนดหน่วยตามเปอร์เซนต์
          การแบ่งหน้าจอโดยกำหนดหน่วยเป็นเปอร์เซ็นต์ (%) หน้าจอจะถูกแบ่งส่วนตามเปอร์เซ็นต์ที่กำหนด สามารถกำหนดตามแนวนอนหรือแนวตั้งก็ได้ โดยมีรูปแบบการใช้คำสั่งดังนี้
<FRAMESET COLS/ROWS = “VALUE 1,VALUE 2,......VALUE n”>

ตัวอย่างการใช้งาน

<FRAMESET COLS = "50%,25%,25%"> แบ่งหน้าจอตามแนวตั้งเป็น 3 ส่วน คือ 50%,25%,25%
<FRAMESET COLS = "50%,50%"> แบ่งหน้าจอตามแนวตั้งเป็น 2 ส่วน คือ 50%,50%
<FRAMESET ROWS = "50%,25%,25%"> แบ่งหน้าจอตามแนวนอนเป็น 3 ส่วน คือ 50%,25%,25%
<FRAMESET ROWS = "50%,50%"> แบ่งหน้าจอตามแนวนอนเป็น 2 ส่วน คือ 50%,50%
ตัวอย่าง





Code ของตัวอย่างการแบ่งเฟรมแบบกำหนดเป็นเปอร์เซ็นต์





ผลลัพท์จากการแบ่งเฟรม
2.3 การแบ่งหน้าจอโดยกำหนดดอกจันทร์ร่วม
           การแบ่งหน้าจอโดยใช้เครื่องหมายดอกจันท์ร่วม เป็นการแบ่งหน้าจอโดยกำหนดตามความสัมพันธ์ของแต่ละเฟรม ซึ่งดอกจันท์ (*) หมายถึงกว้างยาวตามความสัมพันธ์ของเฟรม ตัวอย่างเช่น

<FRAMESET COLS = “ 50% , * ” > แบ่งหน้าจอตามแนวตั้งเป็น 2 ส่วน คือ 50%,50%
<FRAMESET COLS = “200 , * ,”> แบ่งหน้าจอตามแนวตั้งเป็น 2 ส่วน คือ 200 พิกเซลและส่วนที่เหลือทั้งหมดของหน้าจอ
<FRAMESET COLS = “ * , * , * ”> แบ่งหน้าจอตามแนวตั้งเป็น 3 ส่วน ส่วนละเท่า ๆ กัน
<FRAMESET ROWS = “ 50% , * ” > แบ่งหน้าจอตามแนวนอนเป็น 2 ส่วน คือ 50%,50%
<FRAMESET ROWS = “200 , * ,”> แบ่งหน้าจอตามแนวนอนเป็น 2 ส่วน คือ 200 พิกเซลและส่วนที่เหลือทั้งหมดของหน้าจอ
<FRAMESET ROWS = “ * , * , * ”> แบ่งหน้าจอตามแนวนอนเป็น 3 ส่วน ส่วนละเท่า ๆ กัน
ตัวอย่าง

Code ของตัวอย่างการแบ่งเฟรมแบบกำหนดเป็นดอกจันทร์

ผลลัพท์จากการแบ่งเฟรม

2.4 การกำหนดไม่ให้มีการปรับขนาดของเฟรม
          จากการสร้างเฟรมที่ผ่านมา เมื่อรันโปรแกรมแล้วเราสามารถปรับขนาดของเฟรมเพื่อเลื่อนดูข้อมูลในเฟรมใดเฟรมหนึ่ง โดยการใช้เมาส์คลิกแล้วลากบริเวณเส้นแบ่งเฟรมได้ ถ้ารันโปรแกรมใหม่จะได้หน้าจอการแบ่งเฟรมเหมือนเดิม แต่ถ้าไม่ต้องการให้ปรับขนาดของเฟรม ให้กำหนดรูปแบบของ คำสั่งดังต่อไปนี้ <FRAME NAME="ชื่อเฟรม" SRC="ชื่อไฟล์.html” NORESIZE> NORESIZE แท็กที่ใช้กำหนดไม่ให้มีการปรับขนาดของเฟรม
3. การสร้างเฟรมย่อย
        การสร้างเฟรมย่อย คือการสร้างเฟรมเพิ่มขึ้นภายในเฟรมปกติมากกว่าหนึ่งเฟรม เพื่อทำให้สามารถใช้งานได้สะดวกและจัดหน้าจอได้เหมาะสมมากยิ่งขึ้น เป็นการสร้างแท็ก <FRAMESET>ซ้อนไว้ในแท็ก <FRAMESET> อีกทีหนึ่ง
ตัวอย่าง

เฟรมใหญ่แบ่งตามแนวตั้ง โดยแบ่งพื้นที่เป็นสองส่วนคือ 20% และ 80% ในส่วนของ 20%จะเรียกไฟล์ต้นฉบับที่ชื่อ frame_a.html มาใส่ไว้ ส่วนพื้นที่ที่เหลือจะแบ่งออกเป็นสองส่วนคือ20%และ 80% พื้นที่ 20% จะเรียกไฟล์ต้นฉบับที่ชื่อ frame_b.html มาใส่ไว้ ส่วนอีก 80% จะเรียกไฟล์ต้นฉบับที่ชื่อ frame_c.html มาใส่ไว้

ผลลัพท์

4. การเชื่อมโยงภายในเฟรม
          การเชื่อมโยงภายในเฟรมเป็นการเชื่อมโยงไฟล์เมื่อทำการคลิกเมาส์ที่รายการที่ต้องการแล้วจะปรากฏผลลัพธ์ของไฟล์หรือหรือเว็บไซด์ ที่ทำการเชื่อมโยงไป โดยทำการสร้างไฟล์เป็น 2 ส่วนคือ ส่วนที่หนึ่งสร้างไฟล์เพื่อทำการแบ่งเฟรมสำหรับแสดงการเชื่อมโยง ส่วนที่สองเพื่อทำการกำหนดการเชื่อมโยงในเฟรมโดยการอ้างอิงชื่อเฟรม
ตัวอย่าง



5. การแสดงผลปลายทาง
           การแสดงผลปลายทาง เป็นการแสดงผลโดยไม่คำนึงถึงชื่อเฟรมต่าง ๆ เหมือนตัวอย่างที่ผ่านมาแต่จะใช้วิธีอ้างถึงแบบพิเศษซึ่งมีดังต่อไปนี้คือ
<A HREF = "ชื่อไฟล์หรือชื่อเว็บไซด์" TARGET="รูปแบบการแสดงผล">ข้อความ</A> ซึ่งรูปแบบการแสดงผลมีดังต่อไปนี้