About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

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


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

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

ชื่อหลักสูตรจำนวนชั่วโมงค่าบริการ
1Dreamweaver Basic123,600
2Dreamweaver Database (PHP/MySQL) Basic123,800
3Dreamweaver Database (PHP/MySQL) Advance124,800
4ระบบร้านค้า Online ด้วย Dreamweaver Database (PHP/MySQL) 124,400
5PHP Web Programming Basic124,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

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



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

ตรวจเช็คข้อมูลในฟอร์มก่อนส่งไปประมวลผล (Form Validation)

เรื่อง : การทำ Form Validation ด้วยโปรแกรม Dreamweaver เว็บโปรแกรมเมอร์ที่ต้องทำการเขียนโปรแกรมต่าง ๆ บนเว็บ มักต้องการเข...  

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

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

การสร้างโปรแกรมลบข้อมูล

เรื่อง : การสร้างโปรแกรมลบข้อมูลจากตารางข้อมูล (Delete Record) ...  

เทคนิคการใช้หน้าต่าง CSS Designer ของ Dreamweaver CC

เรื่อง : แนะนำเทคนิคการใช้งาน CSS Designer Panel ของ Dreamweaver CC CSS Designer Panel เป็นหน้าต่างที่ใช้ใ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*