About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





ค้นหาข้อมูลใน 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

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



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

การ Export ข้อมูลจากตารางในเว็บเพจด้วย Dreamweaver

เรื่อง : การ Export ข้อมูลจากตาราง (Export Table) ในคราวก่อนมีแฟนเว็บ DwThai.Com ส่งเรื่องของการนำเอาข้อมูลภายนอกเข้ามาใช้ง...  

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

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

วิธีเปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel ในแบบดั่งเดิม

เรื่อง : เปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel แบบเดิม การใช้ CSS...  

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

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


Copyright ©2003-2016 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

*
*
*