อันนี้เป็นการสร้าง css จาก Dream cs4 ครับ
อย่างแรกเราก็ต้องกำหนดเลเอาต์คราวๆ ของเราก่อนครับ ส่วนใหญ่ก็จะเป็นตามในรูปนี้ครับ ในตัวอย่างนี้ผมก็จะของเป็นแบบ 2 collum ก่อนนะครับ เพราะมันง่ายดี อิอิ
 | ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 1036x718 คลิกที่นี่! เพื่อดูขนาดจริง! |
สร้าง New File ใหม่เป็น HTML ครับและก็ Save เป็นชื่อ layout.html
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 1036x725 คลิกที่นี่! เพื่อดูขนาดจริง! |
สร้างไฟล์ใหม่แต่เลือกเป็น .css ครับ และก็ทำการเซฟ เป็น loyout.css
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 1036x668 คลิกที่นี่! เพื่อดูขนาดจริง! |
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 972x800 คลิกที่นี่! เพื่อดูขนาดจริง! |
จากนั้นก็ไปเลือกทำงานที่ ไฟล์ loyout.html ทำการเชื่อมโยงกับไฟล์ CSS โดยเลือกที่ CSS PANEL เลือกที่ Attach Style Sheet คลิกตรงรูปโซ่ครับ ก็จะปรากฎหน่าต่างขึ้นมา
ให้เราเลือกหาไฟล์ layout.css ที่เราได้สร้างเก็บไว้ตั้งแต่ตอนแรก และคลิก OK
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 805x362 คลิกที่นี่! เพื่อดูขนาดจริง! |
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 972x800 คลิกที่นี่! เพื่อดูขนาดจริง! |
ต่อไปคลิกเลือกที่ ไฟล์ layout.html เลือก Insert Div Tag โดยไปที่ Insert Bar เลือกที่ Insert Div
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 691x483 คลิกที่นี่! เพื่อดูขนาดจริง! |
จะปรากฎหน้าต่างขึ้นมาให้เราทำตามภาพเลยครับ เออ ไฟล์ layout.html ที่เราทำงานอยู่ให้เลือกมุมมองเป็น code นะครับ จะได้ง่ายๆ หน่อย
อันนี้ส่วนของ header
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 876x381 คลิกที่นี่! เพื่อดูขนาดจริง! |
ส่วนของ sidebar
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 876x381 คลิกที่นี่! เพื่อดูขนาดจริง! |
ส่วนของ main content
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 876x381 คลิกที่นี่! เพื่อดูขนาดจริง! |
สุดท้ายส่วนของ footer
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 876x381 คลิกที่นี่! เพื่อดูขนาดจริง! |
ทั้งหมดทั้งมวลที่เราสร้างมานั้นมันจะมีโค๊ดมีหน้าตาเป็นอย่างนี้ครับ
| ภาพนี้ถูกย่อขนาด ขนาดเดิมคือ 919x167 คลิกที่นี่! เพื่อดูขนาดจริง! |
บันทึกการเข้า
