Dalam produksi halaman web dikenal banyak istilah seperti: CSS, HTML, DHTML, XHTML dan lain sebagainya. Pada artikel berikut ini kami akan menggunakan beberapa pengetahuan dasar tentang HTML. Sebelum Anda mempelajari tutorial pengantar ini, pastikan Anda sudah memiliki pengetahuan dasar tertentu tentang HTML. Mari mulai menggunakan DIV+CSS langkah demi langkah untuk mendesain tata letak halaman web.
Langkah pertama dalam semua desain adalah membayangkan, secara umum, Anda perlu menggunakan PhotoShop atau FireWorks (selanjutnya disebut PS atau FW) dan perangkat lunak pengolah gambar lainnya untuk sekadar menggambar tata letak antarmuka yang perlu dibuat berikut adalah apa yang saya bayangkan.
Selanjutnya, kita perlu merencanakan tata letak halaman berdasarkan diagram konseptual. Setelah menganalisis diagram dengan cermat, kita dapat dengan mudah menemukan bahwa gambar tersebut secara kasar dibagi menjadi beberapa bagian berikut:
1. Bagian atas, yang juga memuat LOGO, MENU dan gambar Banner;
2. Bagian konten dapat dibagi menjadi sidebar dan konten utama;
3. Bagian bawah memuat beberapa informasi hak cipta.
Dengan analisa di atas, kita dapat dengan mudah menata layer desain kita seperti yang ditunjukkan di bawah ini:
Berdasarkan gambar di atas, saya menggambar diagram tata letak halaman sebenarnya untuk mengilustrasikan hubungan bersarang dari lapisan-lapisan tersebut, sehingga akan lebih mudah untuk dipahami.
Struktur DIV adalah sebagai berikut:
│body {} /*Ini adalah elemen HTML, saya tidak akan menjelaskan detailnya*/
└#Container {} /*Container lapisan halaman*/
├#Header {} /*Header halaman*/
├#PageBody {} /*Bagian halaman*/
│ ├#Bilah Sisi {} /*Bilah Sisi*/
│ └#MainBody {} /*Konten utama*/
└#Footer {} /*Bawah halaman*/
Sampai disini tata letak dan perencanaan halaman sudah selesai, selanjutnya yang harus kita lakukan adalah mulai menulis kode HTML dan CSS.