Dokumen ini memberikan panduan singkat untuk membuat desain website sederhana menggunakan Dreamweaver. Langkah-langkahnya meliputi persiapan layout desain, penentuan menu halaman, pembuatan tabel dasar menggunakan Dreamweaver, penambahan gambar header dan navigasi, pengisian konten menu dan konten utama, serta penyimpanan halaman tambahan dengan menyalin halaman awal.
2. header.gif
3. Atur Page Properties, yang terletak pada panel Properties bagian bawah. Atur dengan
contoh sebagai berikut :
Pada gambar di atas, margin dibuat 0 semuanya agar halaman mepet alias menepi.
4. Sesuai dengan gambar header.gif, ternyata ukuran lebar gambar yaitu 770px. Maka layout
tabel dasar kita sesuai dengan ukuran tersebut yaitu selebar 770px.
5. Buat tabel dasar dengan cara Insert Table. Kemudian, atur dengan pengaturan sebagai
berikut :
3. Hasil dari pembuatan table dasar sebagai berikut ;
6. Atur Align pada panel Properties menjadi Center untuk membuat tabel berada di tengah
halaman.
7. Tempatkan kursor pada baris pertama tabel dan masukkan gambar dengan Insert Image.
Kemudian pilih gambar header.gif.
4. Perhatian! Tempatkan gambar dalam folder tersendiri berdampingan dengan halaman
index.html. Sebagai contoh, header.gif ditempatkan dalam folder images.
8. Tempatkan kursor di baris kedua tabel dan masukkan tabel baru untuk navigasi lewat
Insert Table dengan pengaturan sebagai berikut :
Setelah tabel terbentuk, beri warna lewat Bg color pada panel properties agar terlihat
berbeda :
5. 9. Beri menu navigasi sesuai dengan yang telah didesain sebelumnya.
10. Beri link pada tiap menu lewat menu Link pada panel Properties.
11. Tempatkan pada baris ke-3. Dan sesuai dengan layout dasar, kita akan buat tabel di
dalamnya dengan melalui Insert Table dengan pengaturan sebagai berikut :
6. Dengan cara yang sama dengan sebelumnya, atur hingga tampilannya kurang lebih sebagai
berikut :
12. Pada baris terakhir (footer) ganti warna dan ketikkan teks pada footer. Jangan lupa untuk
melakukan Centering text alias membuat teks di tengah cell tabel. Kita biasanya menulis
copyright dan sejenisnya pada footer.
7. 13. Selanjutnya kita tinggal melengkapi bagian menu kiri dan content kanan sesuai dengan
keinginan. Oiya, jangan lupa Title: diganti dengan judul website, jangan cuma Untitled
Document Berikut ini salah satu contohnya hasil akhirnya :
14. Langkah selanjutnya tentu membuat halaman lain sesuai dengan yang kebutuhan. Agar
tidak ribet dan tidak repot, cukup melakukan Save As… pada halaman index.html dan beri
nama baru dengan halaman lain, misal about.html, blog.html, dan contact.html. Langkah
selanjutnya tinggal isi content tiap-tiap halaman.
15. Yak… sudah gitu aja. Gampang kan?!
Selamat mencoba !!!