Kali ini saya akan membahas tentang cara mendesign website menggunakan macromedia dreamweaver. Tema yang saya angkat untuk design website ini adalah Linkin Park Fansite. Berikut ini adalah screenshoot dari design website yang saya buat.
 |
| Home |
Pembatasan bahasan kali ini hanya untuk mendesign page Home saja. Sebab lain seperti gambar di atas hanya tinggal mengganti elemen – lemennya. Oke, langsung saja kita melangkah ke cara mendesign page Home dari website tersebut. Mula - mula buat folder yang bernama Website di lokasi drive manapun. Misal di drive D:\Website . Folder ini akan digunakan sebagain tempat penyimpanan elemen – elemen website kita. Kemudian buka applikasi Macromedia Dreamweaver. Lalu buat file HTML baru. (lihat gambar)
Berikut ini adalah tampilan default dari Macromedia Dreamweaver.
Save As terlebih
dahulu file ini ke folder Website yang telah kita buat. Kemudian kita pindah ke
bagian tab code untuk mengubah warna background dan judul dari page website
kita (lihat gambar di bawah ini).
Ganti kata
‘Untitled Document’ yang berwarna hitam tersebut dengan kata ‘H O M E’ (tanpa
tanda kutip). Kemudian cari gambar bertipe .gif dan letakkan di folder Website yang
kita buat. Kemudian tuliskan kode di bawah untuk mengubah warna
background. (Lihat gambar).
Pindah ke tab
Design, lalu buat table yang terdiri dari satu baris (tanpa kolom). Kemudian
klik pada garis table tersebut untuk setting table. Untuk setting table lihat
gambar di bawah ini:
Cari gambar (yang
bertipe data .jpg .gif atau .png) / animasi (.swf) kemudian taruh di folder
Website. Kemudian kita sisipkan gambar atau animasi tersebut ke dalam tabel. Karena saya menggunakan file berjenis
animasi(.swf), pada toolbar pilih plugin(lihat gambar di bawah ini) dan
sisipkan file berjenis animasi (.swf) tersebut.
Selanjutnya kita
akan sisipkan gambar yang sedikit bertumpuk dengan tabel yang telah kita buat. Caranya
adalah dengan menyisipkan gambar tersebut kemudian kita atur margin dari
gambar. Lihat gambar.
Kemudian Copy paste
tabel yang pertama kali kita buat di bawah gambar yang bertumpuk tadi. Tabel
ini akan kita gunakan sebagai tempat membuat menu navigasi. Selanjutnya delete
isi dari tabel tersebut agar kita dapat menyisipkan menu navigasi, dan atur
height tabel tersebut menjadi 100px. Kemudian kita hanya tinggal menyisipkan
menu navigasi. (Lihat gambar)
Langkah terakhir
adalah copy paste tabel seperti langkah sebelumnya, kemudian delete elemen
flash yang ada di tabel ganti height tabel menjadi 800px kemudian di tabel
inilah isi dari website kita ketik. Cukup klik satu kali di tengah tabel
kemudian atur warna tulisan dan posisinya di jendela property di bawah. (Lihat
gambar)
Kemudian save
design yang telah kita buat tersebut. Lihat hasilnya dengan klik dua
kali file .HTML yang telah kita buat tersebut. Untuk menambahkan
halaman web lain agar dapat berpindah pindah halaman, cukup copy paste design
yang telah jadi ini. Kita hanya mengganti isi dari web tersebut.
Sekian tutorial
singkat ini semoga dapat bermanfaat.