การสร้างเฟรม

การสร้างเฟรม

ควบคุมการปรากฏของแถบเลื่อน

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

 ชื่อแอตทริบิวต์                        SCROLLING

รูปแบบ                                    <FRAMESET  SCROLLING =yes หรือ no”> </FRAME>  

ตัวอย่างการใช้                         <FRAMESET  SCROLLING =”no”> </FRAME>  

            ตำแหน่งที่ใช้                          ภายในแท็กเปิดของ  <FRAME>

 ถ้าต้องการเฟรมแรก (ด้านบนสุด)  ได้ปรากฏแถบเลื่อนขึ้นมา  เราจะมาทำให้แถบเลื่อนหายไปด้วยขั้นตอนต่อไปนี้

                        1. เพิ่มแอตทริบิวต์   SCROLLING  โดยกำหนดให้มีค่าเป็น “no”

2. หลังจากกำหนดค่าให้แอตทริบิวต์ตามข้อ 1  แล้ว  แถบเลื่อนในเฟรมแรกจะหายไป

รูปแบบในการเชื่อมเว็บเพจระหว่างเฟรม   

                                     การสร้างจุดลิงค์ในเฟรมใดเฟรมหนึ่งจะมีผลให้ปลายทางที่ลิงค์ไปถูกเปิดขึ้นในเฟรมนั้นเช่นเดียวกัน  เช่น ในเฟรมแรกของเว็บเพจ

ตัวอย่าง มีจุดลิงค์อยู่ 3 จุด  ถ้าเราคลิกที่จุดลิงค์  “สารพันปัญหา “ จะทำให้เว็บเพจ”question.html” ถูกเปิดขึ้นมาแทนเว็บเพจที่อยู่ในเฟรมแรก

 วิธีที่ 1  เชื่อมเว็บเพจระหว่างเฟรมด้วยการกำหนดชื่อเฟรม

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

 ตั้งชื่อเฟรม

                          เราสามารถกำหนดชื่อให้กับเฟรมที่ต้องการได้ด้วยแอตทริบิวต์ NAME  ของ  <FRAME>

 ชื่อแอตทริบิวต์                        NAME

รูปแบบ                                    <FRAME  NAME=”=ชื่อเฟรม”>   </FRAME>  

ตัวอย่างการใช้                         <frame name=”data_area”></frame>

ตำแหน่งที่ใช้                           ภายในแท็กเปิดของ <FRAME>

สั่งให้บราวเซอร์เปิดเว็บเพจในเฟรมที่ต้องการ   

                           โดยปกติบราวเซอร์จะเปิดเว็บเพจปลายทางของจุดลิงค์ในขอบเขตเดียวกับจุดลิงค์ที่ลิงค์ไปยังเว็บเพจปลายทางนั้น  ในตัวอย่างที่ได้เห็นกันมาแล้วก็คือ  บราวเซอร์จะเปิดเว็บเพจปลายทางขึ้นมาในเฟรมเดียวกันกับจุดลิงค์  ซึ่งเราสามารถกำหนดให้บราวเซอร์เปิดเว็บเพจปลายทางในเฟรมอื่น ๆ ได้ด้วยแอตทริบิวต์ TARGET ของ <A>

 ชื่อแอตทริบิวต์                        TARGET

รูปแบบ                                    <A TARGET=”ชื่อที่อ้างถึงตำแหน่งที่ต้องการ”>   </A>  

ตัวอย่างการใช้                         <a target=”ex”></a>

ตำแหน่งที่ใช้                           ภายในแท็กเปิดของ < A >

ข้อควรจำ

        การอ้างถึงเฟรมด้วยแอตทริบิวต์  TARGET ของ <A> ไม่ต้องใช้เครื่องหมาย # นำหน้าชื่อของเฟรม

เปิดเว็บเพจปลายทางในหน้าต่างใหม่       

เมื่อต้องการให้เปิดเว็บเพจปลายทางที่หน้าต่างใหม่ให้ทำตามขั้นตอนต่อไปนี้

1. กำหนดค่าให้แอตทริบิวต์  TARGET เป็น “blank”

 <a href=”question.html”  target=”_blank”>สารพันปัญหา </a>

 2. หลังจากคลิกจุดลิงค์ “สารพันปัญหา”  จะทำให้บราวเซอร์สร้างหน้าต่างใหม่ขึ้นมาและทำการเปิดเว็บเพจปลายทางในหน้าต่างใหม่

 ข้อควรจำ

ถึงแม้ว่าในเว็บเพจจะไม่มีการแบ่งออกเป็นเฟรม  แต่เราสามารถใช้ชื่อ   _BLANK  กำหนดแอตทริบิวต์   TARGET  ของ   <A> เพื่อให้เปิดเว็บเพจปลายทางในหน้าต่างใหม่ได้

วิธีที่ 2                                     

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

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

  • _ SELF  เมื่อกำหนดให้แอตทริบิวต์  TARGET ของ <A> มีค่าเป็น  _SELF  จะมีผลให้บราวเซอร์เปิดเว็บเพจปลายทางที่เฟรมที่มีจุดลิงค์ก็คือ  ค่าปกติ  นั่นเอง
  • _PARENT  เป็นการเปิดเว็บเพจปลายทางในพื้นที่ซึ่งเคยเป็นของเว็บเพจที่ถูกแบ่งเป็นเฟรมด้วย <FRAMESET>
  • _TOP  เป็นการกำหนดให้เปิดเว็บเพจปลายทางในพื้นที่ทั้งหมดของหน้าต่างที่แสดงเฟรม  ผลที่ได้จะเหมือนกับการคลิกที่จุดลิงค์ในเว็บเพจที่ไม่มีการสร้างเฟรม
  • _BLANK  บราวเซอร์จะสร้างหน้าต่างขึ้นมาใหม่  และเปิดเว็บเพจปลายทางในหน้าต่างใหม่นี้

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

            หลังจากที่ได้ศึกษาการสร้างเฟรมโดยแบ่งพื้นที่ของเว็บเพจออกเป็นเฟรมกันไปแล้ว  ในหัวข้อนี้จะเป็นวิธีการแทรกเฟรมไว้ภายในเว็บเพจ  ( หน้าตาเหมือนกับช่องรับข้อมูลประเภท Text area)

 วิธีแทรกเฟรม

              เราสามารถแทรกเฟรมไว้ภายในเว็บเพจได้ด้วยวิธีง่าย ๆ  คือการใช้  <IFRAME>

 ชื่อแท็ก                                    IFRAME

ชื่อแอตทริบิวต์                        SRC

รูปแบบ                                    <IFRAME  SRC=”เว็บเพจ”>   </IFRAME>  

ตัวอย่างการใช้             <iframe src=”http://www.goolgo.com”></iframe>

ตำแหน่งที่ใช้               <IFRAME>  ถูกใช้ระหว่าง <BODY>….   </BODY>

ปรับขนาดของเฟรม  

            การปรับขนาดของเฟรมคือ  การกำหนดแอตทริบิวต์  WIDTH และ HEIGHT ให้กับ <IFRAME>  นั่นเอง  วิธีการใช้งานก็เหมือนกับ

การใช้แอตทริบิวต์ WIDTH และ HEIGHT  ร่วมกับแท็กอื่น ๆ

            ตัวอย่างด้านล่างเป็นการกำหนดให้เฟรมมีขนาดกว้างเป็น  350 พิกเซล และมีความสูงเป็น 200 พิกเซล

1. กำหนดค่าเป็น 350 ให้แอตทริบิวต์  WIDTH

2. กำหนดค่าให้แอตทริบิวต์  HEIGHT  เท่ากับ 200

3. ขนาดของเฟรมจะเปลี่ยนเป็นขนาดที่เรากำหนด

จัดตำแหน่งของเฟรม  

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

1.  กำหนดค่าให้แอตทริบิวต์  ALIGN เป็น “CENTER”

2.  เฟรมจะปรากฏที่ตำแหน่งกึ่งกลางของเว็บเพจตามที่ต้องการ

การใช้เฟรมร่วมกับบราวเซอร์ที่ไม่รู้จักเฟรม           

 

                                    ถ้าผู้ใช้งานเว็บเพจใช้บราวเซอร์ เช่น โปรแกรม Internet Explorer   ก็จะไม่มีปัญหาใด ๆ  กับการแสดงผลเว็บเพจที่ถูกแบ่งออก

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

เฟรมก็เป็นได้  ดังนั้นเราจึงต้องเตรียมวิธีป้องกันเอาไว้ด้วย

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

 แจ้งให้ผู้ใช้ทราบว่าบราวเซอร์ไม่สนับสนุนเฟรม

                         ข้อความที่ต้องการแจ้งให้ผู้ใช้ทราบนั้นเราจะกำหนดไว้ระหว่าง <NOFRAMES>…</NOFRAMES> ซึ่งมีวิธีการใช้งานดังนี้

 ชื่อแท็ก                        NOFRAMES

รูปแบบ                        <NOFRAMES> ข้อความ  </NOFRAMES>

ตัวอย่างการใช้          <noframes> your browser doesn”t support  frames</noframes>

ตำแหน่งที่ใช้             ระหว่าง  <FRAMESET>  …..</FRAMESET>

ใส่ความเห็น

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

ติดตาม

Get every new post delivered to your Inbox.

%d bloggers like this: