แบ่งหน้าจอโดยใช้ Frame

แบ่งหน้าจอโดยใช้ Frame

 

กลับหน้าแรก

 

    ปกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame

    1.การแบ่ง frame แบบแนวตั้ง  

ตัวอย่าง

<html>

<frameset cols="25%,50%,25%">

  <frame src="frame_a.html">

  <frame src="frame_b.html">

  <frame src="frame_c.html">

</frameset>

</html>
    frame ในแนวตั้งซึ่งจะเปิดเว็บเพจถึง 3 ไฟล์ในหน้าเดียวกันโดยเราจะแบ่งขนาดของ frame เป็น % หรือเป็น (px) pixel ก็ได้

    รูปแบบของ frame แนวตั้ง


<html>

<frameset cols=ขนาดเฟรม1,ขนาดเฟรม2>

<frame src='เว็บเพจ1'>

<frame src='เว็บเพจ2'>

</frameset>

</html>


    2.การแบ่ง frame แบบแนวนอน

<html>

<frameset rows="25%,50%,25%">

  <frame src="frame_a.html">

  <frame src="frame_b.html">

  <frame src="frame_c.html">

</frameset>

</html>
    การแบ่งแบบแนวนอน ก็สามารถทำได้เช่นเดียวกัน ซึ่งแบ่งเป็น % หรือ px (pixel) ก็ได้เช่นกัน ซึ่งเราจะใช้ rows (แถว) แทน cols (หลัก)

    รูปแบบของ frame แนวนอน

<html>

<frameset rows=ขนาดเฟรม1,ขนาดเฟรม2>

<frame src='เว็บเพจ1'>

<frame src='เว็บเพจ2'>

</frameset>

</html>



    3. <noframes>

ตัวอย่าง

<html>

<frameset rows="25%,50%,25%">

  <frame src="frame_a.html">

  <frame src="frame_b.html">

  <frame src="frame_c.html">

</frameset>

<noframes>

<body> ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนนี้ขึ้นมา </body>

</noframes>

</html>
    ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนตามที่เราเขียนขึ้นมา

<html>

<noframes>

<body> คำเตือน </body>

</noframes>

</html>

    4.ลองเอา frame แนวตั้งและแนวนอนมารวมกัน

<html>

<!-- สร้าง frame แถวขึ้นมา -->

<frameset rows="50%,50%">

<frame src="frame_a.html">

      <frameset cols="25%,75%">

      <frame src="frame_b.html">

      <frame src="frame_c.html">

      </frameset>

</frameset>

<!-- tag ปิดของ frame แถว -->

</html>
    ในตัวอย่างนี้จะนำเอา frame แนวตั้งและแนวนอนมารวมกัน ซึ่งเป็นการซ้อนกันของ frame นั่นเอง

    5.ห้ามเปลี่ยนขนาดของ frame

ตัวอย่าง

<html>

<frameset rows="25%,50%,25%">

       <!-- ในตัวอย่างนี้ห้ามเปลี่ยนขนาดของ frame A ซึ่ง frame Cยังขยับได้อยู่  ถ้าเราต้องการไม่ให้ขยับ frame C ด้วยก็ใส่ noresize ใน frame C -->

       <frame noresize="noresize" src="frame_a.html">

       <frame src="frame_b.html">

       <frame src="frame_c.html">

</frameset>

</html>
    frame ในตัวอย่างที่ผ่านมานั้นจะสังเกตุได้ว่าสามารถเปลี่ยนขนาดได้ตามใจของเรา แต่ถ้าเราไม่ต้องการให้ผู้ใช้เปลี่ยนขนาดเราต้องใช้คำสั่ง noresize ซึ่งเป็น Attributes มาช่วย

    6.การใช้ link ให้สัมพันธ์กันใน frame

ตัวอย่าง

<html>

<frameset cols="35%,65%">

       <frame name="frame1" src="interest_link.html">

       <frame name="frame2">

</frameset>

</html>


    ข้อดีของ frame ที่จะเห็นได้ก็คือ ใช้ในการทำเมนู ดังในตัวอย่างนั่นเองซึ่งจะต้องใช้ ไฟล์ 2 ไฟล์ ดังนี้

    1.ไฟล์ที่ใช้จัด frame ดังในตัวอย่างซึ่งจะเห็นว่าเราได้ใส่ชื่อ(name) ให้กับ frame ที่เราสร้างขึ้นมาด้วย

    2. ไฟล์ที่ใช้ทำเป็น link ของเราซึ่งมีคำสั่ง target='frame' หมายความว่าให้แสดงผลใน frame ที่มีชื่อว่า frame2 นั่นเอง มี soure code ดังนี้

<html>

<body>

    เว็บไซต์ที่น่าสนใจ

    <a href="url" target="frame2">

    ข้อความที่แสดง</a>

    <a href="http://www.w3schools.com" target="frame2">

    ข้อความที่แสดง</a>

</body>

</html>



    7. การใช้ link ให้ปิด frame ทั้งหมด

ตัวอย่าง

<html>

<frameset cols="45%,55%">

       <frame name="frame1" src="interest_link2.html">

       <frame name="frame2">

</frameset>

</html>


    ในตัวอย่างนี้จะเป็นการสร้าง link ให้ทำลาย frame ทั้งหมด ซึ่งเราจะใช้คำสั่ง target ซึ่งมีรายละเอียดดังนี้

    1.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน

    2.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่

    3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน

    8. Iframe

<html>

<body>

<p> ข้อความ </p>

<iframe src="ad.html"></iframe>

</body>

</html>
    เป็น frame รูปแบบหนึ่ง นิยมใช้ในส่วนที่เป็นโฆษณา เนื่องจากทำให้เราสะดวกไม่ต้องมาแก้ที่หน้าหลักแต่แก้ที่หน้าที่เป็นโฆษณาได้เลย ซึ่งเราอาจเอาให้หน้าที่เป็นโฆษณาให้ลูกค้าแก้ไขโดยไม่ต้องยุ่งกับหน้าหลักของเรา

** เราจะใช้ Frameset ใน <body> </body> ไม่ได้ยกเว้นกรณีของ <noframes>

 
;