การแบ่งจอภาพเป็นส่วน ๆ

ข่าวสารทางเว็บ : สมัครสมาชิกกับเราวันนี้อาจเจอสิ่งดีดีที่คุณคาดไม่ถึง!! >> สมัครสมาชิก

it4x.com > Website html,php,cms > ภาษา HTML > การแบ่งจอภาพเป็นส่วน ๆ

หน้า: [1] ลงล่าง

	ผู้เขียน	หัวข้อ: การแบ่งจอภาพเป็นส่วน ๆ (อ่าน 1616 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

Moshi

พนักงาน it4x
Pro - A

Thank : 26

ออฟไลน์

กระทู้: 13685

การแบ่งจอภาพเป็นส่วน ๆ

« เมื่อ: สิงหาคม 10, 2009, 01:23:44 pm »

การแบ่งจอภาพเป็นส่วน ๆ

การแบ่งจอภาพเป็นส่วน ๆ

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

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

ลักษณะและข้อจำกัดของเฟรม
เฟรม ส่วนมาก มีลักษณะ เป็นรูป สี่เหลี่ยม อย่างเดียว เราไม่ สามารถ สร้างเฟรม เป็นรูป สามเหลี่ยมได้ วงกลม ห้าเหลี่ยม หกเหลี่ยม ได้ตาม ใจชอบ ส่วนเฟรมที่ ซับซ้อน เกินไป เราก็อาจจะสร้างไม่ได้

ระบบโครงสร้าง
คำสั่ง แรกที่เรา ต้องใช้ ในการสร้าง เฟรม ก็คือ <FRAMSET> คำสั่งนี้เป็นคำสั่ง ที่ใช้ใน การกำหนด ขนาดและ รูปแบบของเฟรม ที่คุณ ต้องการ คำสั่ง <FRAMSET> เป็นคำสั่ง ที่มาแทน คำสั่ง <BODY> ในไฟล์ HTML โดยมีโครงสร้างดังนี้
<HTML>
<HEAD>
<TITLE>.....</TITLE>
</HEAD>
<FRAMESET>
.
.
.
</FRAMESET>
</HTML>
คำสั่ง<FRAMESET> มี คำสั่ง 3 คำสั่งย่อย คือ
1. <FRAME SRC= ชื่อไฟล์ที่ต้องการแสดง>เป็นการกำหนด ค่าต่าง ๆ ที่จะแสดงในพื้นที่จอภาพ ไม่ว่าจะเป็น .htm, .html หรือ .gif, .jpg ก็ได้ทั้งหมด
2. <NOFRAME> คำสั่งนี้จะถูกแสดง เมื่อถูกเรียกใช้โดยเว็บเพจรุ่นเก่า ที่แสดงผลแบบเฟรมไม่ได้
3. <FRAMESET> ใช้ในการซ้อนเฟรม มีรูปแบบคือ

• <FRAMESET ROWS="pixels,%,*"> หรือ
• <FRAMESET COLS="pixels,%,*"> หรือ
• <FRAMESET ROWS="pixels,%,*" COLS="pixels,%,*">

ตัวอย่าง
<HTML>
<HEAD>
<TITLE>Frame Set</TITLE>
</HEAD>
<FRAMESET COLS=50%,*">
<FRAME SRC="TABLE1.HTM">
<FRAME SRC="TABLE2.HTM">
</FRAMESET>
<NOFRAME>
<a href=http:://www.bcoms.net>HOME PAGE</a>
</NOFRAME>
</HTML>

การกำหนดขนาดขอบหรือพื้นที่ว่างรอบ ๆ เฟรม
รูปแบบ <FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50">
เราใช้คำสั่ง MARGINWIDTH="pixels" และ MARGINHEIGHT="pixels" แทรกเข้าไปในคำสั่ง <FRAME> เช่น

<HTML>
<HEAD>
<TITLE>My First Frame </TITLE>
</HEAD>
<FRAMESET COLS=*,*">
<FRAME SRC="picture.gif">
<FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50">
</FRAMESET>
</HTML>

การกำหนดค่าตัวเลื่อน
รูปแบบ <FRAME SCROLLING="no/yes/auto">
โดยปกติแล้ว ตัวเลื่อนทางด้านขวาหรือด้านล่าง ของเฟรมจะปรากฎขึ้นมาเอง โดยอัตโนมัติ โดยดูจากขนาด ของพื้นที่ว่า แสดงผลภายในเฟรมนั้น ๆ พอหรือไม่ ค่าปกติ"auto" ถ้าไม่ต้อง การให้ ตัวเลื่อน ปรากฎ ขึ้นมา กำหนดเป็น "no" เรานำลูกเล่นนี้มาล็อคเมนู หรือเฟรมไม่ให้ เคลื่อนไหว ไปมาโดยตัวเลื่อนได้

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

การตั้งชื่อให้เฟรม
รูปแบบ <FRAME NAME=ชื่อเฟรม">
เราสามารถตั้งชื่อ ได้ตามใจชอบ เพื่อประโยชน์ ในการเล่นตัวเชื่อม เราสามารถพบได้ตาม ไซต์ต่าง ๆ ทั่วไป ที่ใช้เฟรมในการแบ่ง หน้าจอระหว่าง เมนูหรือตัวเลือก กับเนื้อหา เช่น เฟรมด้านซ้าย เป็นเมนู ด้านขวาเป็น ตัวแสดงข้อมูล โดยข้อมูลจะเปลี่ยนเฉพาะด้านขวาเท่านั้น เช่น

<HTML>
<HEAD>
<TITLE>My First Frame </TITLE>
</HEAD>
<FRAMESET COLS=20,*">
<FRAME SRC="menu.htm">
<FRAME SRC="result.htm" NAME="show">
</FRAMESET>
</HTML>
จากโค้ดด้านบน เราได้แบ่งออกเป็น 2 ส่วน คือ ส่วนแรกเป็นเมนูด้านซ้าย แสดงผลโดยไฟล์ "menu.htm" อีกส่วนหนึ่งแสดงผลลัพธ์ โดยไฟล์ "result.htm" พร้อม กับตั้งชื่อเฟรมที่ 2 ว่า "show"
ในไฟล์ "menu.htm" นั้นต้องใช้คำสั่งต่าง ๆ ดังนี้
<HTML>
<HEAD>
<TITLE>Click One Please </TITLE>
</HEAD>
<BODY>
<H3>Click One Please</H3> < A HREF=NO1.HTM TARGET="SHOW">1</A>
< A HREF=NO2.HTM TARGET="SHOW">2</A>
< A HREF=NO3.HTM TARGET="SHOW">3</A>
< A HREF=NO4.HTM TARGET="SHOW">4</A>
< A HREF=NO5.HTM TARGET="SHOW">5</A>
< A HREF=NO6.HTM TARGET="SHOW">6</A>
< A HREF=NO7.HTM TARGET="SHOW">7</A>
< A HREF=NO8.HTM TARGET="SHOW">8</A>
< A HREF=NO9.HTM TARGET="SHOW">9</A>
< A HREF=NO10.HTM TARGET="SHOW">10</A>
</BODY>
</HTML>
ตัวเชื่อมต่าง ๆ จะทำการเชื่อมไปยังไฟล์ ปลายทาง เพื่อจะแสดงผผลไฟล์นั้น ๆ ภายในเฟรมที่ 2 ที่เป็นเช่นนี้เพราะว่า มีการใส่คำสั่ง TARGET="SHOW" เข้าไปในคำสั่ง <A HREF> ด้วยเพื่อกำหนด ปลายทาง แสดงผล ให้กับไฟล์ HTML

การลบกรอบของเฟรม
รูปแบบ <FRAMESET FRAMEBORDER=yes-no">
ปกติถ้าเรา ใช้คำสั่ง <FRAMESET> ตรงส่วนต่อระหว่างเฟรม จะมีลักษณะของ <BORDER> ถ้าเราไม่ต้องการสามารถกำหนดได้ด้วยคำสั่งข้างต้น

Credit : http://www.bcoms.net/html/12.asp