0 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 0
1 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 1 หน่วยที่ 8 การแบ่งหน้าเว็บเพจด้วยเฟรม (Frame) การใช้เฟรมเป็นการแบ่งหน้าจอของโปรแกรมเว็บเบราเซอร์ออกเป็นส่วนย่อย ทำให้สามารถทั้งหมด บนหน้าจอได้อย่างประสิทธิภาพ เช่น กำหนดให้หน้าจอส่วนบนสุดแสดงชื่อและโลโก้ของหน่วยงานหรือบริษัท หน้าจอส่วนทางซ้ายแสดงเมนูเพื่อเปิดหรือเชื่อมโยงเว็บเพจอื่น ๆ และหน้าจอส่วนกลางสำหรับแสดงเนื้อหา โดยที่เฟรมจะแสดงได้ในโปรแกรมเว็บเบราว์เซอร์ที่สนับสนุนเฟรมเท่านั้น เฟรมแต่ละเฟรมในเอกสาร HITML นั้น จะเป็นอิสระจากกันและสามารถแสดงผลเอกสารเว็บเพจที่ แตกต่างกันได้ ในการพัฒนาเว็บไซต์เราสามารถนำเฟรมมาแบ่งเป็นส่วนหัว ส่วนเมนู ส่วนเนื้อหา และส่วนท้าย ของเว็บเพจ โดยส่วนเมนูจะเป็นรายการหัวข้อต่าง ๆ ที่ไม่มีการเปลี่ยนแปลงและเมื่อผู้ใช้งานคลิกที่เมนูเรื่องใด ส่วนเนื้อหาในเฟรมเนื้อหาจะเปลี่ยนไปตามเมนูที่ถูกเลือก เฟรมมีองค์ประกอบ 2 ส่วนประกอบด้วยเฟรมหลัก (Frameset) หรือหน้าต่างเฟรมใหญ่ที่สุดทำหน้าที่ควบคุมเฟรมย่อยอีกที และเฟรมย่อย (Frame)หรือหน้าต่าง เฟรมที่ทำหน้าที่กำหนดชื่อของแต่ละเฟรม และกำหนดไฟล์เว็บเพจภายในเฟรมได้กำหนดเป้าหมายด้วยว่าจะ ให้เว็บเพจปลายทางแสดงเฟรมใด เฟรมหลัก (Frames) จะมีคำสั่งสำหรับแบ่งหน้าจอออกเป็นส่วน ๆ ที่เรียกว่าเฟรม (Frame) โดยจะ กำหนดว่าแต่ละส่วนชื่ออะไร เริ่มค้นที่ตำแหน่งใด มีขนาดและคุณสมบัติเป็นอย่างไร รวมทั้งกำหนดว่าแต่ละ เฟรมจะแสดงเว็บเพจใดในตอนเริ่มต้น เฟรม (Frame) ทำหน้าที่เป็นส่วนแสดงเนื้อหาเอกสารเว็บเพจที่ใช้ในการเผยแพร่ข้อมูลข่าวสาร โดย จะต้องจัดรูปแบบให้เหมาะสมกับขนาดของเฟรม เช่น กำหนดขนาดของภาพหรือขนาดตารางให้เหมาะสมกับ เฟรมที่จะใช้แสดงผลเป็นต้น นอกจากนั้นการกำหนดการเชื่อมโยงของเมนูหรือระบบเนวิเกชั่น ที่จะต้อง กำหนดเป้าหมายการเชื่อมโยงให้แสดงในเฟรมปลายทางใดด้วย
2 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 2 8.1 การแบ่งหน้าเว็บเพจออกเป็นเฟรม การแบ่งหน้าเว็บเพจออกเป็นเฟรม สามารถทำได้ด้วยคำสั่ง <frameset> ที่จะต้องใช้ควบคู่กับคำสั่ง <frame> เสมอซึ่งสามารถกำหนดได้ดังนี้ <frameset>....</frameset> คำสั่งที่ใช้กำหนดเฟรมหลัก <frame> คำสั่งที่ใช้กำหนดเฟรมย่อยที่อยู่ในเฟรมหลัก นอกจากนั้นรายังสามารถกำหนดคำแอททริบิวท์เพิ่มเติมเพื่อการการแบ่งหน้าเว็บเพจออกเป็นเฟรมดังนี้ <frameset rows=“จำนวนและขนาดเฟรมตามแนวนอน” cols=“จำนวนและขนาดเฟรมตามแนวตั้ง”> <frame scr=“ชื่อไฟล์เว็บเพจ”> </frameset> rows ใช้กำหนดจำนวนและขนาดของเฟรมที่ต้องการแบ่งในแนวนอน cols ใช้กำหนดจำนวนและขนาดของเฟรมที่ต้องการแบ่งในแนวตั้ง SIC ใช้กำหนดชื่อไฟล์เว็บเพจที่ต้องการแสดงในแต่ละเฟรม การกำหนดขนาดของเฟรม สามารถกำหนดได้ดังนี้ 1. กำหนดขนาดของเฟรมเป็นตัวเลข เป็นการกำหนดตัวเลขขนาดของเฟรมที่ต้องการแบ่ง มีหน่วย เป็นพิกเซล 2. กำหนดขนาดของเฟรมเป็นสัดส่วนร้อยละ เป็นการกำหนดขนาดของเฟรมที่ต้องการแบ่งเป็น สัดส่วนร้อยละของหน้าต่างแสดงผล 3. กำหนดขนาดของเฟรมด้วยสัญลักษณ์*มี 2 ความหมาย คือ การแบ่งเฟรมให้มีขนาดเท่ากัน และ หมายถึง การแบ่งเฟรมด้วยพื้นที่ที่เหลืออยู่จากการแบ่งเฟรม กำหนดขนาดของเฟรมในคำสั่ง <frameset> ไม่ว่าจะแบ่งตามแนวตั้งหรือแนวนอน จะใช้การกำหนด ขนาดของเฟรมวิธีใดวิธีหนึ่ง โดยจะต้องกำหนดอย่างน้อย 2 เฟรมเสมอและจะคั่นขนาดของแต่ละเฟรมด้วย เครื่องหมาย (,) เช่น <frameset cols=“600, *> หมายถึง การแบ่งหน้าเว็บเพจออกเป็น 2 เฟรมตามแนวตั้ง โดยเฟรมที่ 1มีขนาด 600 พิกเซล และเฟรมที่ 2 เป็นพื้นที่ที่เหลือ <frameset cols = “ *,* “> หมายถึง การแบ่งหน้าเว็บเพจออกเป็น 2 เฟรมตามแนวตั้ง โดยมีขนาด เฟรมที่เท่ากัน <frameset> <frame> </framesets>
3 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 3 <frameset rows=“20%, * “> หมายถึง การแบ่งหน้าเว็บเพจออกเป็น 2 เฟรมตามแนวนอน โดย เฟรมที่ 1 มีขนาด 20% ของพื้นที่ทั้งหมด และเฟรมที่ 2 เป็นพื้นที่ที่เหลือ โปรแกรมเว็บเบราชอร์จะแสงผลไฟล์เว็บเพจในส่วนที่อยู่ระหว่างคำสั่ง <body> เท่านั้นคำสั่ง <frameset แบ่งหน้าต่างโปรแกรมเว็บเบราว์เชอร์ออกเป็นเฟรมและระไฟล์ที่ใช้แสดงในเฟรมซึ่งจะเห็นว่าการ ใช้คำสั่ง <frameset> เพื่อแบ่งหน้าต่างออกเป็นเฟรมจะไม่มีคำสั่ง <body> และแม้ว่ามีคำสั่ง<body> ก็จะ ไม่สามารถแสดงผลข้อความที่อยู่ระหว่างคำสั่งได้ เนื่องจากการแสดงผลไฟล์เว็บเพจจะเป็นไปตามที่กำหนดใน คำสั่ง <frame> เท่านั้น การระบุไฟล์เว็บเพจที่จะใช้แสดงของแต่ละเฟรมในคำสั่ง <frame> ด้วยการกำหนดที่แอททริบิวท์ srcในคำสั่ง <frame> เรียงตามลำดับของการแบ่งเฟรม เช่นหากแบ่งออกเป็น 2 เฟรม ชื่อไฟล์เว็บเพจในคำสั่ง <frame> คำสั่งที่ 1 จะแสดงผลในเฟรมที่ 1 และชื่อไฟล์เว็บเพจในคำสั่ง <frame> คำสั่งที่ 2 ก็จะแสดงผลใน เฟรมที่ 2 ตามลำดับดังแสดงในตัวอย่างต่อไปนี้ ตัวอย่างที่ 8.1 <!DOCTYPE html> <html> <head> <title>การแบ่งหน้าเว็บเพจด้วยเฟรม<title> <meta charset=“UTF-8”> </head> <frameset rows=“30%, ““> <frame src=“head.html”> <frame src=“page1.html”> </frameset> <html> ไฟล์ head.html <IDOCTYPE html> <html>
4 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 4 <head> <title>การแบ่งหน้าเว็บเพจด้วยเฟรม </title> <meta charset=“UTF-8”> </head> <body> <img src=“images/title 1.jps” widht=“1000” height=“150”> <table border=“0”> <tr> <td>|หน้าหลัก</td> <td>|HTMLเบื้องต้น</td> <td>|การจัดการข้อความ</td> <td>|การแทรกรูปภาพ</td> <td>|กรสร้างLink</td> <td>|ติดต่อผู้จัดทำ k/td> </tr> </table> </body> </html>
5 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 5 <!DOCTYPE html> <html> <head> <title>การแบ่งหน้าเว็บเพจด้วยเฟรม</title> <meta charset=“UTF-8”> </head> <body> <table border=“0”> <tr> <td><ing src=“html2jpg”></td> <td>ภาษา HTML เป็นภาษาใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The Wor Web Consortium (W3C) ที่สามารถส่งข้อมูลประเภทข้อความรูปภาพ ภาพเคลื่อนไหว เสียงและวีดิทัศน์ใน ระบบเครือข่ายอินเทอร์เน็ต แสดงผลผ่านโปรแกรมเว็บบราวเชอร์ได้ทุกระบบปฏิบัติการ โดยที่เอกสารเว็บ จะต้องมีการเชื่อมโยง (Link) ถึงกันได้ การเรียนรู้โปรแกรมภาษา HTML ซึ่งเป็นโปรแกรมแบบ Text จะใช้โปรแกรม Text Editorเช่น Note pad , Edit Plus, WordPad หรืออื่นๆ เขียนได้ เป็นการเรียนรู้การใช้คำสั่งสร้างเว็บให้แสดงข้อความจัดการ รูปแบบเนื้อหาให้อ่านได้ง่ายด้วยการใช้ตารางช่วยสร้างความน่าสนใจ เช่น ใส่รูปภาพภาพเคลื่อนไหว สร้างการ เชื่อมโยง (Link) เว็บเพจในเครือข่ายอินเทอร์เน็ตผ่านโปรแกรมเว็บบราว์เซอร์ได้</td> </td> </tr> <tr> <td colspan=“2”>HTML หรือHypertext Markup Language เป็น ภาษาคอมพิวเตอร์ รูปแบบหนึ่งที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ อื่นๆ ผ่านโปรแกรมเบราเชอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุหรือควบคุมการ แสดงผลของเว็บได้ด้วย</td> </tr> </table> </body> <html>
6 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 6 จากภาพเป็นการแบ่งหน้าต่างโปรแกรมเว็บเบราว์เซอร์ออกเป็น 2 เฟรมตามแนวนอน สังเกตได้จาก เส้นแบ่งเฟรม โดยเฟรมที่ 1 คือเฟรมที่อยู่ส่วนบนมีขนาดร้อยละ 30 ของหน้าต่าง และใช้แสดงผลไฟล์ head.htmlส่วนเฟรมที่ 2 มีขนาดเท่ากับพื้นที่ที่เหลือทั้งหมดและใช้แสดงผลไฟล์ page1.htm 8.2 การเชื่อมโยงและแสดงผลในเฟรม การเชื่อมโยงและแสดงผลในเฟรมเป็นรูปแบบการเชื่อมโยงส่วนที่ต้องการให้แสดงผลในเฟรมที่ ต้องการซึ่งจะต้องกำหนดการเชื่อมโยงเช่นเดียวกับการเชื่อมโยงรูปแบบอื่น และจะต้องกำหนดเป้าหมายส่วนที่ ต้องการแสดงผลด้วย ดังมีวิธีการดังนี้
7 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 7 8.2.1 การกำหนดชื่อเฟรม การกำหนดชื่อของเฟรมเพื่อใช้ในการแสดงไฟล์เว็บเพจในกรณีที่ต้องการให้แสดงไฟในเฟรมที่กำหนด ส่วนใหญ่จะกำหนดให้เฟรมหนึ่งเป็นรายการเมนู และใช้อีกเฟรมหนึ่งเป็นส่วนแสดงผล เช่นการสร้างไฟล์เว็บ เพจเพื่อแบ่งหน้าต่างโปรแกรมเว็บเบราว์เซอร์ออกเป็นเฟรม แต่ละเฟรมให้กำหนดชื่อเฟรมด้วยการกำหนดแอ ททริปิวท์ name ภายในคำสั่ง <frame> ซึ่งมีรูปแบบต่อไปนี้ <frameset> <frame name=“ชื่อของเฟรม” src=ชื่อไฟล์เว็บเพจ”> </frameset> ตัวอย่างที่ 8.2 <IDOCTYPE html> <html> <head> <title> การแบ่งหน้าเว็บเพจด้วยเฟรม </title> <meta charset=“UTF-8”> </head> <frameset rows=“30%,** frameborder=“no” border=“0” framespacing=“0”> <frame name=“topFrame” src=“head.html” noresize scrolling=“no”> <frameset cols=“20%,*” frameborder=“no” border=“0” framespacing=“0”> <frame name=“leftFrame” src=“menu.html” noresize scrolling=“no”> <frame name=“mainFrame” src=“page1.html” noresize> </frameset> </frameset> </html>
8 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 8 ผลลัพธ์ รูปที่ 8.3 การกำหนดชื่อเฟรม 8.2.2 การเชื่อมโยงและระบุเป้าหมายเฟรม การกำหนดการเชื่อมโยงและระบุเฟรมที่ต้องการเชื่อมโยงนั้น ต้องสร้างเอกสารเว็บเพจที่มีการ เชื่อมโยง และกำหนดแอททริบิวท์ target ไว้ในคำสั่งแท็ก <a> มีรูปแบบดังนี้ <body> <a href=“ชื่อเอกสารเว็บเพจ” target=“เป้าหมายเฟรมที่ต้องการแสดงผล”> </body> _blank แสดงผลการเชื่อมโยงในหน้าต่างใหม่แสดงผลการเชื่อมโยงในพื้นที่เฟรมหลัก _parent แสดงผลการเชื่อมโยงในพื้นที่เฟรมหลัก _self แสดงผลการเชื่อมโยงในพื้นที่เฟรมของ Link เอง _top แสดงผลการเชื่อมโยงในพื้นที่กรอบโปรแกรมเว็บเบราว์เซอร์
9 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 9 ตัวอย่างที่ 8.3 <IDOCTYPE html> <html> <head> <title>การเชื่อมโยงเปลี่ยนหน้าเว็บเพจในเฟรม</title> <meta charset=“UTF-8”> </head> <body bgcolor=“#fbf2af> <table border=“0”> <tr> <td><a href=“frameset1.html” target=“_parent”>หน้าหลัก</a></td> </tr> <tr> <td><a href=“reeister.html” target=“ mainFrame”>การออกแบบ เว็บไซต์</a></td> </tr> <tr> <td><a href=“css table.html” target=ImainFrame”>พื้นฐานภาษา HTML</a></td> </tr> <tr> <td><a href=“bgcolor2.html”target=“mainFrame”>การจัดการข้อความ </a></td> </tr> <tr> <td>ca href=“register.html” target-ImainFrame”> การแทรกรูปภาพ </a></td> </tr> <tr> <td>ca href=“css table.html” target=“mainFrame”> การแทรกตาราง </a></td> </tr>
10 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 10 <tr> <td>a href=“bgcolor2.html” target=mainFrame'>การสร้างการเชื่อมโยง </a></td> </tr> <tr> <td><a href='register.html” target='mainFrame”>การแบ่งหน้าเว็บเพจ </a></td> </tr> <tr> td><a href=“css_table.html” target='mainFrame”>css</a></td> <tr> <tr> <td><a href=“bgcolor2.html” target=“mainFrame “>การสร้างแบบฟอร์ม </a></td> </tr> <tr> <td><a href=“css_table.html” target=“mainFrame”>การ Upload เว็บไซต์ </a></td> </tr> <tr> <td><a href=“bgcolor2.html” target=“mainFrame”>ติดต่อผู้จัดทำ </a></td> <tr </table> </body> <html>
11 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 11 รูปที่ 8.4 การเชื่อมโยงโดยระบุเป้าหมายเฟรม จากภาพเป็นการแบ่งหน้าต่างโปรแกรมเว็บบราว์เซอร์ออกเป็น 3 ส่วน คือ เฟรมส่วนบนที่ใช้แสดง ชื่อเว็บไซต์ โดยกำหนดชื่อ topFrame เฟรมทางช้ายเป็นรายการเมนู กำหนดชื่อ leftFrame และเฟรม ทางขวาเป็นส่วนแสดงผลรายละเอียดต่าง ๆ กำหนดชื่อ mainFrame เฟรมที่อยู่ทางซ้ายแสดงผลไฟล์ menu.html ซึ่งจะกำหนดการเชื่อมโยงเพื่อแสดงไฟล์เว็บเพจต่าง ๆ ที่มีการกำหนดแอททริบิวท์ target='mainFrame” ดังนั้นเมื่อคลิกที่จุดเชื่อมโยงในแต่ละรายการเมนูแล้วจะแสดงผลไฟล์ในเฟรมชื่อ mainframe ซึ่งเป็นเฟรมที่อยู่ทางขวายกเว้นเมนูหน้าหลักที่ใช้เชื่อมโยงหน้าเริ่มต้นเดิมได้กำหนดเป็น <target=“parent”>
12 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 12 สรุปสาระสำคัญ การใช้เฟรมเป็นการแบ่งหน้าจอของโปรแกรมเว็บเบราว์เชอร์ออกเป็นส่วนย่อย ทำให้สามารถใช้พื้นที่ ทั้งหมดบนหน้าจอใด้อย่างประสิทธิภาพ เช่นกำหนดให้หน้าจอส่วนบนสุดแสดงชื่อและโลโก้ของหน่วยงานหรือ บริษัท หน้าจอส่วนทางซ้ายแสดงเมนูเพื่อเปิดหรือเชื่อมโยงเว็บเพจอื่น ๆ และหน้าจอส่วนกลางสำหรับแสดง เนื้อหา 1. การแบ่งหน้าเว็บเพจออกเป็นเฟรม สามารถทำให้ด้วยคำสั่ง <frameset> ซึ่งจะต้องใช้ควบคู่กับ คำสั่ง <frame> เสมอซึ่งสามารถกำหนดได้ดังนี้ <frameset> <frame> </frameset> 2. การแทรกเฟรมซ้อนเฟรมการแทรกเฟรมภายในเฟรมหลัก สามารถกำหนดให้เฟรมมีเฟรมย่อย ขึ้นมาด้วยการเพิ่มคำสั่งแท็ก <frameset> เพื่อเพิ่มการแบ่งเฟรมอีก ซึ่งมีรูปแบบดังนี้ <frameset rows=“ขนาดของเฟรม”> <frame src=“ไฟล์ หรือสิ่งที่ต้องการแสดง”> <frameset cols=“ขนาดของเฟรม”> <frame src=“ไฟล์ หรือสิ่งที่ต้องการแสดง”> <frame src=ไฟล์ หรือสิ่งที่ต้องการแสดง”> </frameset> </frameset> 3. การกำหนดรายละเอียดของการแบ่งเฟรมสามารถกำหนดได้ด้วยการใช้แอททริบิวท์ border ภายในคำสั่ง <frameset> โดยมีหน่วยเป็นพิกเซล <frameset border=“ขนาดของเส้นแบ่งเฟรม” frameset frameborder=“no” bordercolor=“ชื่อของสี หรือ #สีรหัสเลขฐานสิบหก” framespacing = “กำหนดความห่างระหว่างเฟรม”> <frame src=“ชื่อไฟล์เว็บเพจ”> </frameset>
13 การสร้างเว็บไซต์ รหัสวิชา 20204-2008 13 4. การกำหนดรายละเอียดของแต่ละเฟรม (1) การป้องกันการปรับขนาดของเฟรม <frameset> <frame src="ชื่อไฟล์เว็บเพจ" noresize> </frameset> (2) การกำหนดการแสดงแถบเลื่อน (Scrollbar) สามารถทำได้ด้วยการกำหนดแอททริบิวท์ scrolling ภายในคำสั่ง <fame> โดยสามารถกำหนดค่าตามต้องการ ดังนี้ yes กำหนดให้แสดงแถบเลื่อน no กำหนดให้ไม่แสดงแถบเลื่อน auto กำหนดให้หากมีข้อมูลมากกว่าพื้นที่ที่แสดงผลให้ แสดงแถบเลื่อนแต่หากข้อมูลน้อยกว่า พื้นที่แสดงผลไม่ต้องแสดงแถบเลื่อน 5. การเชื่อมโยงและแสดงผลในเฟรม (1) การกำหนดชื่อเฟรม <frameset> <frame name="ชื่อของเฟรม" src="ชื่อไฟล์เว็บเพจ"> </frameset> (2) การเชื่อมโยงโดยระบุเป้าหมายเฟรม <body> <a href="ชื่อเอกสารเว็บเพจ" target="เป้าหมายเฟรมที่ต้องการแสดงผล'"> /body> 6. การแทรกเฟรมภายในเอกสารเว็บเพจ <body> <ifframe src="ชื่อไฟล์ HTML หรือชื่อเว็บไชต์">... </iframe> </body>