Adobe Dreamweaver CS3: หลักการทำframe

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

การใช้ Frame ส่วนมากเรานิยมที่จะใช้กับส่วนที่เป็น Navigation เช่น ให้มี Navigation เป็น Frame อยู่ทางซ้ายมือ และให้เนื้อหา
อยู่ทางขวามือ

กล่องข้อความ: หลักการทำงานของ Frame

การทำงานของ Frame จะเป็นดังรูปที่ 161 - 162

index.html

รูปที่ 161 แสดงหลักการทำงานของเฟรม

รูปที่ 162 แสดงโครงสร้างของเฟรม

                   ถ้าเราใช้คำสั่งแบ่ง Frame เป็น 3 Frame ใน 1 หน้าเว็บเพจ เราจะต้องใช้ไฟล์ประกอบกันทั้งหมด 4 ไฟล์ดังรูป
        1.index.html เป็นไฟล์หลักทั้งหมด เมื่อผู้ชมจะดูหน้าเว็บเพจจะเข้ามาที่ไฟล์นี้เท่านั้น
                   2.Frame1.html เป็นไฟล์ที่แสดง Frame ส่วนบนของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น
                   3.Frame2.html เป็นไฟล์ที่แสดง Frame ส่วนซ้ายของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น
                   4.Frame3.html เป็นไฟล์ที่แสดง Frame ส่วนขวาของหน้า จะเรียกแสดงผลไฟล์นี้ผ่าน index.html เท่านั้น

รูปที่ 163 แสดงขั้นตอนการสร้างเฟรม

             1.เปิดไฟล์ html ใหม่ขึ้นมา
          2.จากนั้นคลิกที่ปุ่มตามรูปที่ 163

        ดังตัวอย่างเราจะสร้าง Frame ทั้งหมด 3 Frame เมื่อคลิกที่ปุ่มแล้วจะเป็นดังรูปที่ 164

รูปที่ 164 แสดงผลการสร้างเฟรม

ถ้าเรามองไม่เห็นขอบของ Frame ดังรูปด้านบนให้ไปที่ view > visual aid > Frame borders 3. เราสามารถเลือก Frame ที่ต้องการ และพิมพ์เนื้อหา หรือใส่รูปลงไปใน Frame นั้นได้เลย ดังรูปที่ 165

รูปที่ 165 แสดงการตั้งชื่อเฟรม

รูปที่ 166 การบันทึกเฟรม

4.เมื่อเราเขียนเนื้อหาใน Frame ใดเรียบร้อยแล้วก็ให้คลิกที่เมนู File > Save Frame

รูปที่ 167 การตั้งชื่อเฟรมของ TopFrame

ในตัวอย่างเรากำลังเขียนส่วน TopFrame เมื่อ Save เราก็ให้ชื่อไฟล์ว่า Chonnfe.html
ให้เราทำแบบนี้ในทุก Frame ที่เหลือ จะได้ File มาทั้งหมด 3 ไฟล์ ได้แก่
1.Chonnfe.html
2.Chonleft.html
3.Chonmain.html

รูปที่ 168 การตั้งชื่อเฟรมของ LeftFrame

รูปที่ 169 การตั้งชื่อเฟรมของ MainFrame
5.เมื่อเราเขียนทุก Frame เรียบร้อยแล้วจะทำการ Save หน้าเว็บเพจ ให้เราไปที่
File > Save all  เพื่อเป็นการ Save หน้าหลักในการแสดงผล โดยเราจะ Save ในชื่อ index.html
เท่านี้เราก็จะได้ File ทั้งหมด 4 ไฟล์ด้วยกัน ได้แก่
                        1.Chonnfe.html
2.Chonleft.html
3.Chonmain.html
4.index.html

รูปที่ 170 การบันทึกเฟรมทั้งหมด

รูปที่ 171 การบันทึก Index ของเฟรม

กล่องข้อความ: การเชื่อมโยงระหว่างเฟรม

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