CSS Layout ด้วย Dreamweaver

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

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

วิธีการเลย์เอาท์ด้วย CSS โดยใช้โปรแกรม Dreamweaver

1. ให้เราทำการกำหนดรูปแบบของเว็บเราว่าจะแบ่งออกเป็นกี่ส่วน ซึ่งโดย Basic ของเว็บแล้ว ก็จะมีการแบ่งหน้าเว็บออกมาเป็น 2 หรือ 3 ส่วน หรือเราอาจจะเรียกว่า 2 Columns or 3 Columns ก็ได้ ในตัวอย่างบทความ ผมเลือกที่จะแบ่งหน้าจอออกเป็น 2 Columns ดังรูป

Header
Side Bar	Main Content
Footer

 

2. เมื่อเราได้ทำการกำหนดรูปแบบการเลย์เอาท์ของเรา ตามขั้นตอนที่ 1 แล้ว จากนัน ให้เราทำการ New File ขึ้นมา เป็น XHTML แล้ว Save เก็บไว้ โดย Save เป็นไฟล์ชื่อ csslayout.hrml

3. ทำการสร้างไฟล์ CSS ขึ้นมา ดังรูป จากนั้นทำการ Save ไฟล์ CSS เป็นชื่อ mylayout.css

4. จากนั้นที่ไฟล์ csslayout.hrml ทำการเชื่อมโยงกับไฟล์ CSS ที่เราได้สร้างไว้ในขั้นตอนที่ 3 โดย ไปที่ CSS PANEL (Shift + F11) เลือกที่ Attach Style Sheet ดังรูป

กดที่ปุ่ม Browse.. เพื่อเลือกไฟล์ CSS ของเรา ในที่นี้คือไฟล์ mylayout.css ดังรูป แล้วกดที่ปุ่ม OK

5. จากนั้นให้เรากลับมาที่ไฟล์ csslayout.html ที่เราเปิดไว้กับโปรแกรม Dreamweaver เพื่อทำการวางโครงสร้างหน้าเว็บของเรา โดยการใช้ Insert Div Tag ดังนี้ 
ไปที่ Insert Bar เลือกที่ Insert Div ดังรูป

โปรแกรมทำการเปิดหน้าต่างขึ้นมา ให้เราทำการพิมพ์ชื่อ Class หรือชื่อ ID ตามที่เราต้องการ

6. ที่หน้าเว็บให้เราทำการวางโครงสร้าง โดยทำตามลำดับ ดังนี้

เมื่อเรา View ที่ Code จะได้โค้ด ดังนี้

 เมื่อเราได้ทำการกำหนดโครงสร้างของเว็บเพจเราไปจากในตอนที่ 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 นี้ประกอบ

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

refer: http://www.dwthai.com/dreamweaver/dw-css-layout-2.html