ตกแต่งเฟรม

frame ซ้อนเฟรม

การแบ่งเฟรมนี้ มีเทคนิคการตกแต่งมากมายเลย
สมัยก่อนผมตกแต่ง เว็บโดยใช้ iframe แต่จะมีปัญหา
ในการที่บางคนไม่สามารถ เห็น iframe ได้

ตัวอย่าง iframe

code iframe

<iframe src="base.htm" width=500 height=150></iframe>

วิธีใช้ iframe ง่ายกว่า การใช้เฟรมธรรมดา
แต่เบราเซอร์บางรุ่นเก่าๆ จะไม่เห็น iframe ด้านบนนี้ครับ
ผมเลยหันมาใช้ frame ธรรมดาซึ่งจะได้ผลแน่นอนกว่า

การใช้เฟรมนี่มีประโยชน์มาก
เพิ่มความสะดวกในการลิงค์ เพราะว่าเฟรมเมนูจะวางอยู่ที่เดิมเสมอ
ไม่ต้องทำลิงค์รายการไว้ หลายๆ หน้า ซึ่งค่อนข้างเสียเวลา

ในหน้าก่อน ที่ผมอธิบายเรื่องเฟรม โดยยกตัวอย่างเว็บ dragon html
อาจจะดูสับสนอยู่บ้าง เพราะว่า ไม่มี source code ตัวอย่างประกอบ
สำหรับในครั้งนี้ผมจะอธิบายตามลำดับ จะได้เข้าใจได้ง่ายขึ้นครับ

มาดูตัวอย่างนี้อีกสักทีละกันครับ

สมมุติผมได้สร้างหน้า doremon.htm ไว้มี code ดังนี้

doremon.htm - Notepad
<HTML> <HEAD> <TITLE>doremon.htm</TITLE> </HEAD> <BODY BGCOLOR=white> <a href="base.htm" target=right_frame>ลิงค์แบบที่1</a> <a href="base.htm" target=_self>ลิงค์แบบที่2</a> <a href="base.htm" target=_top>ลิงค์แบบที่3</a> </BODY> </HTML> doremon.htm

และผมได้สร้างหน้า nobita.htm ไว้มี code ดังนี้

nobita.htm - Notepad
<HTML> <HEAD> <TITLE>nobita.htm</TITLE> </HEAD> <BODY BGCOLOR=yellow> <div align=center> nobita.htm </div> </BODY> </HTML> nobita.htm

ผมต้องการจะทำให้หน้าทั้งสองอยู่ภายในหน้าต่างเดียวกัน
ผมก็จะต้องสร้าง ไฟล์ html มาอีกไฟล์หนึ่ง
โดยเขียนแท็ก เฟรมลงไปมี code ดังนี้

doremonnobita.htm - Notepad
<HTML> <HEAD> <TITLE> doremon.htm and nobita.htm</TITLE> </HEAD> <FRAMESET COLS="150,*"> <FRAME SRC=doremon.htm NAME=menu_frame> <FRAME SRC=nobita.htm NAME=right_frame> </FRAMESET> </HTML> doremonnobita.htm

ลองคลิ้กที่ link แต่อันดูนะครับว่า แต่ละหน้าจะแสดงผลเป็นอย่างไร?

การสร้างเฟรม ที่ซับซ้อนขึ้น
ในการสร้างสร้างเฟรมด้วย รูปแบบที่ซับซ้อน
ผมจะนำไฟล์มาวางในเฟรม จำนวน 3 ไฟล์ ดังต่อไปนี้ครับ

PO1.htm - Notepad
<HTML> <head> <title>P01.htm</title> </head> <BODY BGCOLOR=SILVER> here is P01.htm<br> <a href="P03.htm" target=f1> target=<b>f1</b> </a> <a href="P03.htm" target=f2> target=<b>f2</b> </a> <a href="P03.htm" target=f3> target=<b>f3</b> </a> <a href="P03.htm" target=f4> target=<b>f4</b> </a> <a href="P03.htm" target=f5> target=<b>f5</b> </a> </BODY> </HTML> P01.htm

PO2.htm - Notepad
<HTML> <head> <title>P02.htm</title> </head> <BODY BGCOLOR=GREEN> here is P02.htm </BODY> </HTML> P02.htm

PO3.htm - Notepad
<HTML> <head> <title>P03.htm</title> </head> <BODY BGCOLOR=AQUA> here is P03.htm </BODY> </HTML> P03.htm

แล้วก็สร้าง ไฟล์ html อีกไฟล์นึงที่เป็นหน้า ที่ผนวกเอาหน้าอื่นๆ มาไว้ในเฟรม
โดยจะสร้างเป็นแบบ ROWS หรือแบบ COLS ก็ได้ ดังนี้

เฟรมหลายเฟรมแบบ ROWS

allpage1.htm - Notepad
<HTML> <FRAMESET ROWS="20%,20%,20%,20%,20%"> <FRAME SRC="P01.htm" NAME=f1> <FRAME SRC="P02.htm" NAME=f2> <FRAME SRC="P02.htm" NAME=f3> <FRAME SRC="P02.htm" NAME=f4> <FRAME SRC="P02.htm" NAME=f5> </FRAMESET> </HTML> allpage1.htm

แบบ COLS

allpage2.htm - Notepad
<HTML> <FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="P01.htm" NAME=f1> <FRAME SRC="P02.htm" NAME=f2> <FRAME SRC="P02.htm" NAME=f3> <FRAME SRC="P02.htm" NAME=f4> <FRAME SRC="P02.htm" NAME=f5> </FRAMESET> </HTML> allpage2.htm

สองแบบนี้เป็นแบบธรรมดา เพียงแค่แบ่งเป็น 5 เฟรม
ลองคลิ้กดู จะเห็นหน้าต่างแบ่งเป็น 5 เฟรมครับ

มาถึงการใช้เฟรมแบบซับซ้อนจริงๆ
เป็นอย่างนี้ครับ


<html>

<frameset cols="150,*">
   <frame src="P01.htm" name=f1>
      <frameset  rows="25%,25%,25%,25%">
         <frame  src="P02.htm"  name=f2>
         <frame  src="P02.htm"  name=f3>
         <frame  src="P02.htm"  name=f4>
         <frame  src="P02.htm"  name=f5>
      </frameset>
</frameset>

</html>

ไฟล์ด้านล่างนี้ เทียบกับด้านบน จะแบ่งเฟรมเพิ่มเป็น 3 คอลัมภ์


<html>

<frameset  cols="150,160,*">
   <frame  src="P01.htm"  name=f1>
   <frame  src="P02.htm"  name=f2>
      <frameset  rows="25%,25%,*">
         <frame  src="P02.htm"  name=f3>
         <frame  src="P02.htm"  name=f4>
         <frame  src="P02.htm"  name=f5>
      </frameset>
</frameset>

</html>

เฟรมสามารถซ้อนกันได้หลายรูปแบบมาก


<html>

<frameset  cols="150,*">
      <frameset  rows="250,*">
         <frame  src="P01.htm"  name=f1>
         <frame  src="P02.htm"  name=f2>
      </frameset>
      <frameset  rows="25%,25%,*">
         <frame  src="P02.htm"  name=f3>
         <frame  src="P02.htm"  name=f4>
         <frame  src="P02.htm"  name=f5>
      </frameset>
</frameset>

</html>

การสร้างเฟรม ความจริงสามารถซ้อนได้อีกหลายชั้น
ทำให้เราสามารถสร้าง เฟรมได้หลายแบบ มากมายเลย
ถึงเวลาที่คุณจะออกแบบ เฟรมของคุณแล้วล่ะ ^^

attribute ที่ใช้กับการสร้างเฟรม ( เพิ่มเติม )
attribute ของ <frameset></frameset>	attribute ของ <frame>
border ใช้กำหนดขนาดขอบ border=1 หรือ border=5 bordercolor กำหนดสีขอบ bordercolor=yellow frameborder ให้มีหรือไม่มีขอบ frameborder=yes หรือ frameborder=no	bordercolor สีของขอบ bordercolor=red frameborder ขนาดของขอบ frameborder=8 marginheight ระยะห่างจากขอบตามแนวดิ่ง marginheight=3 marginwidth ระยะห่างจากขอบตามแนวนอน marginwidth=5 noresize ตั้งให้ปรับขนาดเฟรมไม่ได้ noresize scrolling ตั้งให้มีแถบเลื่อนหรือไม่มี scrolling=yes หรือ scrolling=no