ในการผลิตหน้าเว็บ มีคำศัพท์มากมาย เช่น CSS, HTML, DHTML, XHTML และอื่นๆ ในบทความต่อไปนี้ เราจะใช้ความรู้พื้นฐานเกี่ยวกับ HTML ก่อนที่คุณจะศึกษาบทช่วยสอนเบื้องต้นนี้ โปรดตรวจสอบให้แน่ใจว่าคุณมีความรู้พื้นฐานเกี่ยวกับ HTML อยู่แล้ว มาเริ่มใช้ DIV+CSS ทีละขั้นตอนเพื่อออกแบบเค้าโครงหน้าเว็บ
ขั้นตอนแรกในการออกแบบทั้งหมดคือการตั้งครรภ์ โดยทั่วไปแล้ว คุณจะต้องใช้ PhotoShop หรือ FireWorks (ต่อไปนี้จะเรียกว่า PS หรือ FW) และซอฟต์แวร์ประมวลผลภาพอื่นๆ เพื่อวาดเค้าโครงอินเทอร์เฟซที่จำเป็น ต่อไปนี้เป็นสิ่งที่ฉันคิดไว้
ต่อไป เราต้องวางแผนเค้าโครงของหน้าตามแผนภาพแนวคิด หลังจากวิเคราะห์แผนภาพอย่างรอบคอบแล้ว เราจะพบว่ารูปภาพแบ่งออกเป็นส่วนต่างๆ อย่างคร่าว ๆ ดังต่อไปนี้:
1. ส่วนบนสุดซึ่งรวมถึงโลโก้ เมนู และรูปภาพแบนเนอร์
2. ส่วนเนื้อหาสามารถแบ่งออกเป็นแถบด้านข้างและเนื้อหาหลัก
3. ด้านล่างมีข้อมูลลิขสิทธิ์บางส่วน
ด้วยการวิเคราะห์ข้างต้น เราสามารถจัดวางเลเยอร์การออกแบบของเราได้อย่างง่ายดายดังที่แสดงด้านล่าง:
จากภาพด้านบน ฉันวาดไดอะแกรมเค้าโครงหน้าจริงเพื่อแสดงความสัมพันธ์ที่ซ้อนกันของเลเยอร์ต่างๆ เพื่อให้เข้าใจได้ง่ายขึ้น
โครงสร้าง DIV เป็นดังนี้:
│body {} /*นี่คือองค์ประกอบ HTML ฉันจะไม่อธิบายรายละเอียด*/
└#Container {} /*คอนเทนเนอร์เลเยอร์เพจ*/
├#Header {} /*ส่วนหัวของหน้า*/
├#PageBody {} /*เนื้อหาของหน้า*/
│ ├#แถบด้านข้าง {} /*แถบด้านข้าง*/
│ └#MainBody {} /*เนื้อหาหลัก*/
└#Footer {} /*ด้านล่างสุดของหน้า*/
ณ จุดนี้ เค้าโครงหน้าและการวางแผนเสร็จสมบูรณ์แล้ว และสิ่งต่อไปที่เราต้องทำคือเริ่มเขียนโค้ด HTML และ CSS