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 {} /*Bagian bawah halaman*/
Sampai disini tata letak dan perencanaan halaman sudah selesai, selanjutnya yang harus kita lakukan adalah mulai menulis kode HTML dan CSS.
Selanjutnya, kita membuat folder baru di desktop dan beri nama "Latihan Tata Letak DIV+CSS". Buat dua dokumen Notepad kosong di bawah folder tersebut dan masukkan konten berikut:
Ini adalah struktur dasar XHTML, beri nama index.htm, dan beri nama dokumen Notepad lainnya css.css.
Selanjutnya kita tuliskan struktur dasar DIV pada tag pair <body></body>, kodenya sebagai berikut:
<div id=container><!--Wadah lapisan halaman-->
<div id=Header><!--Header halaman-->
</div>
<div id=PageBody><!--Badan halaman-->
<div id=Bilah Samping><!--Bilah Samping-->
</div>
<div id=MainBody><!--Konten utama-->
</div>
</div>
<div id=Footer><!--Bagian bawah halaman-->
</div>
</div>
Untuk memudahkan membaca kode di kemudian hari, kita harus menambahkan komentar yang relevan. Selanjutnya, buka file css.css dan tulis informasi CSSnya sebagai berikut: