Download - Penuntun Macromedia Dreamweaver 2004 MX
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 1/24
I. PENGANTAR
(Untuk pengantar, ada di buku teori dari kantor hal 34-40)
II. PENGENALAN MACROMEDIA DREAMWEAVER MX 2004
PENUNTUN I
MACROMEDIA DREAMWEAVER MX 2004
(PHP)
SMA STELLA DUCE 1 Yogyakarta
C = Properties Inspector
B = Design and Code
A = Title and Menu Bar
D=Pa
nel
Document Toolbar
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 2/24
III. LATIHAN
Jalankan aplikasi Macromedia Dreamweaver MX 2004
Klik Site – Manage Site, maka akan muncul pilihan sbb :
Klik NEW – SITE, maka akan lanjut ke langkah :
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 3/24
Beri nama situs yang akan kita buat, boleh menggunakan spasi, simple
dan jelas. Kemudian klik NEXT
Maka akan muncul pilihan sebagai berikut :
Karena akan membuat situs yang sifatnya statis, kita pilih NO, I DO NOT
WANT TO USE A SERVER TECHNOLOGY
Pilihan Edit local copies on my machine then upload to server when
ready (recommended) : file yang kita buat akan disimpan di
harddisk
Pilihan Edit directly on server using local network : file yang kita
buat langsung ditempatkan di server.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 4/24
Pilih yang pertama, kemudian pada text box di bawah text Where
on your computer do you want to store your files ? isi dengan lokasi
penyimpanan. Contoh : D:\(folder kelas), lalu NEXT akan muncul
pilihan yang harus diisi sebagai berikut :
How do you connect to your remote server ? (default)
What folder on your server do you want to store your files in
? isikan dengan folder tempat file disimpan
Kemudian NEXT, akan muncul :
Pilihan pertama berarti, di saat bersamaan (jika kita bekerja dalam
tim), kita dan partner tidak akan bias mengedit dokumen yang sama
dalam waktu yang bersamaan. Pilihan kedua adalah kebalikannnya.
Karena kita bekerja sendiri, abaikan langkah ini dengan pilihandefault No, do not enable check in and check out, lalu NEXT –
DONE – DONE. Kemudian tekan F5
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 5/24
File – New – Basic Page – HTML – Create
Ketikkan pada lembar kerja : NAMA SAYA ADALAH ……….(titik-titik diisi
nama masing-masing). Kemudian FILE – SAVE AS dan file name isikan
index, save as type nya harus All Documents(*.htm,*.html,etc deh)
Tekan F5.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 6/24
Latihan :
Buat situs baru dengan langkah-langkah yang urut. Kemudian, aktifkan pada
document toolbar, aktifkan CODE. Tuliskan di antara <body> dan </body> teks
berikut :
<p>Perkenalkan, nama saya adalah ........<br>
Saya siswi kelas ..... di SMA Stella Duce 1 Yogyakarta<br>
Asal saya dari kota .......</p>
<p>Saya adalah anak tunggal dari kedua orang tua saya
yang berprofesi sebagai konsultan keuangan di Semarang.
Tapi saya memiliki saudara angkat yang sekarang sudah kuliah</p>
Simpan dengan nama index, save as type nya harus All
(Documents(*.htm,*.html,etc deh)
Diskusikan hasil yang tampak dari CODE di atas !
Penjelasan :
Tag <p> adalah awal sebuah paragraph yang harus diakhiri </p>
Tag <br> adalah perintah untuk pindah baris dalam suatu paragrap, bisa keluar
secara otomatis dengan cara tekan tombol shift +enter.
Jika saat menulis teks, hanya menggunakan ENTER untuk pindah baris di
CODE-nya, pada saat di view menggunakan browser, teks belum tentu
berpindah baris.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 7/24
1. Tabel
Buatlah site tentang Café/Rumah Makan/Restoran/Pub seperti contoh di bawah ini :
PENUNTUN III
MACROMEDIA DREAMWEAVER MX 2004
SMA STELLA DUCE 1 Yogyakarta
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 8/24
Teks MAKANAN dan MINUMAN bila di klik, akan menuju ke halaman menu
makanan/minuman
Teks LOKASI merupakan link untuk menuju ke halaman yang berisi peta lokasi
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 9/24
Jika gambar makanan/minuman di klik, maka akan menuju ke halaman depan. Kecuali
the botol Sosro, jika diklik gambarnya akan menuju ke website www.sosro.com (INGAT
!! untuk link ke situs lain, harus ditulis lengkap http://www.sosro.com)
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 10/24
1. Bangun situs baru
2. File – New lalu pada CATEGORY pilih FRAMESET – FIXED TOP, NESTED LEFT (seperti gambar di
bawah ini) lalu CREATE
3. Maka akan muncul PAGE seperti berikut :
PENUNTUN III
MACROMEDIA DREAMWEAVER MX 2004
(FRAME)
SMA STELLA DUCE 1 Yogyakarta
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 11/24
4. Isikan frame paling atas dengan JUDUL atau NAMA SITUS (bias nama perusahaan, nama group,
nama personal, dll). Kemudian simpan. FILE – SAVE - FRAME AS…..
5. Frame sebelah kiri diisi dengan text yang berisi LIST halaman-halaman yang ada di situs tersebut.
Cth :
HOME
TENTANG KAMI
PRODUK
DOWNLOAD AREA
RELASI BISNIS
Lalu simpan dengan cara yang sama seperti langkah nomer 4, namun dengan nama yang
berbeda.
6. Frame sebelah kanan, diisi dengan kalimat pembuka atau garis besar dari situs tersebut. Simpan
dengan cara yang sama dengan langkah nomer 4 namun namanya berbeda.
7. Simpan semua frame dengan nama INDEX. Caranya :
Pastikan bahwa semua area frame (atas, kiri dan kanan) ada area dengan pembatas garis
berbentuk titik-titik. Kalau belum ada, klik satu kali salah satu sisi pada ke 4 tepi frame
terluar. Lalu dari menu FILE – SAVE FRAMESET AS lalu beri nama INDEX
8. Buat halaman lain dari FILE – NEW – BASIC PAGE – HTML (minimal 4 halaman). Jangan lupa
untuk disimpan dan diberi nama.
9. Kembali ke halaman INDEX. Pada dasarnya, untuk membuat link sama seperti materi
sebelumnya, hanya di sini halaman yang dimaksud ditampilkan pada frame sebelah kanan.
Pelajari target link yang ada dan tentukan pilihan mana yang dapat menampilkan halaman lain
di frame sebelah kanan.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 12/24
Untuk membuat form seperti tampilan di atas, langkah-langkahnya adalah sebagai berikut :
1. Buat page baru di situs yang telah dibuat pada pertemuan sebelumnya
2. Agar rapi, form baiknya disusun dalam table. Contoh : setting table yang memiliki 6 baris dan 2
kolom.
3. Untuk kolom pertama, isi dengan Nama, Alamat, Jenis kelamin, Browser yang digunakan dan
Saran
PENUNTUN IV
MACROMEDIA DREAMWEAVER MX 2004
Membuat Form
SMA STELLA DUCE 1 Yogyakarta
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 13/24
4. Kolom kedua baris pertama : Insert – Form – Textarea
Properti :
Char Width : 60
Max Char : 60
Type : Single Line
5. Kolom kedua baris kedua : Insert –
Form –
Textarea
Properti :
Char Width : 60
Num Line : 3
Type : Multi Line
6. Kolom kedua baris ketiga : Insert – Form – Radio Button (buat 2)
Properti :
Checked Value : Male (untuk yang pertama)
Initial Stated : Unchecked
Lakukan untuk pilihan yang kedua. Checked Value : Female7. Kolom kedua baris keempat : Insert – Form – CheckBox (buat 6)
Properti :
Initial State : Unchecked
8. Kolom kedua baris kelima : Insert - Form – TextField
Properti :
Char Width : 60
Num Line : 3
Type : Multi Line
9. Kolom pertama dan kedua baris terakhir di merge : Insert – Form – Button (buat 2)
Properti button DAFTAR: Label : Daftar
Action : Submit Form
Properti button BATAL :
Label : BATAL
Action : Reset Form
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 14/24
Flash TextUntuk membuat Flash Text :
1. Letakkan pointer dimana Anda akan meletakkan flash text
2. Ikuti salah satu langkah di bawah ini
Pada Insert Bar pilih Media, klik icon Flash Text
Pada Insert Bar, pilih media, drag icon Flash Text ke dalam Document Window
Pilih mehu Insert > Media > Flash Text Gambar 14. kotak dialog Insert Flash Text
3. Pilih model huruf pada Font dan ukuran huruf pada Size
4. Pada menu Color pilih warna yang anda inginkan
5. Pada Rollover Color pili h warna yang anda inginkanpada saat rollover
6. Masukkan teks link pada text field
7. Isikan nama file yang akan di-link pada kotak Link8. Pilih warna latar belakang yang sesuai pada Bg Color
9. Pada kotak Save As isikan nama file
PENUNTUN V
MACROMEDIA DREAMWEAVER MX 2004
Anchor, PopUp Menu dan Flash Text
SMA STELLA DUCE 1 Yogyakarta
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 15/24
10. Klik OK
11. Lihat lewat browser (IE, Mozilla atau Opera), jika muncul notifikasi, klik tombol SETTING,
maka akan ditujukan ke situs Adobe Flash Player
12. Klik pada Option Always Allow
13. Refresh halaman web yang tadi dibuat Flash Buttonnya
Flash ButtonUntuk membuat Flash Text :
1. Letakkan pointer dimana anda akan meletakkan flash text
2. Ikuti salah satulangakah dibawah ini
Pada Insert Bar pilih Media, klik icon Flash Button
Pada Insert Bar, pilih media, drag icon Flash Button ke dalam Document Window
Pilih menu Insert > Media > Flash Button Gambar 16. Kotak Dialog Insert Flash Button
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 16/24
3. Pilih model tombol pada Style
4. Pada kotak Button Text isikan nama tombol yang akan ditampilkan
5. Pilih model huruf pada Font dan ukurannya pada Size6. Isikan nama file yang akan di-link pada kotak Link
7. Pilih warna latar belakang yang sesuai pada Bg Color
8. Pada kotak Save As isikan nama file
9. Klik OK10. Lihat di browses
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 17/24
Flash TextUntuk membuat Flash Text :
1. Letakkan pointer dimana Anda akan meletakkan flash text
2. Ikuti salah satu langkah di bawah ini
Pada Insert Bar pilih Media, klik icon Flash Text
Pada Insert Bar, pilih media, drag icon Flash Text ke dalam Document Window
Pilih mehu Insert > Media > Flash Text Gambar 14. kotak dialog Insert Flash Text
3. Pilih model huruf pada Font dan ukuran huruf pada Size
4. Pada menu Color pilih warna yang anda inginkan
5. Pada Rollover Color pili h warna yang anda inginkanpada saat rollover
6. Masukkan teks link pada text field
7. Isikan nama file yang akan di-link pada kotak Link8. Pilih warna latar belakang yang sesuai pada Bg Color
9. Pada kotak Save As isikan nama file
PENUNTUN VI
MACROMEDIA DREAMWEAVER MX 2004
Anchor, PopUp Menu dan Flash Text
SMA STELLA DUCE 1 Yogyakarta
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 18/24
10. Klik OK
11. Lihat lewat browser (IE, Mozilla atau Opera), jika muncul notifikasi, klik tombol SETTING,
maka akan ditujukan ke situs Adobe Flash Player
12. Klik pada Option Always Allow
13. Refresh halaman web yang tadi dibuat Flash Buttonnya
Flash ButtonUntuk membuat Flash Text :
1. Letakkan pointer dimana anda akan meletakkan flash text
2. Ikuti salah satulangakah dibawah ini
Pada Insert Bar pilih Media, klik icon Flash Button
Pada Insert Bar, pilih media, drag icon Flash Button ke dalam Document Window
Pilih menu Insert > Media > Flash Button Gambar 16. Kotak Dialog Insert Flash Button
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 19/24
3. Pilih model tombol pada Style
4. Pada kotak Button Text isikan nama tombol yang akan ditampilkan
5. Pilih model huruf pada Font dan ukurannya pada Size6. Isikan nama file yang akan di-link pada kotak Link
7. Pilih warna latar belakang yang sesuai pada Bg Color
8. Pada kotak Save As isikan nama file
9. Klik OK10. Lihat di browses
Membuat Pop-up Menu
1. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara
memilih menu Window > Behaviors.
2. Pilih salah satu image yang akan dibuat Show Pop Up menu
3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus)
untuk membuka menu.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 20/24
4. Selanjutnya pilih Show Pop up Menu.
5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-
up Menu yang masih kosong.
6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
7. Kemudian masukkan alamat URL pada kolom Link.
8. Selanjutnya pada kolom Target, pilih _parent.
9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian
lakukan hal sama seperti pada tahap 6.
10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar
belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu
tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak
pop up menu.
12. Klik Tab Position untuk menentukan posisi pop up menu.
13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 21/24
1. Salah satu penyedia layanan untuk publikasi web secara tak berbayar adalah :
www.freewebhostingarea.com. Buka halaman situs tersebut.
2. Ada bagian yang tampil seperti gambar di bawah ini :
3. Isikan pada kolom ENTER SUBDOMAIN NAME dengan nama sesuai keinginan dan pilih salah satu
domain yang disediakan (ueuo.com atau freevar.com). Misalnya : www.gokilgirl.freevar.com
4. Klik tombol PROCEED
5. Kemudian isikan registry form seperti tampilan di bawah ini :
PENUNTUN VII
MACROMEDIA DREAMWEAVER 2004 MX
PUBLISH WEB
SMA STELLA DUCE 1 YOGYAKARTA
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 22/24
6. Centang pada pernyataan I have read…… kemudian klik tombol CONTINUE.
7. Akan muncul halaman berikut :
8. Klik URL dibawah text Your Account is almost…. Atau bias juga pada pilihan ke dua di bawahnya
dengan sebelumnya mencatat ID dan Authorization Key yang diberikan.
9. Jika pilihan pertama yang dipilih, akan dibawa ke halaman notifikasi. Simpan semua data yang
diberikan untuk keperluan lebih lanjut (misalnya : update web)
10. Untuk update data/file, ketikkan di address bar : XXX.freevar.com/ftp/ dimana xxx = nama
subdomain yang telah didaftarkan.
11. Akan muncul halaman seperti di bawah ini :
12. Isikan data tersebut sesuai dengan verifikasi yang sudah diberikan sebelumnya.
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 23/24
1. Buat web site tentang toko computer dengan tampilan halaman muka seperti berikut :
Ket :
A. Teks “MEMBUKA CAKRAWALA TEKNOLOGI ANDA” berjalan ke arah kanan
2. Buat PopUp Menu (untuk masing-masing produk/layanan yang ada seperti contoh berikut :
Review
MACROMEDIA DREAMWEAVER MX 2004
Membuat Web
SMA STELLA DUCE 1 Yogyakarta
B
A
5/10/2018 Penuntun Macromedia Dreamweaver 2004 MX - slidepdf.com
http://slidepdf.com/reader/full/penuntun-macromedia-dreamweaver-2004-mx 24/24
Ket :
B. Teks “MEMBUKA CAKRAWALA TEKNOLOGI ANDA” berjalan ke arah kanan.
C. Logo produk berjalan ke kiri, dan akan berhenti jika mouse lewat di atasnya, kemudian
berjalan lagi jika mouse sudah tidak berada di atasnya
D. Text “Kembali ke halaman muka” untuk kembali ke halaman depan
E. Berisi gambar model dan spesifikasi dalam bentuk tabel tanpa border (3 item)
3. Untuk produk yang dijual, ditampilkan di frame sebelah kanan, sedangkan situs yang terkait
ditampilkan pada tab/window lain (perhatikan pengisian targetnya pada saat setting LINK)
4. Contoh tampilan jika dipilih menu HP :
5. Menu yang disediakan : NOTEBOOK, PC/Desktop, Peripheral dan Computa
6. Link ke Computa : http://www.computa.co.id
C
DE