บทที่ 4 การลิงค์ไฟล์งาน (Link)

Link

ลิงค์สามารถแยกเป็นประเภทใหญ่ๆ ได้สองประเภทคือการลิงค์แบบ

• Absolute Link : เป็นลิงค์ที่ต้องอ้างอิงข้ามระหว่างโดเมน เช่นการลิงค์ไปยังเวบไซต์อื่น และจะต้องระบุชื่อโดเมนทั้งหมด เช่น ทำการลิงค์ไปที่ Hotmail ต้องระบุคือ http://www.hotmail.com ถึงจะสามารถลิงค์ได้

• Relative : เป็นการลิงค์ภายในเวบของเราเอง จะอยู่ในโฟลเดอร์เดียวกัน การลิงค์ไม่ยากมากนัก

การทำลิงค์สามารถที่จะทำได้หลายวิธี และสามารถที่จะลิงค์ไปยังหน้าอื่นหรือหน้าเดียวกันก็ทำได้ วิธีการทำลิงค์มีหลายวิธีด้วยกันแล้วแต่ความถนัดของผู้ใช้แต่ละคน แต่ในที่นี้จะขอนแนะนำตั้งแต่วิธีที่ง่ายที่สุดจนไปถึงวิธีที่ซับซ้อน

การทำลิงค์ข้อความ

เป็นการลิงค์ที่ง่ายและไม่ยุ่งยากก่อนที่จะทำการลิงค์จำเป็นต้องสร้างไฟล์ที่เป็นเป้าหมายที่จะทำการลิงค์ ให้ทำดังนี้กด F8 เพื่อเรียก Site ให้สร้างไฟล์ขึ้นใหม่ดังนี้ index.html , address_book.html , my_picture.html

• หลังจากที่ได้สร้างไฟล์เรียบร้อยแล้วให้เริ่มทำงานที่หน้า index.html โดยการดับเบิ้ลคลิกที่ไฟล์ index

• จากนั้นจะมาเริ่มต้นที่หน้า Document index.html ให้ทำการพิมพ์ข้อความว่า Address Book และ My Picture

• ขั้นตอนต่อไปเป็นขั้นตอนการลิงค์ทำได้โดยการป้ายทับข้อความ Address Book จากนั้นให้มาที่ Porperties inspector ในช่องลิงค์ให้คลิกที่สัญลักษณ์รูปโฟลเดอร์ดังรูปด้านล่าง

• จากนั้นจะมี Dialog box ให้เลือกไฟล์ address_book.htm จากนั้นคลิก Select

• ต่อมาให้การเลือกข้อความ My Picture ให้พร้อมที่จะทำการลิงค์ ให้เริ่มทำการลิงค์เหมือนกับข้อความแรกแต่ให้เลือกไฟล์ใน Dialog box เป็น my_picture.htm จากนั้นคลิก Select

• หลังจากเลือกไฟล์แล้วให้ทดสอบการโดยการกด F12 เป็นการดูผ่าน Browser ทดลองคลิกที่ลิงค์ที่ได้ทำไว้

• หลังจากคลิกที่ Address Book ทาง Browser จะเปิดหน้าเพจขึ้นใหม่เป็นหน้าเพจของ address_book.htm จะสังเกตได้จากช่อง Address

• การทำลิงค์สามารถพิมพ์เข้าโดยตรงในกรณีที่เราสามารถจำชื่อได้ โดยพิมพ์ในช่อง Link

• หรืออีกวิธีหนึ่งจัดว่าเป็นวิธีที่แน่นอนไม่ผิดพลาดในการลิงค์ แต่เราต้องเปิด Site Local Folder และย่อ Window ของทั้งสองให้เล็กสามารถมองเห็นได้ทั้งสองหน้าต่าง

• จากนั้นทำการคลิกที่ Point to file ค้างแล้วลากมายังชื่อไฟล์ใน Local Folder ที่ต้องการลิงค์

• แต่วิธีดังกล่าวจะใช้เนื้อที่ในการทำงานมากและมีข้อจำกัดสำหรับหน้าจอที่เล็กเนื้อที่ในการทำงานก็จะน้อยลงไปด้วย แต่แนะนำให้ใช้วิธีแรกดีเพราะสะดวกและไม่เกิดการผิดพลาด

การลิงค์ไปยังเวบไซต์อื่น

• เราสามารถที่จะทำเวบของเราเป็นเวบบริการหรือรวมลิงค์ให้ผู้อื่นสามารถไปยังเวบไซต์อื่นได้อีกด้วยเพื่อเป็นความหลากหลายในเวบของเรา และยังสะดวกกับเจ้าของเวบเองอีกด้วยโดยไม่ต้องพิมพ์ URL เข้าไปใหม่ แต่สามารถคลิกที่เวบของตัวเองก็สามารถไปยังเวบที่ต้องการได้ เราอาจจะทำลิงค์เฉพาะเวบที่เราใช้บ่อยๆ เช่น เช็คเมล์ ส่งเพจ และอื่นๆ

ขั้นตอนการทำลิงค์

• ให้เปิดไฟล์ index.html พร้อมที่จะทำงาน

• พิมพ์ข้อความลงไปดังนี้

• Hotmail

• Yahoo

• Pantip

• จากนั้นให้ป้ายทับข้อความ Hotmail ให้ทำงาน

• มาที่ Properties inspector

• ในช่อง Link ให้พิมพ์ URL เข้าไปคือ http://www.hotmail.com

• ส่วน Yahoo และ Pantip ให้ทำขั้นตอนเดียวกันโดยเปลี่ยนลิงค์ไปที่ http://www.yahoo.com และ http://www.pantip.com

• ทดสอบโดยการกด F12 แต่ยังไม่ต้องคลิกใน Browser เพราะเรายังไม่ได้ทำการต่อเชื่อมอินเตอร์เน็ต ให้

ทดสอบโดยการเอาเมาส์มาวางทับข้อความโดยไม่ต้องคลิก จากนั้นให้สังเกตจาก Task bar ด้านล่างจะระบุที่ไปถ้าทำการคลิก แต่ถ้าได้ทำการต่อเชื่อมอินเตอร์เน็ตก็สามารถคลิกได้เลย

การทำลิงค์เมล์ Link E-mail

การทำลิงค์เมล์ส่วนมากจะเป็นการให้ผู้ที่ชมเวบไซต์ได้ติดต่อกับเจ้าของเวบไซต์ กล่าวคือก็เป็นการส่งเมล์ธรมดานั้นเองแต่พิเศษอยู่ที่ผู้ชมไม่ต้องพิมพ์ที่อยู่ E-mail Address ของเรา เพียงพิมพ์ข้อความติชมเท่านั้น เหมือนเป็นการส่งเมล์อัตโนมัติโดยไม่ต้องไปที่ผู้ให้บริการเมล์ โดยหลังจากคลิกลิงค์เมล์ทางBrowser จะทำการเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติส่วนมากถ้าเป็น IE จะเปิดโปรแกรม Outlook ให้

วิธีลิงค์เมล์

• ให้เปิดไฟล์ index.html

• ให้พิมข้อความว่า คำติชม

• หรืออีกวิธีคือ

• ใช้ Object โดยเลือกที่ Insert Email Link

• ภายใน Dialog box ให้กำหนดดังนี้

• Text ให้ใส่ข้อความ คำติชม

• E-mail ให้ใส่ที่อยู่ของเมล์

• คลิก OK

• จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง ( send )

การใช้รูปภาพเป็นลิงค์

ส่วนมากจะมีสองประเภทใหญ่คือ การใช้ภาพทั้งภาพทำลิงค์ หรืออีกอย่างก็คือการใช้บางส่วนของภาพทำลิงค์โดยใช้ Hotspot เลือกเฉพาะที่

การใช้ภาพทั้งภาพเป็นลิงค์

การใช้ภาพเป็นลิงค์นิยมสร้างภาพขึ้นมาเองทำเป็นรูปปุ่มกดจะใช้ร่วมกับ Rollover คือลักษณะก่อนเอาเมาส์ผ่านจะเป็นอีกรูปพอเอาเมาส์ผ่านหรือวางที่รูปก็จะเปลี่ยนเป็นอีกรูปหนึ่งและยังสามารถเป็นลิงค์ได้อีกด้วย การทำดังกล่าวจะกล่าวถึงในหัวข้อ Rollover ในที่นี้จะกล่าวถึงการทำลิงค์แบบธรรมดา

• สร้างรูปเก็บไว้ในโฟลเดอร์ image ที่ได้สร้างไว้

• มาที่หน้า Document index.html

• คลิก Insert image จาก Object

• เลือกรูปจาก Dialog box

• คลิก Select

• จากนั้นให้คลิกที่รูปภาพในหน้า Document ที่ได้ Insert มา

• ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว

• จากนั้นเลือกไฟล์ที่ต้องการลิงค์ไปหา หรือจะลิงค์ไปยังเวบไซต์นอกก็ได้

การลิงค์ภาพแบบ Hotspot

การลิงค์แบบ Hotspot การใช้ส่วนมากเป็นการลิงค์เพียงบางส่วนของภาพ ภาพส่วนมากจะเป็นภาพที่มีขนาดใหญ่เพียงภาพเดียว

ขั้นตอนการทำ Hotspot

• มาที่หน้า Document พร้อมทำงาน

• Insert รูปภาพที่ได้เตรียมไว้ ( การดึงรูปภาพเหมือนปกติที่ได้กล่าวมาแล้ว )

• ในตัวอย่างนี้เป็นรูปภาพใหญ่และมีส่วนประกอบย่อยที่จะทำเป็นที่ลิงค์

• คลิกที่ภาพให้ทำงาน

• มาที่ Properties inspector

• ใหทำการขยาย Properties inspector เป็นแบบ Full

• ช่อง Map ให้กำหนดชื่อ

• คลิกรูปสี่เหลี่ยมดังภาพ

• จากนั้นให้มาที่รูปภาพในส่วนที่ต้องการทำเป็นลิงค์

• ทำการลากเมาส์ค้างให้เป็นดังรูปตัวอย่าง

• จากนั้นให้คลิกที่ขอบที่ได้ทำการลากไว้ให้ทำงาน

• ในตัวอย่างด้านบนเป็นการใช้ Hotspot หลายรูปแบบทั้ง สี่เหลี่ยม วงกลม และรูปทรงอิสระ

• ให้คลิกขอบให้ Hotspot ทำงานในตัวอย่างดูได้จากรูปวงกลม จะมีปุ่มขึ้นรอบรูป

• ให้มาที่ Properties inspector

• Link ให้กำหนดลิงค์ตามปกติโดยหากเป็นเวบนอกให้พิมพ์เข้าไปเลย หากเป็นลิงค์ภายในให้ทำตามขั้นตอนที่ได้กล่าวมาแล้ว

• ในตัวอย่างเป็นการลิงค์ไปที่ Yahoo.com

• ทดสอบโดยการกด F12

• ให้เอาเมาส์มาคลิกที่เราได้ทำการลิงค์แบบ Hotspot จะสังเกตได้ว่าบริเวณอื่นที่ไม่ได้ทำ Hotspot ไม่สามารถที่จะลิงค์ได้ถึงแม้ว่าจะเป็นภาพเดียวกัน