ในการผลิตหน้าเว็บ มีคำศัพท์มากมาย เช่น 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
ต่อไป เราสร้างโฟลเดอร์ใหม่บนเดสก์ท็อปและตั้งชื่อว่า "DIV+CSS Layout Practice" สร้างเอกสาร Notepad ว่างสองเอกสารใต้โฟลเดอร์และป้อนเนื้อหาต่อไปนี้:
นี่คือโครงสร้างพื้นฐานของ XHTML ตั้งชื่อเป็น index.htm และตั้งชื่อเอกสาร Notepad อื่น css.css
ต่อไปเราเขียนโครงสร้างพื้นฐานของ DIV ในคู่แท็ก <body></body> โดยมีโค้ดดังนี้:
<div id=container><!--คอนเทนเนอร์เลเยอร์เพจ-->
<div id=Header><!--ส่วนหัวของหน้า-->
</div>
<div id=PageBody><!--เนื้อหาของหน้า-->
<div id=แถบด้านข้าง><!--แถบด้านข้าง-->
</div>
<div id=MainBody><!--เนื้อหาหลัก-->
</div>
</div>
<div id=Footer><!--ด้านล่างของหน้า-->
</div>
</div>
เพื่อให้ง่ายต่อการอ่านโค้ดในอนาคต เราควรเพิ่มความคิดเห็นที่เกี่ยวข้อง ต่อไป ให้เปิดไฟล์ css.css และเขียนข้อมูล CSS เป็นดังนี้: