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



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 :



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.



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



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.

Latihan :

Buat situs baru dengan langkah-langkah yang urut. Kemudian, aktifkan pada

document toolbar, aktifkan CODE. Tuliskan di antara <body> dan </body> teks

berikut :

Perkenalkan, nama saya adalah ........ 

Saya siswi kelas ..... di SMA Stella Duce 1 Yogyakarta 

Asal saya dari kota .......

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

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 adalah awal sebuah paragraph yang harus diakhiri 

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



1. Tabel

Buatlah site tentang Café/Rumah Makan/Restoran/Pub seperti contoh di bawah ini :

PENUNTUN III





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



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)

http://www.sosro.com/






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


(FRAME)




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.



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


Membuat Form




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



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


Anchor, PopUp Menu dan Flash Text




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



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


9. Klik OK10. Lihat di browses



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


PENUNTUN VI


Anchor, PopUp Menu dan Flash Text




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



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


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.



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.



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

http://www.freewebhostingarea.com/


http://www.gokilgirl.freevar.com/







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.



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


Membuat Web


B

A



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

Penuntun Macromedia Dreamweaver 2004 MX

Documents

Transcript of Penuntun Macromedia Dreamweaver 2004 MX