Desain Halaman Web Dengan Dreamweaver 8.0

Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8.

Jika Anda menggunakan versi di atasnya, misalnya Adobe Dreamweaver CS 3, CS 4 dan CS 5 Anda harus

menyesuaiakan dengan tools-nya.

Pada tutorial ini kita akan membuat desain halaman web seperti berikut. Pada bagian atas gunakan

header yang dibuat di Photoshop. Tidak memerlukan slicing dalam hal ini. Pada umumnya header

memuat NAMA PERUSAHAAN, JENIS USAHA dan SLOGAN PERUSAHAAN. Di sebelah kiri terdapat menumenu

yang di-link-kan dengan halaman web dengan bentuk yang sama, namun kontennya berbeda. Di

sebelah kanan terdapat menu SEARCHING dan di bawahnya merupakan konten dari setiap menu.

Bagian bawah merupakan FOOTER, biasanya berisi copyright.

Berikut langkah-langkahnya.

1. Di Photoshop buat header dengan ukuran 745 x 150 px. Header yang dibuat memuat: Judul,

Jenis, Slogan, Logo perusahaan. Simpan dengan nama header.jpg

2. Pilih HTML setelah Anda mengeklik menu Dreamwever 8.

3. Tambahkan title halaman web, sesuai slogan perusahaan Anda dan simpan file Anda dengan

nama: index.html

4. Pilih align: center pada bagian Properties yang terdapat di bawah stage.

5. Insert  _Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah itu klik OK.

6. Insert  _Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah itu klik OK.

7. Letakkan kursor pada baris pertama. Tekan Insert  _Image (Ctrl+Alt+I). Setelah itu masukkan

file header Anda. Klik OK jika sudah selesai.

8. Letakkan kursor Anda pada baris kedua. Insert  _Table dan isikan sesuai dengan data berikut.

9. Atur sedemikian rupa sehingga kolom pertama memiliki width 24%.

10. Letakkan kursor pada baris kedua kolom kedua. Insert_Table dan atur seperti gambar berikut.

11. Letakkan kursor pada kolom ketiga, pilih align: right, kemudian pilih submenu Form. Tambahkan

12. Atur pada kotak dialog Input Tag Accesbility Attributes. Setelah itu klik OK.

13. Posisikan kursor di kolom sebelah kiri. Tambahkan Button dan atur seperti gambar berikut. Klik

OK jika sudah selesai

14. Ganti Button name: Cari dan Value: Cari pada bagian Properties di bawah stage.

15. Pada baris kedua kolom pertama, ketikkan teks: Menu dengan alignment: Center; beri warna

teks: #FFFFFF dan background warna: #999999. Atur denan font: Arial dan size: 12.

16. Atur juga pada baris kedua sesuai dengan langkah 15. Berikut ini tampilan pada baris kedua.

17. Letakkan kursor pada baris ketiga. Insert  _Table dan aturlah seperti gambar berikut.

18. Buatlah kolom pertama dengan lebar 24%.

19. Letakkan kursor Anda pada baris ketiga kolom pertama. Insert  _Table dan aturlah seperti

gambar berikut.

20. Buatlah lebar kolom pertama secara proporsional, seperti gambar berikut. Atur align: center

pada kolom pertama.

21. Buat file di Photoshop dengan ukuran: 8 x 8 px dan berilah warna: #99999. Simpan file tersebut

dengan nama: dot.jpg. Insert  _Image, masukkan file dot.jpg pada kolom pertama baris 1

sampai dengan baris 9. Selanjutnya ketikkan menu-menu pada kolom kedua dan atur dengan

font: Arial, size: 12.

22. Pada baris ketiga kolom kedua isikan konten seperti berikut. Jangan lupa untuk mengatur Vert:

Top.

23. Pada baris ketiga isikan dengan konten seperti berikut.

Copyright ©Istiyanto Company Created by Istiyanto

Best View at 1024 x 768 px

24. Buatlah sesuai dengan kreasi Anda, warna dan fontasinya.

25. Simpan file Anda dan tekan F12 atau pilih submenu: Preview in Firefox 3.5, sesuai dengan

browser yang Anda gunakan.

26. Tampilan di browser.

27. Selanjutnya Anda buat link pada menu pilihan. Blok teks yang ingin Anda beri link dan ketikkan

sesuai dengan nama menu, misalnya: Home  _index.html; Profil  _profil.html dan seterusnya.

28. Save As file Anda sebanyak 8 kali dengan nama: profil.html; produk.html, bukutamu.html dan

seterusnya sesuai dengan daftar menu di atas, sehingga saat ini Anda memiliki 9 file dengan

desain yang sama. Buka kembali file-file yang telah Anda buat dan gantilah kontennya yang

terdapat pada baris ketiga kolom kedua.

29. Tekan F12 untuk preview hasil halaman web yang telah Anda buat.

Selamat Berkreasi !!!