แบบฝึกที่ 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

2.คลิกเมนู Window เลือกคำสั่ง Behaviors

3. คลิก "+" เลือกคำสั่ง jump menu

4. เพิ่มรายการตามที่ต้องการจบครบ

5. คลิกเมนู Insert + Form เลือกคำสั่ง Button

6. คลิก "+" เลือกคำสั่ง jump menu go

*****************************

 

ปรับแก้ 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 ตนเอง
- เพิ่ม Link หน้าแรกของเว็บไซต์ชื่อ "การสร้างไฮเปอร์ลิงค์ (Hyperlink)"   เชื่องโยงไปยัง  hyperlink/index.html เลือก target = _blank

 

เข้าสู่ระบบ



เรามี 1 บุคคลทั่วไป ออนไลน์
mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterToday4
mod_vvisit_counterYesterday2
mod_vvisit_counterThis week19
mod_vvisit_counterLast week26
mod_vvisit_counterThis month146
mod_vvisit_counterLast month173
mod_vvisit_counterAll days159647