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

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

การติดตั้ง Dreamweaver Extension ในแบบ Command Line

เรื่อง : วิธีการติดตั้ง Extension ในแบบ Command Line Dreamweaver CC 2015 (หรือเวอร์ชั่นที่สูงกว่า) ท่าน...

การทำตารางให้มีมุมโค้ง (แบบใช้รูปภาพ)

เรื่อง : ทำตารางให้มีมุมโค้ง (แบบดั่งเดิม/ใช้รูปภาพ) *ปัจจุบัน CSS 3 สามารถทำตารางให้มีมุมโค้งได้โดยไม่ต้องใช้ไฟล์รูปภาพมาตบแต่งครับ...

เก็บ Code ที่ชื่นชอบไว้ใช้นาน ๆ (Snippets Panel)

เรื่อง : การเก็บโค้ดโปรแกรมไว้ใช้กับโปรแกรม Dreamweaver เคยมีแฟนเว็บบางท่านเข้ามาถามว่า "พี่มีวิธีเก็บโค้ดที่เร...

การทำ Refresh/Redirect ให้ Web Browser ด้วย Dreamweaver

เรื่อง : สั่งให้ Web Browser ทำการ Refersh หรือ Redirect ตัวเอง ใบบางครั้งเรามีความจำเป็นต้องทำการ Refresh ...