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 &copy;

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