วันอาทิตย์ที่ 15 สิงหาคม พ.ศ. 2553

บทที่ 9 การการสร้างเฟรม

เอกสารเว็บนั้นนอกจากจะแสดงเนื้อหาที่มีเพียงเอกสารเดียว หรือรูปภาพแล้ว ยังสามารถผนวกเอาเอกสารเว็บหลาย เอกสารมาแสดงพร้อมกัน หรือที่เรียกกันว่าการแสดงแบบเฟรม โดยในเนื้อหาของหน่วยนี้ จะกล่าวถึงการแบ่งส่วนของจอภาพออกเป็นเฟรม คำสั่งต่าง ๆ ที่เกี่ยวกับ การสร้างเฟรมและจัดรูปแบบเฟรมให้เป็นลักษณะต่าง ๆ รวมไปถึงการใช้งาน เฟรมร่วมกับคำสั่งสำหรับเชื่อมโยงแฟ้มข้อมูล

การแบ่งส่วนของจอภาพ

การแบ่งจอภาพออกเป็นส่วนนั้น มีชื่อเรียกอีกอย่างหนึ่งว่า เฟรม (Frame)โดยการแสดงผลเป็นแบบเฟรมนั้นจะช่วยทำ
ให้สามารถแสดงผลแฟ้มข้อมูลที่เขียนด้วยภาษาเอชทีเอ็มแอล โดยใช้โปรแกรมเว็บเบราเซอร์พร้อมกันได้ครั้งละหลาย
แฟ้มข้อมูล โดยปกติแล้วในหนึ่งจอภาพของโปรแกรมเว็บเบราเซอร์นั้นจะสามารถแสดงผลแฟ้มข้อมูลที่เป้นภาษาHTML
ได้ฟ้มข้อมูลเดียว ซึ่งถ้าหากต้องการแบ่งหน้าจอของเว็บเพจออกเป็น 2-3 ส่วน โดยแต่ละส่วนมีความเป็นอิสระของตัวเองนั้น
จะต้องใช้คำสั่งเฟรมมาช่วยในการจัดการวีการดังกล่าว
ปัจจุบันการแสดงผลข้อมูลบนโปรแกรมเว็บเบราเซอร์ในลักษณะของเฟรมนั้น ได้รับความนิยมอย่างมากโดยใช้สำหรับ
การตกแต่งเอกสารเว็บเพจเช่น การกำหนดให้โฮมเพจนั้นในทุกหน้าเอกสารที่แสดงในส่วนหัวและส่วนท้ายเหมือนกัน
ทุกหน้าจอ คล้ายกับการทำหัวกระดาษและท้ายกระดาษหรือการนำมาทำเป็นเมนูเพื่อใช้สำหรับเลือกข้อมูลซึ่งสามารถบังคับ
ให้เฟรมที่มีเมนูอยู่นั้นให้แสดงคงที่ตลอดโดยไม่เปลี่ยนแปลง ส่วนอีกเฟรมหนึ่งทำหน้าที่ในการแสดงเนื้อหา ลักษณะโดย
ทั่วไปของเฟรมนั้นจะมีลักษณะเป็นรูปสี่เหลี่ยมเพียงอย่างเดียว ไม่สามารถสร้างเฟรมที่มีลักษณะเป็นรูปสามเหลี่ยม วงกลม
ห้าเหลี่ยม หกเหลี่ยมได้ กล่าวคือจะเป็นการแบ
หน้าจอออกเป็นส่วน ๆ โดยแต่ละส่วนนั้นจะมีรูปลักษณะเป็นสี่เหลี่ยมแบะหากในจอนั้นมีการแบ่งส่วนของเฟรมให้มี
ความซับซ้อนมากขึ้นตามไปด้วย

คำสั่งแรกที่ต้องใช้คำสั่ง FRAMESETโดยคำสั่งนี้จะเป็นคำสั่งทีใช้การกำหนดขนาดรูปแบบของเฟรมให้เป็นไป
ตามต้องการซึ่งส่วนของคำสั่ง FRAMESET นั้นจะนำมาใช้เป็นคำสั่งแทนคำสั่ง BODY ในเอกสารเอชทีเอ็มแอล โดยมี
โครงสร้างดังนี้


คำสั่งสำหรับการกำหนดคุณสมบัติพิเศษของเฟรม
ROWS เป็นการกำหนดเฟรมโดยแบ่งตามแนวนอนของหน้าจอ ซึ่งสามารถกำหนดค่าขนาดของเฟรมได้ 2 วีธีคือ แบบกำหนดเป็นพิกเซล (Pixel) และการกำหนดเป็นเปอร์เซนต์สามารถแสดงรูปแบบการใช้งานคำสั่งได้ดังนี้

จากตัวอย่างเป็นการแบ่งเฟรมแบบสองแถว โดยกำหนดให้แถวแรกสูงเท่ากับส่วนที่เหลือจากแถวแรกทั้งหมด


จากตัวอย่างเป็นการแบ่งเฟรมแบบ 2 แถวแรก สูง 30% ของหน้าจอส่วนแถวที่เหลือมีความสูง 70% ของหน้าจอ
การกำหนดหน้าที่และการแสดงผลใน Frame

รูปแบบคำสั่ง


ตัวอย่างเช่น หากต้องการสร้างเอกสารเว็บที่มีลักษณะเป็นเฟรม โดยแบ่งเฟรมออกตามแนวนอน โดยนำแฟ้มข้อมูล
Frame1.html ดังแสดงในรูปที่ 9.1 และ Frame2.html ดังแสดงในรูปที่ 9.2 มาแสดงรวมกันในหน้าจอของโปรแกรมเว็บ
เบราเซอร์เดียวกัน สามารถทำได้ดังแสดงในรูปที่ 9.3


รูป แสดงข้อมูลของเอกสารเอชทีเอ็มแอล Frame2.html


ตัวอย่าง การสร้างเอกสารเว็บโดยกำหนดเฟรมตามแนวนอน



COLS เป็นการกำหนดเฟรมโดยแบ่งตามแนวตั้งของหน้าจอ ซึ่งสามารถกำหนดขนาดได้ 2 วิธี คือแบบกำหนดเป็นพิกเซล
(Pixel) กับการกำหนดเป็นเปอร์เซ็นต์ เช่นเดียวกับคำสั่ง ROWS สามารถแสดงรูปแบบการใช้งานคำสั่งได้ดังนี้


คำสั่งย่อยที่อยู่ภายใต้คำสั่ง FRAMESET

1.FRAME SRC = "ชื่อไฟล์ที่ต้องการแสดง"เป็นการกำหนดว่าส่วนที่ถูกแบ่งออกเป็นส่วนย่อยนั้นจะนำแฟ้มข้อมูลใดไป
แสดง โดยสามารถแสดงได้ทั้งแฟ้มข้อมูลที่เป็นภาษาเอชทีเอ็มแอล(.html,.htm)หรือแฟ้มข้อมูลรูปภาพ(.gif,.jpg)

2.NOFRAME คำสั่งนี้จะถูกเรียกใช้งานเมื่อ เว็บเพจนั้นถูกนำไปแสดงผลบนโปรแกรมเว็บเบราเซอร์รุ่นเก่าที่ไม่สามารถ
แสดงผลเป็นแบบเฟรมได้ โดยจะนำเอาข้อมูลที่อยู่ภายใต้คำสั่งนี้ไปแสดงผลที่จอภาพแทนการนำข้อมูลที่เป็นลักษณะ
เฟรมมาแสดงผล
3.FRAMESET ใช้สำหรับการแบ่งเฟรมที่ได้ทำการแบ่งเรียบร้อยแล้ว ออกเป็นเฟรมย่อยซ้อนไปอีชั้นหนึ่ง โดยจะมีรูป
แบบเช่นเดียวกับคำสั่ง FRAMESET ทุกประการ สามารถแสดงได้ดังนี้
* FRAMESET ROWS = "pixels,%*",หรือ
* FRAMESET COLS = "pixels,%*",


การกำหนดพื้นที่วางรอบเฟรม

การกำหนดพื้นที่ว่างรอบเฟรมนั้น สามารถใช้ได้ดใช้คำสั่ง MARGINWIDTH ในการกำหนดพื้นที่ว่างทางแนวนอน
และ MARGINWIDTH ในการกำหนดพื้นที่ว่างทางแนวตั้ง ซึ่งการใช้งานนั้นจะใช้ร่วมกับคำสั่ง FraMe โดยมีรูปแบบการ
ใช้งาน ดังต่อไปนี้


การกำหนดค่าตัวเลื่อน

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




ตัวอย่าง การกำหนดค่าตัวเลื่อนแบบ Auto

รูปแสดงรูปแบบการใช้งานคำสั่งโดยการกำหนดค่าตัวเลื่อนเป็นค่ามาตรฐานหรือ AUTO


ตัวอย่าง การกำหนดค่าตัวเลื่อนเป็น NO (ไม่แสดงตัวเลื่อน)

การกำหนดขนาดเฟรมให้มีค่าคงที่
รูปแบบการแสดงผลแบบเฟรมโดยทั่วไปแล้ว ผู้ใช้งานเปลี่ยนแปลงขนาดของเฟรมได้ตามความต้องการ โดยการ
เลื่อนเมาส์ไปยังบริเวณเส้นขอบของเฟรมนั้นเมื่อถึงตำแหน่งตำแหน่งขอบของเฟรมตัวชี้ของเมาส์จะเปลี่ยนจากลูกศรที่เป็น
สัญลักษณ์ของการเปลี่ยนจากลูกศรที่เป็นสัญลักษณ์ของการปรับขนาดหน้าต่างจากนั้นก็ใช้วิธีเหมือนกับการปรับขนาดของ
หน้าต่างโปรแกรมทุกประการหากไม่ต้องการให้ผู้ใช้งานทการปรับขนาดของเฟรม สามารถกำหนดโยการใช้คำสั่ง
NORESIZE โดยรูปแบบการใช้งานคำสั่งมีดังนี้





ตัวอย่าง การปรับขนาดของเฟรม

รูปแสดงรูปแบบการใช้งานคำสั่งโดยไม่ระบุการปรับเปลี่ยนขนาดของเฟรมที่ 3

ตัวอย่าง ไม่สามารถปรับขนาดของเฟรมได้

การลบกรอบของเฟรม
โดยทั่วไปเมื่อใช้คำสั่ง FRAMESET ส่วนที่เป็นรอยต่อระหว่างเฟรมนั้น จะมีลักษณะเป็นเส้นขอบ (BORDER) หาก
ไม่ต้องการให้ส่วนนี้ทำการแสดงผล ซึ่งค่าปกติหากไม่ทำการกำหนดค่าของเส้นขอบนี้จะถูกกำหนดให้แสดงเส้นขอบของ
เฟรม สามารถกำหนดได้โดยใช้คำสั่ง FRAMEBORDER ดังแสดงได้ดังนี้





ตัวอย่าง การแสดงเส้นขอบของเฟรม


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



รูปแบบการใช้งานร่วมกับ แฟ้มข้อมูลเอชทีเอ็มแอล แบบสมบูรณ์ สามารถแสดงได้ดังนี้


จากตัวอย่างภาษาเอชทีเอ็มแอล หน้าจอของโปรแกรมเว็บเบราเซอร์ที่ใช้สำหรับแสดงผลนั้น สามารถแบ่งออก
เป็น 3 ส่วนคือ
1.เฟรมทางด้านบน จะนำเอาแฟ้มข้อมุลที่ชื่อว่า "frame1.html" มาแสดงผลโดยกำหนดให้มีความสูงเท่ากับ 80 พิกเซล
และตั้งชื่อเฟรมนี้ว่า "logo"
2.เฟรมทางด้านซ้าย จะเป็นส่วนของเมนูโดยจะนำเอาแฟ้มข้อมูล "menu.html" มาแสดงผล โดยเฟรมนี้จะมีความกว้าง
เท่ากับ 120 พิกเซล และตั้งชื่อเฟรมนี้ว่า "menu"
3.เฟรมทางด้านขวา จะนำเอาแฟ้มข้อมูลที่ชื่อว่า "frame3.html" มาแสดงผลวึ่งความกว้างของเฟรมนี้จะมีค่าเท่ากับส่วน
ที่เหลือจากเฟรมแรกทั้งหมด และตั้งชื่อเฟรมนี้ว่า "data
"



ไม่มีความคิดเห็น:

แสดงความคิดเห็น