DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto 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. Gambar 1.1 Desain halaman web 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. Gambar 1.2 Tampilan awal Dreamweaver 1
3. Tambahkan title halaman web, sesuai slogan perusahaan Anda dan simpan file Anda dengan nama: index.html Gambar 1.3 Simpan file dan title 4. Pilih align: center pada bagian Properties yang terdapat di bawah stage. Gambar 1.4 Pengaturan align center 5. Insert Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah itu klik OK. Gambar 1.5 Insert table 6. Insert Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah itu klik OK. Gambar 1.6 Insert table 7. Letakkan kursor pada baris pertama. Tekan Insert Image (Ctrl+Alt+I). Setelah itu masukkan file header Anda. Klik OK jika sudah selesai. 2
Gambar 1.7 Insert table 8. Letakkan kursor Anda pada baris kedua. Insert Table dan isikan sesuai dengan data berikut. Gambar 1.8 Insert table 9. Atur sedemikian rupa sehingga kolom pertama memiliki width 24%. Gambar 1.0 Pengaturan width 10. Letakkan kursor pada baris kedua kolom kedua. Insert Table dan atur seperti gambar berikut. Gambar 1.10 Insert table 11. Letakkan kursor pada kolom ketiga, pilih align: right, kemudian pilih submenu Form. Tambahkan Text Field pada kolom tersebut. 3
Gambar 1.11 Submenu form dan text field 12. Atur pada kotak dialog Input Tag Accesbility Attributes. Setelah itu klik OK. Gambar 1.12 Submenu form dan text field 13. Posisikan kursor di kolom sebelah kiri. Tambahkan Button dan atur seperti gambar berikut. Klik OK jika sudah selesai Gambar 1.13 Submenu button Gambar 1.14 Label 14. Ganti Button name: Cari dan Value: Cari pada bagian Properties di bawah stage. Gambar 1.15 Properties button 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. Gambar 1.16 Pengaturan font dan bakground 16. Atur juga pada baris kedua sesuai dengan langkah 15. Berikut ini tampilan pada baris kedua. Gambar 1.17 Tampilan pada baris kedua 4
17. Letakkan kursor pada baris ketiga. Insert Table dan aturlah seperti gambar berikut. Gambar 1.18 Insert table 18. Buatlah kolom pertama dengan lebar 24%. 19. Letakkan kursor Anda pada baris ketiga kolom pertama. Insert Table dan aturlah seperti gambar berikut. Gambar 1.19 Insert table 20. Buatlah lebar kolom pertama secara proporsional, seperti gambar berikut. Atur align: center pada kolom pertama. Gambar 1.20 Tampilan pada baris ketiga 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. 5
Gambar 1.21 Tampilan menu pada baris ketiga kolom pertama 22. Pada baris ketiga kolom kedua isikan konten seperti berikut. Jangan lupa untuk mengatur Vert: Top. Gambar 1.22 Tampilan properties vertical align Gambar 1.23 Tampilan pada baris ketiga kolom kedua 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. Gambar 1.24 Cara preview halaman web 26. Tampilan di browser. 6
Gambar 1.25 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. Gambar 1.26 Cara membuat link Gambar 1.27 Cara membuat link dengan mem-blok teks 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. Gambar 1.28 Save as file 7
Gambar 1.29 Menu yang diberi link 29. Tekan F12 untuk preview hasil halaman web yang telah Anda buat. Selamat Berkreasi!!! Referensi: Kurniawan, Rulianto.2008.Membangun Situs dengan PHP untuk Orang Awam.Palembang: Penerbit Maxikom http://istiyanto.com 8