1.
Kegiatan
Belajar 1 : Mengenal Software Web Design.
a.
Tujuan
Kegiatan Pemelajaran
Setelah
melaksanakan kegiatan pemelajaran 1 diharapkan peserta diklat dapat mengenal berbagai
macam software web design dengan kekurangan dan
kelebihannya masing-masing.
b.
Uraian
Materi 1
1) Software Web
Design
Software web design
merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain
halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat
berbagai macam software web design yang dikeluarkan oleh
vendor yang berbeda-beda. Setiap software web design itu menawarkan
berbagai macam fitur unggulannya masing-masing. Software web design
terpopuler yang ada saat ini antara lain: Adobe Image Ready, Macromedia Dreamweaver,
Macromedia Fireworks, Microsoft Frontpage dan lain sebagainya.
2) Mengenal Macromedia Dreamweaver MX
Macromedia Dreamweaver
yang merupakan salah satu software web design terpopuler
dipilih sebagai software web design yang akan digunakan
dalam proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena
kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman web, antara
lain : ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML disamping
keunggulan-keunggulan lainnya dibandingkan dengan software web design
yang lain. Saat ini Macromedia Dreamweaver telah sampai pada versi 2004 yang
lebih sering disebut dengan Macromedia Dreamweaver MX 2004.
Dreamweaver menjadi software
utama yang digunakan oleh web designer dan web programmer guna
mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu
meningkatkan produktivitas dan efektivitas dalam desain maupun pembangunan
situs web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs
yang cukup lengkap.
Untuk dapat
mengoperasikan Macromedia Dreamweaver, terlebih dahulu harus dipastikan sudah
terinstal di komputer praktikum. Apabila belum ada Macromedia Dreamweaver yang terinstal,
maka perlu dilakukan proses instalasi. Terlebih dahulu harus dipersiapkan file
instalasinya dan diikuti dengan proses instalasi sesuai dengan installation
manual yang ada. Setelah Macromedia Dreamweaver terinstal, jalankan
dengan klik 2 kali pada ikon yang terdapat di desktop atau dapat juga dilakukan
melalui Start Menu.
3) Workspace Dreamweaver MX
Pertama kali dijalankan
setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup.
Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai
selanjutnya, apakah Workspace Dreamweaver MX apakah Workspace Dreamweaver 4. Di
sini kita gunakan Workspace Dreamweaver MX, apabila dikemudian hari kita ingin
menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui Menu Ã
Edit à Preferences.
Gambar 1. Workspace Setup
Workspace Dreamweaver MX
tersebut memiliki tampilan window seperti pada gambar 2. Window Dreamweaver MX
ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window,
Panel Groups, Tag Selector, Property Inspector dan Files Panel.
Gambar 2. Window dan Panel
Dreamweaver MX
Keterangan Gambar:
1)
Insert
bar, memuat tombol-tombol yang berfungsi untuk memasukkan/menyisipkan berbagai
jenis obyek seperti gambar, tabel dan layer ke dalam suatu dokumen. Setiap
obyek yang dimasukkan dengan meng-klik tombol insert pada insert bar ini adalah
seperti halnya memasukkan potongan tag HTML ke dalam halaman yang sedang
dibuat.
2)
Document window, berfungsi untuk menampilkan dokumen di
mana anda sekarang bekerja.
3)
Document
toolbar, berisi tombol dan menu pop-up yang menyediakan tampilan yang
berbeda-beda dari Document Window.
4)
Panel
groups, merupakan kumpulan panel yang saling berkaitan satu sama lain, yang
dikelompokkan di bawah satu judul.
5)
Tag
selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang
aktif pada Design View.
6)
Property
inspector, digunakan untuk melihat dan mengubah berbagai property obyek atau
teks.
7)
Files
panel, memungkinkan pengaturan file-file atau direktori kerja.
Workspace Dreamweaver
MX ini memberikan kesatuan tampilan
antara menu utama, panel, property inspector serta toolbar.
a.
Rangkuman
1
Macromedia
Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan software web
design yang telah memiliki banyak dukungan terhadap banyak bahasa
pemrograman web. Panel-panel pada window Dreamweaver MX memiliki peran
masing-masing dalam membangun sebuah halaman web yang cantik, sesuai dengan
jiwa seni si pemakai.
b.
Tugas
1
1)
Pelajarilah setiap fungsi dari panel-panel dalam window
Dreamweaver MX!
2)
Cari dan pelajari sumber bacaan atau buku refensi yang
menjelaskan secara detail tentang pengenalan tool-tool dalam Macromedia
Dreamweaver MX .
c.
Tes
Formatif 1
1)
Apakah yang anda ketahui tentang software web
design?
2)
Apa yang anda ketahui tentang pemrograman web?
3)
Sebutkan beberapa software web design
yang anda ketahui!
d.
Kunci
Jawaban Formatif 1
1)
Software web design ; perangkat
lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik
yang bersifat statis maupun dinamis.
2)
Pemrograman
web, adalah pembuatan halaman web yang didalamnya mengandung unsur bahasa
pemrograman disamping tetap menggunakan tag-tag HTML. Biasanya pemrograman web
bertujuan untuk membangun web-web dinamis.
3)
Software
web design : Microsoft
Frontpage, Macromedia Fireworks, Macromedia Dreamweaver, Adobe ImageReady, Namo
Web editor dan lain – lain.
e.
Lembar
Kerja 1
Alat
dan Bahan
Personal Computer (PC).
Kesehatan dan Keselamatan
Kerja
1)
Berdo’alah
sebelum memulai kegiatan belajar.
2)
Bacalah
dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.
3)
Pastikan
komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.
4)
Setelah
selesai, matikan komputer sesuai prosedur!
Langkah Kerja
1)
Siapkanlah
semua peralatan yang dibutuhkan!
2) Periksa
semua kabel penghubung pada komputer.
3)
Nyalakan
komputer dan pastikan komputer tersebut telah terkoneksi internet dengan baik.
4)
Pastikan
PC yang anda pakai sudah memiliki software web design, jika belum
lakukanlah instalasi software yang dibutuhkan, yaitu : Macromedia
Dreamweaver MX .
5)
Jalankan
Macromedia Dreamweaver MX, amati dan catat bagian-bagian pada window
Dreamweaver MX. Jika mengalami kesulitan, tanyakan pada instruktur.
6)
Setelah
selesai, laporkan hasil kerja Anda kepada instruktur.
Setelah diteliti matikan komputer dan rapikan seperti semula
Bagikan
Mengenal Software Web Design.
4/
5
Oleh
hardi_izet
