ใบเนื้อหา 6

วชิ า การสรา้ งเวบ็ ไซต์ รหัสวชิ า 2204-2009 หนว่ ยที่ 6 การสร้างจุดเชอื่ มโยง ครผู ้สู อน ศริ นิ ภา บตุ ะเขียว แผนกวชิ าคอมพวิ เตอร์ธรุ กิจวทิ ยาลัยเทคนคิ กาญจนาภิเษก สมุทรปราการ

ใบเน้ือหา หนว่ ยท่ี 6 การสรา้ งจุดเช่ือมโยงเน้อื หาสาระการสอน/การเรยี นรู้• ด้านความรู้(ทฤษฎี) 1. การสร้างจุดเชอ่ื มโยง การสร้างจุดเชอ่ื มโยง (Hyperlink) เปน็ การเชื่อมโยงกันจากจดุ หน่งึ ของเอกสารไปยังอีกตาแหนง่ หนง่ึของเอกสารเดยี วกนั หรอื ตา่ งเอกสารกนั บนอินเทอร์เนต็ โดยใชข้ อ้ ความ ภาพ หรือเมนูแบบดร็อปดาวน์อย่างใดอย่างหน่ึงเพ่ือเปน็ ต้นทางในการเชือ่ มโยงไปสู่เอกสารปลายทาง ซึง่ อาจเปน็ จุดใดจดุ หนึ่งในเอกสารเดียวกัน(Named Anchor), เว็บเพจอ่ืน ๆ, เวบ็ ไซต์, อีเมล์, หรือแม้แต่ไฟล์ข้อมูลสาหรบั ดาวนโ์ หลดและการรนั ไฟล์โปรแกรม เป็นต้น การกาหนดเปา้ หมายการเชื่อมโยง ในกรณีท่ีเวบ็ เพจมีเนื้อหายาว ๆ แสดงผลไมพ่ อกับจอภาพ ผอู้ า่ นจะต้องเล่ือนหนา้ จอเพ่อื ดูขอ้ มลูด้านลา่ ง ทาให้ไม่สะดวกเทา่ ที่ควร ผอู้ อกแบบเว็บเพจควรกาหนดการเช่อื มโยงโดยสรา้ งเป็นหัวเร่ืองแยกไว้ต่างหาก เมื่อผอู้ า่ นตอ้ งการทราบข้อมูลเร่ืองนน้ั สามารถคลิกท่หี ัวเร่ืองและเช่ือมโยงไปยังเน้ือเรือ่ งนั้นทันทีการเช่อื มโยงในหน้าเวบ็ เพจเดียวกนั ข้นั ตอนแรกจะตอ้ งกาหนดจุดเป้าหมาย (Anchor Point) วา่ จะให้เชอื่ มโยงไปทต่ี าแหน่งใดของหน้า ซ่ึงมีข้ันตอนดงั น้ี - คลิกทร่ี ูปภาพ ตาราง หรอื ข้อความทต่ี ้องการจะเป็นจดุ เปา้ หมาย - เลอื กคาสั่ง Insert >> Name Anchor หรอื ใช้แป้น < Ctrl > + < Alt > + < A > หรือใช้เคร่อื งมอื บนกลุ่มเครื่องมือ Common จะได้หน้าต่าง Name Anchor - ต้งั ชอ่ื จุดเปา้ หมาย - คลิก OK จะปรากฏรปู สมอเรือกากบั อยู่ทจี่ ดุ เปา้ หมาย การสรา้ งการเชือ่ มโยงไปยังเปา้ หมาย

- เมือ่ ไดเ้ ป้าหมายแล้ว ข้ันต่อไปกจ็ ะต้องสรา้ งการเชอื่ มโยงให้ตรงกับเป้าหมาย ดังนเ้ี ลอื กข้อความภาพ หรือ ตาแหน่งท่ีจะทาการเช่อื มโยง - ไปที่ Properties ในช่อง Link ใหพ้ ิมพ์เครื่องหมาย # ตามดว้ ยช่อื Anchor ท่ไี ดต้ ้ังไว้(ตามตวั อย่างคือ #email) เสร็จแล้วกด < Enter > - ตรงจุดเชอื่ มโยงจะปรากฏอักษรสีน้าเงนิ และขีดเสน้ ใตข้ นึ้ มา - กดแปน้ < F12 > เพื่อดผู ลดว้ ยเว็บบราวเซอร์ - เม่อื เล่ือนเมาสไ์ ปตรงจดุ ลงิ ค์ เมาสจ์ ะเปน็ รปู มือ คลกิ เมาส์จะเลอ่ื นไปยังจดุ เป้าหมาย 2. การเช่อื มโยงภายในเว็บไซต์เดยี วกนั การสร้างจุดเชือ่ มโยง (Hyperlink) เป็นการเชอ่ื มโยงกันจากจุดหนง่ึ ของเอกสารไปยังอีกตาแหนง่ หนง่ึของเอกสารเดยี วกนั หรือตา่ งเอกสารกนั บนอนิ เทอรเ์ น็ต โดยใชข้ อ้ ความ ภาพหรือเมนูแบบดรอ็ ปดาวน์อย่างใดอยา่ งหน่ึงเพื่อเป็นต้นทางในการเชอื่ มโยงไปสู่เอกสารปลายทาง ซ่ึงอาจเป็นจุดใดจุดหน่งึ ในเอกสารเดียวกัน(Named Anchor), เว็บเพจอื่น ๆ, เวบ็ ไซต์, อีเมล, หรือแม้แต่ไฟล์ข้อมูลสาหรับดาวน์โหลดและการรนั ไฟล์โปรแกรม เป็นต้น การกาหนดเปา้ หมายการเชื่อมโยง

เปน็ การเชือ่ มโยงในเวบ็ เพจเดียวกัน หรอื ลิงค์ไปยังไฟลอ์ ีกไฟลท์ ีอ่ ยู่ในเว็บไซต์เดียวกันโดยให้เปิดไฟล์นน้ั ขึน้ มาทั้งไฟล์ เชน่ จากหน้าแรกให้ลงิ ค์ไปยงั หน้าสินคา้ ใหม่ เปน็ ต้น การเช่ือมโยงในเวบ็ ไซตเ์ ดยี วกนั มีวิธกี ารดังน้ี - เลือกข้อความ รูปภาพ ตาราง หรอื วตั ถุท่ใี ชเ้ ป็นจุดเชื่อมโยง - คลิกท่ีไอคอน ด้านขวามอื ของช่อง Link เพอ่ื เลือกไฟล์ (ถ้าจาช่อื ไฟล์ได้ให้พิมพช์ อ่ื ไฟล์ลงไปในชอ่ ง Link ไดเ้ ลย) - จะไดห้ น้าต่าง Select File เลือกไฟล์ทีต่ ้องการ แล้วคลกิ OK - ชอ่ื ไฟล์ที่ลงิ ค์กจ็ ะปรากฏอยู่ในชอ่ งลิงค์ - บนั ทกึ ไฟล์ และแสดงผลบนเว็บบราวเซอรด์ ว้ ยแปน้ < F12 > - ลองคลิกท่ตี าแหน่งทก่ี าหนดการเชือ่ มโยง บราวเซอร์จะแสดงผลหนา้ เว็บทถ่ี กู ลงิ ค์ไปทนั ที (ควรทาลงิ ค์ 2 ทางเพ่ือผู้ใช้จะได้คลกิ กลบั ไปยังหน้าแรกได้ดว้ ย) 3. การเชื่อมโยงไปยงั เวบ็ ไซต์อื่น การกาหนดการเชื่อมโยงไปยงั เวบ็ ไซต์อื่น ๆ ทีเ่ ก่ยี วข้อง เพื่อตอ้ งการให้ผู้ชมศึกษาข้อมูลเพ่ิมเติม โดยมีวิธกี ารดังตอ่ ไปน้ี 1. เลือกองคป์ ระกอบทจี่ ะใชส้ รา้ งไฮเปอร์ลิงค์ เช่น ข้อความ หรอื ภาพ 2. พิมพ์ URL ของเวบ็ ไซตป์ ลายทาง เชน่ http://www.google.co.th 3. เลือกเฟรมเป้าหมายทจ่ี ะแสดงในเวบ็ เพจ 4. ทดสอบการเชือ่ มโยงโดยกดคีย์ F12 เพอื่ ดูการแสดงผลจากเว็บบราวเซอร์ 4. การเชอ่ื มโยงไปยงั อีเมล์

การเชอื่ มโยงไปยังอีเมล์ คือ การสร้างอเี มล์แอดเดรสของเราไวส้ าหรบั ให้ผู้ตอ้ งการจะตดิ ต่อได้พิมพ์จดหมายส่งมาได้ทันทโี ดยไมต่ ้องเสยี เวลาพิมพ์อเี มล์แอดเดรสอกี โดยปกติจะอยู่ในเว็บเพจหน้า “ ตดิ ตอ่บริษัท ” หรอื “ Contact Us ” 1. เลือกข้อความหรือภาพท่จี ะสรา้ งไฮเปอร์ลิงค์เพ่ือสง่ อเี มล์ 2. พมิ พ์ mailto: อีเมล์แอดเดรส เชน่ mailto:webmaster@com-leasning2u.com 3. ทดสอบการเช่อื มโยงโดยกดคีย์ เพ่อื จะเปิดโปรแกรมอเี มล์ 4. คลิกปุ่ม เพอื่ จบการสร้างลงิ ค์เพื่อส่งอเี มล์ 5. การเชอ่ื มโยงโดย Map Link Map Link คอื การแบ่งรปู ภาพออกเปน็ บรเิ วณย่อยเฉพาะบางส่วนของรูปภาพเพ่ือกาหนดให้เป็นลงิ ค์ไปยงั ปลายทางท่ีแตกต่างกัน เน่ืองจากในภาพสามารถมไี ดห้ ลายลงิ คด์ ว้ ยกนั เชน่ คลิกท่ีลงิ ค์บรเิ วณด้านบนหรือดา้ นลา่ งของภาพกจ็ ะไปยังปลายทางหน่ึง เปน็ ต้น การเชอ่ื มโยงแบบแบบลิงค์ มวี ิธีดงั นี้ 1. คลิกเลือกรูปทต่ี ้องการสรา้ งลงิ ค์ 2. เลอื กเคร่ืองมือใน Properties Inspector สาหรบั วาดพื้นท่ลี งิ ค์เปน็ สเี่ หลี่ยม สาหรบั วาดพืน้ ท่ีลงิ คเ์ ป็นวงกลม สาหรับวาดพ้ืนท่ีลิงคเ์ ปน็ หลายเหลยี่ ม 3. วาดบรเิ วณทต่ี อ้ งการใหเ้ ป็นลิงค์ 4. พิมพช์ อื่ เวบ็ เพจปลายทางลงในช่องลิงค์ หรือเลือกไฟล์ท่ีจะลงิ คไ์ ป

6. การแกไ้ ขการเชอ่ื มโยงเว็บเพจ การแก้ไขการเชื่อมโยงเว็บเพจ การแก้ไขการเปิดหน้าเว็บเพจเปน็ การกาหนดให้แสดงเวบ็ เพจที่ลงิ ค์ตรงท่ใี ด ๆ บนเว็บเพจ (Target)โดยแบ่งออกเป็น 4 ลักษณะ ดังน้ี _blank เป็นการเปิดเวบ็ เพจปลายทางในวนิ โดว์ใหม่ _parent เป็นการแสดงเวบ็ เพจในเฟรมที่ครอบอยใู่ นเฟรมปัจจุบนั (ในกรณีทมี่ ีการใช้เฟรม) _self เปน็ การแสดงเว็บเพจในเฟรมเดิมของลิงค์ _top เปน็ การแสดงเวบ็ เพจในวนิ โดวเ์ ดมิ โดยยกเลิกเฟรมที่ครอบอยทู่ ัง้ หมด 7. การกาหนดคณุ สมบตั ิการเช่อื มโยง การเชอ่ื มโยงท่ีกาหนดไว้ใน Properties เป็นคณุ สมบัติทีต่ ้ังคา่ ไวใ้ น Page Properties ซึ่งสามารถกาหนดคุณสมบัติการเช่ือมโยง ดังนี้ 1. คลกิ ขวาทีห่ นา้ เว็บเพจ แลว้ เลอื กคาสงั่ Page Properties จากเมนลู ัด หรือเลือกคาส่งั Modify>> Page Properties จะได้หนา้ ต่าง Page Properties ดังน้ี

2. คลกิ ท่ีคาส่งั Links ท่ี Category แล้วเลือกคุณสมบัติตา่ ง ๆ ดา้ นขวามอื3. เลอื กรปู แบบต่าง ๆ แล้วคลกิ ปมุ่ OK