การทำลิงค์ จุดเชื่องโยงของเว็บเพจ

 

ลิงค์ (Link) หรือจุดเชื่อมโยงเว็บเพจ มีหลายรูปแบบดังนี้

  การทำลิงค์แบบข้อความ
  การทำลิงค์ไปยัง E-mail
  การรลำลิงค์ไปยัง Named Anchor        
  การทำลิค์แบบ Rollover Image

การทำลิงค์ใน Dreamweaver 8 ส่วนสำคัญจะอยุ่ตรงที่แถบ Properties ซึ่งจะมีอยู่ ส่วนด้วยกัน ได้แก่ 
                              

   

1. Link คือ แถบสำหรับเลือกไฟล?ที่ต้องการจะลิงค์ไปถึง
2. Target คือ แถบสำหรับเลือกรูปแบบของปลายทาง ซึ่งได้แก่
  _blank คือ การแสดงเว็บเพจปลายทางในหน้าต่างใหม่
  _parent คือ การแสดงเว็บเพจที่หน้าต่างเดี่ยว แต่อยู่ในเฟรมหลัก
  _self คือ การแสดงเว็บเพจในเฟรมเดียวกับต้นทาง
  _top คือการแสดงผลเว็บเพจ โดยจะไม่มีเฟรม

วิธีสร้างลิงค์จากข้อความ
1.พิมพ์ข้อความลงไป
2.ลากเม้าส์ทีบข้อความที่ต้องการ
3.คลิกที่ 
 ในแถบ properties เพื่อเลือกไฟล์ที่จะลิงค์
4.เมื่อเลือกได้แล้ว ให้คลิกปุ่ม 

5.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว

วิธีการสร้างลิงค์จากรูปภาพ
การสร้างลิงค์ด้วยรูปภาพกำลังเป็นที่นิยมในปัจจุบันนี้ ซึ่ง Dreamweaver 8 ก็สามารถทำได้ง่ายๆดังนี้
1. คลิกที่รูปภาพ
2. เลือกไฟล์ที่จะลิงค์ โดยคลิกที่
 ในแถบ Properties
3. คลิกที่ปุ่ม  

4. ทดสอบผลทาง Browser โดยการกด F12

วิธีการสร้างลิงค์จาก  Named Anchor 

Named Anchor คือ จุดอ้างอิง ใช้ในการทำลิงค์ในหน้าเว็บเดียวกัน โดยสามารถเลือกกำหนดได้ว่า จะให้เปิดที่ส่วนไหนของหน้านั้นๆ
1.ถ้าเป็นข้อความให้ลากเมาส์ข้อความนัน้ ส่วนถ้าเป็นรูปให้คลิกที่รูป
2.คลิกที่ปุ่ม  
  ที่แถบ Insert

3.พิมพ์ชื่อ เพื่อระบุให้ที่นี่เป็นตำแหน่งต้นทาง

4.คลิกที่ปุ่ม 
5.จากนั้นก็ให้ไปที่ข้อความ หรือรูปภาพ ที่ต้องการจะทำเป็นจุดหมายปลายทาง
6.จากนั้นเวลาเราจะใช้งาน Name Anchor ให้พิมพ์ และตามด้วยตำแหน่ง

                                                            

ข้อมูลจาก http://202.143.168.19/3640900093896/Dreamweaver8.doc  27 ตุลาคม  2555


การทำลิงค์ไปยังเว็บไซต์อื่น

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



                                                                                                         

 

ข้อมูลจาก http://202.143.168.19/3640900093896/Dreamweaver8.doc  27 ตุลาคม  2555


:: การทำลิงค์ไปยัง E-mail ::


            1.ถ้าเป็นข้อความให้ลากเมาส์ข้อความนั้นๆ ส่วนถ้าเป็นรูปให้คลิกที่รูป

              2.พิมพ์ mailto: ชื่ออีเมล์ลงในช่อง Link
              3.คลิกที่พื้นที่ว่าง จากนั้นก็ดูผลทาง Browser โดยการกดปุ่ม F12

ตัวอย่าง 

                                                                                                                     

วิธีสร้างลิงค์แบบ Rollover Image

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

วิธีสร้างลิงค์แบบ Rollover Image
          1.วางเคอร์เซอร์  ตำแหน่งที่ต้องการ
                2.ไปที่ Insert Bar คลิกปุ่มคำสั่ง Image เลือก 

                3.จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมาทำให้เราระบุ
                                Original Image : ภาพต้นฉบับ สำหรับแสดงเป็นรูปปกติ
                                Rollover Image : ภาพที่ใช้สลับขึ้นมา
                                Alternate text : ข้อความที่แสดงขึ้นมาตอนนำเมาส์ไปวาง
                                When Clicked,Go to url : กำหนดปลายทางที่จะลิงค์ไป
                4.เมื่อกำหนดค่าเรียบร้อยแล้ว ให้คลิกปุ่ม 

                5.ทดสอบผลกับ Browser โดยการกดปุ่ม F12
 


                                                             
                                                         
                                                                                                                         

 

การเปลี่ยนสีตัวอักษรที่เป็นลิงค์


สีของตัวอักษรเราสามารถเปลี่ยนให้เป็นสีอะไรก็ได้ โดยการทำตามขั้นตอนดังนี้
                1.เปิดหน้าต่าง Page Properties ขึ้นมา
                2.เลือกที่หัวข้อ Link ให้กำหนดค่าเหล่านี้
                                 Link Color : สีของลิงค์
                                Visited links : สีของลิงค์ที่เคยเข้าชมแล้ว
                                Rollover Link : สีของลิงค์แบบ Rollover
                                Active link : สีของลิงค์แบบ Active
                                Underline Style : ลักษณะการขีดเส้นใต้ข้อความที่เป็นลิงค์
                3.เมื่อเรากำหนดเรียบร้อยแล้วให้คิลกปุ่ม 

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

                                                                               
                                                           
                                                           


                                                           

  

                ข้อมูลจาก http://202.143.168.19/3640900093896/Dreamweaver8.doc  27 ตุลาคม  2555