Komunikasi Multimedia

Transkripsi

1 Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations

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

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

4 Persiapan Pembuatan Situs Web Merumuskan Tujuan Pembuatan Situs Web Menentukan Isi dari Situs Menentukan Target Pengunjung Situs Menentukan Struktur Situs

5 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

6 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)

7 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

8 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

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

10 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

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

12 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

13 Terima Kasih Anindita, S.Pd, M.Ikom