Credit : ธุลีดาว
การเขียนเว็บด้วย frame
อ้างอิงจาก
http://www.w3.org/TR/html401/present/frames.html
การเขียนเว็บด้วย frame คือการแบ่งหน้าเว็บเป็นส่วนๆ โดยที่แต่ละส่วนคือหน้าเว็บที่เป็นอิสระต่อกัน
ข้อดีของการใช้เฟรมคือ ลดการเขียนคำสั่งซ้ำๆ กันในแต่ละหน้า
เช่น มีหน้าเว็บที่จะแสดงผล 50 หน้า หากมีเมนูเพื่อเข้าถึงในแต่ละหน้า โดยที่ทุกหน้ามีเมนูหน้าตาเหมือนกัน
ถ้าเขียนหน้าเว็บปกติ ก็จะต้องทำเมนูซ้ำกัน 50 หน้า
และถ้ามีการแก้ไขเมนู ก็ต้องมาแก้ทั้ง 50 หน้า
แต่ถ้าเราใช้เฟรม ก็เขียนเมนูเพียงแค่หน้าเดียว เวลาแก้ก็แก้แค่หน้าเดียว
ลองดูตัวอย่างเฟรม
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
จะได้หน้าตาเว็บประมาณนี้
โค๊ด:
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
นั่นก็คือ หน้าที่ใช้สำหรับเรียกหน้าเว็บอื่นๆ จะเป็นหน้าที่กำหนดค่าเฟรม สำหรับแสดงผล
เช่น มีหน้า index.htm เป็นหน้าเฟรมสำหรับเรียกหน้าอื่นมาแสดง
และมีหน้าเนื้อหาคือ menu.htm กับ page-01.htm
ก่อนอื่น หน้า index.htm ก็ต้องสร้างเฟรมขึ้นมาก่อน ด้วยคำสั่ง
โค๊ด:
<FRAMESET></FRAMESET>
เราต้องออกแบบเสียก่อน ว่าจะให้มีการแบ่งหน้าแบบไหน? แนวตั้ง หรือแนวนอน
ถ้าแบ่งหน้าตามแนวนอน ก็จะใช้คำสั่ง
โค๊ด:
<FRAMESET cols="ความกว้างของคอลัมน์ 1, ความกว้างของคอลัมน์ 2, ความกว้างของคอลัมน์ 3, ..."></FRAMESET>
โดยที่ความกว้างนั้นสามารถกำหนดได้ 2 แบบคือ
กำหนดเป็นค่า pixel หรือ กำหนดเป็นเปอร์เซนต์
ถ้ากำหนดเป็น pixel ก็ใส่ค่าตัวเลข
ถ้ากำหนดเป็นเปอร์เซนต์ ก็ใส่ค่าตัวเลข ตามด้วยเครื่องหมาย %
คอลัมน์ จะมีกี่คอลัมน์ก็ได้ (แต่ถ้ามีมากจะงง แนะนำแค่ 2 ก็พอ)
เช่น ถ้าเราต้องการให้มี 2 คอลัมน์ โดยที่คอลัมน์ด้านซ้าย มีความกว้าง 250 ส่วนคอลัมน์ด้านขวา ต้องการให้เป็นพื้นที่ที่เหลือทั้งหมด
โค๊ด:
<FRAMESET cols="250,*"></FRAMESET>
แต่ถ้าต้องการแบ่งตามแนวตั้ง จะใช้รูปแบบ
โค๊ด:
<FRAMESET rows="ความสูงของแถว 1, ความสูงของแถว 2, ความสูงของแถว 3, ..."></FRAMESET>
การกำหนดค่าก็เหมือนกับการแบ่งตามแนวนอนและถ้าต้องการแบ่งแบบซับซ้อน ก็สามารถใส่ได้ทั้ง cols กับ rows
โค๊ด:
<FRAMESET cols="xx,yy,zz" rows="aa,bb"></FRAMESET>
และสามารถทำเฟรมซ้อนเฟรมได้อีกด้วย เช่นตัวอย่างที่เขียนไว้ด้านบน
ไม่มีความคิดเห็น:
แสดงความคิดเห็น