หน่วยที่ 6 การเชื่อมโยง
|
สาระสำคัญ
การเชื่อมโยงถือเป็นจุดเด่นหนึ่งของเว็บ
เพราะการเชื่อมโยงคือความสามารถในการเชื่อมโยง
จากหน้าเว็บหนึ่งไปยังหน้าอื่นได้ รวมถึงการเชื่อมโยงไปยังภายนอกเว็บไซต์ด้วย
|
ผลการเรียนรู้ที่คาดหวัง
1.
อธิบายวิธีการสร้างการเชื่อมโยงแบบต่างๆได้ (K)
2.
มีทักษะในการสร้างการเชื่อมโยงแบบต่าง ๆ ได้ (P)
มีความขยัน อดทน
และมีเจตคติที่ดีต่อการสร้างการเชื่อมโยง (A)
การเชื่อมโยงภายใน
การเชื่อมโยงภายในเว็บเพจหน้าเดียวกัน
หากข้อมูลในหน้าเว็บเดียวกันมีขนาดยาวมาก
ทำให้ต้องใช้เมาส์เลื่อนแถบสกอลบาร์ดู
เราอาจหันมาสร้างลิงค์เชื่อมโยงสองส่วนนี้ เพื่อกระโดดไปยังส่วนต่าง ๆ
ของหน้าเว็บเดียวกัน การเชื่อมโยงภายในหน้าเว็บเพจเดียวกันนี้
จะต้องมีการกำหนดจุดเชื่อมโยงที่เรียกว่า จุด Anchor (Anchor point) เพื่อให้เกิดการกระโดดไปถึงเมื่อ
มีการคลิกข้อความที่เป็นลิงค์ ดังตัวอย่าง เราจะกำหนดให้ข้อความ
"การแทรกแถวและคอลัมภ์" เป็นจุด Anchor ดังรายละเอียดต่อไปนี้
ขั้นตอนที่ 1 กำหนดจุด Anchor
วิธีกำหนดจุด Anchor ทำได้ดังนี้
1.
กำหนดจุด Anchor
ในที่นี้คือข้อความ "การแทรกแถวและคอลัมภ์"
ที่อยู่ส่วนด้านล่างของหน้าเว็บ
2.
คลิกเมาส์ปุ่ม  ในแท็บ common
หรือเลือกจากเมนู Insert>Named Anchor หรือกด <Ctrl+Alt+A> เพื่อกำหนดให้ข้อความนี้เป็นจุดเชื่อมโยง
3.
จะปรากฎหน้าต่าง Named Anchor จากนั้นในช่อง Anchor name ให้เราตั้งชื่อจุด Anchor ดังตัวอย่างเราตั้งชื่อว่า
"1" แล้วคลิกปุ่ม เพื่อตกลง
4.
จะแสดงสัญลักษณ์สมอเรือ แสดงว่าได้กำหนดจุดการเชื่อมโยงแล้ว
ขั้นตอนที่ 2 กำหนดข้อความที่จะสร้างเป็นลิงค์
1.
คลุมดำข้อความที่จะสร้าเป็นลิงค์เชื่อมโยงไปยังจุด Anchor
2.
กำหนดจุดที่จะเชื่อมโยง โดยการพิมพ์ # ตามด้วยชื่อจุด Anchor
ที่ตั้งไว้ จากนั้นกดคีย์ <Enter> เพื่อตกลงการลิงค์ข้อความ
(ดังตัวอย่างเราจะให้เชื่อมโยงไปที่ "#1"
3.
สั่งบันทึกการทำงาน และกดปุ่ม <F12> เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงภายในเว็บเพจเดียวกัน
การเชื่อมโยงภายในเว็บไซต์เดียวกัน
เป็นการเชื่อมโยงจากหน้าเว็บหนึ่งไปยังอีกหน้าเว็บหนึ่ง
ที่อยู่ภายในเว็บไซต์เดียวกัน มีวิธีการทำดังนี้
นอกจากการใช้ข้อความเป็นลิงค์แล้ว
เราสามารถใช้รูปภาพเป็นลิงค์ได้ด้วย ซึ่งจะทำให้หน้าเว็บดูน่าสนใจมากขึ้น
โดยการคลิกภาพที่ต้องการกำหนดเป็นลิงค์ แล้วพิมพ์ตำแหน่งที่จะลิงค์ไปในช่อง Link หรือคลิกที่ปุ่มข้างช่อง Link 
การเชื่อมโยงแบบ Rollover
Image
Rollover Image คือ การทำเทคนิคภาพบนเว็บเพจให้ดูแปลกตาไป
กล่าว คือ รูปจะแสดงผลเปลี่ยนไป เมื่อเราลากเมาส์ผ่าน โดยเราจะต้องเตรียม
รูป 2 รูป ที่มีขนาดเท่าๆกัน ให้รูปที่หนึ่งเป็นรูปปกติ และอีกรูปหนึ่งถูกเรียกขึ้นมาแทนเมื่อ
ลากเมาส์ผ่าน
วิธีสร้างลิงค์แบบ
Rollove
Image
1.วางเคอร์เซอร์ ณ ตำแหน่งที่ต้องการ
2.ไปที่เมนู Insert > Image Object >Rollover
Image หรือที่ Insert Bar คลิกปุ่มคำสั่ง Image เลือก
3.จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมาทำให้เราระบุ
Original Image : ภาพต้นฉบับ สำหรับแสดงเป็นรูปปกติ
Rollover Image : ภาพที่ใช้สลับขึ้นมา
Alternate text : ข้อความที่แสดงขึ้นมาตอนนำเมาส์ไปวาง
When Clicked,Go to url : กำหนดปลายทางที่จะลิงค์ไป
4.เมื่อกำหนดค่าเรียบร้อยแล้ว ให้คลิกปุ่ม
5.ทดสอบผลกับ Browser โดยการกดปุ่ม F12
|
การเชื่อมโยงภายนอก
|
|
|
การเชื่อมโยงไปยังเว็บไซต์อื่น
|
ในการเชื่อมโยงกับเว็บไซต์อื่น
ให้เราระบุ URL ของเว็บเพจนั้น
โดยพิมพ์ http:// นำหน้าชื่อเว็บเพจที่เราต้องการเชื่อมโยงด้วยทุกครั้ง
(ขอแนะนำให้ทำการตรวจสอบ URL ปลายทางที่เราต้องการเชื่อมโยงด้วยว่าเป็นเว็บไซต์ที่ถูกต้อง
เนื่องจากเนื้อหาในเว็บมักมีการเปลี่ยนแปลงอยู่เสมอ)
เราสามารถกำหนดให้ข้อความหรือภาพที่อยู่บนหน้าเว็บเป็นลิงค์เชื่อมโยงไปยังเว็บไซต์อื่นได้
ดังนี้
|
|
1.
คลิกเลือกข้อความหรือรูปภาพที่ต้องการสร้างเป็นจุดเชื่อมโยง
2.
พิมพ์ URL ในช่อง
Link แล้วกดคีย์ <Enter>
3.
สั่งบันทึกหน้าเว็บ และกดปุ่ม <F12> เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงไปยังเว็บไซต์อื่น
|
|
|
การเชื่อมโยงไปยังอีเมล์
|
เพื่อให้ผู้ที่มาเยี่ยมชมเว็บเพจของเราติดต่อเราได้
มักมีการสร้างลิงค์ ชี้ไปยังอีเมล์แอดเดรสของเรา
เมื่อผู้ใช้คลิกที่ลิงค์นี้ก็จะสามารถเขียนอีเมล์ มาคุยกันเราได้
โดยไม่ต้องเสียเวลาพิมพ์อีเมล์แอดเดรสของเรา (เราสามารถกำหนดข้อความ
หรือภาพเป็นลิงค์เชื่อมโยงไปยังอีเมล์ก็ได้)
|
|
|
กำหนดคุณสมบัติของข้อความที่เป็นลิงค์
เราสามารถกำหนดรูปแบบของข้อความที่ใช้เป็นลิงค์
ได้จากหน้าต่าง Page
Properties โดยการคลิกเมนู Modify > Page Properties หรือคลิกเมาส์ปุ่มขวา
ที่หน้าเว็บและเลือกคำสั่ง Page
Properties จากนั้นเลือกที่หัวข้อ
Links ซึ่งสามารถกำหนดรายละเอียดได้ ดังนี้
รูปแบบ
คำอธิบาย
Links font
กำหนดรูปแบบตัวอักษรที่เป็นลิงค์
/
กำหนดัวหนา /
เอียง
Size
กำหนดขนาดของรูปแบบตัวอักษรที่เป็นลิงค์
Link color
เลือกสีลิงค์ปกติ
Visited links
เลือกสีลิงค์ทีถูกคลิกไปแล้ว
Rollover links
เลือกสีลิงค์ที่ถูกเม้าส์ชี้
Active links
เลือกสีลิงค์ที่ถูกคลิก
Underline style
กำหนดรูปแบบการขีดเส้นใต้ข้อความที่เป็นลิงค์
Always underline
ให้ขีดเส้นใต้ข้อความที่เป็นลิงค์เสมอ
Never underline
ไม่ขีดเส้นใต้ข้อความที่เป็นลิงค์
Show underline only
on rollover
ให้แสดงเส้นใต้ข้อความที่เป็นลิงค์เมื่อผู้ชมนำเมาส์วางบนส่วนนี้
Hide underline on
rollover
ให้ซ่อนเส้นใต้ข้อความที่เป็นลิงค์เมื่อผู้ชมนำเมาส์วางบนส่วนนี้
2.3 สร้างจุดเชื่อมโยงชนิดอีเมล์ในเว็บเพจ
index.html
การสร้างเทมเพลตสำหรับใช้บนหน้าเว็บ
การสร้างเทมเพลต
เราสามารถสร้างเพมเพลตได้จากหน้าเว็บที่มีอยู่แล้ว
หรือจะสร้างขึ้นมาใหม่เลยก็ได้
กรณีที่ 1 สร้างเทมเพลตจากหน้าเว็บที่ออกแบบไว้เล้ว
ถ้าเรามีหน้าเว็บที่ออกแบบไว้อย่างเหมาะสมแล้ว
ก็สามารถนำมาสร้างเป็นเทมเพลตได้เลย
