TUTORIAL MACROMEDIA DREAMWEAVER

1. Setelah masuk ke Dreamwever, dari menu Site pilih New Site.
2. Pada bagian Site Name, tuliskan nama web Anda. Misalnya Gratisan. Sedangkan Local Root Folder adalah folder tempat Anda akan menyimpan semua file untuk web yang Anda buat, termasuk file images, audio, javascript, css, dan sebagainya. Klik pada icon untuk mem-browse.
   
3. Setelah selesai klik OK.
   
4. Maka akan muncul window baru. Setelah Anda mencapai langkah ini berarti Anda sudah bisa memulai membuat halaman web baru.

Membuat halaman web pertama

1. Dari menu File pilih New.
2. Tentukan title, warna background dan link untuk halaman web Anda. Dari menu Modify, pilih Page Properties.
   Untuk mengganti warna background dan link, klik pada icon . Sedangkan untuk mengganti background image, klik pada tombol Browse.
   Title = title atau judul halaman web
   Background image = image yang digunakan sebagai background
   Text = warna teks
   Links, Visited Links, Active Links = warna link
   
3. Untuk mengakhiri klik tombol OK.
4. Supaya aman simpan dulu file tersebut dengan mengklik menu File – Save.

Membuat tabel

Langkah ini sangat penting untuk dicermati karena hampir semua halaman web memakai tabel. Anda tidak akan dapat membuat halaman web yang warna-warni tanpa unsur tabel. Anda juga tidak dapat membuat halaman web seperti halaman yang sedang Anda baca ini tanpa tabel. Untuk membuat dan memodifikasi tabel pada Dreamweaver caranya adalah sebagai berikut :
(Supaya tutorial ini lebih maksimal hasilnya ada baiknya Anda membaca artikel di sini terlebih dahulu)

1. Dari menu Insert, pilih Table. Atau tekan Ctrl + Alt + I.
   

   Rows	Jumlah baris
   Columns	Jumlah kolom
   Width	Lebar tabel yang bisa dinyatakan dalam persen maupun dalam pixel
   Border	Ukuran border tabel

2. Hasilnya adalah seperti gambar di bawah ini.
   
3. Untuk mengganti warna background pada tabel, letakkan pointer mouse pada cell (kolom atau baris –pada gambar di bawah ditandai dengan tanda silang warna merah–) yang akan Anda ganti warnanya lalu klik icon yang terletak pada Properties.
   Untuk mengganti warna background lebih dari satu baris atau kolom drag pointer mouse dari cell yang satu ke cell selanjutnya.

Membuat rollover image

Kalau Anda rajin menjelajah internet tentu sering menemui situs yang memakai efek rollover image. Efek tersebut dibuat dengan menggunakan javascript. Untuk membuat efek tersebut Anda harus menuliskan kode javascript tersebut. Tapi dengan bantuan Macromedia Dreamweaver Anda dapat membuat rollover image tanpa harus menuliskan sebaris pun kode javascript. Penasaran ? Ikuti langkah di bawah ini :

1. Untuk Dreamweaver 3, dari menu Insert, pilih Rollover Image.
   Untuk Dreamweaver 4, dari menu Insert, pilih Interactive Images – Rollover Image. Maka akan muncul kotak dialog seperti di bawah ini :
   Lalu isi pada kotak yang tersedia yang meliputi :
   
   
   

   Image Name	Nama image
   Original Image	Gambar asli
   Rollover Image	Gambar yg dijadikan sebagai rollover
   Go to URL	Halaman web yang akan dituju

2. Hasilnya dapat dilihat di sini.

Mendeteksi browser yang dipakai pengunjung web

Seperti kita ketahui bersama antara Netscape Navigator dan Internet Explorer terdapat sedikit ketidakcocokan. Maksudnya ada kalanya suatu halaman web jika dilihat dengan IE dapat tampil dengan bagus sementara jika dilihat dengan NN agak sedikit acak-acakan. Atau sebaliknya.
Anda sebagai seorang designer web tentunya ingin mendapatkan tampilan web yang sempurna, baik jika dilihat dengan IE maupun NN. Untuk mengatasi masalah tersebut sebenarnya tidak susah-susah amat, salah satu caranya adalah dengan mendeteksi browser yang dipakai oleh client atau orang yang melihat web kita. Lalu halaman web yang akan ditampilkan disesuaikan dengan browser tersebut. Misalnya jika yang dipakai adalah IE maka yang ditampilkan adalah file satu.html, sedangkan jika yang dipakai adalah NN yang ditampilkan adalah file dua.html.
Kita akan mencoba membuat pendeteksi browser dengan menggunakan Macromedia Dreamweaver. Ikuti langkah-langkah berikut ini :

1.	Dari menu Window, pilih Behaviors atau dengan menekan F8. Dari combo box Events For, pilih IE 4.0. Tekan tombol , lalu pilih Check Browser.
2	Maka akan muncul window Check Browser seperti terlihat pada gambar di samping. Di sini Anda harus melakukan beberapa pengisian. Jika yang digunakan adalah NN 4.0 maka …. Terdapat 3 pilihan yaitu, Stay on this Page, Go to URL, dan Go to Alt URL. Jika Anda memilih Stay on this Page maka halaman inilah yang akan ditampilkan jika pengunjung web Anda memakai NN 4.0.
	Sebaliknya pada bagian IE 4.0 Anda harus mengisinya dengan Go to URL dan pada bagian URL Anda harus mengisi dengan halaman web yang akan ditampilkan jika si pengunjung memakai IE 4.0.
3	Untuk mengaplikasikannya tekan tombol OK. Nah sekarang halaman web Anda sudah siap untuk mendeteksi browser yang digunakan oleh pengunjung web Anda.

Artikel Terkait: