Frame

การแบ่งส่วนต่างๆของจอภาพ เราเรียกว่าแต่ละส่วนนั้นว่า "Frame" ซึ่งการใช้Frame นั้นจะมีลักษณะการ เรียกไฟล์ HTML มาทีละหลายๆไฟล์ ทำให้สะดวกต่อการเยี่ยมชม ทำให้เราสามารถใช้พื้นที่ของหน้าจอได้อย่างคุ้มค่า ประหยัดเวลาในการเรียกใช้งาน คุณสมบัตินี้ มีใน Internet Explorer 3.0 และ Netscpae 2.0 ขึ้นไป

โครงสร้างของคำสั่ง
ในการที่จะสร้างเฟรมมาซักเฟรม มีคำสั่งที่เกี่ยวข้องที่ต้องรู้คือคำสั่ง <Frameset>...</Frameset> และ คำสั่ง <Frame>..</Frame>

โครงสร้างของ Frameset

<HTML>
<HEAD>
<TITLE>FRAME</TITLE>
</HEAD>
<FRAMESET>
...
...
...
</FRAMESET>
</HTML>

การแบ่งพื้นที่ในแนวนอน Rows=n,n%

ใช้แอตทริบิวต์ Rows=n,n% โดยที่ n คือค่าของความสูงของเฟรม เราสามารถกำหนดความสูงนี้ได้ทั้งพิกเซล และเป็นเปอร์เซนต์ได้ เช่น
<Frameset Rows="30%,80%"> หมายถึงการแบ่งพื้นที่ให้ส่วนบนมีพื้นที่ 30% ของจอภาพ และให้ส่วนล่างมีพื้นที่ 80% ของจอภาพ ทั้งนี้ผลรวมของเปอร์เซนต์ทั้งหมดต้องไม่เกิน 100% หากไม่ระบุเปอร์เซนต์ลงไปจะเป็นการกำหนดขนาดของพื้นที่มีหน่วยเป็นพิกเซล เราสามารถแบ่งพื้นที่ในแนวนอนได้มากกว่า 2 เฟรม ดังตัวอย่างนี้
<Frameset Rows="30,60%,*"> หมายถึงการแบ่งพื้นที่ให้ส่วนบนมีพื้นที่ 30 พิกเซล พื้นที่ในส่วนกลางมีขนาด 60 เปอร์เซนต์ และส่วนสุดท้ายจะเป็นพื้นที่ที่เหลือทั้งหมด

การแบ่งพื้นที่ในแนวตั้ง Cols-n,n%
ใช้แอตทริบิวต์ Cols=n,n% โดยที่ n คือค่าของความกว้างของเฟรม เราสามารถกำหนดความกว้างนี้ได้ทั้งพิกเซล และเป็นเปอร์เซนต์ได้ สำหรับการใช้งานนั้น มีรูปแบบคล้ายๆกับ แอตทริบิวต์ Rows

NOTE & TIP
เราสามารถใช้ * แทนจำนวนพื้นที่ที่เหลือทั้งหมดได้ เช่น <Frameset Cols="50,*,70%>

คำสั่ง Frame
คำสั่ง Frameset นั่นจะมีคำสั่งย่อยอยู่อีกคำสั่งหนึ่งคือ Frame นั่นเอง คำสั่ง Frame นั้น ใช้สำหรับกำหนดว่าข้อมูลที่จะแสดงในเฟรมด้านซ้ายหรือขวาจะใช้ข้อมูลจากที่ใด เราใช้แอตทริบิวต์ <Frame src="URL">
นอกจากนี้เรายังสามารถกำหนดชื่อให้กับเฟรมโดยการใช้แอตทริบิวต์ NAME ดังนี้ <Frame Src="URL" Name="Frame_Left"> เพื่อที่จะเข้าใจมากกว่านี้ ดูที่ตัวอย่างครับ

ตัวอย่าง

Source
<Html>
<head>
<title>Frame Fun Fun ;-)</title>
</head>
<FrameSet Cols="50%,50%">
<Frame src="http://www.microsoft.com" Name=Frame1>
<Frame src="http://www.netscape.com" Name=Frame2>
</Frameset>
</Html>

หมายความ เป็นการแบ่งเฟรมแบบแนวตั้ง (Column) โดยเฟรมด้านซ้ายมีชื่อว่า Frame1และด้านขวามีชื่อว่า Frame2 โดยทั้งสองด้านมีพื้นที่อย่างละ ครึ่งหนึ่งของจอภาพ(50%) ในเฟรมด้านซ้าย บราวเซอร์จะแสดงโฮมเพจของ Microsoft และในเฟรมด้านขวา บราวเซอร์จะแสดงโฮมเพจของ Netscape
เราสามารถใช้เฟรมซ้อนเฟรมได้เหมือนกับ <Table> ดังตัวอย่าง

Source
<Frameset Rows="30,*">
<Frame src="Banner.jpg" MaginHeight=0 MarginWidth=0 Name="Banner" Scrolling=NO noesize>
<Frameset Cols="50%,*>
<Frame src="Menu.htm" Name="Menu">
<Frame src="Data.htm" Name="Data">
</Frameset>
</Frameset>
<Noframe>
บราวเซอร์ท่านไม่สนับสนุนแทก Frameset กรุณาDownload บราว์เซอร์รุ่นล่าสุดมาใช้งาน
</Noframe>
View



Banner.jpg




Menu.htm



Data.htm


การกำหนดคุณสมบัติการเลือนจอภาพ (Scrolling)
หากต้องการกำหนดแถบ Scrolling ให้ใช้ แอตทริบิวต์ Scrolling=yes | no | auto ( ค่า Default คือ yes) สำหรับค่า auto นั้น หากเอกสาร HTML มีขนาดเกิน 1 หน้าจอ Scrolling จะถูกกำหนดเป็น yes ทันที
ตัวอย่างการใช้ : <Frame src="URL" Scrolling=no>

การกำหนดขนาดความกว้างของจอภาพ (Resize-NoResize)
หากต้องการให้ใช้ได้ เราใช้แอตทริบิวต์ Resize (ซึ่งเป็นค่า Default) หากต้องการยกเลิกใช้ Noresize
ตัวอย่างการใช้ : <Frame src="URL" NoreSize>

การปรับขนาดความกว้างและความสูงของระยะขอบ (Margin)
การปรับขนาดความสูงของระยะขอบเราใช้แอตทริบิวต์ MarginHeight=n โดยที่ n เป็นค่าตัวเลข หากตัวเลขมาก ระยะห่างจากขอบก็ยิ่งมาก
และหากต้องการปรับขนาดความกว้างของระยะขอบเราใช้แอคทริบิวต์ MargintWidth=n โดยที่ n เป็นค่าตัวเลข หากตัวเลขมาก ระยะห่างจากขอบก็ยิ่งมาก
ตัวอย่างการใช้ : <Frame src="URL" MarginHeight=10 MarginWidth=15>

คำสั่ง NOFRAME ใช้กับบราวเซอร์ที่ไม่สนับสนุนแทก Frame ซึ่งมักเป็นบราวเซอร์รุ่นเก่า สำหรับแทก NOframe มีวิธีการใช้ดังนี้
<Noframe>
...
...
...
</Noframe>
ตัวอย่างการใช้ : <Noframe> Your Browser NOT Support FRAMESET Tag! </Noframe>