การสร้างความเชื่อมโยง (Link)

งานนำเสนอเรื่อง: "การสร้างความเชื่อมโยง (Link)"— ใบสำเนางานนำเสนอ:

1 การสร้างความเชื่อมโยง (Link)
บทที่ 10 การสร้างความเชื่อมโยง (Link)

2 บทนำ การสร้าง Link การสร้างส่วนเชื่อมโยงไปยังที่ต่างๆ ได้แก่
1. เชื่อมโยงไปหน้าต่างๆ ที่อยู่ในเว็บเดียวกัน 2. เชื่อมโยงไปยังเว็บอื่น 3. เชื่อมโยงมายังอีเมล์ 4. เชื่อมโยงในหน้าเดียวกัน

3 กิจกรรมที่ 10.1 เปิดไฟล์ชื่อ index.html จะปรากฏแบบที่ได้ทำไว้ในกิจกรรมบทที่ 9

4 การเชื่อมโยงไปยังหน้าต่างๆ ที่อยู่ภายในเว็บเดียวกัน
1. ทำแถบสีคลุมข้อความที่ต้องการ 2. คลิกที่รูปเครื่องมือ Browse for file ตรงช่อง Link ของกรอบ Properties

5 การเชื่อมโยงไปยังหน้าต่างๆ ที่อยู่ภายในเว็บเดียวกัน
3. เลือกโฟลเดอร์ที่ต้องการในช่อง Look in (mywork) 4. เลือกไฟล์ที่ต้องการ (Star1.html)

6 การเชื่อมโยงไปยังหน้าต่างๆ ที่อยู่ภายในเว็บเดียวกัน
5. คลิกที่ OK 6. กำหนด Target ให้เป็นแบบ _parent 7. กำหนด Properties จะปรากฏข้อความที่เลือกในช่อง Link และ Target ดังนี้ Target _blank = เปิดหน้าต่างใหม่ เมื่อจะกลับมาเว็บเดิม ต้องปิดกรอบหน้าต่างใหม่ เสียก่อน _parent = เปิดหน้าใหม่โดยอยู่ในหน้าต่างเดิม เมื่อจะกลับมาหน้าเว็บเดิมต้องคลิกที่ ปุ่มเครื่องมือ Back _seft = เปิดเพจที่เชื่อมโยงในเฟรมเดิม _top = เปิดเพจที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิมโดยจัดให้เต็มเฟรม

7 กิจกรรมที่ 10.2 ให้ปฏิบัติการสร้าง Link ดาราหญิงไปยังไฟล์ชื่อ star2.html และสร้าง Link ท่องเที่ยว Link ไปยังไฟล์ชื่อ tour.html เสร็จก่อนและทำการบันทึก ทดลองคลิกบราวเซอร์ โดยให้สังเกตข้อความที่ทำการ Link เมื่อนำเมาส์ไปวางจะเป็นรูปมือ เมื่อคลิกไปยังหน้าอื่นแล้วให้กด Back กลับ (ในกรณีที่ไม่ได้สร้างข้อความสำหรับ Link กลับไว้)

8 การเชื่อมโยงไปยังเว็บไซต์อื่น
1. ทำแถบสีคลุมข้อความที่ต้องการ 2. คลิกข้อความต่อไปนี้ในช่อง Link คือ ตามด้วยชื่อเว็บ เช่น 3. กำหนด Target ให้เป็นแบบ _blank

9 กิจกรรมที่ 10.3 ให้ปฏิบัติการสร้าง Link ไปยังเว็บไซต์ www.pantip.com
และ

10 การเชื่อมโยงไปยังอีเมล์
1. ทำแถบสีคลุมข้อความที่ต้องการ 2. พิมพ์ข้อความต่อไปนี้ในช่อง Link คือ mailto: ตามด้วยชื่ออีเมล์ เช่น หรือ 1. คลิกที่ตำแหน่งที่ต้องการวางชื่ออีเมล์ 2. คลิกรูปเครื่องมือ link 3. พิมพ์ข้อความที่ต้องการแสดงในช่อง Text 4. พิมพ์ชื่อ address ในช่อง address 5. คลิก OK

11 การสร้าง Link ด้วยรูปภาพ
ไม่ว่าจะเป็นการ Link ไปยังหน้าต่างๆ ที่มีอยู่ในเว็บเดียวกัน หรือ Link ไปยังเว็บอื่นให้ปฏิบัติดังนี้ 1. คลิกที่รูปภาพที่ต้อง 2. คลิกที่ Browse for file เพื่อเลือกชื่อไฟล์ที่ต้องการ หรือพิมพ์ชื่อเว็บไซต์ในช่อง Link 3. กำหนด Target

12 กิจกรรมที่ 10.4 ให้ปฏิบัติการสร้าง Link ด้วยรูปภาพ 3 รูป ตามตัวอย่าง Link ไปยังชื่อไฟล์ star1.html, star2.html และ tour.html

13 การสร้าง Link ในหน้าเดียวกัน
1. กำหนดข้อความต้นทางและปลายทาง 2. คลิกที่หลังข้อความปลายทาง 3. คลิกที่เมนู Insert 4. Invisible 5. Name Anchor 6. พิมพ์ชื่อที่ต้องการ เช่น a 7. คลิก Ok 8. ทำขั้นตอนที่ 2-7 จนครบ (โดยกำหนดชื่อใหม่ไม่ให้ซ้ำกัน) 9. ทำแถบสีคลุมข้อความที่ต้องการ 10. พิมพ์เครื่องหมาย # ตามด้วย Name Anchor เช่น #a, #b 11.ทำขั้นตอนที่ 9-10 จนครบ

14 การกำหนดสีของตัวอักษรที่ทำ Link
1. คลิกที่เมนู Modify 2. คลิกที่ Properties 3. กำหนดสีตามต้องการดังนี้ Text = สีของข้อความปกติ Links = สีของข้อความที่ทำ Link ไว้ Visited Links = สีของข้อความที่ได้คลิกดูแล้ว Active Links = สีของข้อความระหว่างกดเมาส์ค้างไว้ตรงข้อความ ที่ทำ Link 4. คลิก OK การกำหนดสีต่างๆ เหล่านี้ ให้คำนึงถึงพื้นที่ได้กำหนดไว้ด้วย ไม่ควรเป็นสีที่กลมกลืน กัน ควรจะเป็นสีที่ตัดกัน

15 การตรวจสอบรายการต่างๆ
Local View = รายชื่อไฟล์ต่างๆ Remote View = Upload File Testing Server = ตรวจสอบ Server Map View = ดูเส้นทางแผนผังเว็บไซต์

16 การตรวจสอบรายการต่างๆ
ในกรณีที่เลือก Map View จะปรากฏเส้นทางเดินดังนี้

17 The End