Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

Modul 1 The Basics

MENGAKTIFKAN ADOBE DREAMWEAVER
Siapkan folder web untuk menyimpan file-file halaman webnya.
Aktifkan Adobe DreamWeaver, yang dapat dilakukan dengan cara klik dua kali
icon Dreamweaver.

MENGATUR FOLDER DEFAULT WEB

Atur folder default websitenya dengan cara: klik
menu Site New Site tab Advanced
Isikan nama website yang akan kita buat pada
bagian Site Name. Kemudian atur folder root
(utama)nya dengan cara klik icon folder pada
bagian Local Site Folder.
Klik folder dasar klik tombol Open klik tombol
Select. Hasil yang kita dapatkan seperti pada gambar berikut:
Selanjutnya klik tombol Save.
Perhatikan! Jendela Local Files di
sebelah kanan sudah menampilkan
folder aktif kita.

MEMBUAT HALAMAN WEB BARU

Klik menu File New yang akan menampilkan
jendela New Document seperti berikut:
Pilih tab Blank Page page type: HTML layout:
none klik Create.

Tampil jendela editing halaman web dengan mode Split (menampilkan Code View dan
Design View).

1| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

MEMBERI TITLE HALAMAN WEB DAN TEKS

Ketik dibagian Title lalu ketikkan judul untuk halaman
web kita (Website Pribadi Mr.One), lalu tekan
enter. Maka di bagian Code View muncul Website
Pribadi Mr.One yang diapit tag <title> </title>.
Klik teks di bagian Design View lalu ketikkan judul halaman web yang ingin kita
tampilkan (Mr. One Official Website), maka di jendela Code View juga akan
tampil teks tersebut.

MEMASUKKAN GAMBAR (IMAGE)

Memasukkan gambar ke dalam halaman web dapat dilakukan dengan cara:
Klik menu Insert Image (Ctrl + Alt + I).
Pilih image/gambar yang akan kita gunakan. Kemudian klik OK.

Selanjutnya kita diminta untuk mengisikan

Alternate text dari gambar. Alternate text
berfungsi sebagai keterangan singkat foto yang
akan tampil saat pointer mouse kita arahkan di
gambar.
Lalu klik OK.

Selanjutnya kita dapat mengatur ukuran gambar pada

bagian Properties.
Mengatur lebar (W) dan tinggi (H)
gambar
Mengatur jarak gambar dengan teks. Isikan 10.

MENYIMPAN HALAMAN WEB

Klik menu File Save
Beri nama : index (format file .htm atau .html).
2| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

MENAMPILKAN HALAMAN WEB DI BROWSER

Klik menu File Preview in Browser pilih browsernya (atau klik F12).

MENUTUP FILE HALAMAN WEB

Klik menu File Close All.

TUGAS
1. Buat halaman web dengan ketentuan:
Halaman utama (simpan dengan nama index.html), berisi tentang
rangkuman singkat website kita
Halaman tentang saya (simpan dengan nama dataku.html), berisi tentang
biodata pribadi kamu; Nama, TTL, Alamat, Hobi, Kelas, dan keterangan
lainnya.
Halaman kota tempat tinggal (simpan dengan nama kotaku.html), berisi
tentang uraian singkat mengenai kota tempat tinggalmu dan ciri khasnya.
2. Sertakan gambar/foto yang mendukung untuk tiap halaman web tersebut.

3| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

Modul 2 Links and Navigations
Sebelum melanjutkan ke materi Links and Navigations, pastikan kita telah memiliki 3
halaman web yang akan digunakan dalam paraktik kali ini. Ketiga file tersebut adalah:

index.html

dataku.html

kotaku.html

MEMBUAT TEXT LINKS

1. Aktifkan index.html, lalu turunkan judul web satu
baris menggunakan tombol Enter.
2. Pada jendela Properties, atur bagian Format menjadi
Paragraph (untuk baris di atas judul web).
3. Selanjutnya ketikkan teks About Me My Town
(tanpa tanda petik!), seperti gambar di samping.
4. Blok teks About Me lalu klik menu Insert
Hyperlink. Pada jendela Hyperlink yang tampil, klik gambar folder pada bagian
Link yang akan menampilkan jendela Select File.
5. Klik file dataku.html lalu klik OK.
6. Pada bagian Target di jendela Hyperlink, pilih _self
(pilihan _self akan membuka halaman web pada tab
browser yang sama, sedangkan _new akan membuka
halaman web pada tab baru di jendela browser)
7. Pada bagian Title isikan keterangan singkat lalu klik OK. Jangan lupa simpan
perubahan pada file index.html
Coba buka file index.html menggunakan browser.
Kemudian ulangi langkah 3 8 untuk teks My Town. Jangan lupa, pada langkah ke-5
yang dituju adalah kotaku.html!
Lakukan proses pemberian Text Links seperti langkah-langkah diatas untuk file
dataku.html dan kotaku.html di bagian atas judul masing-masing halaman. Teks
yang digunakan adalah Home yang digunakan untuk link menuju halaman awal
index.html). Hasilnya seperti gambar berikut:

MEMBUAT IMAGE LINKS

4| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

1. Aktifkan index.html, lalu hapus teks About Me My Town yang pernah kita
buat pada latihan sebelumnya).
2. Sisipkan image tombol me.gif dan town.gif (yang sudah disediakan) pada
posisi bekas teks links sehingga tampak seperti gambar di samping.
3. Klik kanan pada image About Me, lalu pilih Make Link yang akan menampilkan
jendela Select File.
4. Pilih file yang akan dituju, yaitu dataku.html
lalu klik OK.
5. Lakukan langkah 3 dan 4 untuk image My
Town yang akan di link ke file kotaku.html.
6. Terakhir, lakukan penggantian link Home yang
ada pada file dataku.html dan kotaku.html
menggunakan image home.gif. Bila langkahlangkah yang dilakukan benar, maka hasil ketiga file tersebut tampak sebagai
berikut:

index.html

dataku.html

kotaku.html

MEMBUAT TOMBOL MENGGUNAKAN EASY BUTTON AND MENU MAKER 1.5

1. Aktifkan aplikasi Easy Button And Menu Maker 1.5
2. Pada bagian Button Templates, pilih template tombolnya, lalu klik jenis
tombol yang diinginkan.
3. Klik tombol Add Item untuk membuat tombol baru.
4. Atur jenis dan ukuran fontnya lalu ketik teksnya.

5. Lakukan Add Item lagi untuk tombol lain (contoh: My Town dan About Me).
5| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

6. Selanjutnya klik tombol Home yang sudah kita buat lalu pada ribbon Home
klik menu Save Button as Images.
7. Pada jendela Save as simpan dengan nama home.gif.
8. Ulangi langkah 5 7 untuk tombol About Me dan My Town.
9. Tombol yang telah kita simpan tersebut dapat digunakan untuk pembuatan
Image Links seperti pada latihan sebelumnya.

MEMBUAT TOMBOL INTERAKTIF MENGGUNAKAN EASY BUTTON AND MENU MAKER 1.5
1. Pembuatan
tombol
interaktif
pada prinsipnya sama dengan
pembuatan tombol sebelumnya,
langkah 1 5 sama persis.
Hanya saja sewaktu pembuatan
tombol di bagian Mouse Over di
beri warna yang berbeda (merah
misalnya) sehingga warna teks
saat kondisi biasa berwarna
PUTIH dan saat mouse berada di
atas tombol (mouse over) akan
menjadi MERAH. Lakukan perubahan warna mouse over
tersebut untuk kedua tombol.
2. Berikutnya klik Tab Button Style. Hilangkan tanda check
pada bagian Enable Pushed Down. Fitur ini berfungsi
untuk membuat efek saat tombol dalam kondisi ditekan.
3. Jangan lupa pada bagian Button Size atur pula ukuran
lebar dan tinggi tombol agar ukuran semua tombol
seragam.
4. Setelah pengaturan tombol selesai klik menu Insert into
Web Page pada ribbon Home.

5. Pada jendela Insert into Web

Page, What would you like to
6| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

do?, klik pilihan kedua: Just generate HTML code and necessary files. Lalu
klik Next.

6. Pada
tampilan
selanjutnya,
Get
the
required
files,
klik
tombol
Browse
dan
arahkan
pada
folder
tempat
file-file
HTML
tersimpan (pada contoh
kasus yaitu folder dasar).
7. Biarkan tombol pilihan
tetap terseleksi pada I
will copy the files in the
same
directory
where my web page is.
8. Klik Next.
9. Pada tampilan terakhir jendela Insert
into Web Page, Copy the HTML
code, klik tombol Copy the HTML
untuk meng-copy script yang sudah
ter-generate untuk nantinya di insert
(sisip) ke file index.html.

10.Apabila langkah-langkah yang kita lakukan benar,

pada folder dasar akan terdapat folder baru yaitu
folder images yang berisi file-file seperti pada
gambar berikut.

7| dari 8 halaman

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

11.Buka file index.html pada

aplikasi
Dreamweaver,
perhatikan pada jendela Code
View yang diberi tanda kotak
seperti pada gambar di samping.

12.Hapus kode-kode tersebut kemudian Paste kan code yang telah kita copy tadi
sehingga menjadi tampak seperti gambar di samping.
13.Simpan perubahan pada file index.html lalu tampilkan pada browser.

8| dari 8 halaman