About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

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


เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC

CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นมาตราฐานนึงในการกำหนดรูปแบบการแสดงผลลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ
...CSS ช่วยเราได้อย่างมากในการออกแบบเว็บ เช่น การกำหนดขนาด Font, การใส่สีสันให้กับช่องกรอกข้อมูล (input) บนหน้าเว็บ หริอแม้แต่การ Layout เว็บในปัจจุบัน เราก็ใช้ CSS ในการเลย์เอาท์ครับ โดยในปัจจุบัน CSS ได้กลายมาเป็นเทคโนโลยีหลักที่ใช้งานการพัฒนาเว็บไซต์ ที่นักพัฒนาเว็บต้องเรียนรู้
ในบทความนี้เราจะมาเริ่มรู้จักการใช้งาน CSS กับโปรแกรม Dreamweaver CC เบื้องต้นกัน ดังนี้

วิธีการสร้าง CSS ด้วยโปรแกรม Dreamweaver CC

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 มาใช้งานแล้ว ดังรูป
จากขั้นตอนข้างต้น เราจะพบว่า หากเราต้องการใช้งาน CSS Designer Panel ของ Dreamweaver CC ได้อย่างเข้าใจ เราควรจะมีความรู้เรื่องของ CSS กันมาบ้างพอสมควร ดังนั้น จึงอยากให้ท่านที่อ่านบทความกันไปแล้ว ทำความเข้าใจและศึกษา CSS กันเพิ่มเติมครับ สำหรับผู้ที่มีความรูเรื่อง CSS อยู่แล้ว ก็คงใช้งาน CSS กับโปรแกรม Dreamweaver CC ได้อย่างสะดวกมากยิ่งขึ้น ..อย่างไรลองใช้งานกันดู..สวัสดีครับ
- อ่านเรื่อง 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



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

การ Insert คลิป Video มาแสดงบนเว็บเพจ (HTML5)

เรื่อง : การ Insert คลิปวีดีโอมาใช้งานกับเว็บเพจด้วย Dreamweaver CC สอบถามกันเข้ามาว่า..."ต้...  

การสร้างจุด Link ด้วยรูปภาพ (Image Link)

เรื่อง : การสร้าง Link ในแบบ Image Link ในบทความก่อนได้แนะนำการสร้างลิงค์ด้วยข้อความกันไปแล้ว มาในบทความนี้ จะมาแนะนำการ...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

การ Insert ไฟล์ Flash อนิเมชั่นมาใช้งานกับเว็บ (SWF)

เรื่อง : การ Insert ไฟล์ Flash Animation มาใช้งานกับเว็บด้วย Dreamweaver Flash เป็นเทคโนโลยีที่ใช้จัดท...  


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

*
*
*