สถานะของ Link Dreamweaver Program Tip & Trick DwThai --- Web Design

เรื่อง : เรื่องสถานะของ LINK

Link หรือจุดเชื่อมโยง เป็นเอกลักษณ์อย่างหนึ่งของเอกสาร HTML หรือเอกสารในรูปแบบของ webpage ที่ใช้งานกันอยู่บน website ลิงค์ ไม่จำเป็นต้องเชื่อมโยงไปยังไฟล์ที่มีนามสกุล *.htm or *.html เท่านั้น แต่ลิงค์สามารถเชื่อมโยงไปยังทุกไฟล์ที่เราต้องการจะทำการเชื่อมโยงไป เช่น เราอาจจะสร้าง link เชื่อมโยงไปที่ไฟล์ program.zip หรือ document.pdf ก็สามารถทำได้เช่นเดียวกัน
ได้ทำความเข้าใจเกี่ยวกับเรื่องของ link มาพอสมควรแล้ว ต่อไปนี้จะขออธิบายในเรื่องของ สถานะของ link กันสักหน่อย เพราะเห็นว่า.. มือใหม่หลายท่านมีความสับสน และงงกับรูปแบบของ Font ของตัวเองว่าทำไมสีไม่เป็นไปอย่างที่ต้องการเมื่อ Font หรือข้อความนั้นเป็นจุดเชื่อมโยง หรือ link

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

สถานะต่าง ๆ ของ link

Link ที่เราใช้งานกันบน webpage จะมีอยู่ด้วยกัน 4 สถานะ คือ
1. Link
2.Visited link
3. Active link
4. Over Link
ทั้ง 4 สถานะข้างต้นเป็นสถานะโดยปรกติของ link เราจะมาเริ่มทำความเข้าใจกันไปทีละสถานะ ดังนี้

1. สถานะ Link

สถานะ Link คือ สถานะที่มีการบอกว่า ณ.จุดของข้อความหรือตัวอักษรนี้เป็นจุดเชื่อมโยงที่ยังไม่มีการ Click หรือกดเข้าไปดูข้อมูลจาก URL นั้น อธิบายง่าย ๆ อีกนิด ก็หมายความว่า..link นี้ยังสด ยังบริสุทธิ์อยู่ไม่เคยผ่านการแตะต้องจากผู้เยี่ยมชม และยังไม่มีข้อมูลเก็บไว้ยัง History ของ Web Browser ว่าเคยมีการเข้าไปเยี่ยมชมมาแล้ว

2. สถานะ Visited link

สถานะ Visited Link คือ สถานะที่มีการบอกว่า ณ.จุดของข้อความหรือตัวอักษรนี้เป็นจุดเชื่อมโยงที่ได้มีการ หรือเคยมีการเข้าไปเยี่ยมชมหรือ Click ไปแล้ว อธิบายอีกนิด...คือหมายความว่า link นี้ได้ผ่านการใช้งานไม่อยู่ในสภาพบริสุทธิ์อีกต่อไปแล้ว URL ของ Link ได้รับการบันทึกเก็บไว้ใน History ของ Web Browser แล้ว

3. สถานะ Active link

สถานะ Active Link คือ สถานะที่มีการบอกว่า ณ.จุดของข้อความหรือตัวอักษรที่เป็นจุดเชื่อมโยงนี้ กำลังได้รับการตอบสนองเรียกใช้งานอยู่ในปัจจุบัน และ URL ของ Link นั้นกำลังมีสถานะเป็น Window ปัจจุบันของ Web Browser

4. สถานะ Over Link

สถานะ Over Link หรือ HOver คือ สถานะที่มีการบอกว่า ณ.จุดของข้อความหรือตัวอักษรที่เป็นจุดเชื่อมโยงนี้ กำลังมีเมาท์เป็นรูปมือ มาวางเหนือข้อความที่เป็นจุดเชื่อมโยนั้น (เดาเอาว่า HOver มาจากคำว่า Hand Over)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

การกำหนดสีของสถานะต่าง ๆ ของ link กับ Dreamweaver

เราสามารถกำหนดสีของสถานะต่าง ๆ ของ Link ดังกล่าวข้างต้นได้จากโปรแกรม Dreamweaver โดยเราจะสามารถเลือกได้ว่า เราจะกำหนดในแบบ HTML หรือ CSS Style หากเราได้เลือกที่จะกำหนดในแบบ CSS รูปแบบที่เรากำหนดไว้ใน HTML ก็จะไม่มีผลใด ๆ กับเว็บเพจของเราไปโดยปริยาย ทีนี้..เรามาดูการกำหนดทั้ง 2 รูปแบบกัน

1. กำหนดโดย HTML

เราสามารถกำหนดสีสถานะต่าง ๆ ของ Link ได้จากหน้าต่าง Page Properties ดังรูป

จากในรูปข้างต้น..เราได้กำหนดสีสถานะของ Link เป็นสีเขียว สีของ Visited เป็นสีเทา สีของ Active Link เป็นสีแดง ซึ่งก็จะหมายความว่า...ข้อความเมื่อยังไม่มีการ Click เข้าไปเยี่ยมชมที่ URL นั้น หรือข้อมูล URL นั้นยังไม่ได้ถูกเก็บบันทึกไว้ใน History ของ Browser สีของข้อความนั้น ก็จะมีสีเขียวตามสีที่เรากำหนดใน Links ดังรูป แต่ถ้า URL นั้นได้เคยถูกเข้าไปเยี่ยมชมมาแล้ว และข้อมูลถูกจัดเก็บไว้กับ Browser แล้ว สีของข้อความที่เป็นจุดเชื่อมโยงนั้นก็จะกลายเป็นสีเทาไป ตามที่เราได้กำหนดไว้กับ Visited Links แต่ถ้า URL นั้นกำลังแสดงสถานะเป็น Window Browser ปัจจุบัน สีของข้อความที่เป็นลิงค์ก็จะมีสีแดง ตามที่เรากำหนดไว้กับ Active Links ตามรูปข้างต้น...แต่สำหรับ Over Link นั้น..ในส่วนของการกำหนดด้วย HTML นี้เราไม่สามารถกำหนดสถานะนี้ลงไปได้ แต่เราสามารถกำนหดใน CSS ได้ ซึ่งจะได้กล่างถึงต่อไป การกำหนดคุณสมบัติดังกล่าว ก็คือ การกำหนดค่า Attribute ต่าง ๆ ลงไปที่ TAG <body> นั้นเอง

2. กำหนดโดย CSS Style

ดังที่ได้กล่าวไปว่า..เราสามารถกำหนดสีของสถานะของ link ได้จาก CSS อีก 1 จุดสำหรับเว็บเพจของเรา ซึ่งการกำหนดคุณสมบัติสถานะของลิงค์กับ CSS เราจะสามารถกำหนดอะไรได้มากกว่าการกำหนดกับ HTML เช่น เราอาจจะกำหนดสีของ Background ของข้อความที่มีสถานะเป็น Link ก็สามารถทำได้ เป็นต้น

การกำหนดสถานะของ link ต่าง ๆ ด้วย CSS กับโปรแกรม Dreamweaver โดยเราทำการเปิดหน้าต่าง CSS Panel ขึ้นมาจากนั้นโปรแกรมจะทำการเปิดหน้าต่าง New CSS Style ขึ้นมาให้เราเลือกกำหนดค่า ในส่วนของ Type ให้เราเลือกไปที่ Use CSS Selector ดังรูป จากนั้นที่ Selector เราจะสามารถเลือกกำหนดสถานะต่าง ๆ ของ Link ได้ ตามที่ได้อธิบายไป

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

ถ้าเราไม่มีการกำหนดค่าสีของสถานะของ Link จะเกิดอะไรขึ้น

ถ้าเราไม่มีการกำหนดคุณสมบัติต่าง ๆ ดังกล่าวไว้กับ Web page ของเราสีของสถานะต่าง ๆ ของ link ก็จะเป็นการดึงเอาค่า Default ของ Browser มาใช้งานโดยอัตโนมัติ ซึ่งค่า Default เหล่านี้แต่ละ Browser ของ User แต่ละรายอาจจะแตกต่างกันออกไป ซึ่งคุณสามารถดูค่า Default หรือค่าเริ่มต้นเหล่านี้ได้จาก Properties หรือ Option ของ Browser เช่น รูปข้างล่างนี้ แสดงสถานะ link ของ IE Browser

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

บทความนี้คงจะช่วยให้เรามีความเข้าใจในเรื่องของ link ได้ไม่มากก็น้อยสำหรับผู้ที่ยังไม่รู้...พบกับบทความต่อไปเร็ว ๆ นี้.