ZENITH the PeaceMaker

ฮัลโหลทุกท่านฮ๊า... วันนี้มาโผล่อีกแล้วเนื่องด้วยกำลังหัวหมุนกับคำถามที่มีเข้ามาวันเว้นวันจนไอ้นุ่นกำลังจะบร้าตาย แล้วคำอธิบายมันก็ใช่จะเข้าใจง่ายๆกับคนไม่เอาถ่านเรื่องสอนชาวบ้านอย่างเรา =_= ก็คือเรื่อง IFRAME นั่นเอง ... เดี๋ยวนี้กำลังนิยมกันมากในหมู่เว็บ fansite ดาราต่างประเทศ เลยเอามาลงบล็อกเสียเรยเพื่อความเข้าใจและเห็นภาพตาม

กระนั้น คุณสมบัติของคุณ ที่จะทำให้เข้าใจเอ็นทรี่นี้ได้ดีขึ้น...

1. สามารถใช้โปรแกรม DreamweaverMX 2004ได้ดี รู้ตำแหน่งฟังชั่นต่างๆในหน้าต่างโปรแกรม
2. คุ้นเคยกับภาษา html หรือ css ก็ยังดี (อันนี้สำคัญมากเพราะอาจงงได้)

คุณสมบัติของ IFRAME >> เพิ่มความสะดวกในการสร้างเว็บ อย่างมากมายค่ะ เพราะแทนที่คุณจะต้องมานั่งทำเว็บ(ในกรณีที่ไม่เป็นphp)แบบเหมือนๆกันทุกหน้า เวลาจะต้องเปลี่ยนข้อมูล อย่างเช่น ลงโฆษณา ติดแบนเนอร์ขึ้นเป็น top affiliates มันจะลำบากมาก ดังนั้นการใช้ IFRAME จะเป็นการเพิ่มความสะดวกรวดเร็ว แถมเป็นการลดขนาดไฟล์เว็บทั้งหมดของคุณได้มากกว่าครึ่ง!

ตัวอย่างเว็บที่ใช้ IFRAME
(www.lindsay-online.org)

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

...........................................................................

ขั้นตอน

1. สร้างหน้าหลักของเว็บ >>(index.html) โดยเว้นส่วนเนื้อหาไว้ ใส่เมนูได้ตามใจชอบ

2. สร้างส่วนเนื้อหา >> หรือ content ให้เป็นเพียงหน้าเปล่าๆ แต่ต้องมีสีของ bg ให้เหมือนกับส่วนเนื้อหาที่เราเตรียมไว้ในหน้าหลัก ในที่นี้ตั้งชื่อว่า home.html

3. แทรกโค้ด >> เปิดหน้า index.html ขึ้นมาอีกครั้ง ทีนี้เราจะแทรกโค้ด IFRAME เข้าไปภายในแท็ก BODY ซึ่งแน่นอนว่าคราวนี้ถึงเวลาที่เราจะใช้งานภาษา html กันแล้ว เห่อๆ เอาง่ายๆค่ะ คลิ้กที่ code source จากนั้นมันจะขึ้นตัวโค้ดยั้วเยี้ย คาดว่าใครที่ทำบล็อกน่าจะเข้าใจง่ายเพราะคุ้นกับ CSS มาบ้างแล้ว (มึนพอๆกัน =_=)

แทรกโค้ดนี้ >>

<IFRAME border=0 name=FRAME1 src="home.html" frameBorder=0 width=520 height=827 allowTransparency> Votre navigateur ne prend pas en charge les cadres ins&eacute;r&eacute;s ou est actuellement configur&eacute; pour ne pas les afficher. </IFRAME>

หรือถ้าใครหาแท็กที่จะแทรกไม่เจอจริงๆ ก็กดเลือกที่โหมด design ธรรมดาแล้วแปะเมาส์ลงที่เหมาะๆซักแห่ง จากนั้นเปิด code source แล้ววางโค้ดโลดเลยฮ๊า =_= จะเห็นว่าเมื่อเราเลือกโหมด design หลังจากวางโค้ดแล้ว จะปรากฏในรูป layer แสนธรรมดา

ดังนั้นเราจึงสามารถเคลื่อนย้ายได้รอบทิศ แต่ในกรณีของการปรับขนาด จะต้องปรับทั้งในหน้า design และเปลี่ยนตัวเลขขนาดในหน้า code source ด้วยนะเค่อะ

4. กำหนดค่าของ IFRAME>> หลังจากได้ตำแหน่งและเฟรมที่ต้องการแล้ว คราวนี้อาจจะตาลายนิดนึงเน้ การเปลี่ยนค่า อันดับแรกเลยคือ...

- ชื่อเฟรม ในที่นี้คือ "FRAME1"

<IFRAME border=0 name=FRAME1 src="home.html" frameBorder=0 width=520 height=827 allowTransparency> Votre navigateur ne prend pas en charge les cadres ins&eacute;r&eacute;s ou est actuellement configur&eacute; pour ne pas les afficher. </IFRAME>

ตัวนี้จะมีผลต่อการใส่ target(เป้าหมาย)ในการเชื่อมลิงค์ซึ่งปกติจะเป็น blank, top, self, parent ที่มีอยู่แล้วในดรีม แต่ตัวนี้หากเราใช้ IFRAME เราจะต้องกำหนดขึ้นมาใหม่โดยใช้ตามชื่อเฟรมนั้นๆ เพราะถ้าไม่เหมือนกันมันจะลิงค์ไปไม่ถึงเน้ =_= ฉะนั้น ในที่นี้หากชื่อเฟรมเป็น FRAME1 เวลาเราจะทำลิงค์ เราจะกำหนด target เป็น FRAME1 ดังภาพ

(อันนี้ขอใช้เป็น image map แทนนะคะ ดูง่ายหน่อย)

- กำหนดค่า src ตัวนี้ก็สำคัญค่ะ จะเป็นตัวเชื่อมโยงไปยังไฟล์ที่เราจะให้แสดงในหน้าแรก ในที่นี้กำหนดเป็น home.html

<IFRAME border=0 name=FRAME1 src="home.html" frameBorder=0 width=520 height=827 allowTransparency> Votre navigateur ne prend pas en charge les cadres ins&eacute;r&eacute;s ou est actuellement configur&eacute; pour ne pas les afficher. </IFRAME>

ผลที่ได้ คือไฟล์ home.html ที่เราสร้างไว้แต่แรกมาปรากฏอยู่ในเฟรมที่เราใส่ เหมือนกับเว็บแบบสำเร็จรูปค่ะ

........................................

เย่ !! (กู่ร้องอย่างดีใจ) จบแล้วค่ะทฤษฎี IFRAME จบอย่างเมื่อยล้า เอิ้กกก... ส่วนในเรื่องของการจัดรูปแบบ ตำแหน่ง และโทนสีจะมาคราวหน้าแล้วกัน วันนี้ไม่ไหวแล้ว -*- มีนิยายต้องปั่นต่ออีก เง้อ เป็นกำลังใจให้ทุกคนจร้า ^o^