About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

เมาท์ (Mouse) มาตารางเปลี่ยนสี (CSS Pseudo-classes) [Article ID : 36]

เรื่อง : เมาท์มาตารางเปลี่ยนสีด้วย CSS

มีผู้ชมที่ติดตามเว็บ DwThai.Com ขอกันเข้ามามากครับเกี่ยวกับการทำเทคนิคนี้ ซึ่งคุณคงจะเคยเห็นเทคนิคนี้กับเว็บบอร์ดของเว็บไซต์ไปแล้วครับ ถ้าใครเป็นผู้ชมรายใหม่ยังไม่รู้ว่าเทคนิคนี้เป็นอย่างไรก็ลองเอาเมาท์ (Mouse) ชี้ไปบนตารางด้านล่างนี้ครับ

	ชื่อหลักสูตร	จำนวนชั่วโมง	ค่าบริการ
1	Dreamweaver Basic	12	3,600
2	Dreamweaver Database (PHP/MySQL) Basic	12	3,800
3	Dreamweaver Database (PHP/MySQL) Advance	12	4,800
4	ระบบร้านค้า Online ด้วย Dreamweaver Database (PHP/MySQL)	12	4,400
5	PHP Web Programming Basic	12	4,800
	*หลักสูตรอื่นที่เกี่ยวข้องกับการพัฒนาเว็บไซต์ ติดต่อสอบถาม 08-9495-7296 หรือ dwthai@gmail.com

วิธีการทำเมาท์มาตารางเปลี่ยนสีให้กับเว็บเพจ

ขั้นแรก...ให้ท่านทำการสร้างตาราง (Table) ขึ้นมาเสียก่อน จากนั้นให้ปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. ทำการเลือกที่ตาราง จากนั้นให้ทำการกำหนดชื่อตารางที่ Properties ดังในตัวอย่างกำหนดชื่อของตารางว่า dw-exam ดังรูป

2. จากนั้นทำการเปิดหน้าต่าง CSS ขึ้นมา (Window->CSS Styles) แล้วให้ทำการคลิกที่ icon ที่ชื่อว่า New CSS Rule ดังรูป

3. โปรแกรมจะเปิดหน้าต่าง New CSS Rule ให้ทำการกำหนด Selector ที่จะสร้าง CSS ดังนี้
- Selector Type : Compound
- Selector Name : #dw-exam tr:hover
โดยที่ #dw-exam คือ ชื่อตารางที่เราได้กำหนดไว้ในข้อที่ 1 ดังรูป

เมื่อกำหนดได้แล้วกดที่ปุ่ม OK

4. จากนั้นก็จะเป็นของการกำหนดสี Background ที่เราต้องการแสดง เมื่อผู้ชมเว็บเรานำเอาเมาท์มาวางไว้เหนือแถวของตารางต่าง ๆ โดยทำการกำหนดได้จากหน้าต่าง CSS Rule definition... ดังนี้
- Category : เลือกที่ Background
- Background-color : เลือกสีที่เราต้องการ

เมื่อเลือกสีได้แล้วกดที่ปุ่ม OK ที่หน้าต่างนี้

5. จากนั้นทำการ Save ไฟล์เว็บเพจของเราแล้วทำการ F12 ทำการ Preview ดูผลลัพธ์กับ Web Browser

เป็นอันเสร็จการทำให้ตารางเปลี่ยนสีที่ท่านต้องการครับ จุดสำคัญอยู่ที่ข้อ 3 ครับ ตรง :hover ซึ่งเป็นการกำหนดว่าถ้ามีการนำเมาท์มาวางเหนือ (Hand Over) ครับ เมื่อนำมาเขียนรวมกับ tr ซึ่งเป็นชื่อ TAG ที่ใช้ในการสร้าง Row ของตาราง โดยเขียนเป็น tr:hover จึงหมายความว่า เมื่อมีการนำเมาท์มาวางเหนือแถวของตารางครับ อย่างไรลองทำความเข้าใจดูครับ

*สำหรับ Dreamweaver ในเวอร์ชั่น CC หน้าต่างการกำหนดค่าของ CSS จะแตกต่างออกไปครับ อย่างไรลองเทียบเคียงการกำหนด Selector ดังกล่าวดู

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้

เรือง :: สร้างรูปภาพให้ผู้ชมเว็บสามารถจับเคลื่อนย้ายไปมาได้ (Drag Layer by Dreamweaver)สำหรับบทความนี้เป็นบทความการป...

การแปลง CSS ในแบบ Inline Style Sheet ให้เป็น Internal หรือ External Style Sheet

เรื่อง : การใช้ Convert Inline CSS to Rule เปลี่ยน CSS การเขียน CSS เพื่อทำการตบแต่งเว็บเพจ บางครั้งนักพัฒนาเว็บชอบที่จ...

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only)

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar *Dreamweaver CC ไม่มีให้ใช้ครับ Spry เป็น Framework...

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 1

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 1 บทความนี้มีด้วยกัน 3 ตอนครับ จะเป็นบทความที่ว่าด้วยเรื...