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

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

การ Import ข้อมูล MS Word มาใช้ทำเว็บกับโปรแกรม Dreamweaver

เรื่อง : การ Import ข้อมูลจากไฟล์ MS Word มาใช้งานกับโปรแกรม Dreamweaver หลายครั้งผู้ที่มีหน้าที่จัดทำ Website ต้องมีการรับ...

เปิดใช้งาน Server Behaviors ให้กับ Dreamweaver CC

เรื่อง: การเปิดใช้งาน Server Behaviors ของ Dreamweaver CC เพื่อใช้งาน Dreamweaver Database Dreamweaver เวอร์ชั่น ...

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 2

หลังจากที่เราได้ทำการสร้าง Database และ Table ไปแล้วจากตอนที่ 1 ที่ผ่านมา ขั้นตอนต่อไปก็คือ เราต้องทำการสร้างตัว MySql Connection ใ...

Upload ไฟล์เว็บไปไว้บน Web Hosting ด้วย Dreamweaver

เรื่อง : Dreamweaver กับการ Upload ไฟล์เว็บไซต์ไปยัง Web Hosting เมื่อเร็ว ๆ นี้มีน้องคนหนึ่งโทรเข้ามาสอบถามเรื่องของการใช้...