เว็บไซต์ครูวันดี จัดทำขึ้นเพื่อการเรียนรู้ เรื่อง การพัฒนาเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CS6 
Copyright © 2013 : http://www.kruwan-d.info , All Rights Reserved.
ออกแบบและพัฒนาโดย นางสาววันดี กุลภัทร์แสงทอง
โรงเรียนเทศบาลวัดดอนไก่ดี (สังวรจันทสรราษฎรวิทยา) สังกัดเทศบาลเมืองกระทุ่มแบน จังหวัดสมุทรสาคร
ดาวน์โหลด ใบกิจกรรม
                    การเชื่อมโยงภายในหน้าเว็บเพจ / การเชื่อมโยงภายในเว็บไซต์
                    การเชื่อมโยงภายนอกเว็บไซต์ / การเชื่อมโยงไปยังอีเมล / การเชื่อมโยงเพื่อดาวน์โหลด
                    การเชื่อมโยงด้วย Map Link / การเชื่อมโยงด้วย Rollover Image

                    -------------------------------------------------------------------------------

                                                                        VDO : สาธิตการเชื่อมโยงภายในเว็บเพจ

                                                                        VDO : สาธิตการเชื่อมโยงภายในเว็บไซต์

                                                                        VDO : สาธิตการเชื่อมโยงภายนอกเว็บไซต์

                                                                        VDO : สาธิตการเชื่อมโยงไปยังอีเมล

                                                                        VDO : สาธิตการเชื่อมโยงด้วย Map Link

                                                                        VDO : สาธิตการเชื่อมโยงด้วย Rollover Image



การเชื่อมโยงภายในหน้าเว็บเพจ

            ในกรณีที่เว็บเพจมีเนื้อหาและมีขนาดยาวมาก ทำให้ต้องใช้เมาส์เลื่อนแถบ Scroll bar เราสามารถสร้างการเชื่อมโยงภายในเว็บเพจ เพื่อให้สะดวกในการดูเนื้อหาในหน้าเว็บเพจ มีวิธีการดังนี้

            กำหนดจุดเป้าหมาย ที่ต้องการจะเชื่อมโยง



            1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ
            2. คลิกที่เมนู Insert แล้วเลือก  Named Anchor หรือ กดปุ่ม Ctrl + Alt + A
            3. หรือ แถบ Insert ให้เลือก Common แล้วคลิก Named Anchor
 

            4. จะปรากฏหน้าต่าง Named Anchor ให้ตั้งชื่อจุดเชื่อมโยง แล้วคลิกที่ปุ่ม OK
            5. จะปรากฏสัญลักษณ์การเชื่อมโยง ดังรูป

          การสร้างจุดเชื่อมโยงไปยังเป้าหมาย

            การกำหนดตำแหน่งการสร้างจุดเชื่อมโยง อาจใช้ข้อความหรือรูปภาพเป็นจุดเชื่อมโยงก็ได้


            1. เลือกข้อความหรือรูปภาพที่จะสร้างเป็นจุดเชื่อมโยง
            2. คลิกที่ปุ่ม HTML
            3. ช่อง Link ให้พิมพ์เครื่องหมาย # แล้วตามด้วยชื่อจุดเป้าหมาย (ตามหัวข้อ กำหนดจุดเป้าหมาย ที่ต้องการจะเชื่อมโยง)
            4. ทดสอบการแสดงผลจากเว็บเบราว์เซอร์ โดยกดปุ่ม F12

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

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


            1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง
            2. ที่ Properties Inspector ในช่อง Link ให้คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ที่จะทำการเชื่อมโยง


            3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์เว็บเพจ
            4. เลือกไฟล์เว็บเพจที่ต้องการจะเชื่อมโยง
            5. คลิกที่ปุ่ม OK


            6. ช่อง Link จะปรากฏไฟล์เว็บเพจที่เลือก
            7. ช่อง Target เป็นการกำหนดวิธีเปิดหน้าเว็บที่เชื่อมโยง ดังนี้
                 _blank ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่
                 new ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่อีกหน้าต่าง
                 _parent ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิม
                 _self ให้เปิดหน้าเว็บที่เชื่อมโยงในเฟรมเดิม
                 _top ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิม โดยจัดให้เต็มเฟรม
            8. ทดสอบการเชื่อมโยง โดยกดปุ่ม F12 เพื่อดูการแสดงผลจากเว็บเบราว์เซอร์ แล้วคลิกจุดเชื่อมโยง

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

            การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ที่อยู่ภายนอก เพื่อต้องการให้ผู้ชมเว็บไซต์ของเราสามารถศึกษาข้อมูลเพิ่มเติมได้ มีวิธีการดังนี้


            1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง
            2. ที่ Properties Inspector ในช่อง Link ให้พิมพ์ชื่อ URL ของเว็บไซต์ที่เราต้องการเชื่อมโยง โดยพิมพ์คำว่า http:// แล้วตามด้วยชื่อของเว็บไซต์ เช่น http://www.dkd.ac.th


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

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


            1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง
            2. ที่ Properties Inspector ในช่อง Link ให้พิมพ์ชื่อ URL ของเว็บไซต์ที่เราต้องการเชื่อมโยง โดยพิมพ์คำว่า mailto: แล้วตามด้วยชื่อของเว็บไซต์ เช่น mailto:admin@dkd.ac.th


การเชื่อมโยงเพื่อดาวน์โหลด

            การเชื่อมโยงเพื่อดาวน์โหลดมีจุดประสงค์ เพื่อต้องการเชื่อมโยงไปยังแฟ้มข้อมูล เช่น ไฟล์รูปภาพ ไฟล์เอกสาร หรือไฟล์อื่น ๆ มีวิธีการดังนี้


            1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง
            2. ที่ Properties Inspector ในช่อง Link ให้คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ที่จะทำการเชื่อมโยงเพื่อดาวน์โหลด


            3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์
            4. เลือกไฟล์ที่ต้องการ
            5. คลิกที่ปุ่ม OK


การเชื่อมโยงด้วย Map Link

            การเชื่อมโยงด้วย Map Link เป็นการกำหนดขอบเขตของการเชื่อมโยงบนรูปภาพ เฉพาะส่วนที่ต้องการ ซึ่งพื้นที่การเชื่อมโยงเป็นรูปสี่เหลี่ยม รูปวงกลม หรือรูปหลายเหลี่ยม มีวิธีการดังนี้


            1. คลิกเลือกรูปภาพที่ต้องการให้เชื่อมโยง


            2. คลิกเลือกเครื่องมือใน Properties Inspector
            3. กำหนดพื้นที่ ที่ต้องการจะสร้างจุดเชื่อมโยง
            4. ในช่อง Link ให้พิมพ์ชื่อเว็บไซต์หรือเลือกไฟล์ที่ต้องการจะเชื่อมโยง


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

           Rollover Image เป็นการสลับรูปภาพที่แสดง ภาพหนึ่งเป็นภาพก่อนวางเมาส์ ส่วนอีกภาพสำหรับให้ปรากฏตอนวางเมาส์เหนือภาพนั้น มีวิธีการดังนี้


            1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ
            2. คลิกที่เมนู Insert คลิกที่ Image Objects แล้วเลือก Rollover Image
            3. จะปรากฏหน้าต่าง Insert Rollover Image ให้กำหนดค่าต่างๆ ดังนี้

 

                 Image Name : ชื่อของรูปภาพ
                 Original image : การกำหนดรูปภาพแรกที่จะแสดง
                 Rollover image : การกำหนดรูปภาพที่ 2 ที่จะแสดง เมื่อนำเมาส์วางเหนือรูปภาพ
                 Alternate text : การกำหนดข้อความกำกับรูปภาพ
                 When clicked, Go to URL : กำหนดไฟล์หรือ URL ที่ต้องการจะเชื่อมโยง

            4. เมื่อกำหนดค่าต่าง ๆ เสร็จเรียบร้อยแล้ว จะได้ดังรูป


            5. ทดสอบการเชื่อมโยง โดยกดปุ่ม F12 เพื่อดูการแสดงผลจากเว็บเบราว์เซอร์



----------------------------------------------------


การเชื่อมโยงภายในหน้าเว็บเพจ / การเชื่อมโยงภายในเว็บไซต์
การเชื่อมโยงภายนอกเว็บไซต์ / การเชื่อมโยงไปยังอีเมล / การเชื่อมโยงเพื่อดาวน์โหลด
การเชื่อมโยงด้วย Map Link / การเชื่อมโยงด้วย Rollover Image