การแบ่งหน้าจอโดยใช้เฟรม

การใช้เฟรมเป็นการแบ่งหน้าจอของบราวเซอร์ออกเป็นส่วนย่อย ๆ ทำให้สามารถใช้พื้นที่ทั้งหมดของหน้าจอได้เต็มประสิทธิภาพ

การแบ่งหน้าจอโดยใช้เฟรม

วิธีการสร้างเฟรมนั้นเริ่มต้นจากการแบ่งโครงสร้างส่วนต่าง ๆ ในหน้าเว็บเพจด้วยคำสั่งจากนั้นจึงกำหนดชื่อเว็บเพจที่ต้องการให้แสดงเข้าไปในเฟรม

เฟรม 1

เฟรม 2

เฟรม 3

เฟรม 4

เฟรม 5

โครงสร้างของเว็บเพจที่เราแบ่งส่วนต่าง ๆ

แบ่งโครงสร้างในเว็บเพจ <frameset>

          ใช้กำหนดลักษณะของเฟรมบนหน้าจอว่าจะแบ่งแต่ละส่วนจเป็นแนวตั้ง (cols) หรือแนวนอน (rows) โดยใช้รูปแบบคำสั่งดังนี้

รูปแบบของแท็ก HTML และ XHTML             
<frameset cols/rows=”ส่วน1% ,ส่วน2%”>
<frame name=” ชื่อเฟรมที่  1″ src=”ชื่อไฟล์ html ที่แสดง” />
<frame name=” ชื่อเฟรมที่  2″ src=”ชื่อไฟล์ html ที่แสดง” />

</frameset>

ค่าที่กำหนดให้ใช้     
กำหนดขนาดของส่วนเป็นพิกเซล หรือเป็นเปอร์เซ็นต์
อาจใช้เครื่องหมาย * มาช่วย ซึ่งหมายถึงค่าที่เหลือทั้งหมด

ตัวอย่างการแบ่งโครงสร้างในแนวนอน

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,40%,*”>

<frame /><frame /><frame />

</frameset>

</html>

ผลลัพธ์ที่ได้

1

ตัวอย่างการแบ่งโครงสร้างในแนวตั้ง

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset cols=”30%,40%,*”>

<frame /><frame /><frame />

</frameset>

</html>

ผลลัพธ์ที่ได้

2

ตัวอย่างการแบ่งโครงสร้างทั้ง 2 แนว

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*” cols=”30%,*”>

<frame /><frame />

<frame /><frame />

</frameset>

</html>

ผลลัพธ์ที่ได้

3

การสร้างเฟรมซ้อนเฟรม

          เราสามารถสร้างเฟรมซ้อนเฟรมได้ ซึ่งจะได้รูปแบบการแบ่งอีกหลายรูปแบบ

ตัวอย่างการสร้างเฟรมซ้อนเฟรม

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*”>

<frame />

<frameset cols=”45%,*”>

<frame />

<frame />

</frameset>

</frameset>

</html>

ผลลัพธ์ที่ได้

4

กำหนดไฟล์ html ที่ใช้แต่ละช่องเฟรม <frame>

ในแต่ละช่องเฟรม คือ 1 เว็บเพจ หมายความว่าถ้าเราแบ่งบราวเซอร์ออกเป็น 2 เฟรม เราสามารถดูเว็บเพจ 2 หน้าได้พร้อมกัน

รูปแบบของแท็ก HTML และ XHTML             
<frame src=”ชื่อไฟล์ html” />

ตัวอย่างการกำหนดไฟล์ html ที่ใช้แต่ละช่องเฟรม

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*”>

<frame src=”top.html” />

<frameset cols=”45%,*”>

<frame src=”left.html” />

<frame src=”main.html” />

</frameset>

</frameset>

</html>

ผลลัพธ์ที่ได้

5

เมื่อผู้ใช้เปิดดูเฟรมไม่ได้ <noframe>

          ในกรณีที่มีผู้ใช้บางคนใช้บราวเซอร์รุ่นเก่าไม่สามารถแสดงเฟรมได้ เราสามารถกำหนดข้อความแสดงให้ผู้ใช้ทราบ โดยใช้แท็ก noframe ดังต่อไปนี้

ตัวอย่าง

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*”>

<frame src=”top.html” />

<frameset cols=”45%,*”>

<frame src=”left.html” />

<frame src=”main.html” />

</frameset>

<noframe>

<body bgcolor=”ffffff”>

         บราวเซอร์ท่านไม่สามารถแสดงผลเฟรมได้

         …

         …

</body>

</noframe>

</frameset>

</html>

การกำหนดลักษณะของกรอบเฟรม

เราสามารถกำหนดลักษณะของกรอบ เช่น การให้แสดงกรอบหรือไม่แสดง หรือกำหนดความหนาของกรอบ มีตัวเลือกดังนี้

border           กำหนดความหนาให้กับกรอบของเฟรม

bordercolor   กำหนดสีให้กับกรอบของเฟรม

frameborder  เปิด/ปิดการแสดงเส้นกรอบ

framespacing  กำหนดความห่างระหว่างเฟรม

รูปแบบของแท็ก HTML และ XHTML
border=”ความหนา”

bordercolor=”สี”

frameborder=”สถานะ”

framespacing=”ความห่าง”
ค่าที่กำหนดให้ใช้   

ค่าความหนาเส้นกรอบมีหน่วยเป็นพิกเซล

ค่าสีของเส้นกรอบ ระบุเป็นชื่อสีหรือรหัสเลขฐาน 16

ค่าสถานะเปิด/ปิดเส้นกรอบ ระบุเป็น 0/1 หรือระบุเป็น yes/no

ค่าความห่างของแต่ละเฟรมมีหน่วยเป็นพิกเซล

ตัวอย่างต่อไปนี้กำหนดความหนาของกรอบ และให้แสดงสีเขียว

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*” border=”2″ bordercolor=”green”

frameborder=”yes” framespacing=”5″>

<frame src=”top.html” />

<frameset cols=”45%,*”>

<frame src=”left.html” />

<frame src=”main.html” />

</frameset>

</frameset>

</html>

ผลลัพธ์ที่ได้

6

การกำหนดช่องว่างระหว่างเว็บเพจและเฟรม

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

marginwidth             กำหนดช่องว่างทางด้านซ้ายและด้านขวา

marginheight            กำหนดช่องว่างด้านบนและด้านล่าง

รูปแบบของแท็ก

marginwidth=”ระยะห่าง”
marginheight=”ระยะห่าง”

ค่าที่กำหนดให้ใช้

ค่าระยะห่างเป็นพิกเซล

ตัวอย่างการใช้งาน

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*”>

<frame src=”top.html” marginwidth=”50″ />

<frameset cols=”45%,*”>

<frame src=”left.html” />

<frame src=”main.html” />

</frameset>

</frameset>

</html>

ผลลัพธ์ที่ได้

7

การกำหนดช่องว่างระหว่างเนื้อหากับเว็บเพจ

นอกจากระยะห่างระหว่างเฟรม ยังสามารถกำหนดระยะห่างเว็บเพจกับเนื้อหา ซึ่งแอตทริบิวต์มีดังนี้

bottonmargin           กำหนดช่องว่างทางด้านล่าง

leftmargin                กำหนดช่องว่างทางด้านซ้าย

rightmargin              กำหนดช่องว่างทางด้านขวา

topmargin                กำหนดช่องว่างทางด้านบน

ตัวอย่างการใช้งาน

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<body bgcolor=”pink” leftmargin=”10″ rightmargin=”10″ topmargin=”10″ bottommargin=”10″>

<b><h3><center>การแบ่งหน้าจอโดยใช้เฟรม</center></h3><b>

</body>

</html>

การใช้แถบเลื่อนในเฟรม

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

รูปแบบของแท็ก
<frame scrolling=”auto | no | yes”>

ค่าที่กำหนดให้ใช้ 

auto (ให้บราวเซอร์ตัดสินใจว่าควรมีแถบเลื่อนหรือไม่ ปกติไม่ใส่จะใช้ค่านี้), no (ไม่แสดงแถบเลื่อน), yes (แสดงแถบเลื่อนตลอด)

การใช้ลิงค์เปลี่ยนหน้าเว็บในเฟรม

          เมื่อเราแบ่งหน้าจอเฟรม การกำหนดลิงค์(Link) เพื่อเชื่อมต่อกับเว็บเพจหน้าอื่นจะต้องระบุเฟรมที่จะให้เว็บเพจไปนั้นเปิดแสดงด้วย

ขั้นที่ 1 กำหนดชื่อให้เฟรม

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

ตัวอย่าง

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<frameset rows=”30%,*”>

<frame src=”top.html” name=”top” />

<frameset cols=”45%,*”>

<frame src=”left.html” name=”left” />

<frame src=”main.html” name=”main” />

</frameset>

</frameset>

</html>

ขั้นที่ 2 สร้างลิงค์แบบระบุเฟรม

          การสร้างลิงค์เราจะใช้แท็ก a สร้างขึ้นมา และระบุแอตทริบิวต์ target เพื่อระบุเฟรมปลายทางที่จะใช้ในการเปิดลิงค์นั้น

ตัวอย่าง

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<body bgcolor=”pink”>

<b><center>Menu</center><b>

<ul>

<li><a href=”web1.html” target=”main”>web1</a></li>

<li><a href=”web2.html” target=”main”>web2</a></li>

</ul>

</body>

</html>

ขั้นที่ 3 ทดสอบการทำงาน

8

นอกจากนี้เราสามารถกำหนดค่าเฉพาะที่มีใน html ได้ ซึ่งค่าเฉพาะและความหมายมีดังต่อไปนี้

target=”_blank”          เปิดไฟล์ลิงค์ในหน้าต่างใหม่

target=”_parent”        เปิดไฟล์ลิงค์นั้นเต็มพื้นที่กรอบของเฟรมพ่อ

target=”_self”            เปิดไฟล์ลิงค์นั้นในพื้นที่เฟรมของตนเอง

target=”_top”            เปิดไฟล์ลิงค์นั้นเต็มพื้นที่กรอบบราวเซอร์

ตัวอย่างการใช้งาน

<!DOCTYPE html>

<html>

<title>การแบ่งหน้าจอโดยใช้เฟรม</title>

</head>

<body>

<ul>

<li><a href=”web1.html” target=”main”>web1</a></li>

<li><a href=”web2.html” target=”main”>web2</a></li>

</ul>

</body>

</html>

การแทรกเฟรมภายในเว็บเพจ

รูปแบบแท็ก     

นอกจากนี้ยังแอตทริบิวต์อื่น ๆ ที่น่าสนใจ

                   width            กำหนดความกว้างของ iframe

                   height           กำหนดความสูงของ iframe

                   align             จัดวางตำแหน่งของ iframe

ตัวอย่างการใช้งาน

 

<!DOCTYPE html>

<html>

<head>

<title>****เทศกาลดอกไม้บานจากทั่วประเทศไทย****</title>

</head>

<body background=”pic/background-31.jpg”  background-attcachment:fixed topmargin=”0″ bottommargin=”0″>

<table width=”1000″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>

<tr align=”center” bgcolor=”orange”><td colspan=”2″ height=”150″>

<img src=”pic/banner.jpg”></td></tr>

<tr><td width=”30%” bgcolor=”#F5F5F5″><center><b><u><font color=”blue”>เมนูหลัก</font></u></b></center>

<ul><li><a href=”tulip.html”>งานสวนทิวลิปนนท์</a></li>

<li><a href=”tanwa.html”>งานธันวาพฤกษชาติ ครั้งที่ 11</a></li>

<li><a href=”tulip.html”>ผู้จัดทำ</a></li></ul>

<hr color=”pink” width=”50%”>

<center><b><u><font color=”blue”>อ้างอิง</font></u></b></center>

<ul><li><a href=”http://inter.tourismthailand.org/th/see-do/events-festivals/flowers-gardens/”>ททท.</a></li&gt;

<li><a href=”http://www.royalparkrajapruek.org”>royalparkrajapruek</a></li></ul></td&gt;

<td bgcolor=”white”>http://main.html</center></td></tr>

<tr bgcolor=”#FFFF99″ align=”right”><td colspan=”2″>Design by piyadanai@swt.ac.th<br />

Contact : <a href=”mailto:piyadanai_w@hotmail.com”>Krutom</a></td></tr>

</table>

</body>

</html>

ผลลัพธ์ที่ได้

9

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: