แบบฝึกที่ 5 : เรื่องการสร้างไฮเปอร์ลิงค์ (Hyperlink) |
ให้นักศึกษาสร้าง Folder ใหม่ชื่อ hyperlink + สร้างหน้าเว็บเพจใหม่ index.html บันทึกไว้ใน foder : hyperlink
โจทย์ที่ 1 : การสร้าง Jump Menu <คลิกดูตัวอย่าง>
- เลือกตำแหน่งที่ต้องการวาง Jump Menu - คลิกเมนู Insert + Form + Jump Menu - พิมพ์ข้อความ "เลือก" ในช่อง Text - กดปุ่ม + เพื่อเพิ่มรายการพิมพ์ข้อความในช่อง Text เช่น www.sanook.com พร้อมกำหนด URL ที่ต้องการ หรือเลือกไฟล์ที่ต้องการ Link โดยการกดปุ่ม Browser Ex: - กดปุ่ม + เพื่อเพิ่มรายการจนครบ
- กำหนด Option เลือก Insert go button after menu
- เลือกรายการ "เลือก" เพื่อกำหนดให้เป็นรายการแรกที่แสดง ดังตัวอย่าง - ทดสอบ ************************************ สำหรับ Dreamweaver CC 1.คลิกเมนู Insert + Form เลือกคำสั่ง Select *****************************
ปรับแก้ code ดังนี้ - กรณีต้องการให้เปิดหน้าเพจใหม่ เดิม => onclick="MM_jumpMenuGo('jumpMenu','parent',0)" ใหม่ => onClick="MM_jumpMenuGo('jumpMenu','window.open()',0)">
- กรณีต้องการให้แสดงในส่วนของเฟรมที่ตั้งไว้ onClick="MM_jumpMenuGo('jumpMenu','frame',0)">
คำสั่ง: ให้นักศึกษาสร้าง JumpMenu โดยลิงค์ไปยังเว็บไซต์อื่นๆ อย่างน้อย 3 เว็บไซต์ โดยให้แสดงผลหน้าเว็บแบบ iframe **************************************************************
โจทย์ที่ 2 : การสร้างลิงค์แบบ Image Map (การนำรูปภาพมาแบ่งออกเป็นส่วนย่อยๆ เพื่อกำหนดลิงค์ไปยังที่ต่างๆ) การกำหนดจุดเชื่อมโยงทำได้ดังนี้ http://www.google.com/search?as_q=cranium
1 หาภาพอื่นๆ เช่น ภาพแผนที่โลก / ภาพแผนที่ประเทศ / สถานที่ต่างๆ / อื่นๆ 2 แทรกรูปภาพ 3 คลิกเลือกภาพใช้คำสั่ง Image Map - คลิกเลือกเครื่องมือ - วาดรูปตามพื้นที่ที่ต้องการ - พร้อมทั้งทำจุดเชื่อมโยงบริเวณรูปภาพทั้ง 3 แบบ และกำหนดจุดเชื่อมโยงเพื่อไปค้นหาข้อมูลในเว็บไซต์ ดังตัวอย่างด้านบน
*****************************************************
โจทย์ที่ 3 : การสร้างลิงค์เพื่อส่งอีเมล์ - เลือกข้อความที่ต้องการสร้างลิงค์เพื่อส่งอีเมล์ Email - ใส่ link Email address เช่น mailto: อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน หรือตามรูปด้านล่าง
************************************************************** โจทย์ที่ 4 : การสลับภาพเมื่อนำเมาส์ไปชี้ (Rollover Image) - ให้ นศ หาภาพจากอินเทอร์เน็ต 2 ภาพ - เลือกคำสั่ง Insert + Image object + Rollover Image
- เลือกไฟล์ภาพและกำหนดค่าต่างๆ **************************************************************
โจทย์ที่ 5 : การสร้างลิงค์ภายในหน้าเว็บเพจเดียวกัน (Named Anchor) - เลือกตำแหน่งที่ต้องการสร้าง Named Anchor เช่น บริเวณด้านบนสุด - คลิกเมนู insert + Named Anchor - ตั้งชื่อ เช่น top (ไม่ควรตั้งชื่อเป็นภาษาไทย) - เลือกตำแหน่งที่ต้องการลิงค์ไปยัง Named Anchor เช่น บริเวณด้านล่างสุด - พิมพ์ข้อความหรือแทรกรูปภาพที่ต้องการ ทำการเชื่อมโยงโดยพิมพ์เครื่องหมาย # ตามด้วยชื่อของ Named Anchor เช่น #top
** เมื่อทำแบบฝึกหัดเสร็จเรียบร้อยให้ upload folder : hyperlink ขึ้น hosting ตนเอง |
เข้าสู่ระบบ
Today | 4 | |
Yesterday | 2 | |
This week | 19 | |
Last week | 26 | |
This month | 146 | |
Last month | 173 | |
All days | 159647 |