ใครที่ชอบเขียนโค้ดด้วยโปรแกรม Dreamweaver อาจจะพบปัญหาที่ว่า พอเขียนโค้ดไปบ่อย ๆ หรือนาน ๆ เข้า รูปแบบโค้ดไม่สวยงามเอาเสียเลย หรือเขียนแล้วทำให้พอเวลาผ่านไปกลับมาอ่านโค้ดอีกทีอ่านยากมาก ไม่ว่าจะเป็นโค้ด HTML โค้ด CSS หรือโค้ดอื่น ๆ ที่เกี่ยวข้องกับการพัฒนาเว็บของเรา โปรแกรม Dreamweaver ช่วยท่านจัดรูปแบบหรือ Format ของโค้ดเหล่านั้นได้ ด้วยการ Click เพียงครั้งเดียว ซึ่งบทความนี้จะแนะนำท่านลองติดตาม วิธีการใช้งาน Apply Source Formatting 1. ทำการเปิดไฟล์เว็บเพจที่ท่านต้องการจัดรูปแบบ Code ขึ้นมากับโปรแกรม Dreamweaver 2. จากนั้นให้ท่านคลิ๊กที่ Code View (Code View) 3. จากนั้นไปที่ Main Menu > Command > Apply Source Formatting ดังรูป Apply Format Before Code After CODE 4. เมื่อท่านเลือกที่เมนูดังกล่าวแล้ว โปรแกรมจะทำการจัดรูปแบบโค้ดให้ท่านตามรูปแบบที่มีมากับ Code Format ซึ่งท่านสามารถ Set ได้ที่ Main Menu > Edit > Preferences.. Dreamweaver Preferences.. ................................................................................................................................................................................ ส่งท้าย..หวังว่าบทความนี้คงจะเป็นประโยชน์กับผู้ที่ใช้งานโปรแกรม Dreamweaver ไม่มากก็น้อยครับ.

เมื่อเราได้ทำการกำหนดโครงสร้าง ของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต่อมาก็มาถึงจุดสำคัญกัน นั่นก็คือ การกำหนด CSS ที่ใช้ในการบอกถึงการแสดงผล ว่าจะให้ออกมาในรูปแบบเลย์เอาท์ที่เราต้องการได้อย่างไร มาดูกันต่อนะครับ

1. ให้เราทำการเปิด CSS Panel ขึ้นมา ดังรูป เพื่อกำหนดค่า CSS (สำหรับการสร้างและการกำหนดค่า CSS เราเริ่มต้นที่การกดไปที่ icon ที่ชื่อว่า New CSS Rule ของ CSS Panel นะครับ)

* การใช้งาน CSS Panel สำหรับการกำหนดค่า คุณสามารถอ่านได้จากบทความ เหล่านี้
- การใช้งาน CSS กับโปรแกรม Dreamweaver
- การใช้งาน CSS กับโปรแกรม Dreamweaver 2
(การใช้งาน Panel ดังกล่าวผมจะไม่กล่าวถึงในที่นี้)

2. ผมกำหนด CSS ที่ Tag Body ดังรูป

- Padding: 0px;
- Margin: 0px;

ต่อมาในการกำหนดค่าให้กับ DIV ที่เราได้กำหนดเป็น ID ต่าง  ๆ ให้ทำตามขั้นตอนดังนี้
- ถ้าเป็นการกำหนดที่ ID ที่ชื่อว่า header ให้เราสร้าง ดังรูป

การกำหนดค่าให้กับ ID Selector กำหนดให้ส่วนที่เป็น header มีความสูงที่ 100 pixels (Height: 100px;)

3. จากนั้นที่ container กำหนดค่า ดังรูป

4. ที่ sidebar กำหนด ดังรูป

5. ที่ mainContent กำหนด ดังรูป

6. ในส่วนสุดท้าย คือ footer ให้กำหนด ดังนี้

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

หากใครสงสัยค่า Properties ที่ผมกำหนดให้กับ CSS ในส่วนต่าง ๆ อาจจะดูได้จากโค้ด CSS นี้ประกอบ

................................................................................................................................................................................

สำหรับ รายละเอียดเรื่องของการเลย์เอาท์ด้วย CSS ยังมีอีกมาก ที่นำเสนอบทความนี้ เป็นเพียงแค่พื้นฐานให้คุณทำความเข้าใจเบิ้องต้นก่อน หากคุณสนใจที่จะศึกษาเรื่องการเลย์เอาท์ด้วย CSS ลองติดตามบทความที่ DwThai.Com ไปเรื่อย ๆ  นะครับ จะพยายามเขียนในส่วนอื่น ๆ ที่เกี่ยวข้องให้ได้อ่านกันต่อไป