บทที่6

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


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

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

1.การเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน  ใช้ในกรณีที่เราต้องการให้มีจุดเชื่อมโยงในหน้าเดียวกัน เมื่อคลิกเมาส์ที่จุดเชื่อมโยงแล้วมีการเลื่อนตำแหน่งขึ้นหรือลงไปจากตำแหน่งเดิม สามารถสร้างการเชื่อมโยงได้ดังนี้
                        1.1 สร้างการเชื่อมโยงด้วยแอททริบิวต์ href ดังต่อไปนี้
 <a href="#ชื่อจุดเชื่อมโยง">....ข้อความที่ปรากฎบนหน้าเว็บเพจ....</a>

 ข้อสังเกต ในขั้นตอนของการสร้างการเชื่อมโยง หน้าชื่อจุดเชื่อมโยงต้องมีเครื่องหมาย # 

                        1.2 สร้างจุดเชื่อมโยงในหน้าเว็บเพจด้วยแอททริบิวต์ name ดังต่อไปนี้ :  <a name="ชื่อจุดเชื่อมโยง">ข้อความที่ปรากฎบนหน้าเว็บเพจในบรรทัดแรกของข้อมูลนั่นๆ</a>

<a name="ชื่อจุดเชื่อมโยง">ข้อความที่ปรากฎบนหน้าเว็บเพจในบรรทัดแรกของข้อมูลนั่นๆ</a>
                    ข้อสังเกต ในขั้นตอนของการสร้างจุดเชื่อมโยง ชื่อจุดเชื่อมโยงไม่ต้องมีเครื่องหมาย # 
                                 หมายเหตุ ชื่อจุดเชื่อมโยงนักเรียนสามารถตั้งขึ้นมาเองเป็นอักษรภาษาอังกฤษ และห้ามซ้ำกันในหน้าเว็บเพจเดียวกัน
                ตัวอย่างการสร้างการเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหน้าเว็บเพจเดียวกัน <br>
<hr>
<a href="#link1">1.หลักการสร้างเว็บเพจ</a><br>
<a href="#link2">2.การจัดรูปแบบตัวอักษร</a><br>
<a href="#link3">3.การใช้งานรูปภาพบนเว็บเพจ</a><br>
<hr>
<a name="link1">หลักการสร้างเว็บเพจ</a>
<br>
...........................<p>
...........................<p>
<a name="link2">การจัดรูปแบบตัวอักษร</a>
<br>
...........................<p>
...........................<p>
<a name="link3">การใช้งานรูปภาพบนเว็บเพจ</a>
<br>
...........................<p>
...........................<p>
</body>
</html>
 2.  การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ คือ การเชื่อมโยงไปยังจุดเชื่อมโยงที่อยู่คนละหน้าเว็บเพจกัน  มีรูปแบบการใช้งานดังนี้
         <a href="ชื่อไฟล์เว็บเพจ.นามสกุล">...ข้อความที่ปรากฎบนหน้าเว็บเพจ...</a>
                                       
                                ตัวอย่างการเขียนโปรแกรมเชื่อมโยงไปหน้าเว็บเพจอื่น (ต้องมีเว็บเพจที่สร้างไว้แล้ว มากกว่า 1 หน้าและถูกจัดเก็บไว้ที่เดี่ยวกัน)
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหน้าเว็บคนละหน้า <br>
<hr>
<a href="page1.html">1.หลักการสร้างเว็บเพจ (page1.html) </a><br>
<a href="page2.html">2.การจัดรูปแบบตัวอักษร (page2.html) </a><br>
<a href="page3.html">3.การใช้งานรูปภาพบนเว็บเพจ (page3.html)</a><br>
<hr>
</body>
</html>
   3.  การเชื่อมโยงไปยังเว็บไชต์อื่น ๆ  เราสามารถสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ได้ โดยใช้แท็กดังต่อไปนี้
<a href="URL หรือที่อยู่ของเว็บไวต์ที่ต้องการ">ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
                                        ดังที่เราจะเห็นในเว็บไซต์ต่างๆที่มีการเชื่อมโยงไปยังมหาวิทยาลัยต่างๆ เป็นต้นนักเรียนมาทดลองทำตามตัวอย่างด้านล่างดูในตัวอย่างนั้นจะทำการเชื่อมโยง ไปยังมหาวิทยาลัย  4 แห่งด้วยกัน คือ
                                                                1.มหาวิทยาลัยศิลปากร                          โดยที่ URL คือ http://www.su.ac.th
                                                                2.มหาวิทยาลัยเกษตรศาสตร์                  โดยที่ URL คือ http://www.ku.ac.th
                                                                3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง    โดยที่ URL คือ http://www.mcru.ac.th
                                                                4.มหาวิทยาลัยราชภัฏเพชรบุรี               โดยที่ URL คือ http://www.pbru.ac.th
                                   ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไชต์อื่น ๆ 
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ <br>
<hr>
<a href="http://www.su.ac.th">1.มหาวิทยาลัยศิลปากร </a><br>
<a href="http://www.ku.ac.th">2.มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">4.มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
</body>
</html>
เพิ่มเติม  การนำรูปภาพมาเป็นชุดเชื่อมโยง สามารถนำรูปภาพมาเป็นจุดเชื่อมโยงได้ เพียงแค่เปลี่ยนข้อความที่ปรากฎบนหน้าเว็บเพจเป็นแท็กที่ใช้แสดงรูปภาพแทนดังนี้
<a href="http://www.su.ac.th"><img src="sea.jpg"></a>
                                    ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไซต์ต่าง ๆ โดยใช้รูปภาพ
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้รูปภาพ <br>
<hr>
<a href="http://www.su.ac.th"><img src="comp4.gif"></a><br>
เป็นการนำรูปภาพมาเป็นชุดเชื่อมโยงไปยังเว็บไซต์ ม.ศิลปากร <br>
<hr>
</body>
</html>

  4.การเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่เอกสาร HTML
                                  นักเรียนจะเห็นจากบางเว็บไซต์มีการการลิงค์เพื่อให้ทำการ Download ข้อมูลต่าง ๆ  เช่น  ไฟล์รูปภาพ, ไฟล์โปรแกรม , ไฟล์ซิป  (.zip)    และไฟล์เสียง  เป็นต้น การสร้างชุดเชื่อมโยงหรือลิงค์ก็คล้ายกับวิธีที่กล่าวมาเพียงแต่ว่าถ้าหาก ไฟล์จุดหมายปลายทางเป็นไฟล์ประเภทใดเบราว์เซอร์ก็จะทำงาน ให้สอดคล้องกับไฟล์ ประเภทนั้น เช่น หากไฟล์จุดหมายปลายทางที่สร้างลิงค์ไว้เป็นรูปภาพ เบราว์เซอร์ก็จะเปิดรูป ภาพนั้นให้ดู  แต่ถ้าเป็นไฟล์ ประเภทอื่น นัักเรียนก็จะพบหน้าจอ ของการดาวน์โหลด (Download) รูปแบบคำสั่งหรือแท็กที่ใช้เป็นดังนี้้

        <a href="ชื่อไฟล์.นามสกุล">ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
                                ตัวอย่างการสร้างการเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่ ไฟล์ HTML
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg และเว็บไซต์อื่นๆ <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เป็นการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.doc">ไฟล์เอกสาร</a>เป็นการเชื่อมโยงไปยังไฟล์เอกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
</body>
</html>

  5.การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์ (E-mail)
                                    นักเรียนสามารถให้ผู้เข้าชมเว็บของเราสามารถติดต่อสื่อสารเราได้ อาจเป็นการส่งคำติชมการสร้างเว็บ หรือการแจ้งข่าวสารให้ผู้สร้างเว็บเพจทราบ เป็นการสื่อสาร แบบ 2 ทาง (Two-way Communication) สามารถทำได้ดังนี้

   <a href="mailto:ชื่ออีเมล์แอดเดรส"> ข้อความลิงค์ที่ปรากฎบนหน้าเว็บเพจ </a>
                                    ตัวอย่างการสร้างการเชื่อมโยงเพื่อส่ง E-mail
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) เพื่อส่ง E-mail </title>
</head>
<body>
การสร้างการเชื่อมโยงเพื่อส่ง E-mail <br>
<hr>
<a href="mailto:webmaster@thaimail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>

การกำหนดสีของจุดเชื่อมโยงหรือลิงค์
                                    การสร้างการเชื่อมโยง โดยปกติเมื่อนำเมาส์ไปชี้ที่จุดเชื่อมโยง นอกจากสัญลักษณ์ของเมาส์จะเปลี่ยนเป็นรูปมือแล้วข้อความที่เป็นจุดเชื่อมโยง หรือลิงค์ ยังมีขีดเส้นใต้หรือบางครั้งก็มีสีที่แตกต่างออกไปจากข้อความปกติและเมื่อ คลิกเมาส์เข้าไปแล้วข้อความที่เป็นลิงค์ที่เราเคยคลิกไปแล้วก็อาจเปลี่ยน เป็นอีกสีหนึ่งได้เพื่อให้เกิดความแตกต่างจากข้อความปกติและเป็นการบอก ให้ทราบว่าได้เคยคลิกไปที่จุดเชื่อมโยงใดแล้วบ้าง ซึ่งผู้สร้างเว็บเพจสามารถ กำหนดสีของจุดเชื่อมโยงได้เองดังนี้
1.สีของชุดเชื่อมโยงหรือลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink) ใช้แอททริบิวต์ link
2.สีของชุดเชื่อมโยงหรือลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink) ใช้แอททริบิวต์ vlink
 3.สีของชุดเชื่อมโยงหรือลิงค์ตอนที่ถูกคลิก (Active Link) ใช้แอททริบิวต์ alink
        <body link="ค่าสี" vlink="ค่าสี" alink="ค่าสี">
                                    ตัวอย่างการกำหนดสีชุดเชื่อมโยงหรือลิงค์
<html>
<head>
<title>การกำหนดสีชุดเชื่อมโยง (Link)</title>
</head>
<body link="green" vlink="blue" alink="red">
การกำหนดสีชุดเชื่อมโยง โดยที่ <br>
1.ลิงค์ที่ยังไม่เคยถูกคลิกจะเป็นสีเขียว (link) <br>
2.ลิงค์ที่เคยถูกคลิกไปแล้วจะเป็นสีน้ำเงิน (vlink) <br>
3.ลิงค์ที่กำลังถูกคลิกจะเป็นสีแดง (alink) <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เป็นการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.doc">ไฟล์เอกสาร</a>เป็นการเชื่อมโยงไปยังไฟล์เอกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
<a href="mailto:webmaster@thaimail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>

การเชื่อมโยงเพื่อส่งอีเมล
          เพื่อให้ผู้ที่มาเยี่ยมชมหน้าเว็บของเราติดต่อเราได้ มักมีการสร้างลิงค์ชี้ไปยังอีเมล์แอดเดรสของเรา เมื่อผู้ใช้คลิกที่สิงค์นี้ก็จะสามารถเขียนอีเมล
มาคุยกับเราได้ โดยไม่ต้องเสียเวลาพิมพ์อีเมลแอดเดรสของเรา (เราสามารถกำหนดข้อความ หรือภาพเป็นลิงค์เชื่อมโยงเพื่อส่งอีเมลได้)
          ดังตัวอย่างเมื่อคลิกที่ลิงค์ “ติดต่อกับผู้จัดทำ” จะเปิดโปรแกรม Microsoft Outlook ที่ใช้สำหรับส่งเมลโดยมีอีเมลแอดเดรสแสดงขึ้นมา
ให้เรียบร้อย

 วิธีการทำจุดเชื่อมโยงไปยังอีเมลก็คือ   เลือกข้อความที่ต้องการ แล้วคลิกช่อง link แล้วพิมพ์คำว่า mailto: ตามด้วย อีเมล เช่น  
 mailto:kroocom@yahoo.com
 ให้เราสั่งบันทึกหน้าเว็บ และกดปุ่ม <F12> เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงเพื่อส่งอีเมล์ เมื่อเราคลิกที่ลิงค์ข้อความหรือภาพ ก็จะเปิดโปรแกรม
 ส่งอีเมล์ขึ้นมา
          การใช้เครื่องมือ (Email Link)


          ใน Dreamweaver มีอีกวิธีให้เราสร้างลิงค์ส่งอีเมลได้อย่างสะดวก โดยให้เราเลือกตำแหน่งที่จะวางลิงค์นี้ จากนั้นคลิกที่เครื่องมือที่แท็บCommon (หรือเลือกคำสั่ง Insert > Email Link) จะปรากฏไดอะล็อกบ็อกซ์ Email Link ให้เรากรอกข้อความที่แสดงเป็นลิงค์ 
 และอีเมลแอดเดรสที่จะให้ส่งอีเมลไปถึงในช่อง E-Mail  

การเชื่อมโยงด้วย Map Link
 การเชื่อมโยงด้วย Map Link เป็นการกำหนดขอบเขตของการลิงค์บนภาพกราฟิก 
โดยใช้เครื่องมือจาก Property inspector เราสามารถวาดพื้นที่ลิงค์เป็นรูปสี่เหลี่ยม วงกลม รูปหลายเหลี่ยมได้ ดังตัวอย่าง เราจะใช้ภาพเป็นตัวกำหนดพื้นที่ลิงค์ และใช้เครื่องมือ Map Link วาดรูปสี่เหลี่ยมที่ภาพเพื่อกำหนดพื้นที่ลิงค์ ไปยังหน้าเว็บเพจที่ต้องการ ปฏิบัติตามได้ ดังนี้

 1. คลิกเลือกที่ภาพ ดังนี้

               

2. คลิกเลือกที่เครื่องมือสี่เหลี่ยมวาดสี่เหลี่มบนภาพ ดังภาพ


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


4. นอกจากนี้ เรายังกำหนดค่าเพิ่มเติมได้ ในช่อง Target ดังภาพ
  • _blank เป็นการเปิดหน้าเว็บที่เชื่อมโยงไปในหน้าต่างบราวเซอร์ใหม่
  • _parent เป็นการเปิดหน้าเว็บที่เชื่อมโยงไปในหน้าต่างบราวเซอร์เดิม
  • _self เป็นการเปิดหน้าเว็บที่เชื่อมโยงไปในเฟรมเดิม
  • _top เป็นการเปิดหน้าเว็บที่เชื่อมโยงไปในหน้าต่างบราวเซอร์เดิม โดยจัดให้เต็มเฟรม
5. เราสามารถแก้ไข Map Link ได้โดยใช้เครื่องมือ ที่ Property Inspector คลิกเลือก Map Link ที่ต้องการแก้ไข ปรับขนาด หรือปรับเปลี่ยนตำแหน่ง/เลื่อนไปวางส่วนอื่นของภาพได้ตามต้องการ ดังภาพ

6. การลบ Map Link ทำได้ง่าย ๆ คือ พื้นที่ที่เรากำหนดเป็นลิงค์ จะเรียกว่า image map ให้คลิกเลือก image map แล้วกดปุ่ม < Delete >

การกำหนดคุณสมบัติของการเชื่อมโยง
       การกำหนดคุณสมบัติของการเชื่อมโยง เราสามารถกำหนดคุณสมบัติของการเชื่อมโยงได้หลายอย่าง จากหน้า Page Properties ให้เลือกคำสั่ง Modify > Page Properties... และปฏิบัติตามขั้นตอน ดังภาพ

1. หมายเลข 1 ที่ Category เลือก Links
2. หมายเลข 2 Link font : ให้เลือกกำหนดตัวอักษรที่เป็นลิงค์ 
    กำหนดตัวหนาและตัวเอียง
3. หมายเลข 3 Size : กำหนดขนาดของตัวอักษรที่เป็นลิงค์
4. หมายเลข 4 Link color : เลือกสีลิงค์ปกติ
5. หมายเลข 5 Visited links : เลือกสีลิงค์ที่ถูกผู้ใช้เว็บคลิกไปแล้ว
6. หมายเลข 6 Rollover links : เลือกสีลิงค์เมื่อผู้ใช้นำเมาส์มาวางบนส่วนนี้
7. หมายเลข 7 Active links : เลือกสีลิงค์ที่ถูกคลิก
8. หมายเลข 8 Underline style : กำหนด/เลือกรูปแบบการขีดเส้นใต้ข้อความที่เป็นลิงค์ มีดังนี้Always underline : ขีดเส้นใต้ข้อความที่เป็นลิงค์เสมอ
  • Never underline : ไม่ขีดเส้นใต้ข้อความที่เป็นลิงค์
  • Show underline only on rollover : แสดงขีดเส้นใต้ข้อความที่เป็นลิงค์ เมื่อผู้ใช้นำเมาส์มาวางบนส่วนนี้
  • Hide underline only on rollover : ซ่อนเส้นใต้ข้อความที่เป็นลิงค์ เมื่อผู้ใช้นำเมาส์มาวางบนส่วนนี้
9. หมายเลข 9 เมื่อกำหนดคุณสมบัติทุกอย่างตามต้องการแล้ว คลิก Apply ขอใช้ตามนี้
10. หมายเลข 10 คลิก OK

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ความคิดเห็น (Atom)