SIMPLE TUTORIAL - Istiyanto.Comistiyanto.com/wp-content/uploads/2014/02/TUTORIAL-ADOBE-DREAM...3 |...

1 | Simple Tutorial – Adobe Dreamweaver CS 5

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).


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


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.


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 .


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.


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.


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)


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.


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.


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.


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.


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


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.


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


Konten/Isi TOPIK WEB: BEBAS WARNA/GAMBAR: BEBAS Hyperlink: target=”_parent” Nama file: Homehome.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.

--------------------------------------------

SIMPLE TUTORIAL - Istiyanto.Comistiyanto.com/wp-content/uploads/2014/02/TUTORIAL-ADOBE-DREAM...3 |...

Documents

Transcript of SIMPLE TUTORIAL - Istiyanto.Comistiyanto.com/wp-content/uploads/2014/02/TUTORIAL-ADOBE-DREAM...3 |...