Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip เทคนิควิธีการ ใส่สี ลิ้งค์โ ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 10279|ตอบ: 0
go

เทคนิควิธีการ ใส่สี ลิ้งค์โดยไม่มีขีดเส้นใต้ได้ดั่งใจโดยใช้ CSS Styles

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:24 |แสดงโพสต์ทั้งหมด

พอดีไปถ่ายทอดความรู้ให้รุ่นน้องเอกเทคโนฯ มามีน้องคนหนึ่งถามมาว่าจะทำให้ลิ้งค์ไม่ให้มีขีดเส้นใต้จะทำยังไง ธนาก็บอกไปว่าใช้ CSS Styles สิ น้องเขาบอกว่าทำยังไง ธนาก็บอกว่าใว้จะทำบทความขึ้นเวปให้หละกันก็เลยมาค้นดูใน Dream MX ดูว่ามีแบบทำสำเร็จรูปไหมโดยไม่ต้องเขียนเอง ปรากฏว่ามีจริงด้วย คราวนี้ปัญหาเรื่องที่สีลิง้ค์ไม่เข้ากับพื้นหลังในตารางก็หมดไป เราสามารถทำลิ้งค์โดยมีสีลิงค์ที่ไม่ต้องเหมือนกันจะขีดเส้นใต้หรือไม่ขีดเส้นใต้ก็ได้หละ ทำให้ระบบสีในเวปไม่ขัดกับสีลิ้งค์ได้แต่ก็อย่าทำสีเยอะจนเกินไปเดียวคนใช้เวปหลงไปหมดหละเอาหละลองมาดูตัวอย่างวิธีการทำกันเลย ...

 

ขั้นตอนที่1. ก่อนที่เราจะทำการลงมือทำเวปใน Dream MX นั้นเราต้องทำการ Setpage ก่อนโดยมาที่ Modify ---> Page Properties เราก็ไปตั้งค่าระบบเวปของเราโดยการตั้งพื้นหลัง สีตัวอักษร สีลิ้งค์ ซึ่งปัญหาหลายท่านไม่สามารถใช้สีตามที่ตัวเองออกแบบได้ 100% นั้นก็คือสีพื้นหลังกับ สีลิ้งค์ไม่เข้ากัน เข่น ในกรณีเราสร้างระบบ ตารางเพื่อแบ่งสัดส่วนเวปออกเป็นสามส่วนด้วยกัน โดยกำหนดสีพื้นหลังตารางแต่ละส่วนต่างกันดังตัวอย่าง.

 

 

จะเห็นว่าสีพื้นหลังแรกออกเป็นสีเทา สีตรงกลางออกเป็นสีเหลืองอ่อน สีพื้นหลังตารางด้านขวา เป็นพื้นสีแดงเลือดหมู เวลาทำการลิ้งค์ โดยยึดระบบสีลิ้งค์ที่เราตั้งใว้คือสีเหลือง เวลาเรา ดูจาก Browser ก็จะเป็นดังภาพ.

 

 

ขั้นตอนที่2. จากขั้นตอนขั้นต้น จะเห็นว่าเราตั้งสีลิ้งค์เป็นสีเหลือง แต่ในการออกแบบระบบเวปของเราแบ่งออก เป็นสามส่วนด้วยกัน โดยแต่ละส่วนจะมีสีพื้นต่างกัน มาดูส่วนแรก พื้นสีเทา เมื่อตัดกับสีลิ้งค์สีเหลือง ทำให้ดูได้นิดหน่องแต่ไม่คม แล้วมาดูส่วนตรงกลางดูสิว่า เราออกแบบมาเป็นพื้นสีเหลืองอ่อน ซึ่งมันกลทกลืนกับสีลิ้งค์สีเหลืองเกินไป โดยทั้งนี้เราจะทำการเปลี่ยนสีพื้นเสียก็ได้ แต่บางทีเราออกแบบมานั้นเรามีการกำหนดระบบกราฟิคที่นำมาประกอบในเวปให้ตัดกับสีพื้นหลังอย่างลงตัวแล้ว อเปลี่ยนสีแล้วจะทำให้ภาพกราฟิคไม่สวยไม่เข้ากับพื้นหลังซะอีก ระบบในการออกแบบมันต้อง มพันธ์ กันหละ ถ้าเปลี่ยนสีลิ้งค์ อาจจะกระทบกับสีพื้นหรือกราฟิคในสัดส่วนอื่นของเวป นี่แหละปัญหาเกิดขึ้นแล้ว ... จะทำยังไงดี??? ...

ขั้นตอนที่3. จะเห็นปัญหาที่เกิดขึ้นจากจุดลิ้งค์จุดเดียวเท่านั้น เมื่อเราคิดแก้ปัญหาโดยการทำให้ระบบลิ้งค์มีสีใดก็ก็ได้ตามที่เรากำหนดโดยไม่ต้องพึ่งสีตามที่เรา Setpage ก็ได้ แหละนี่คือหนทางการแก้ปัญหาที่เป็นอุปสรรค์ในการออกแบบของเรา วิธีการแก้ไขคือ ... การใช้ระบบ Css tylesระบบนี้เราสามารถจัดการลักษณะลิง้ค์และสีลิ้งค์โดยจะทำให้ไม่มีขีดเส้นใต้ หรือไม่มีก็ได้ ดั่งใจเรา ...

ขั้นตอนที่4. ในโปรแกรม Dreamweaver MX มี Css styles ให้เราสามารถกำหนดได้เอง โดยเราสามารถ สร้างได้โดยมาที่คำสั่ง Text ---> CSS Style ---> New CSS Style ให้ทำการตั้งค่าต่างๆ ดังภาพ.

 

 

จากนั้นทำการบันทึกให้เป็นนามสกุล *.css แนะนำให้บันทึกในโฟล์เดอร์เดียวกับที่อยู่ของเอกสาร index.html เพื่อจะได้ไม่มีปัญหาในการเรียกหาในตอนเราออนไลท์

ขั้นตอนที่5. เมื่อทำการบันทึกเสร็จแล้ว จะให้เราทำการ Definition โดยทำการเลือก Type (เป็นระบบที่ใช้กับ text ส่วนระบบอื่นเราจะนำมาเสนอกันต่อไปในบทความหน้า) โดยกำหนดดังภาพ.จะเห็นว่ามีการให้ set ค่าหลายค่าด้วยกัน ค่าที่สำคัญตามความต้องการของเรามีอยู่สองค่าคือDecoration คือ การกำหนดให้ลิ้งค์มีขีดเส้นใต้หรือไม่มีถ้าเลือก none ก็จะไม่มีขีดเส้นใต้Color คือ สีลิ้งค์ตัวนี้แหละที่เป็นจุดแก้ปัญหาเราได้คือ การเลือกสีลิ้งค์ได้ดั่งใจเราเองจากนั้นเราก็ทำการ OK ก็เป็นการเสร็จในการสร้าง CSS Styles แบบ Type

 

 

ขั้นตอนที่6. วิธีการนำมาใช้โดยให้ทำการลาก Mouse ทับตำแหน่งที่เราจะทำการลิ้งค์ ดังตัวอย่าง.จากนั้นมาที่คำสั่ง Text ---> CSS Style แล้วทำการเลือก CSS Styles ที่เราสร้างใว้ดังภาพ.

 

เมื่อเราทำการดูจาก Browser จะเห็นว่าส่วนที่เราทำการใส่ CSS Styles ลงไปจะลิ้งค์มี สีที่แตกต่างกับลิ้งค์แบบธรรมดา และไม่มีขีดเส้นใต้ด้วยดังภาพตัวอย่าง.

 

 

ขั้นตอนที่7. เราสามารถแก้ไข CSS Styles ที่เราสร้างใว้ได้โดยมาที่คำสั่ง Text ---> CSS Styles --> Edit Style Sheet แล้วเราทำการเลือกไฟล์ css ที่เราสร้าง แล้วมาที่คำสั่ง Edit จากนั้นเราก็เลือกไฟล์ที่เราสร้างขึ้นอีกครั้งแล้วมาที่ Edit แล้วทำการ Definition ตามที่เราต้องการ เช่นปรับเปลี่ยน Size เป็นแบบ Small หรือเปลี่ยนสีตามที่ต้องการ จากนั้นก็ทำการ Apply เพื่อดูผลก่อนที่จะทำการ OK เมื่อทำการ OK แล้ว กลับมาหน้าแก้ไข CSS Style definition แล้วทำการ Save เมื่อทำการ Save เสร็จแล้วเราก็กลับมาหน้า Edit Style Sheet จากนั้นให้ทำการ Done ก็เป็นการเสร็จกระบวนการแก้ไข

 

 

 

Note ... เราสามารถสร้าง CSS Styles ได้หลายไฟล์ด้วยกันเพื่อให้เกิดความแตกต่างและใส่ สีลิ้งค์ได้ตามรูปแบบที่เราต้องการดังตัวอย่างการใช้หลายไฟล์ *.css ในหน้าเวป เช่น เมนูด้นซ้ายใช้สีลิ้งค์ เป็นสีนำเงิน ตรงกลางเป็นสีดำ ข้างขวาเป็นสีขาวซึ่งตัดกับสีแดงได้สบายตา คราวนี้เราลุปัญหาด้วยปัญญา ... อีกครั้งแล้ว เอ้าเอาไปใช้ในการออกแบเวปได้เลย ...

ขอปัญญาเกิดแด่ท่าน

ธนา mastertana


Thaigraph

GMT+7, 20-7-2019 21:37 , Processed in 0.054736 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books