Dreamweaver Layout 2

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 2)

---

Postingan kali ini adalah penyempurnaan layout website menggunakan Dreamweaver (lanjutan dari bagian 1). Jika pada bagian 1 hanya membuat layout mentahnya saja, kali ini menambahkan beberapa background gambar, menambahkan navigasi menu vertikal dan horizontal dan yang pasti tujuan utamanya adalah membuat tampilan layout website menjadi kelihatan lebih enak dipandang.

Modifikasi kode 'body'

Sebelum mulai download dulu file gambarnya di sini. Sesudah itu extract file rar dan kopikan seluruh gambar di direktori 'images', kemudian modifikasi code 'body' "background-color: #EEE;" menjadi "background: url(../images/img01.jpg) repeat-x left top #EEE;".

Modifikasi kode 'Header'

Untuk tag id 'header' ganti kode "background-color: #0C9;" menjadi "background: url(../images/img01.jpg) repeat-x left top;". Ganti kode "height: 120px;" menjadi "height: 91px;"

Modifikasi kode 'Konten Utama (maincontent)'

Ganti "padding: 0px;" menjadi "padding: 5px 10px;", dan ganti kode "width: 550px;" menjadi "width: 520px;". Dan hapus kode "background-color: #fc0;", atau sesuaikan warba backgroundnya sesuai dengan selera anda. Kemudian ganti kode "height: 400px;" menjadi "height: auto;", yang berarti tinggi dari konten utama anda menyesuaikan dengan panjangnya tulisan yang anda buat.

Modifikasi kode sidebar

Hapus "background-color: #36F;", ganti "padding: 0px;" menjadi "padding: 5px 10px;", tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Modifikasi kode 'footer'

Hapus "background-color: #CFC;" dan ganti dengan "background: url(../images/footer.png) no-repeat;", ganti height: 50px;" menjadi "height: 47px;" sesuaikan dengan tinggi background gambar footer, tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Div Tag tambahan

Tambahkan kode di bawah ini pada bagian edit code css:

[css collapse="false"]
#logogambar {
width: 850px;
height: 209px;
background: url(../images/image-logo.jpg) no-repeat;
}
[/css]

Kemudian dari mode 'css source (style.css)' pindahkan ke mode 'Source Code'. Copy dan pastekan tag berikut ini => "<div id="logogambar"></div>" <= di bawah tag kode "<div id="header">Content for id "header" Goes Here</div>".

Untuk dapat memodifikasi kode css ini maka klik pilihan edit 'Code' dan klik pada "style.css" seperti yang yang dapat anda lihat pada gambar di bawah ini. ('layout-bagian-2.css' pada gambar di bawah yang saya pakai jika pada lembar kerja anda adalah 'style.css')

Dapat anda lihat hasil setengah jadinya di halaman ini. Bagian dua cukup sampai di sini, tunggu kelanjutannya pada bagian 3.