ใบความรู้ที่ 6.1
เรื่องการสร้างจุดเชื่อมโยงและการสร้า
งเฟรม

การเชื่อมโยงเว็บเพจเดียวกัน

หากข้อมูลในหน้าเว็บเพจเดียวกันมีขนาดยาวมาก ทำให้ต้องใช้ Scrollbar เลื่อนดู เราสามารถเชื่อมโยงข้อมูลภายในเพจเดียวกันได้โดย click mouse ตำแหน่งที่เป็น Link จะกระโดด    ไปยังข้อมูลส่วนอื่นซึ่งอยู่ในเพจเดียวกัน ดังนี้


          ภาพที่ 6.1 การเชื่อมโยงเว็บเพจเดียวกัน

        1.   กำหนดจุด Anchor หรือที่ Link จะกระโดดไปในหน้าเว็บเพจนั้น
        2.   นำเมาส์ไปคลิกที่ Named Anchor 
        3.   ตั้งชื่อจุด Anchor จากหน้าจอย่อยที่ปรากฏขึ้น ดังตัวอย่างเรา ตั้งชื่อว่า Index1.html แล้ว คลิกปุ่ม 
        4.   ระบุข้อความที่เราต้องการจะเชื่อมโยงไปยังจุด Anchor โดยระบายแถบสีที่ข้อความนั้น
        5.   กำหนดการ Link โดยการพิมพ์ # ตามด้วยชื่อจุด Anchor ที่เราได้ตั้งไว้ใน ข้อ 3 ในช่อง Link จากหน้าต่าง Properties แล้วเคาะ Enter
        6.   เซฟแล้วตรวจสอบการ Link จากบราวเซอร์
        นอกจากนี้แล้วเราสามารถทำจุดย้อนกลับจากด้านล่างของหน้าเว็บเพจไปยังส่วนบนสุดได้ซึ่งวิธีการทำเช่นเดียวกับ ข้อ 1-5 แต่เปลี่ยนจุด Anchor อยู่ด้านบนของหน้าเว็บเพจ และจุดที่จะ Link อยู่ด้านล่างของเว็บเพจ 

       
        ภาพที่ 6.2 ทำจุดย้อนกลับจากด้านล่างของหน้าเว็บเพจ

การเชื่อมโยงภายในเว็บไซต์เดียวกัน

        หากข้อมูลในหน้าเว็บเพจเดียวกันมีขนาดยาวมาก ทำให้ต้องใช้ Scrollbar เลื่อนดู เราสามารถเชื่อมโยงข้อมูลภายในเว็บเพจเดียวกันได้โดย click mouse ตำแหน่งที่เป็น Link จะกระโดด ไปยังข้อมูลส่วนอื่นซึ่งอยู่ในเว็บเพจเดียวกัน ดังนี้

       ภาพที่ 6.3 เชื่อมโยงข้อมูลภายในเว็บเพจ                               
        1.   กำหนดจุด Anchor หรือที่ Link จะกระโดดไปในหน้าเว็บเพจนั้น
        2.   นำเมาส์ไปคลิกที่ Named Anchor 
        3.   ตั้งชื่อจุด Anchor จากหน้าจอย่อยที่ปรากฏขึ้น ดังตัวอย่างเราตั้งชื่อแล้ว คลิกปุ่ม OK

        ภาพที่ 6.4 กำหนดจุด Anchor
        4.   ระบุข้อความที่เราต้องการจะเชื่อมโยงไปยังจุด Anchor โดยระบายแถบสีที่ข้อความนั้น
        5.   กำหนดการ Link โดยการพิมพ์ # ตามด้วยชื่อจุด Anchor ที่เราได้ตั้งไว้ใน ข้อ 3 ในช่อง Link จากหน้าต่าง Propertiesแล้วเคาะ Enter
        6.   เซฟแล้วตรวจสอบการ Link จากบราวเซอร์ นอกจากนี้แล้วเราสามารถทำจุดย้อนกลับจากด้านล่างของหน้าเว็บเพจไปยังส่วนบนสุดได้ซึ่งวิธีการทำเช่นเดียวกับ ข้อ 1-5 แต่เปลี่ยนจุด
Anchor อยู่ด้านบนของหน้าเว็บเพจ และจุดที่จะLinkอยู่ด้านล่างของเว็บเพจ
การเชื่อมโยงไปยังเว็บไซต์อื่น
            ในการเชื่อมโยงกับเว็บไซต์อื่น ให้เราระบุ URL ของเว็บเพจนั้นโดยให้พิมพ์ http:// นำหน้าชื่อของเว็บเพจที่เราต้องการเชื่อมโยงด้วยทุกครั้ง ขอแนะนำให้ทำการตรวจสอบ URL ปลายทางที่เราต้องการเชื่อมโยงด้วยว่าเป็นเว็บไซต์ที่ถูกต้อง เนื่องจากเนื้อหาในเว็บมักมีการเปลี่ยนแปลงอยู่เสมอโดยมีวิธีการดังต่อไปนี้
          1.       ทำการแดรกเมาส์ที่ข้อความที่ต้องการลิงค์
          2.       พิมพ์ชื่อเว็บไซต์ที่ต้องการลิงค์ ที่ Properties  ในช่อง  Link

        ภาพที่ 6.5 การเชื่อมโยงกับเว็บไซต์
        3.   คลิกเลือกเฟรมเป้าหมายที่จะแสดงในเว็บเพจ ดังนี้
 

ภาพที่ 6.6 คลิกเลือกเฟรมเป้าหมาย
        จากภาพสามารถอธิบายได้ ดังนี้
              _blank เป็นการเปิดเว็บเพจปลายทางในวินโดว์ใหม่
              _parent เป็นการแสดงเว็บเพจในเฟรมที่ครอบอยู่ในเฟรมปัจจุบัน
              _self เป็นการแสดงเว็บเพจในวินโดว์เดิมของลิงค์
              _top เป็นการแสดงเว็บเพจในวินโดว์เดิมโดยยกเลิกเฟรมที่ครอบอยู่ทั้งหมด
        4.   ทดสอบการเชื่อมโยงจากเว็บบราวเซอร์โดยกดคีย์ F12

        ตัวอย่างการเชื่อมโยงโดยเลือกกลุ่มเป้าหมายเป็น _blank
 
 

          ภาพที่ 6.7 ตัวอย่างการเชื่อมโยงโดยเลือกกลุ่มเป้าหมายเป็น_blank

          ภาพที่ 6.8 ตัวอย่างการเชื่อมโยงโดยเลือกกลุ่มเป้าหมายเป็น_blank
        ตัวอย่างการเชื่อมโยงโดยเลือกกลุ่มเป้าหมายเป็น _parent, _self, _top
 

          ภาพที่ 6.9 ตัวอย่างการเชื่อมโยงโดยเลือกกลุ่มเป้าหมายเป็น_parent, _self, _top

การเชื่อมโยงไปยังอีเมล์

        โดยปกติ เพื่อให้ผู้ที่มาเยี่ยมชมเว็บเพจของเราสามารถติดต่อเราได้ จะมีการสร้าง Link ชี้ไปยังอีเมล์แอดเดรสของเรา เมื่อผู้ใช้คลิกที่ Link นี้ก็จะสามารถเขียนอีเมล์มาคุยกับเราได้ โดยไม่ต้องเสียเวลาพิมพ์อีเมล์แอดเดรสของเรา โดยมีวิธีการดังต่อไปนี้
        1.   พิมพ์ข้อความที่ต้องการลงเว็บเพจ
        2.   คลิกที่ข้อความที่ต้องการเชื่อมโยง พิมพ์อีเมล์แอดเดรสที่ช่อง Link โดยมีคำว่า mailto:
 ตามด้วยชื่อเมล์ที่ต้องการให้ส่งแล้วเคาะ Enter
                     

        ภาพที่ 6.10 พิมพ์อีเมล์แอดเดรสที่ช่อง Link 
        3.  บันทึกแล้วทดสอบการเชื่อมโยงผ่านบราวเซอร์ ด้วยการกด F12  
        4.  เมื่อคลิกที่ข้อความ จะปรากฏโปรแกรมส่งเมล์ โดยจะมีอีเมล์แอดเดรสแสดงขึ้นมาให้เรียบ

        ภาพที่ 6.11 ปรากฏโปรแกรมส่งเมล์

การเชื่อมโยงไปยังไฟล์ดาวน์โหลด

     นอกจากเราสามารถสร้างตัวเชื่อมโยงจากเว็บเพจไปยังเว็บเพจหรือจากเว็บเพจไปยังเว็บไซต์แล้ว เรายังสามารถสร้างการเชื่อมโยงไปที่แฟ้มข้อมูลประเภทใดๆก็ได้ เช่น  แฟ้มเอกสารทั่วไป, แฟ้มรูปภาพ หรือแฟ้มอื่นๆได้ตามความประสงค์ของเราโดยมีขั้นตอน ดังนี้
      1.   เลือกข้อความที่จะทำเป็นลิงค์เพื่อเชื่อมโยงแฟ้มข้อมูล
      2    ที่แถบ Properties พิมพ์ที่อยู่ขอแฟ้มข้อมูล หรือ คลิกที่ Browse เลือกแฟ้มข้อมูลที่ต้องการ
      3.   คลิกเลือกเอกสารหรือแฟ้มข้อมูลที่ต้องการให้เชื่อมโยงไปยังเอกสารนี้
      4.   ทดสอบแสดงผล โดยการกด F12 



       ภาพที่ 6.12 สร้างการเชื่อมโยงไปที่แฟ้มข้อมูล

        ภาพที่ 6.13 ทดสอบแสดงผล โดยการกด F12 

เชื่อมโยงด้วย Rollover Image

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


 

        ภาพที่ 6.14 เชื่อมโยงด้วย Rollover Image

 

        4.   เลือกไฟล์ภาพที่ต้องการทั้ง 2 สถานะ คือปกติและเมื่อนำเมาส์เลื่อนผ่าน คลิก OK
        5.   ทำตามขั้นตอนข้อที่ 1 ถึง 3 ไปเรื่อย ๆ จนกว่าจะครบจำนวนเมนูที่ได้สร้างไว้
        6.   ทำสอบทางโปรแกรมบราวเซอร์ กด F12 
                  
 

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

        ภาพที่ 6.16 การสร้างเฟรม

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

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

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

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

        ภาพที่ 6.20 การเพิ่มเฟรม
 

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

        ภาพที่ 6.22 การลบเฟรม
 

        ภาพที่ 6.23 การลบเฟรมตอบ yes

 

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

        ภาพที่ 6.24 การแก้ไขรายละเอียดเฟรม
              2.    เลือกปรับรายละเอียดของเฟรมหลักที่ Properties Inspector
                   Borders กำหนดให้แสดงหรือไม่แสดงเส้นขอบ
                   Borders Width กำหนดความกว้างของเส้นขอบเฟรม ค่า 0 ไม่มีเส้น
                   Border Color กำหนดสีของเส้นขอบเฟรม
                   Column  กำหนดให้แสดงหรือไม่แสดงเส้นขอบValue และเลือกหน่วยวัดเช่น pixels

        ภาพที่ 6.25 ปรับรายละเอียดของเฟรม
การแก้ไขเฟรมย่อย
          เฟรมย่อยเป็นเฟรมทุกเฟรมที่บรรจุในเฟรมหลัก  มีชื่อเรียกต่าง ๆ  กัน  เช่น  top frame,  mainframe ฯลฯ ซึ่งสามารถแก้ไขรายละเอียดได้ ดังนี้
              1.    คลิกเลือกเฟรมที่ต้องการจะแก้ไขที่พาเนล Frames
 

        ภาพที่ 6.26 การแก้ไขเฟรมย่อย
              2.    แก้ไขรายละเอียดเฟรมที่ Properties Inspector ดังนี้
                   Frame name    ตั้งชื่อเฟรมย่อย ควรตั้งให้สื่อถึงเฟรมหลัก
                   Src                ตำแหน่งที่ใช้บันทึกเว็บเพจของเฟรมนี้
                   Borders           แสดง / ซ่อน เส้นขอบ
                   Scroll             แสดง / ซ่อน แถบเลื่อนของเฟรมย่อย
                   No resize         กำหนดให้ใช้เมาส์ลากเพื่อปรับขนาดเฟรมได้หรือไม่ได้
                   Border color     กำหนดสีของเฟรม
                   Margin width    กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (กว้าง)
                   Margin height   กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (สูง)
การสร้างเนื้อหาในเฟรม
             เฟรมเซตเปรียบเสมือนไฟล์งานหรือเว็บเพจแต่ละหน้าที่ซ้อนกันอยู่ในหน้าเว็บเพจเดียวกัน ดังนั้น การสร้างเนื้อหาหรือออกแบบแต่ละเฟรมจึงเป็นอิสระจากกัน สามารถพิมพ์ข้อความ แทรกภาพ ตาราง และตกแต่งเฟรมได้โดยไม่กระทบต่อเฟรมอื่น
        การใส่เนื้อหาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ สร้างเนื้อหาลงในเฟรมใหม่ และนำเนื้อหาที่สร้างไว้แล้วมาใส่เฟรม ดังนี้
              1.    สร้างเนื้อหาลงในเฟรมเซตใหม่
                    เมื่อได้เลือกเฟรมเซตหรือสร้างเฟรมเซตเสร็จแล้ว เช่น แบบ Fixed Top, Nested Left โดยกำหนดให้ top frame เป็นส่วนหัวของบริษัทประกอบด้วยชื่อและโลโก้ ส่วน mainframe เป็นเนื้อหา รายละเอียดสินค้า และส่วนด้านซ้ายเป็นลิงค์ต่าง ๆ จะได้เว็บเพจลักษณะดังนี้
              2.    การนำเนื้อหาที่สร้างไว้ใส่เฟรมเซต
 

 

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

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

             2.    สร้างเฟรมเซตตามจำนวนเฟรม แล้วกดแป้น < Shift > + < F2 > เพื่อเรียกพาเนล Frames
             3.    คลิกที่ไอคอน     ในช่อง Src จะได้หน้าต่าง Select HTML file เลือกเฟรมเซตที่ต้องการ
             4.    ทดลองแสดงผลเฟรมเซตตามที่ออกแบบไว้บนเบราว์เซอร์
การบันทึกเฟรม
             การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกต่างกัน ดังนี้
การบันทึกเฟรมหลัก ในการบันทึกเฟรมหลัก (Frameset) มีขั้นตอนดังนี้
             1.    คลิกที่โครงเฟรมหลัก ในหน้าต่าง Frame Panel
             2.    คลิกเมนู File >> Save Frameset หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
 

        ภาพที่ 6.28 คลิกปุ่ม Save เพื่อบันทึกเฟรม
             3.    เลือกสถานที่เก็บไฟล์จากช่อง Save in
             4.    พิมพ์ชื่อไฟล์ลงในช่อง File Name
             5.    คลิกปุ่ม Save เพื่อบันทึกเฟรม
การบันทึกเฟรมย่อย
        มีขั้นตอนดังนี้
             1.    คลิกที่โครงเฟรมย่อย ในหน้าต่าง Frame Panel
             2.    คลิกเมนู File >> Save Frame หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
 

        ภาพที่ 6.29 การบันทึกเฟรมย่อย
             3.    เลือกสถานที่เก็บไฟล์จากช่อง Save in
             4.    พิมพ์ชื่อไฟล์ลงในช่อง File Name
 

        ภาพที่ 6.30 พิมพ์ชื่อไฟล์ลงในช่อง File Name
             5.    คลิกปุ่ม Save เพื่อบันทึกเฟรม
 การเชื่อมโยงเฟรมเซต
          การเชื่อมโยงเฟรมเซตมีประโยชน์มาก เพราะช่วยเลื่อนหน้าเว็บเพจให้แสดงผลข้อมูลได้ง่ายเช่น  คลิกที่แท็บสินค้าใหม่ เฟรมเซตด้านขวามือจะแสดงผลสินค้าใหม่ให้ทันที โดยมีวิธีการเชื่อมโยง ดังนี้
             1.    เลือกข้อความที่ต้องการจะสร้างลิงค์ 
             2.    คลิกปุ่ม   ในช่อง Link ของ Properties Inspector
             3.    เลือกเฟรมที่ต้องการจะเป็นเป้าหมายการลิงค์ แล้วคลิก OK
 

        ภาพที่ 6.31 การเชื่อมโยงเฟรมเซต
             4.    กำหนดคุณสมบัติการแสดงผลจากช่อง Target เช่น เลือก Mainframe เพื่อให้ไฟล์ลิงค์ไว้มาแทรกแทนเฟรม Mainframe

             ภาพที่ 6.32  กำหนดคุณสมบัติการแสดงผล
              5.    บันทึกไฟล์ และทดลองแสดงผลด้วยเบราว์เซอร์ < F12 >

  เข้าสู่บทเรียนต่อไปคลิก