Pertemuan

MODUL
KOMUNIKASI MULTIMEDIA
Oleh: Novida Irawan, M.Si

POKOK BAHASAN
-

Software Desain web

o Pengenalan Dreamweaver CS3

Fungsi Tools Dreamweaver CS3

DESKRIPSI
Mata kuliah ini membahas

Software Desain web yaitu pengenalan

Dreamweaver CS3
TUJUAN INSTRUKSIONAL KHUSUS
Setelah mengikuti dan mempelajari materi-materi kuliah ini, mahasiswa
diharapkan dapat mengetahui, memahami software Dreamweaver CS3.
BAHAN BACAAN
Chauhari, Ayong, 2005. Practical web Projects Dreamweaver Made Easy,
Penerbit Gramedia Majalah

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

Dreamweaver CS 3
Adalah program untuk mendesain dan membuat halaman web, merancang,
mengkodekan dan mengembangkan websites, halaman web dan aplikasi
web. Dreamweaver (dulu milik dari Macromedia namun sekarang menjadi milik dari
Adobe) dan telah dilengkapi dengan alat-alat desain yang mudah digunakan,
ditambah dengan konsep WYSIWYG kepanjangan dari What You See is
What You Get artinya mendisain web secara visual, sehingga apa yang
anda desain, akan seperti itu hasilnya artinya dapat membuat web secara
instant tanpa krena sudah disdiakan seperti membuat table, membuat
hyperlink, memasukkan gambar, termasuk memasukkan Flash Animasi, dll.
Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun
juga dapat digunakan oleh programer untuk membangun halaman interaktif
karena Dreamweaver mendukung pula PHP, ColdFusion, ASP dan lain-lain.
Tampilan Awal Dreamweaver CS3
Bagian Create New
mempermudah
penulisan kode
secara manual
dengan
Dreamweaver

Halaman start pada

Dreamweaver CS3
Untuk
mempermudah
memulai proses
pembangunan situs

Membangun
halaman lebih
cepat dengan
menggunakan
desain preset ini.

Disini dapat memilih

file halaman web
yang baru-baru ini
digunakan.

Untuk menjelajahi
fitur Dreamweaver
CS3
12

Komunikasi Multimedia
Novida Irawan, M.Si.

Dapat digunakan
untukmendukung kemampuan
editor web dengan
menambahkan ekstensi.
Pusat Pengembangan Bahan Ajar
Universitas Mercu Buana

F. Toolbar
dokumen

C. Tab Insert
A. Tampilan Kode
(Kode View)

B. Menu Utama

D. Panel Insert
E. Tombol Preview

H. Panel
Application

G. Panel CSS

I. Panel Tag
Inspector
J. Tab Asset

N. Design
View

M. Panel Properties/
Panel Inspector

L. Ukuran Halaman

K. Panel Files

Keterangan:
A. Tampilan Kode (Kode View)
Perhatikan kode yang terdapat di balik situs dengan bantuan jendela
ini, dan dapat digunakan sebagai editor HTML.
B. Menu Utama
Semua fungsi utama program terdapat di menu ini. Terdiri dari menu
File, Edit, View, Insert, Modify, Text, Command, Site. Window, Help
C. Tab Insert
Tab ini memungkinkan untuk menjelajahi berbagai komponen halaman
termasuk table, frame form dan teks.
D. Panel Insert

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

Terdapat kumpulan opsi yang dapat diklik yang terkait dengan tab
insert yang dipilih. Tool yang terdapat disini membantu menyelesaikan
berbagai hal, mulai dari table sederhana hingga content dinamis
E. Tombol Preview
Sebelum mempublikasikan apapun secara online, sebaiknya lihat
terlebih dulu tampilan halaman dalam suatu web browser, yang dapat
dilakukan dengan mengklik tombol kecil ini.
F. Toolbar dokumen
Mengubah mode tampilan dan mengakses fungsi-fungsi penting secara
cepat dan mudah, dengan menggunakan toolbar yang terletak dalam
area ini.
G. Panel CSS
Panel ini memungkinkan untuk menyimpan semua style sheet sebuah
situs yang telah dibuat sebelumnya.
H. Panel Application
Bagian ini terkait dengan data dinamis, dimana dapat digunakan untuk
mengkonfigurasi

database

dan

memeriksa

apakah

script

dapat

berjalan sesuai dengan yang diinginkan

I. Panel Tag Inspector
Memuat semua atribut tag yang tersedia yang diterapkan pada obyek
yang sedang dipilih, sehingga dapat dapat diedit sekaligus dalam
sekejab.
J. Tab Asset
Tab ini menyediakan akses instan ke semua elemen yang telah di buat
sebelumnya. Tab ini juga memungkinkna untuk menyisipkan item baru,
bila diinginkan.
K. Panel Files
Tab site menyajikan secara lengkap struktur dan hirarki situs dan
menunjukkan dimana halaman disimpan.

L. Ukuran Halaman
Menu drop-down ini memuat sejumlah ukuran halaman web yang telah
didefinisakn sebelumnya, sehingga dapat mengkonfigurasikan situs
agar dapat berfungsi pada berbagai jendela browser.
M. Panel Properties/ Panel Inspector

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

Sebagai bagian terpenting dari keseluruhan antarmuka Dreamweaver,

properties inspector memuat sejumlah opsi terkait untuk elemen aktif
(yang sedang dipilih).
N. Design View
Mode
tampilan
dalam

dreamweaver

memanfaatkan

seluruh

fungsionalitas WYISWYG (What You See Is What You Get) aplikasi.

Disini dapat digunakan untuk meletakkan elemen web dalam cara
yang hampir sama dengan apa yang telah dilakukan sebelumnya
(misalnya desain melalui Adobe Photoshop)

Panel Properties

Keterangan:
1. Ketika mengklik suatu gambar dalam Design View, maka thumbnail
kecil akan tampil pada otak ini.
2. Nama gambar memungkinkan dapat menelusuri apapun yang ada
pada halaman.
3. Ketika merancang halaman web, ukuran gambar harus dibuat kecil.
Dreamweaver menyediakan informasi tentang hal ini disini.
4. Atribut fisik gambar ditunjukkan disini dalam format lebar dan tinggi,
diukur dalam pixel.
5. Digunakan untuk memeriksa lokasi gambar didalam folder situs yang
terletak disini.
6. Jika gambar bersangkutan digunakan sebagai link, isikan alamt URLnya disini.
7. Ikon ini memungkinkan mengubah gambar pada suatu halaman
dengan menunjuk pada suatu file yang ada pada suatu folder situs.

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

8. Folder yang digunakan untuk mencari file yang ingin dihubungkan atau
disertakan pada halaman
9. Digunakan untuk melampirkan informasi teks pada suatu gambar.
10.
Klik logo misalnya Photoshop untuk mengoptimalkan gambar
dalam aplikasi atau melakukan perubahan dengan editing tool gambar
baru.
11.
Jika mengunakan peta (image map) pada halaman desain, maka
peta yang sedang dipilih akan tampil disini.
12.
buat hotspot (kotak image map) persegi panjang untuk membagi
halaman ke dalam beberapa are yang dapat diklik.
13.
Berfungsi menghasilkan hotspot lonjong
14.
Berfungsi membuat potongan gambar yang lebih presisi
15.
Area halaman yang dicakup oleh hotspot disajikan disini dalam
format lebar dan tinggi
16.
Semua hotspot harus dihubungkan (link) ke tujuan tertentu dan
bagian ini memungkinkan bagaimana link akan dibuka.
17.
Berfungsi mendefinisikan link itu sendiri dengan mengisikannnya
disini.
18.
Berfungsi memberikan tepi untuk potongan gambar
19.
Menentukan perataan gambar secara vertika
20.
Meratakan gambar secara horizontal dengan bantuan tool
pemerataan yang ada disini.

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

The Insert Bar

Insert bar, terletak diseberang atas layar, berbeda dari panel diatas. Insert
bar berisi lebih tabs dari pada panel lain, dan memiliki beberapa pilihan
untuk memasukkan dan manipulasi objek dan fungsi ke halaman web.
Common
Fitur tab umum yang banyak digunakan dalam Dreamweaver

A
.

B
.

C
.

D
.

E
.

F
.

G
.

H
.

I.

Keterangan:
A. Hyperlink: Klik diatas untuk membuat link ke lokasi lain dari halaman
web, file atau lokasi pada halaman yang sama.
B. Email Link: Email link mengijinkan pengunjung situs mengirimkan
seseorang email dengan mengklik pada special link.
C. Named Anchor: Tanda anchor ini adalah istimewa dalam melakukan
link, akan membawa user ke bagian lain pada halaman yang sama. Klik
nama tombol nama anchor untuk mempercepat membuat link untuk
anchor.
D. Insert Table: Untuk memasukkan informasi dan membuat tabel.
E. Draw Layer: Layer bisa membantu ketika mendesain layout untuk
halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisa diisi
teks, gambar, atau apa saja, dan bisa ditempatkan dimana saja dilayar.
Ketika mengklik tombol ini, kursor anda akan berubah menjadi salib,
dan anda bisa menarik layer pada halaman.
F. Image: Digunakan untuk menempatkan gambar dalam halaman web
dengan mengklik tombol ini.
G. Media: Untuk menambahkan atau memasukkan file lain, seperti
animasi dari flash dan java dll
H. Date: Klik tombol ini untuk memasukkan tanggal ke halaman web,
I. Server-Side Include: Untuk menambahkan serverside

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana

J. Comments: Komentar bisa digunakan dalam halaman web, tanpa

benar-benar muncul pada halaman web. Ini akan membantu jika anda
ingin mengingat sesuatu yang anda desain.
K. Head: Untuk memberikan informasi tambahan di Head pada situs
seperti keyword dll
L. Template: pengunaan fasilitas template atau memungkinkan untuk
membuat template sendiri.
M. Tag Chooser: Memasukkan spesifik HTML tag dari daftar. Biasanya
digunakan oleh Web Developer yang sudah mahir.

12

Komunikasi Multimedia
Novida Irawan, M.Si.

Pusat Pengembangan Bahan Ajar

Universitas Mercu Buana