Membuat Desain Web Dengan Dreamweaver

Membuat desain sendiri halaman web mungkin bagi kita memang merupakan sesuatu hal yang agak rumit, apalagi kalau kita mendesain web tersebut langsung hanya dengan menggunakan notepad. Tapi saat ini kan sudah banyak software yang berkeliaran yang fungsinya sama tetapi caranya lebih mudah.

Salah satunya adalah Macromedia Dreamweaver yang sekarang sudah berubah menjadi Adobe Dreamweaver (ga perlu dijelasin lah berubahnya kenapa). Dengan bantuannya lah kita bisa lebih mudah dalam mendesai halaman untuk web kita.

Disini saya ingin sedikit berbagi tentang pembuatan halaman web berbasis HTML dengan menggunakan dreamweaver tadi.bagi yang belum punya dreamweaver, bisa langsung download sendiri di website berikut :
http://www.adobe.com/products/dreamweaver/

Berikut ini adalah langkah-langkah nya :

1. Software pendukung, ia yang tadi udah disebutkan.
2. Tujuan website : adalah fondasi website yang akan anda buat (gambaran akan seperti apa web anda), anda harus paham benar untuk apakah tujuan anda membuat website “perusahaan, pribadi, partai, kelompok, advertise (berjualan), atau tujuan lain” semuanya terserah anda, jika tujuan sudah ada dan anda sudah memiliki gambaran tentang website yang akan anda bangun maka anda sudah siap untuk masuk ke tahap berikutnya.
3. Materi pendukung : adalah hal-hal yang anda butuhkan untuk membuat website anda.
   • Content atau isi materi dari website anda, sebagai gambaran biasanya orang memasukan profile (buat dalam format word), alamat, foto-foto, gambar produk (jika mengiklanka produk), dll.
   • Performa atau tampilan, anda bisa menyiapkan gambar-gambar untuk dipakai sebagai background (gambar latar), contoh :
     
     • Gambar dengan ukuran 1005 x 222 pixel 1 buah untuk banner nya
     • Gambar dengan ukuran 335 x 42 pixel 3 buah untuk menu navigasinya
     • Gambar dengan ukuran 1005 x 13 pixel 1 buah
     • Gambar dengan ukuran bebas untuk background
     atau anda dapat sekedar memberikan latar warna pada website anda.
     Setelah semua persiapan selesai anda dapat segera memulai proses pembuatan website.

Proses 1 :
Buka program dreamweaver anda dengan mengklik icon dreamweaver Start/Program/Adobe Design Premium CS3/Adobe Dreamweaver CS3.

Proses 2 :
Pada tampilan pertama akan muncul item-item pilihan (pilih Create New, HTML) atau jika tidak muncul item pilihan anda dapat klik File/New “Ctrl + N” di layar kiri atas anda dan pilih Blank Page, HTML lalu klik Create pada layar kanan bawah.
Pada kolom title diatas layar anda ubah nama “Untitled Document” dengan nama anda atau perusahaan anda (ini akan menjadi judul website anda di “browser” internet explorer).

Proses 3 :
Sampai pada tahap ini anda harus menyimpan pekerjaan anda pada folder yang berisi gambar dan file-file yang anda siapkan sebelumnya (ini dimaksudkan agar proses pengindexan lebih mudah), Save As file anda (klik File yang ada dikiri atas, klik Save As “Ctrl + Shift + S”) simpan dengan nama file “index.html”.

Proses 4 :
Pada layar utama pilih Insert/Table “Ctrl + Alt + T” dan isi kolom isian :
Rows : 1 Columns : 1
Table Width : 1005 Pixel
Border Thickness : 0
Cell Padding : 0
Cell Spacing : 0
Klik OK dan pada layar anda akan muncul kotak dengan garis putus-putus, klik ditengah kotak tersebut dan pada layar bawah anda akan ada kolom-kolom yang muncul (jika tidak ada klik menu window/properties “Ctrl + F3” diatas layar anda) pada kolom “bg” klik gambar folder yang ada disebelah kanan kolom bg dan akan keluar tampilan “Select Image Source” lalu pilih gambar yang sudah anda sediakan sebelumnya untuk dijadikan background/gambar latar wesite anda, lalu klik OK. Atau jika anda menginginkan menggunakan warna saja untuk background anda klik “bg yang dibawah” yang ada kotak kecil dengan tanda panahnya klik kotak tersebut dan akan muncul pilihan-pilihan warna, pilih warna yang sesuai menurut anda.

Proses 5 :
Klik kembali pada kotak yang tadi sudah diberi background, lalu pilih Insert/Table “Ctrl + Alt + T” dan isi kolom isian :
Rows : 4 Columns : 1
Table Width : 1005 Pixel
Border Thickness : 0
Cell Padding : 0
Cell Spacing : 0
Dan kotak yang ada dilayar anda akan berubah menjadi 4 kotak yang saling menempel.

Proses 6 :
Klik ditengah kotak yang paling atas lalu pilih menu diatas anda Insert/Image “Ctrl + Alt + I” dan akan muncul tampilan “Select Image Source” pilih gambar dengan ukuran 1005 x 222 pixel yang sudah anda siapkan sebelumnya, lalu tekan OK/OK. (Nb : gambar dan file harus dalam satu Folder atau Subfolder).

Proses 7 :
Klik ditengah kotak yang paling bawah lalu pilih menu diatas anda Insert/Image “Ctrl + Alt + I” dan akan muncul tampilan “Select Image Source” pilih gambar dengan ukuran 1005 x 13 pixel yang sudah anda siapkan sebelumnya, lalu tekan OK/OK. (Nb : gambar dan file harus dalam satu Folder atau Subfolder).

Proses 8 :
Klik ditengah kotak yang kedua lalu pilih Insert/Table “Ctrl + Alt +T” dan isi kolom isian :
Rows : 1 Columns : 3
Table Width : 335 Pixel
Border Thickness : 0
Cell Padding : 0
Cell Spacing : 0
Dan kotak kedua yang ada dilayar anda akan bertambah menjadi 3 kolom.

Proses 9 :
Klik ditengah kotak yang kedua kolom pertama lalu pilih menu diatas anda Insert/Image “Ctrl + Alt + I” dan akan muncul tampilan “Select Image Source” pilih gambar dengan ukuran 335 x 42 pixel yang sudah anda siapkan sebelumnya, lalu tekan OK/OK.
Pada properties di layar bawah anda pilih Link klik pada gambar folder disebelah kanannya dan akan muncul tampilan “Select File”, pilih file index.html (fungsi ini untuk menghubungkan antar halaman web pada saat diklik di “browser” internet explorer dalam hal ini link ke index.html).
Dan pada kolom border di bawah kanan isi dengan angka 0.
Ulangi langkah ini pada kolom-kolom berikutnya (link pada halaman-halaman yang berbeda), dan untuk agar lebih mempermudah Save As “Ctrl + Shift + S” pekerjaan anda dengan nama yang berbeda-beda, misalnya “profil.html”,”about_us.html”,”produk.html”. (Nb : index.html harus ada karena ini halaman utama dan nama tidak boleh menggunakan sepasi).

Proses 10 :
Pada kotak yang ke 3 anda bebas mengisikan apa saja (copy/paste profile, alamat, dll. Yang sudah anda siapkan sebelumnya) karena ini adalah isi konten website anda.
Simpan pekerjaan anda Save “Ctrl + S”, dan Website anda sudah siap digunakan.