การใช้ CSS กับโปรแกรม Dreamweaver CC [Article ID : 122]

Dreamweaver เวอร์ชั่น CC เป็นเวอร์ชั่นที่มีการใช้งาน CSS ที่แตกต่างจากเวอร์ชันเดิม ๆ อย่างมาก ไม่ว่าจะ Panel การใช้งาน ก็แตกต่างไปจากเดิม และแน่นอนครับ ขั้นตอนการใช้งานก็แตกต่างออกไป ในเวอร์ชั่นนี้ ผู้ที่จะใช้งาน CSS กับโปรแกรม Dreamweaver ต้องมีความรู้เรื่องของ CSS มาพอสมควร จึงจะสามารถใช้งานได้อย่างเข้าใจ หรือถ้าท่านใดยังไม่มีความรู้เรื่อง CSS คลิกที่นี้ เพื่ออ่านได้ครับ
...สำหรับขั้นตอนการใช้ CSS กับโปรแกรม Dreamweaver CC มีขั้นตอนหลัก ๆ ดังนี้
1. เลือก Source คือ การเลือกว่า CSS ที่ต้องการสร้างขึ้นนั้นจะเก็บโค้ดไว้ในรูปแบบใด
2. สร้าง Selector (อ่านเรื่อง Selector)
3. กำหนดคุณสมบัติให้แก่ Selector
4. นำ Selector หรือ CSS ไปใช้งาน

จากขั้นตอนต่าง ๆ ข้างต้น เราสามารถสร้าง CSS ได้จากหน้าต่าง CSS Designer (Main Menu -> Window -> CSS Designer) ดังรูป จะได้หน้าต่าง CSS Designer ดังรูป จากนั้นให้เราปฏิบัติตามขั้นตอนข้างต้น ดังนี้

1. เลือก Source

ขั้นแรกให้เราทำการเลือก Source ซึ่งเป็นการเลือกว่าเราจะสร้างโค้ด CSS อย่างไร ซึ่งมีให้เลือก 3 ประเภท ดังนี้
- Create A New CSS File : สร้างไฟล์ CSS ใหม่
- Attach Existing CSS File : เลือกไฟล์ CSS ที่มีอยู่แล้ว
- Define in Page : สร้างโค้ดไวักับเว็บเพจนี้
ดังรูป จากรูปเลือกไปที่ Define in Page

2. สร้าง Selector

ขั้นต่อมาคือการสร้าง Selector ซึ่งในส่วนนี้ เราต้องใช้ความรู้เรื่อง Selector เข้ามาช่วยครับ *อ่านเรื่อง Selector คลิก
สำหรับการสร้าง Selector กับ CSS Designer Panel สร้างได้ ดังนี้

1. ที่พาเนล CSS Designer มาที่ส่วนของ Selectors เลือกที่เครื่องหมายบวก (+) หรือ Add Selector
2. จากนั้นทำการพิมพ์ชื่อ Selector ลงไป โดยชื่อ Selector ให้เป็นไปตามประเภท Selector ที่ต้องการ ดังรูป *จากรูปเป็นการสร้าง Class Selector ชื่อว่า .box-content

3. กำหนดคุณสมบัติให้แก่ Selector

เมื่อได้ Selector แล้วจากนั้นให้ทำการกำหนดคุณสมบัติต่าง ๆ ตามที่ต้องการแก่ Selector นั้น ดังนี้

1. ที่ส่วนของ Properties ของ CSS Designer เลือกหมวดหมู่ของคุณสมบัติที่ต้องการ จากนั้นให้ทำการกำหนดค่า ดังรูป *จากรูปเลือก Layout แล้วกำหนดค่า ดังนี้
- width : 400 px
- height : 140 px *จากรูปเลือก Text แล้วกำหนดค่าดังนี้
- color : #FFFFFF *จากรูปเลือก Background แล้วกำหนดค่าดังนี้
- background-color : #0066CC

เมื่อกำหนดคุณสมบัติให้กับ Selector เสร็จสิ้นแล้ว เราก็จะได้ Selector ที่สามารถนำไปใช้งานได้แล้วครับ

4. นำ Selector หรือ CSS ไปใช้งาน

ในขั้นตอนสุดท้ายนี้ คือการนำเอา CSS ที่สร้างจากขั้นตอนก่อน ๆ ไปใช้งานกับข้อมูลในเว็บเพจของเรา ซึ่งการนำไปใช้นี้ ขึ้นอยู่กับประเภทของ CSS ที่เราได้สร้างไว้ด้วยครับ ดังในตัวอย่างขั้นตอนที่ผ่านมา เป็นการสร้าง Class Selector ดังนั้น วิธีการนำไปใช้ในส่วนนี้ จะขออธิบายเป็นการนำเอา Class Selector ไปใช้งาน ดังนี้

1. ที่ข้อมูลของเว็บเพจที่ต้องการนำ CSS ไปใช้งานร่วม ให้ทำการเลือกข้อมูลนั้น
2. จากนั้นที่ Properties Panel ส่วนของ Option ที่ชื่อว่า Class ให้เลือกไปที่คลาสที่ได้สร้างขึ้นไว้ ในที่นี้คือ .box-content ดังรูป *Option ที่ปรากฎใน Properties Panel อาจแตกต่างกันไป ให้เราดูเฉพาะในส่วนของ Option ที่ชื่อว่า Class

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