About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

%E0%B9%80%E0%B8%A1%E0%B8%B2%E0%B8%97%E0%B9%8C %28Mouse%29 %E0%B8%A1%E0%B8%B2%E0%B8%95%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%99%E0%B8%AA%E0%B8%B5 %28CSS Pseudo-classes%29 [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



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

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

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

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

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

วิธีการทำรูปพื้นหลัง (Background Image) ของเว็บเพจไม่ให้กระทำซ้ำ

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat) บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป...  

การ Set ให้โปรแกรม Dreamweaver ใช้งานภาษาไทย

เรื่อง : การกำหนด Encoding ให้เว็บเพจเพื่อการใช้งานภาษาไทยได้อย่างถูกต้อง *เวอร์ชั่นตั้งแต่ CS3 ขึ้นไปไม่จำเป็นต้องเซ็ท เพราะค่า Defaul...  


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

*
*
*