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

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 ให้โดยอัตโนมัติ