การกำหนดคุณสมบัติของ CSS ด้วยโปรแกรม Dreamweaver [Article ID : 200]

เรื่อง : กำหนดคุณสมบัติ CSS ด้วยโปรแกรม Dreamweaver (CSS Rule definition)

ในบทความก่อนได้เกริ่นนำไปแล้วถึงการกำหนดคุณสมบัติ CSS นะครับ แต่เป็นในส่วนของการ Coding ที่นี้เราก็ลองมาใช้โปรแกรม Dreamweaver กำหนดคุณสมบัติดังกล่าวกันบ้างว่า...จะมีวิธีการกำหนดคุณสมบัติของ CSS ให้ได้ตามที่เราต้องการอย่างไรกับโปรแกรม Dreamweaver นี้

วิธีการกำหนดคุณสมบัติ CSS ด้วยโปรแกรม Dreamweaver

ที่หน้าต่าง CSS ของโปรแกรม Dreamweaver ให้คุณทำการกำหนดชื่อของ CSS และเลือกรูปแบบ CSS ตามที่คุณต้องการแบบในบทความก่อน (คลิกอ่านบทความ) จากนั้นให้เราทำการกำหนดคุณสมบัติของ CSS โดยโปรแกรมจะแบ่งคุณสมบัติของ CSS ให้เราสามารถเลือกกำหนดได้เป็น Category ดังนี้

1. CSS Category ในโปรแกรม Dreamweaver จะแบ่งออกเป็น 8 หมวดดังรูปข้างต้น ซึ่งแต่ละหมวดจะใช้ในการกำหนดคุณสมบัติที่แตกต่างกัน ดังนี้

1. Type ใช้ในการกำหนดค่าคุณสมบัติรูปแบบตัวอักษร หรือ Font เช่น การกำหนดสีให้ตัวอักษร ขนาดของตัวอักษรเป็นต้น
2. Background ใช้ในการกำหนดคาคุณสมบัติของพื้นหลัง เช่น สีของพื้นหลัง การกำหนดค่า repeat ของพื้นหลังเป็นต้น
3. Block ใช้ในการกำหนดคาคุณสมบัติรูปแบบการแสดงผลของกลุ่มข้อความหรือกลุ่มของ Object ที่เรียก CSS นั้นใช้งาน
4. Box ใช้ในการกำหนดคาคุณสมบัติความสูง-กว้างของกลุ่มข้อความ หรือ Object และใช้กำหนดระยะห่างของ Object (Margin)
5. Border ใช้ในการกำหนดคาคุณสมบัติของเส้นกรอบ ลักษณะของเส้นกรอบที่ต้องการ
6. List ใช้ในการกำหนดคาคุณสมบัติของรายการ เช่น การกำหนดรูปนำหน้ารายการเป็นต้น
7. Positioning ใช้ในการกำหนดคาคุณสมบัติลักษณะตำแหน่งแสดงผลของ Object ที่เรียกใ CSS นี้
8. Extension ใช้ในการกำหนดคาคุณสมบัติอื่น ๆ ที่เพิ่มเติมขึ้นมา เช่น การกำหนดค่า Filter ให้ทำเอฟเฟคกับรูปภาพ เป็นต้น ซึ่งคุณสมบัติของ Option นี้จะรองรับทาง IE เสียมากกว่า

 2. การกำหนดคุณสมบัติของ CSS กับโปรแกรม Dreamweaver มีขั้นตอนง่ายๆ ดังนี้

1. ให้คุณทำการเลือกที่ Category ตามที่ต้องการจะกำหนดคุณสมบัติจากรายการทางซ้ายมือ
2. เลือกกำหนดค่าคุณสมบัติจาก Option ทางขวามือ
3. จากนั้นกดปุ่ม OK เป็นอันเสร็จขั้นตอนการกำหนดคุณสมบัติ CSS

ดังรูปตัวอย่างข้างต้น เป็นการกำหนดค่าคุณสมบัติของ CSS ที่ชื่อว่า .font16 มีคุณสมบัติ คือ 

.font16 {

 font: bold 16px Tahoma, "MS Sans Serif";
 color: #009900;

}

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

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

CSS คืออะไร ?

เรื่อง : ทำความเข้าใจกับ CSS เบื้องต้น หลายคนอาจจะเคยได้ยินคำนี้กันมาบ้าง โดยเฉพาะถ้าคุณเป็นแฟนเว็บ DwThai.Com ต้องเคยผ่าน...  

ทำไมต้องเลย์เอาท์ด้วย CSS ?

อย่างที่ผมจั่วหัวไปว่า..วัตถุประสงค์ที่ dwthai.com เปิด section นี้ขึ้นมาใหม่ภายใต้ชื่อ ...  

Layout เว็บเพจด้วย CSS Step 1

หลังจากที่เราได้ทำความเข้าใจเกี่ยวกับ CSS กันไปพอสมควรแล้วกับบทความต่าง ๆ ที่นำแสนอไป มาถึงบทความนี้จะมาพูดถึง การนำเอา CSS ไปใช้ในกา...  

การกำหนด CSS Selectors กับโปรแกรม Dreamweaver

เรื่อง : CSS Selectors กับ Dreamweaver *Dreamweaver CC มีวิธีการที่แตกต่างจากบทความนี้ในการใช้งาน CSS ...