Penuntun Macromedia Dreamweaver 2004 MX

Click here to load reader

  • date post

    09-Jul-2015
  • Category

    Documents

  • view

    2.247
  • download

    0

Embed Size (px)

Transcript of Penuntun Macromedia Dreamweaver 2004 MX

PENUNTUN I

MACROMEDIA DREAMWEAVER MX 2004(PHP) SMA STELLA DUCE 1 Yogyakarta

I.

PENGANTAR (Untuk pengantar, ada di buku teori dari kantor hal 34-40)

II.

PENGENALAN MACROMEDIA DREAMWEAVER MX 2004

A = Title and Menu BarDocument Toolbar

B = Design and CodeD=Pa nelC = Properties Inspector

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 pilihan default 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 dan 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.

PENUNTUN III

MACROMEDIA DREAMWEAVER MX 2004SMA STELLA DUCE 1 Yogyakarta

1. Tabel Buatlah site tentang Caf/Rumah Makan/Restoran/Pub seperti contoh di bawah ini :

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)

PENUNTUN III MACROMEDIA DREAMWEAVER MX 2004 (FRAME) SMA STELLA DUCE 1 Yogyakarta1. 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 :

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.

PENUNTUN IV

MACROMEDIA DREAMWEAVER MX 2004Membuat Form SMA STELLA DUCE 1 Yogyakarta

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

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 : Female 7. 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

PENUNTUN V

MACROMEDIA DREAMWEAVER MX 2004Anchor, PopUp Menu dan Flash Text SMA STELLA DUCE 1 Yogyakarta

Flash Text Untuk 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 Link 8. Pilih warna latar belakang yang sesuai pada Bg Color 9. Pada kotak Save As isikan nama file

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 Button Untuk 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 Size 6. 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 OK 10. Lihat di browses

PENUNTUN VI

MACROMEDIA DREAMWEAVER MX 2004Anchor, PopUp Menu dan Flash Text SMA STELLA DUCE 1 Yogyakarta

Flash Text Untuk 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 Link 8. Pilih warna latar belakang yang sesuai pada Bg Color 9. Pada kotak Save As isikan nama file

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 Button Untuk 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 Size 6. 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 OK 10. 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 Popup 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.

PENUNTUN VII MACROMEDIA DREAMWEAVER 2004 MX

PUBLISH WEBSMA STELLA DUCE 1 YOGYAKARTA

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 :

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.

Review

MACROMEDIA DREAMWEAVER MX 2004Membuat Web SMA STELLA DUCE 1 Yogyakarta

1. Buat web site tentang toko computer dengan tampilan halaman muka seperti berikut :

A

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 :

B

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 :

C

D

E

5. Menu yang disediakan : NOTEBOOK, PC/Desktop, Peripheral dan Computa 6. Link ke Computa : http://www.computa.co.id