สร้าง และบันทึกเฟรม

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

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

เฟรมจะมี  2  รูปแบบ  คือ  เฟรมหลัก (Frameset)  และเฟรมย่อย (Frame)  
1. เฟรมหลัก (Frameset)  คือ  หน้าต่างเฟรมใหญ่ที่สุด  ทำหน้าที่คอยควบคุมเฟรมย่อยอีก
ทีหนึ่ง
  โดยกำหนดว่าในแต่ละส่วนชื่ออะไร  มีขนาดและคุณสมบัติอย่างไร  เริ่มต้นที่ตำแหน่งใด  เป็นต้น            

2. เฟรมย่อย (Frame)
 หน้าต่างเฟรมที่ทำหน้าที่กำหนดชื่อของแต่ละเฟรม  และกำหนดไฟล์
เว็บเพจภายในเฟรมได้


การสร้างเฟรมเซต  ทำได้ วิธี  ดังนี้
1.  การใช้แบบสำเร็จ  เป็นเพรมเซตที่โปรแกรมได้ออกแบบไว้เป็นแบบสำเร็จรูป  สามารถ เลือกใช้ได้ง่าย ๆ  โดยเมื่อเปิดโปรแกรมขึ้นมาให้คลิกเลือกคำสั่ง  Framesets บนกลุ่มคำสั่ง  Create From Samples  จะมีเฟรมเซตให้เลือก  คลิกเลือกแบบที่ต้องการ  แล้วคลิกปุ่ม  Create



การใช้แถบเครื่องมือให้เลือกกลุ่มเครื่องมือ  Layout  จะมีรูปแบบเฟรมเซตย่อย ๆ คลิกเลือกแบบที่ต้องการ

2. การออกแบบเฟรมเซตเอง  มีวิธีทำโดยคลิกที่เมนู  View >> Visual Aids >> Frame >> Borders  ที่เว็บเพจจะปรากฏเส้นขอบของเฟรมเซตขึ้นมา  เลื่อนเมาส์ไปที่เส้นขอบของเฟรมเซต  คลิกและลากเมาส์เพื่อสร้างเฟรมเซต

            ถ้าต้องการจะดูรายละเอียดของเฟรมทั้งหมดให้คลิกที่คำสั่ง  Window >> Frames  เพื่อ เรียกพาเนล  Frames  ด้านซ้ายมือ



          รู้จักแถบเครื่องมือเฟรม

ที่แท็บ Characters จะปรากฏรูปแบบของเฟรมขึ้นมาให้เลือกใช้งานมากมายถึง 13 แบบ โดยเมื่อได้สร้างเฟรมที่ต้องการขึ้นมาแล

ภายในยังสามารถสร้างเฟรมในรูปแบบต่างๆ เพิ่มเติมได้อีก

 ปุ่มเครื่องมือ

ชื่อปุ่มเครื่องมือ 

หน้าที่การทำงาน 

  1. 

Left Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้ายแสดงเมนู  และด้านขวาแสดงเนื้อหา

  2. 

Right Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านขวาแสดง และด้านซ้ายแสดงเนื้อหา

  3. 

Top Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านบนเมนู และด้านล่างแสดงเนื้อหา

  4. 

Bottom Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านบนแสดงเนื้อหา และด้านล่างแสดงเมนู

  5. 

Bottom and Nested Left Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

  6. 

Bottom and Nested Right Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

  7. 

Left and Nested Bottom Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

  8. 

Right and Nested Bottom Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

  9. 

Top and Buttom Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านบน กลาง และด้านล่าง

10. 

Left and Nested Top Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

11. 

Right and Nested Top Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

12. 

Top and Nested Left Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

13. 

Top and Nested Right Frame

สร้างเฟรมขึ้นมา ส่วน คือ ด้านซ้าย ขวา และล่าง

 

ข้อมูลจาก  http://www.skpbn.ac.th/kruboonyarat/dream/lesson7/index.php    28 ตุลาคม  2555


กำหนดคุณสมบัติของเฟรม

          หลังจากที่สร้างเฟรมเซตไว้เรียบร้อยแล้ว  หากยังไม่ตรงตามที่ต้องการก็สามารถจัดการกับ เฟรมเซต  ดังนี้

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


การเพิ่มเฟรม
                ถ้าเฟรมที่จำนวนไม่เพียงพอสามารถเพิ่มจำนวนได้  โดยเลือกคำสั่ง  Modify >> Frame set  แล้วเลือกลักษณะการแบ่งเฟรมเซต  4  ลักษณะ  คือ  ซ้าย  ขวา  บน  และล่าง  ถ้าเพิ่มเฟรมด้วยเส้นขอบเฟรมใฟ้กดแป้น  < Alt >  กับลากเมาส์ที่เส้นขอบเฟรม



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


 การแก้ไขรายละเอียดเฟรม               

            เฟรมแต่ละเฟรมเป็นไฟล์ย่อย   หนึ่งไฟล์  การแก้ไขรายละเอียดภายในเฟรมทำได้ 2  ลักษณะ  คือ  เฟรมหลัก  และเฟรมย่อย

  การแก้ไขเฟรมหลัก 
          
1. คลิกเลือกเฟรมหลัก  ถ้ามีหลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็นเฟรมหลัก  ให้เปิดพาเนล  Frames  และคลิกเลือกเฟรมหลัก


2.      เลือกปรับรายละเอียดของเฟรมหลักที่  Properties Inspector

Borders             กำหนดให้แสดงหรือไม่แสดงเส้นขอบ

Borders Width   กำหนดความกว้างของเส้นขอบเฟรม  ค่า  0  ไม่มีเส้น

Border Color     กำหนดสีของเส้นขอบเฟรม

Column             กำหนดขนาดของคอลัมน์  เติมตัวเลขลงไปในช่อง  Value  และ เลือกหน่วยวัด  เช่น  pixels


การแก้ไขเฟรมย่อย 

             เฟรมย่อยเป็นเฟรมทุกเฟรมที่บรรจุในเฟรมหลัก มีชื่อเรียกต่างๆ กัน เช่น topframe  mainframe ฯลฯ ซึ่งสามารถแก้ไขรายละเอียดได้ ดังนี้

         1. คลิกเลือกเฟรมที่ต้องการจะแก้ไขที่พาเนล  Frames


2.      แก้ไขรายละเอียดเฟรมที่  Properties Inspector  ดังนี้

Frame name         ตั้งชื่อเฟรมย่อย  ควรตั้งให้สื่อถึงเฟรมหลัก

Src                          ตำแหน่งที่ใช้บันทึกเว็บเพจของเฟรมนี้

Borders                 แสดง / ซ่อน  เส้นขอบ

Scroll                     แสดง / ซ่อน  แถบเลื่อนของเฟรมย่อย

No resize              กำหนดให้ใช้เมาส์ลากเพื่อปรับขนาดเฟรมได้ หรือไม่ได้

Border color        กำหนดสีของเฟรม

Margin width      กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก  (กว้าง)

Margin height     กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก  (สูง)


การสร้างเนื้อหาในเฟรม

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

สร้างเนื้อหาลงในเฟรมเซตใหม่ 
                เมื่อได้เลือกเฟรมเซตหรือสร้างเฟรมเซตเสร็จแล้ว  เช่น  แบบ Fixed Top, Nested Left  โดยกำหนดให้  Topframe  เป็นส่วนหัวของบริษัท  ประกอบด้วยชื่อและโลโก้  ส่วน  Mainframe  เป็นเนื้อหา รายละเอียดสินค้า  และส่วนด้านซ้ายเป็นลิงค์ต่าง ๆ  จะได้เว็บเพจลักษณะดังนี้

ที่มา : www.uniquetemplates.com

นำเนื้อหาที่สร้างไว้ใส่เฟรมเซต 
                
เป็นการสร้างเนื้อหาย่อยแต่ละเฟรมก่อน  แล้วจึงนำมาประกอบเว็บเพจภายหลัง  มีวิธีทำ  ดังนี้

  • สร้างเฟรมงานต่าง   ไว้จนครบ  แล้วบันทึกข้อมูล


  • สร้างเฟรมเซตตามจำนวนเฟรม  แล้วกดแป้น  < Shift > + < F2 >  เพื่อเรียกพาเนล  Frames
  • คลิกที่ไอคอน  คำอธิบาย: คำอธิบาย: http://www.skpbn.ac.th/kruboonyarat/dream/lesson7/pic/image017.jpg  ในช่อง  Src  จะได้หน้าต่าง  Select HTML file  เลือกเฟรมเซตที่ต้องการ
  • ทดลองแสดงผลเฟรมเซตตามที่ออกแบบไว้บนเบราเซอร์

ข้อมูลจาก  http://www.skpbn.ac.th/kruboonyarat/dream/lesson7/04.php  28 ตุลาคม  2555


การบันทึกเฟรมหลักและเฟรมย่อย

                การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกต่างกัน  ดังนี้

การบันทึกเฟรมหลัก
                ในการบันทึกเฟรมหลัก  (Frameset)  มีขั้นตอนดังนี้
                1. คลิกที่โครงเฟรมหลัก  ในหน้าต่าง  Frame Panel 
                2. คลิกเมนู  File >> Save Frameset  หรือกดปุ่ม  < Ctrl + S >  เพื่อบันทึกโครงเฟรม


3.      เลือกสถานที่เก็บไฟล์จากช่อง  Save in

4.      พิมพ์ชื่อไฟล์ลงในช่อง  File Name

5.      คลิกปุ่ม  Save  เพื่อบันทึกเฟรม

การบันทึกเฟรมย่อย
การบันทึกเฟรมย่อย  มีขั้นตอนดังนี้

  • คลิกที่โครงเฟรมย่อย  ในหน้าต่าง  Frame Panel
  • คลิกเมนู  File >> Save Frame  หรือกดปุ่ม  < Ctrl + S >  เพื่อบันทึกโครงเฟรม


  • เลือกสถานที่เก็บไฟล์จากช่อง  Save in
  • พิมพ์ชื่อไฟล์ลงในช่อง  File Name
  • คลิกปุ่ม  Save  เพื่อบันทึกเฟรม

 

 ข้อมูลจาก  http://www.skpbn.ac.th/kruboonyarat/dream/lesson7/05.php  28 ตุลาคม 2555


การเชื่อมโยงเฟรมเซต

            การเชื่อมโยงเฟรมเซตมีประโยชน์มาก  เพราะช่วยเลื่อนหน้าเว็บเพจให้แสดงผลข้อมูลได้ง่าย  เช่น  คลิกที่แท็บสินค้าใหม่  เฟรมเซตด้านขวามือจะแสดงผลสินค้าใหม่ให้ทันที  โดยมีวิธีการเชื่อมโยง  ดังนี้
    • เลือกข้อความที่ต้องการจะสร้างลิงค์ 
    • คลิกปุ่ม   ในช่อง  Link  ของ  Properties Inspector
      • เลือกเฟรมที่ต้องการจะเป็นเป้าหมายการลิงค์  แล้วคลิก  OK              
           
            
    • กำหนดคุณสมบัติการแสดงผลจากช่อง  Target  เช่น  เลือก  Mainframe  เพื่อให้ไฟล์ลิงค์ไว้มาแทรกแทนเฟรม  Mainframe

                                                                                                             

    • บันทึกไฟล์  และทดลองแสดงผลด้วยเบราเซอร์  < F12 >

ข้อมูลจาก  http://www.skpbn.ac.th/kruboonyarat/dream/lesson7/06.php  28 ตุลาคม  2555