About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

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

Go to Post-iT Sign Guestbook

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

เทคนิคการใช้หน้าต่าง CSS Designer ของ Dreamweaver CC [Article ID : 220]

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

CSS Designer Panel เป็นหน้าต่างที่ใช้ในการสร้าง CSS ของโปรแกรม Dreamweaver ซึ่งดังที่ทราบกันไปแล้วว่า หน้าต่าง CSS Designer ในเวอร์ชั่น Creative Cloud นั้นแตกต่างจากเวอร์ชั่นก่อนอย่างพวก CS6, CS5 หรืออื่น ๆ อยู่มาก บทความนี้จะขอนำเทคนิคการใช้งานหน้าต่าง CSS Designer นี้มาแนะนำกันครับ เพื่อความสะดวกคล่องตัวในการใช้งาน ดังนี้

*อ่านเรื่อง การใช้ CSS กับโปรแกรม Dreamweaver CC ประกอบ CSS Designer Panel

เทคนิคการใช้งาน CSS Designer Panel

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

ขยายหน้าต่าง CSS Designer

หน้าต่าง CSS Designer นั้นผู้ใช้งานสามารถทำการขยายเพื่อใช้งานให้มีความคล่องตัวในการกำหนดค่าต่าง ๆ ได้ โดยการ

1. ที่หน้าต่าง CSS Designer ทำการจับและยกออกมาจาก Panel Group
(หรือหากไม่ต้องการยกออกมาจาก Panel Group ก็ข้ามไปอ่านข้อ 2 ได้เลยครับ)
2. จากนั้นทำการปรับขนาดของหน้าต่างได้โดยการใช้เมาท์จับไปที่ขอบของหน้าต่างเพื่อลากให้หน้าต่างยืดออกตามต้องการ ดังรูป

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

3. เมื่อกระทำดังข้อ 2 แล้ว หากต้องการกำหนดค่าคุณสมบัติ (Properties) ของ CSS จะพบว่าผู้ใช้งานมีมุมมอง และใช้งานได้สะดวกขึ้นกว่าหน้าต่างขนาดเดิม ดังรูป

ดูเฉพาะคุณสมบัติที่ได้กำหนดไว้แล้ว

ที่หน้าต่าง CSS Designer โดยปรกติจะแสดงคุณสมบัติทั้งหมดที่ผู้ใช้สามารถกำหนดให้แก่ CSS ได้ แต่ถ้าผู้ใช้ต้องการจะดูเฉพาะค่าคุณสมบัติของ CSS ที่ได้กำหนดไว้กับ Selector ใดแล้ว สามารถทำได้ ดังนี้

4. เลือก Selector ที่ต้องการในส่วนของรายการ Selectors ของหน้าต่าง ดังรูป

5. จากนั้นเลือกติ๊กถูกที่ Option ที่ชื่อว่า Show Set ดังรูป

จะพบว่าหน้าต่าง CSS Designer จะแสดงเฉพาะคุณสมบัติของ Selector ที่ได้กำหนดไว้แล้วเท่านั้น

กำหนด Selector ให้โดยอัตโนมัติ

ในการกำหนด Selector ที่หน้าต่าง CSS Designer นั้น ผู้ใช้โปรแกรมอาจจะไม่จำเป็นต้องพิมพ์ชื่อ Selector เข้าไปด้วยตนเอง แต่เราสามารถให้โปรแกรมทำการกำหนด CSS Selector ได้โดยอัตโนมัติ โดยสามารถทำได้ ดังนี้

6. ในส่วนของเว็บเพจที่ได้เปิดไว้กับโปรแกรม Dreamweaver ให้ไปที่ข้อมูลที่ต้องการใช้งาน CSS จากนั้นนำ Cursor ไปวางไว้ที่ข้อมูลที่ต้องการใช้ CSS หรือจะเลือกที่ข้อมูลไว้ก็ได้เช่นกัน ขึ้นอยู่กับลักษณะข้อมูลนั้น ดังรูป

จากรูปข้างต้น ผู้เขียนนำ Cursor วางไว้ที่ในส่วนหัวของคอลัมน์ที่มีคำว่า "ชื่อ"

7. จากนั้นที่ Selectors ของหน้าต่าง คลิกที่เครื่องหมายบวก (+) ดังรูป *Add Selector

จะพบว่า...โปรแกรมทำการสร้างชื่อ Selector ให้โดยอัตโนมัติ

สำหรับการใช้งานในส่วนนี้ ผู้ใช้งานโปรแกรมควรมีความรู้ความเข้าใจในเรื่อง Tag ของ HTML และ Selectors ของ CSS จึงจะสามารถใช้งานได้อย่างถูกต้อง

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