SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan langkah-langkah singkat membuat website sederhana. Sebelum menggunakan tutorial ini sebaiknya Anda sudah mempelajari dasar-dasar HTML. Setelah mempelajari tutorial ini diharapkan Anda dapat membuat dan mengatur: Layout halaman web dengan Table Format Teks dan Background Entitas karakter HTML (copyright) Gambar pada halaman web Rollover Image Teks bergerak (marquee) Halaman web dengan CSS Hyperlink Halaman web di browser Website sederhana dengan Adobe Dreamweaver Berikut tutorial pembuatan halaman web dengan Adobe Dreamweaver. 1. Buka Adobe Dreamweaver CS 5 2. Pilih HTML 3. Masukkan tabel dengan jumlah baris (rows) = 3 dan jumlah kolom (columns) = 2. Pilih menu Insert Table (Ctrl+Alt+T). 1 Simple Tutorial Adobe Dreamweaver CS 5
Biarkan terlebih dahulu untuk pengaturan yang lain. Jika sudah Klik Ok, dan akan tampil seperti berikut. 4. Atur ukuran kolom pertama (sebelah kiri) dengan ukuran 200 px dan kolom kedua (sebelah kanan) 500 px. Blok kolom pertama dan atur Width (W) = 200, dan kolom kedua height (H) = 500 px. Untuk tinggi (H) aturlah secara proporsional. Kolom pertama Kolom kedua 5. Atur tabel dengan rata tengah (center). Klik <table> dan Align Default menjadi Center 2 Simple Tutorial Adobe Dreamweaver CS 5
6. Agar menjadi lebih rapi, buat border table menjadi tanpa border (0) dan atur cell pad dan cell space menjadi 0, klik pada <table> dan atur seperti berikut. 7. Untuk menggabungkan kolom, blok baris paling atas, kemudian klik kanan Table Merge Cells 8. Merge juga untuk baris yang paling bawah, sehingga diperoleh tampilan seperti berikut. 9. Isi setiap sel dengan teks seperti berikut. 3 Simple Tutorial Adobe Dreamweaver CS 5
Untuk membuat rata tengah pilih Horz Center Untuk membuat rata atas pada paragraf, klik Vert Top Untuk membuat tanda, masuk ke Mode Code, dan ketikkan 10. Kembali ke Mode Design dan simpan file Anda dengan nama home.html. 4 Simple Tutorial Adobe Dreamweaver CS 5
11. Untuk melihat preview hasilnya silakan tekan F12 atau klik Preview in chrome, sesuai dengan browser yang ada. Langkah berikutnya kita akan memberikan ukuran dan warna teks dan warna background halaman, untuk sementara kita akan menggunakan Page Properties. 12. Klik Page Properties dan atur ukuran dan warna teks, serta warna. Klik Apply dan OK jika sudah selesai. Background color : untuk menentukan warna background Background image : untuk menentukan gambar background Untuk memilih gambar background, pilih Browse, lalu cari gambar yang ingin Anda jadikan background. 13. Untuk memberikan warna pada masing-masing sel, klik sel yang akan diberi warna, pilih dan pilihlah salah satu warna melalu Bg. 14. Jika pada sebuah sel tidak ingin diberi warna dan transparan dengan background, silakan pilih Bg, lalu pilih. Untuk mengecek preview hasilnya Anda dapat menekan F12. 5 Simple Tutorial Adobe Dreamweaver CS 5
Berikutnya, kita akan berlatih memasukkan gambar dan membuat rollover image. Rollover image adalah tampilan gambar yang berubah jika mouse didekatkan di atas gambar. 15. Untuk memasukkan gambar, pilih menu Insert Image 16. Pilih gambar OK Pilih Yes kemudian Save, jika keluar kotak dialog seperti berikut. 17. Isikan nama gambar pada Alternate text (untuk mempermudah SEO/Search Engine Optimization), klik OK jika sudah selesai. 18. Secara default ukuran gambar adalah sesuai resolusi gambar, untuk memperkecil Anda bisa menggunakan W dan H. 6 Simple Tutorial Adobe Dreamweaver CS 5
19. Berikut contoh tampilannya, dan simpan file Anda (Ctrl+S) dan preview hasilnya (F12). Berikutnya kita akan berlatih membuat Rollover Image. 20. Klik menu Insert Image Objects Rollover Image 21. Isikan data-data yang diminta dan klik OK jika sudah semua diisi. Resize ukuran gambar sesuai keinginan. Image name : nama dari rollover image Original image : gambar asli yang pertama kali muncul Rollover image : gambar kedua yang muncul setelah gambar pertama di klik Alternate text : alternatif teks yang muncul jika gambar tidak muncul When clicked.. : gambar kalau di klik akan menuju kemana? Bisa ke link relatif (lokal) atau absolut (internet) 7 Simple Tutorial Adobe Dreamweaver CS 5
Tekan F12 untuk melihat previewnya. Berikutnya kita akan menambahkan animasi teks menggunakan perintah <marquee>teks</marquee> 22. Letakkan kursor di depan kata Slogan, kemudian masuk ked mode Code, ketikkan <marquee> dan setelah slogan tambahkan </marquee> Jika sudah lengkap, kembali ke mode Design. Marquee memiliki atribut direction dan behaviour. <marquee direction= left >... animasi bergerak ke kiri <marquee direction= right >... animasi bergerak ke kanan <marquee direction= up >... animasi bergerak ke atas <marquee direction= bottom >... animasi bergerak ke bawah Berikutnya kita akan melakukan pengaturan untuk setiap sel menggunakan CSS (Cascading Style Sheet). Kita akan berlatih CSS untuk mengatur: Sidebar Header Konten Footer Dengan CSS pengaturan teks, warna, gambar, tabel dll menjadi lebih mudah. 23. Pertama kita akan melakukan pengaturan untuk sidebar. Letakkan kursor di sidebar, kemudian Klik kanan CSS Styles New 24. Atur bagian Selector Type, Selector Name dan Rule Definition seperti berikut. Klik OK jika sudah selesai. 8 Simple Tutorial Adobe Dreamweaver CS 5
25. Klik OK dan beri nama css pada File name, kemudian Save. 26. Lakukan pengaturan untuk jenis teks, warna teks, background dll. 27. Untuk melakukan pengaturan bacground warna dan background pada sel, klik pada Background. Catatan: untuk mendapatkan ukuran gambar yang ideal dan memiliki ukuran yang pas dengan lebar sel, Anda dapat mengubah ukuran gambar menggunakan Adobe Photoshop. 28. Jika semua pengaturan sudah selesai, klik Apply kemudian OK. 29. Agar pengaturan menjadi berhasil, pilih sidebar pada Class di bagian Properties dan lihat perubahan yang terjadi pada halaman web. 9 Simple Tutorial Adobe Dreamweaver CS 5
30. Berikutnya kita akan melakukan pengaturan CSS untuk halaman Header. Letakkan kursor pada bagian Header dan Klik kanan pilih CSS Styles New 31. Beri nama header pada Selector name. Karena pada pengaturan pertama kita sudah membuat Rule definition untuk CSS, maka pada langkah ini kita tinggal memilih css yang sudah ada. Klik OK jika pengaturan sudah selesai. 32. Lakukan pengaturan untuk tampilan header. Klik Apply kemudian OK jika sudah selesai. 33. Pilih Class header untuk mengatur bagian header. 10 Simple Tutorial Adobe Dreamweaver CS 5
34. Jika pengaturan belum sesuai keinginan, kita dapat mengedit kembali CSS yang sudah dibuat, dengan memilih bagian header (contoh saja), pada panel CSS Styles di kanan atas, yaitu dengan mengeklik 2x file CSS yang akan diedit 35. Pastikan Anda menyimpan semua file Anda dengan cara File Save All. 36. Berikutnya kita akan membuat Hyperlink untuk halaman Home, Profil, Gallery dan Video. 11 Simple Tutorial Adobe Dreamweaver CS 5
37. Blok pada teks Home, pilih Insert Hyperlink. 38. Isi link dengan home.html, untuk targetnya pilih _parent. Klik OK jika sudah selesai. Catatan: Jika Anda memilih target _parent, maka akibatnya, halaman web yang baru dibuka akan muncul pada browser yang sama dan tidak keluar tab baru. Tetapi jika Anda memilih memilih target _blank, maka akibatnya, halaman web yang baru dibuka akan muncul pada tab baru. 39. Dengan langkah yang sama seperti di atas buatlah Hyperlink untuk Profil, Gallery dan Video. Ciri bahwa teks sudah diberi Hyperlink adalah pada teks tersebut akan dibuat Underline (garis bawah) 40. Pastikan Anda menyimpan semua file Anda dengan cara File Save All. Berikutnya kita akan membuat file-file HTML untuk profil.html, gallery.html dan video.html. 41. Setelah semua file fix dibuat dan tersimpan, silakan klik File Save As Berinama file dengan nama profil.html 12 Simple Tutorial Adobe Dreamweaver CS 5
42. Edit bagian kontennya dengan mengisi menjadi Halaman profil, kemudian File Save All. 43. Dengan langkah yang sama seperti langkah di atas, lakukan penyimpanan (Save As) untuk file gallery.html dan video.html, sehingga pada akhirnya kita memiliki 4 file html. 44. Pastikan keempat file tersebut pada folder yang sama dan seletak dengan file-file gambar Anda. 45. Lakukan pengecekan di browser Anda dengan F12. Dan berikut contoh tampilan halaman web di browser Anda. 13 Simple Tutorial Adobe Dreamweaver CS 5
Tips dan Trik: Menambahkan backsound/backgrounf suara Masukkan script berikut pada HTML: <embed src= namafilemp3.mp3 autostart= true loop= false hidden= true > Atribut autostart: bagaimana musik akan diputar. Jika true, maka musik akan diputar secara otomatis, jika false, maka untuk memutar musik Anda harus menekan tombol Play terlebih dahulu. Atribut loop: berapa kali musik akan dimainkan. Jika diatur true, maka musik akan dimainkan berulang-ulang. Jika diatur false, maka musik hanya dimainkan sekali dan berhenti. Atribut hidden bernilai true, berarti media player akan tampil di halaman web, sebaliknya jika bernilai false, maka media player akan disembunyikan. Demikian tutorial sederhana mengenai pembuatan halaman web dengan Adobe Dreamweaver CS 5. Langkah berikutnya Anda dapat mengembangkan tutorial ini dengan praktik langsung. Semoga bermanfaat! LATIHAN 1. Buat folder di desktop: TIK_ABSEN 2. Buat layout Web seperti berikut. JUDUL WEB HOME PROFIL GALLERY 14 Simple Tutorial Adobe Dreamweaver CS 5
Konten/Isi TOPIK WEB: BEBAS WARNA/GAMBAR: BEBAS Hyperlink: target= _parent Nama file: Home home.html, Profil profil.html, Gallery gallery.html BOLEH MENGGUNAKAN CSS Copyright Nama Web 2014 3. Halaman Home berisi: pengantar, Halaman Profil berisi: nama, kelas, absen Anda, Halaman Gallery berisi: 4 buah gambar yang dimasukkan dalam halaman web. 4. Buat hyperlink untuk masing-masing halaman sehingga antarhalaman saling terhubung. 5. Buat halaman web semenarik mungkin dengan kreativitas warna. -------------------------------------------- 15 Simple Tutorial Adobe Dreamweaver CS 5