CSS Layout ปัจจุบันได้รับความนิยม และได้รับความสนใจอย่างมาก จากกลุ่มผู้ออกแบบเว็บ หรือนักพัฒนาเว็บ สำหรับประโยชน์ หรือว่าทำไมต้องเปลี่ยนจากการเลย์เอาท์เว็บที่แต่ก่อนใช้ Table หรือตารางในการจัดหน้าเว็บ มาใช้ CSS ในปัจจุบัน ทางผมจะขออนุญาตไม่กล่าวถึงในที่นี้ เนื่องจากเคยเขียนไปแล้วในบทความที่เกี่ยวกับ CSS (อ่านได้ที่นี่) ในบทความนี้จะกล่าวถึง การใช้งาน Dreamweaver ตัวเก่งของเราในการเลย์เอาท์ การจัดวางด้วย CSS กันครับ
................................................................................................................................................................................
วิธีการเลย์เอาท์ด้วย CSS โดยใช้โปรแกรม Dreamweaver1. ให้เราทำการกำหนดรูปแบบของเว็บเราว่าจะแบ่งออกเป็นกี่ส่วน ซึ่งโดย Basic ของเว็บแล้ว ก็จะมีการแบ่งหน้าเว็บออกมาเป็น 2 หรือ 3 ส่วน หรือเราอาจจะเรียกว่า 2 Columns or 3 Columns ก็ได้ ในตัวอย่างบทความ ผมเลือกที่จะแบ่งหน้าจอออกเป็น 2 Columns ดังรูป
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 จะได้โค้ด ดังนี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น