Modul ke:
Komunikasi Multimedia Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX
Fakultas
Ilmu Komunikasi Program Studi
Public Relations www.mercubuana.ac.id
Anindita, S.Pd, M.Ikom
Macromedia Dreamweaver • Macromedia Dreamweaver menawarkan fasilitas dan fitur – fitur yang lebih lengkap, antara lain referensi HTML, CSS dan Javascript. • Selain itu kita bisa menambah objek flash kedalam halaman situs kita.
Menu Utama • Dokumen Window Æ adalah ruang kerja utama dalam Dreamweaver. Kita dapat bekerja dalam tampilan desain, kedua tampilan atau tampilan kode. • Objek Panel Æ objek panel merupakan sebuah panel yang sangat berguna saat kita bekerja dalam Dreamweaver, karena memudahkan kita menyisipkan berbagai objek ke dalam dokumen web. • Properties Inspector Æ Properties Inspector memberikan fasilitas untuk melihat dan mengedit properties elemen yang sedang terseleksi seperti teks, image, dll.
Persiapan Pembuatan Situs Web • • • •
Merumuskan Tujuan Pembuatan Situs Web Menentukan Isi dari Situs Menentukan Target Pengunjung Situs Menentukan Struktur Situs
Membuat Situs Baru di Dreamweaver • Klik menu Site > Manage Site • Di kotak yang muncul isikan nama site • Di kotak local root folder isikan dimana semua source folder yang ingin kita tentukan • Klik Ok • Di palet file, klik kanan pilih new file • Tuliskan nama halaman yang ingin kita buat. Contoh halaman1.html
Mengatur Properti Halaman Web Klik menu Modify > Page Properties Di dalam page properties akan tampil: •Title: sebagai judul halaman web •Background Image: jika ingin halaman web mempunyai background berupa gambar •Background Color: jika ingin merubah warna background menjadi warna tertentu •Teks Color: untuk merubah warna teks yang akan kita tulis •Link: untuk merubah warna link •Visited Link: untuk mengubah warna link yang sudah pernah kita kunjungi. •Active Link: untuk mengubah warna Link yang sedang kita Klik •Margin Left dan Top: untuk mengubah batas margin (berlaku di Internet Explorer) •MarginWidth dan Height: untuk mengubah ukuran Panjang dan Tinggi (berlaku di •Netscape Navigator)
Memasukan Image / Gambar • Klik di area kerja pada Dreamweaver • Klik menu Insert > Image atau klik pada icon Insert Image • Tentukan lokasi file gambar yang akan kita pilih • Klik Ok
Membuat Table dalam Dreamweaver • Klik Icon Table • Di Kotak Table isikan Row = 4, Columns = 5, Table Width = 100 %, Border Thickness =1 • Klik Ok > Berarti kita membuat table 4 baris 5 kolom dengan panjang table full halaman dan ketebalan garis table = 1
Mengetikan Teks di dalam Table • • • • • •
• • • •
Buat sebuah table dengan ketentuan Row = 2, Columns = 2, Table Width = 800px, Border = 1 Klik Ok Seleksi seluruh kolom yang ada di baris pertama Beri warna dengan warna yang kita inginkan Klik di dalam Cell pada baris ke 2, rubah properties teks menjadi font = arial, size 12 Ketikan teks berikut “Dreamweaver MX 2004 merupakan Software versi terbaru keluaran dari Macromedia yang merupakan pelengkap dari versi sebelumya. Dreamweaver MX 2004 dilengkapi dengan fitur - fitur dan kompabilitas dengan software lain seperti adobe Photoshop, Macromedia Freehand dan Macromedia Flash.” Klik didalam Cell pada baris ke 2 kolom ke 2, rubah properties teks menjadi font = arial, size 12 dan align = right Seleksi seluruh teks yang ada di kolom 1. Klik Kanan > Copy. Klik lagi di Kolom yang kosong. Klik Kanan > Paste Untuk merubah tampilan, warnai teks yang ada di kolom ke 2 dengan warna yang berbeda.
Memasukan Gambar ke dalam Table • Buat sebuah table dengan ketentuan Row dan Column = 2, Table Width = 200 pixel, border = 1 • Klik di dalam kolom 1. klik Icon Insert Image. Pilih file gallery1_small.jpeg • Klik didalam kolom 2. Klik Icon Insert Image. Pilih file gallery2_small.jpeg
Flash Teks • Buat sebuah table dengan ukuran 300 px. Dengan ketentuan jumlah baris 1, jumlah kolom 3 dan border = 0 • Seleksi seluruh cell yang ada pada table, buat align center pada bagian propertiesnya • Klik di dalam cell 1 pada baris 1 kolom 1 • Klik menu Insert > Media > Flash Teks • Di dalam Insert Flash Teks, pilih jenis font yang di inginkan. • Pilih jenis warna teks dan jenis warna teks pada saat rollover • Ketikan About Me pada kotak teks. Klik Apply dan Klik Ok • Lakukan hal yang sama untuk tombol lainnya.
Roll Over Image • Buat sebuah Table dengan ukuran 360 px. Dengan ketentuan jumlah baris 1 dan jumlah kolom 3, border = 0 • Seleksi seluruh cell yang ada di table, buat agar align menuju ke center • Klik di dalam cell1 pada baris 1 kolom 1 • Klik menu Insert > Image Object > Roll Over Image • Di dalam bagan Roll Over Image, tentukan gambar original dan gambar rollover yang sudah di siapkan • Klik Ok • Klik tombol Preview atau tekan tombol F12 • Save
Terima Kasih Anindita, S.Pd, M.Ikom
