การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป

งานนำเสนอเรื่อง: "การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป"— ใบสำเนางานนำเสนอ:

1 การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
By Juthawut Chantharamalee Suan Dusit Rajabhat University (Computer Science)

2 บทที่ 8 การเชื่อมโยงเว็บเพจ (Link)
บทที่ 2 Suan Dusit Rajabhat University (Computer Science)

3 บทนำ ไฮเปอร์ลิงก์ (Hyperlink) หรือที่เรียกว่า “ลิงก์” เป็นการเชื่อมโยงเว็บไซต์บน อินเตอร์เน็ต จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมต่อเข้าสู่อีเมลล์ของ Webmaster เพื่อติดต่อสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับว่ามีประโยชน์อย่าง มาก เนื่องจากทำให้ผู้เข้าชม สามารถเข้าถึงข้อมูลและเนื้อหาทุกหน้าเว็บเพจภายในเว็บไซต์ ของเราได้ Suan Dusit Rajabhat University (Computer Science)

4 ส่วนประกอบของไฮเปอร์ลิงก์
เว็บเพจหรือเว็บไซต์ โดยส่วนมากลิงก์บนเว็บเพจจะใช้สำหรับเปิดไปยังหน้าเว็บเพจอื่นภายใน เว็บไซต์เดียวกัน หรือเปิดไปยังหน้าเว็บไซต์อื่น ไฟล์เอกสารอื่นๆ สามารถลิงก์ไปยังเนื้อหาหรือข้อมูลต่างๆ บนอินเตอร์เน็ตได้ หากรู้ ตำแหน่งที่อยู่ โดยวิธีการทำงานของเบราเซอร์ จะขึ้นอยู่กับประเภทของไฟล์เหล่านั้น คำสั่งส่งอีเมลล์ คือการสั่งให้เปิดโปรแกรมอีเมลล์บนเครื่องคอมพิวเตอร์ของผู้ชม เพื่อ เตรียมเขียนข้อความส่งอีเมลล์ การรันโปรกแกรมจาวาสคริปต์ สำหรับใช้ในการโต้ตอบบนเว็บเพจ การปิดวินโดวเบราเซอร์ การเปิดลิงก็เป็นวินโดว์ใหม่ แบบป๊อบอัพ Suan Dusit Rajabhat University (Computer Science)

5 ส่วนประกอบของไฮเปอร์ลิงก์
ในการทำงานของไฮเปอร์ลิงก์มีส่วนประกอบดังนี้ ต้นทาง (Source Anchor) หมายถึง ส่วนประกอบบนเว็บที่เป็นจะลิงก์ ซึ่งเมื่อเลื่อ เมาส์ไปชี้พอยเตอร์จะเปลี่ยนเป็นรูปมือ และเมื่อคลิกเลือกหน้าเว็บหรือข้อมูลปลายทางจะ ปรากฏขึ้นมา ซึ่งอาจเป็นข้อความหรือรูปภาพก็ได้ ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่างๆ ไม่ว่าจะเป็น ข้อความหรือรูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมีผู้ชมคลิกที่ลิงก์ต้นทาง ซึ่งลิงก์ ปลายทางแบ่งได้เป็นหลายรูปแบบ ดังนี้ ตำแหน่งเฉพาะบนเว็บเพจ คือการสั่งให้เบราเซอร์เปิดเว็บเพจพร้อมทั้งเลื่อนไปยังตำแหน่งที่ ระบุไว้โดยทันที Suan Dusit Rajabhat University (Computer Science)

6 รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต
ลิงก์นับว่าเป็นส่วนสำคัญของหน้าเว็บเพจ โดยในปัจจุบันได้มีลิงก์ในรูปแบบต่างๆ มากมาย ซึ่งสามารถแบ่งได้ดังนี้ ลิงก์ข้อความ หมายถึง ลิงก์ที่ใช้ข้อความเป็นจุดเชื่อมโยงไปยังตำแหน่งปลายทาง ซึ่ง ปกติจะใช้สีให้ แตกต่างจากข้อความปกติหรือมีการขีดเส้นใต้ข้อความนั้นๆ Suan Dusit Rajabhat University (Computer Science)

7 รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต
Suan Dusit Rajabhat University (Computer Science)

8 รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต
ลิงก์รูปภาพ หมายถึง ลิงก์ที่ใช้รูปภาพเป็นจุดเชื่อมโยง โดยเมื่อนำเมาส์ไปวางบนรูปภาพ เคอร์เซอร์ของเมาส์จะเปลี่ยนเป็นรูปมือ Suan Dusit Rajabhat University (Computer Science)

9 การสร้างลิงก์ข้อความ
ในการลิงก์ข้อความนั้นสามารถทำได้ 2 วิธี คือ วิธีที่ 1 การลิงก์ข้อความไปยังหน้าเว็บเพจอื่นในเว็บไซต์เดียวกัน มีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

10 การสร้างลิงก์ข้อความ
TIP กำหนดตำแหน่งปลายทางของหน้าเว็บเพจ (Target) Link คลิกเลือกไฟล์ที่คุณต้องการ link ไป (กรณีไฟล์ที่ต้องการลิงค์ไปอยู่ใน site เดียวกัน) หรือ พิมพ์ URL ของไฟล์ลงไป กรณีถ้าไฟล์อยู่ต่าง site กัน Border ให้เรากำหนดค่าเป็น 0 เสีย ไม่เช่นนั้นจะปรากฏกรอบของ link ขึ้นโดย อัตโนมัติที่รูปภาพซึ่งเป็นลิงค์ (แต่ถ้าคุณต้องการกรอบนั้นก็ปล่อยว่างไว้ไม่ต้องกรอก เลขอะไรทั้งสิ้น) Target กำหนด Browser ที่จะมารองรับไฟล์ที่เชื่อมโยงไปนั้น โดยมีความหมาย ดังนี้ >>> Suan Dusit Rajabhat University (Computer Science)

11 การสร้างลิงก์ข้อความ
blank ให้ทำการเปิด Browser ใหม่ สำหรับไฟล์ที่เชื่อมโยงไป _self ให้เปิดไฟล์ที่เชื่อมโยงไปกับ Browser ที่เรียกใช้ไฟล์นั้น _ top ให้ทำการเปิดไฟล์ที่เชื่อมโยงไปกับ Browser ปัจจุบันและทำการลบ Frame ออกทั้งหมด หากใช้ร่วมกับเฟรม _self ให้ผลคล้ายกับ _top จากนั้นให้บันทึกเว็บเพจแล้วกดปุ่ม F12 เพื่อเรียกดูผ่านเบราเซอร์ ทดสอบโดยการ คลิกที่ลิงก์ จากนั้นก็จะเชื่อมโยงไปยังหน้าเว็บเพจที่กำหนด Suan Dusit Rajabhat University (Computer Science)

12 การสร้างลิงก์ข้อความ
Suan Dusit Rajabhat University (Computer Science)

13 การสร้างลิงก์ข้อความ
วิธีที่ 2 การลิงก์ข้อความไปยังส่วนต่างๆ ในหน้าเว็บเพจเดียวกัน มีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

14 การสร้างลิงก์ข้อความ
Suan Dusit Rajabhat University (Computer Science)

15 การสร้างลิงก์ข้อความ
Suan Dusit Rajabhat University (Computer Science)

16 การสร้างลิงก์ด้วยรูปถาพ
การสร้างลิงก์ด้วยรูปภาพนับเป็นการเพิ่มความน่าสนใจกับลิงก์ในหน้าเว็บเพจ โดยมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

17 การลิงก์ไปยังเว็บไซต์อื่น
เป็นการสร้างลิงก์ไปยังเว็บไซต์หรือแหล่งข้อมูลภายนอกเว็บไซต์ของเรา ซึ่งมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

18 The End Unit 8 Suan Dusit Rajabhat University (Computer Science)