ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 1)

ในบทความนี้จะเป็นเนื้อหาการสร้างเว็บเพจด้วย CSS layout โดยจะมีขั้นตอนดังนี้

1.ออกแบบโครงสร้างหลักๆของหน้าเว็บเพจก่อน ดังรูปด้านล่าง



จากรูปจะเห็นว่าเราได้แบ่งส่วนต่างๆของหน้าเว็บเพจออกเป็น 4 ส่วนคือ

1.1.ส่วนแสดงสัญลักษณ์ของเว็บไซต์ ส่วนนี้เราจะให้แสดงรูปภาพและสัญลักษณ์ของเว็บไซต์

1.2.ส่วนแสดง Navigation ของเว็บไซต์ ส่วนนี้จะแสดงลิงค์ไปยังหน้าต่างของเว็บไซต์

1.3.ส่วนแสดงเนื้อหา จะแสดงเนื้อหาและรูปภาพ

1.4.ส่วนท้ายสุดของหน้า จะแสดงลิงค์ไปยังหน้าหลักๆของเว็บไซต์

การออกแบบโครงสร้างหลักของเว็บเพจนั้นมีความจำเป็นมาก เพราะหน้าเว็บเพจของเรามีค่ามาก การออกแบบตำแหน่งต่างของเว็บเพจไว้ก่อน จะทำให้การใช้พื้นที่ในหน้าเว็บเพจของเรามีประสิทธิภาพมากที่สุด

2.ออกแบบหน้าตาของเว็บเพจ

หลักจากที่เราได้โครงสร้างหลักๆของเว็บเพจแล้ว เราก็จะออกแบบหน้าตาของเว็บเพจกัน โดยใช้โปรแกรมกราฟิกต่างๆ เช่น Photoshop , Firework , Illustrator แล้วแต่ถนัด โดยในตัวอย่างจะออกแบบโดยใช้โปรแกรม Illustrator



หลังจากที่เราออกแบบเว็บเพจเรียบร้อยแล้ว ในบทต่อไปจะเริ่มสร้างเว็บเพจกัน

เพื่อความเข้าใจที่ง่ายขี้น

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจที่เสร็จแล้ว

คลิกที่นี่เพื่อดาว์นโหลดตัวอย่างเว็บเพจที่เสร็จแล้ว