MENGOPERASIKAN SOFTWARE

desain web

PENGEMBANGAN SUMBER BELAJAR BERBASIS E-

LEARNING PADA MATERI DESAIN WEB
UNTUK PENDIDIKAN JARAK JAUH
 GLOSARIUM

Document toolbar : tombol dan menu pop-up yang menyediakan tampilan

yang berbeda-beda dari Document Window

Document window : menampilkan dokumen di mana sekarang bekerja.

Insert bar : memuat tombol-tombol yang berfungsi untuk

memasukkan/menyisipkan berbagai jenis obyek

seperti gambar, tabel dan layer ke dalam suatu

dokumen

Property inspector : Bagian dari halaman Dreamweaver yang digunakan

untuk melihat dan mengubah berbagai property obyek

Software : Perangkat lunak, program yang berjalan di komputer

 BAB I
PENDAHULUAN

A. Deskripsi Judul
Mengoperasikan Software desain web merupakan modul teori dan atau
praktikum yang membahas tentang pengoperasian software desain web. Modul ini
terdiri dari 2 (dua) kegiatan belajar. Kegiatan Belajar 1 berisi tentang
menjalankan software desain web, dalam modul ini menggunakan software
Dreamweaver MX 2004. Kegiatan Belajar 2 berisi tentang mengelola dokumen
desain web.
Setelah menguasai modul ini diharapkan peserta didik mampu mengoperasikan
dan menggunakan software desain web untuk melakukan pengelolaan dokumen
desain web. Modul ini terkait dengan modul lain yang membahas tentang
membuat halaman web yang lebih kreatif.

B. Petunjuk Penggunaan Modul

Peserta diklat diharapkan dapat berperan aktif dan berinteraksi dengan sumber
belajar yang mendukungnya, karena itu harus memperhatikan hal-hal sebagai
berikut :
1. Membaca dengan seksama uraian materi pada setiap kegiatan belajar
2. Mencermati langkah-langkah kerja pada setiap kegiatan belajar
3. Bertanya kepada guru atau peserta didik lainnya apa bila belum memahami
materi. Diskusi dapat dilakukan melalui forum diskusi atau chat yang telah
disediakan dalam media pembelajaran
4. Mengerjakan tugas dan meng-uploadnya melalui fasilitas yang disediakan
dalam media pembelajaran.

C. Tujuan Akhir
1. Peserta didik mampu mengoperasikan software desain web Dreamweaver
MX 2004
2. Peserta didik mampu mengelola dokumen desain web
 BAB II
PEMBELAJARAN

A. Kegiatan Belajar 1
Mengoperasikan software Dreamweaver MX 2004
1. Tujuan
Setelah mempelajari kegiatan belajar 1 diharapkan peserta didik dapat
mengetahui jenis-jenis software desain web, memahami fungsi software desain
web, menjalankan software desain web, mengidentifikasi bagian-bagian lembar
kerja Dreamweaver, dan mengidentifikasi menu-menu.

2. Uraian Materi
a. Mengenal Software Desain Web
Software desain web merupakan perangkat lunak yang berguna untuk
membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis
maupun dinamis. Saat ini terdapat berbagai macam Software desain web yang
dikeluarkan oleh vendor yang berbeda-beda. Setiap Software desain web itu
menawarkan berbagai macam fitur unggulannya masing-masing. Software desain
web terpopuler yang ada saat ini antara lain:
1). Macromedia Dreamweaver
Macromedia Dreamweaver yang merupakan salah satu Software desain web
terpopuler dipilih sebagai Software desain web yang akan digunakan dalam proses
pembelajaran 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 desain
web 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.
Kelebihan Macromedia Dreamweaver antara lain sebagai berikut: Dapat
membuat website yang langsung terintegrasi dengan database backend, dapat
menampilkan Java Applets dan ActiveX secara langsung pada saat editing,
mempunyai fitur otomasi JavaScript, dan mempunyai fitur otomasi CSS.
Sedangkan kelebihannya adalah sebagai berikut: Kebutuhan sistem lebih tinggi
daripada FrontPage, penggunaan relatif lebih kompleks dan sulit, tidak punya
kemampuan image editing.

2). Macromedia fireworks

Fireworks adalah aplikasi desain grafis yang dikhususkan untuk membuat
website. Fireworks lebih diutamakan penggunaannya untuk desainer website
dengan latar belakang keahlian desain grafis, yang melibatkan perangkat image
editing, seperti Adobe Photoshop ataupun Corel Draw. Fitur-fitur yang tersedia di
Fireworks disesuaikan dengan latar belakang skill image editing, diantaranya
adalah: Kemampuan mengedit berbagai jenis image dalam satu aplikasi,
Kemampuan membuat efek animasi pada image, Kemampuan mengedit image
dan halaman web dalam satu aplikasi.
Kelebihan Macromedia Firework antara lain sebagai berikut: Mempunyai
kemampuan text formatting yang lengkap, mempunyai kemampuan image
manipulation, dan mempunyai kemampuan membuat animasi. Sedangkan
kelemahannya adalah sebagai berikut: Tidak punya integrasi dengan database dan
membutuhkan latar belakang pengetahuan image editing.

3). Microsoft Frontpage

Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat,
mendesain, dan mengedit halaman World Wide Web seperti menambahkan text,
images, table, form, dan elemen lain di halaman Web. MS FrontPage
menampilkan itu semua seperti apa yang ditampilkan di web browser. Secara
otomatis file akan menjadi sebuah kode HTML (Hyper Text MarkUp Language).
 Kelebihan Microsoft Frontpage sebagai berikut: Penggunaan sederhana dan
mudah, dan Kebutuhan sistem lebih rendah daripada Fireworks dan
Dreamweaver. Sedangkan kelemahannya adalah sebagai berikut: Tidak dapat
menampilkan Applet pada saat editing, tidak punya fitur integrasi dengan
database backend, tidak punya kemampuan image-editing tidak punya
kemampuan membuat animasi dengan image dan dukungan JavaScript dan CSS
minim.

b. Menjalankan Macromedia Dreamweaver

Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu
harus dipastikan sudah terinstal di komputer. 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.

Gambat 1.1 Menjalankan Macromedia Dreamweaver

 Saat pertama kali menjalankan Dreamweaver, akan tampil sebuah kotak
dialog Workspace Setup yang digunakan untuk memilih tampilan ruang kerja.

Gambar 1.2 Tampilan Kotak Dialog Tipe Ruang Kerja Dreamweaver MX

2004

 Designer workspace : adalah sebuah penggabungan ruang kerja

menggunakan MDI (Multiple Document Interface), di mana semua jendela
dokumen dan panel tergabung di dalam satu jendela aplikasi yang besar,
dengan sisi panel group di sebelah kanan. Tampilan ini paling disukai
beberapa pengguna
 Coder workspace : adalah ruang kerja yang tergabung dengan letak sisi
panel group berada di sebelah kiri. Tampilan yang sama digunakan oleh
Macromedia HomeSite dan Macromedia Cold Fusion Studio, dan jendela
dokumen menampilkan kode secara default. Tampilan ini sudah diakui
kemudahannya oleh pengguna Homesite atau Coldfusion Studio dan
pengguna kode lain yang ingin mengenal tampilan ruang kerja.
Ketika Anda memulai Dreamweaver tanpa membuka sebuah dokumen, maka
akan tampil halaman awal Dreamweaver pada lembar kerja. Halaman awal akan
memudahkan pengguna dalam mengakses tutorial, memilih file yang pernah
dibuka, membuat halama baru, membuat halaman dari contoh dan Dreamweaver
Exchange, dimana anda dapat menambahkan kemampuan baru dari beberapa
tampilan Dreamweaver. Gunakan halaman awal seperti halaman web.
 Gambar 1. 3 Tampilan Halaman Awal

c. Bagian-Bagian Halaman Dreamweaver

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 1.4 Bagian-bagian Window Dreamweaver

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

d. Komponen Ruang Kerja

Didalam ruang kerja Dreamweaver MX 2004 terdapat beberapa komponen
utama yang membentuk suatu ruang kerja. Ruang kerja tersebut memberikan
kesatuan tampilan antara menu utama, panel, property inspector serta toolbar.
1). Menu utama
Sistem menu yang terdapat dalam Dreamweaver sangatlah sederhana dan
mudah untuk dipahami karena perintah yang terdapat pada sebagian besar fungsi
menu terdapat juga dalam panel. Sehingga tidak akan menghabiskan waktu
dengan perintah yang terdapat pada menu tetapi akan lebih banyak bekerja
dengan panel. Di dalam sistem menu Dreamweaver terdapat beberapa komponen
yang dapat digunakan, yakni:
a). Menu file dan Menu edit
Berisi item menu standar untuk menu file dan menu Edit seperti New, Open,
Save, Save all, Cut, Copy, Paste, Undo dan Redo. Menu file terdiri dari
beberapa macam perintah untuk menampilkan atau membuat dokumen baru,
seperti Preview in browser dan Print code. Menu edit berisi perintah untuk
pemilihan, seperti Select parent tag, Find, dan Replace.
b). Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan dari dokumen
anda (seperti tampilan design view dan tampilan code) dan untuk
menampilkan dan menyembunyikan beberapa elemen halaman dan tombol
Dreamweaver dan toolbar.
c). Menu Insert
Berisikan alternatif baris Insert untuk menyisipkan obyek dalam dokumen.
d). Menu Modify
Berfungsi untuk melakukan perubahan properti item atau halaman terpilih.
Dengan menggunakan menu ini anda dapat mengedit atribut tag, mengganti
tabel dan elemen tabel dan bermacam bentuk aksi untuk item librari dan
template.
e). Menu Text
Berfungsi untuk mempermudah dalam melakukan format teks
f). Menu Command
Berisi akses ke beberapa perintah, format kode yang sesuai dengan format
pilihan anda. Membuat foto album, dan melakukan pengeditan gambar.
g). Menu Site
Berisi item menu untuk mengelola situs dan melakukan upload dan download
file
h). Menu window
Menyediakan akses ke seluruh panel, inspector dan jendela dalam
Dreamweaver
i). Menu Help
Akses menuju bantuan berupa dokumentasi yang telah disediakan.

2). Baris Standar

Pada saat membuka jendela Dreamweaver MX, 2004 secara default hanya
menampilkan Document Bar tanpa menampilkan Standard Bar. Untuk
menambahkan atau mengaktifkan Standard Bar, langkah-langkahnya sebagai
berikut :
 1). Buatlah dokumen baru
2). Pilih perintah menu View  Toolbars sehingga tampil sub menu
Document dan Standard.
3). Klik pilihan Standard untuk menampilkan standard bar
4). Gunakan perintah yang sama untuk menyembunyikan tampilan Standar bar.

.
Gambar 1.5 Standar Bar
Keterangan :
 New : Membuat Halaman Baru
 Open : Membuka Halaman yang sudah ada
 Save : Menyimpan Halaman web yang sedang aktif
 Save All : Menyimpan seluruh Halaman web yang sedang dibuka
 Cut : Menghapus objek yang dipilih
 Copy : Menyalin objek yang dipilih
 Paste : Menempalkan/meletakkan objek hasil salinan
 Undo : Membatalkan perintah yang terakhir dilakukan
 Redo : Mengulang kembali

3). Baris Tombol Dokumen

Document Toolbar berisi tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari document window. Melalui baris tombol
dokumen ini, tampilan document window dapat diatur dalam bentuk Design View
atau Code View atau kedua-duanya. Melalui baris ini dapat pula memberikan
judul dokumen pada bagian Title.

Gambar 1.6 Document Toolbar

Keterangan
 Show Code View: Menampilkan mode pengetikan kode HTML dalam
jendela Code View
  Show Code and Design view: Menampilkan jendela Code View dan jendela
Design View
 Show Design View: Menampilkan jendela Design View sesuai yang akan
tampil browser
 No Browser Check Errors: Melakukan pengecekan kesalahan pada
dokumen web
 Document Title : Memberikan judul pada halaman web
 File Management: Proses Upload dan download file

 Preview/Debug in browser: Melihat hasil dalam browser dan mencari

kesalahan script

 Refresh Site List: Melakukan pembaruan terhadap daftar isi situs

 View Options : Mengatur pilihan pada ruang kerja

4). Baris Insert

Terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek seperti
tabel, layer dan gambar. Ketika anda menggulung pointer melewati sebuah
tombol, tampil sebuah kotak keterangan dengan menampilkan nama tombol.

.
Gambar 1.7 Tampilan Insert Bar
Baris Insert digunakan untuk mengatur beberapa kategori pilihan sebagai berikut:
 Common memungkinkan untuk membuat dan menyisipkan beberapa
penggunaan obyek biasa, seperti gamabr dan tabel diatas.
 Layout memungkinkan untuk menyisipkan tabel, div tag, layer, dan frame.
Dapat memilih 3 tampilan tabel : Standard (default), Expanded Tables dan
Layout. Ketika mode tampilan dipilih. Kita dapat menggunakan tombol layout
dreamweaver : Draw Layout Cell dan Draw Layout Table.
 Forms berisi tombol-tombol untuk membuat form dan menyisipkan elemen
form
 Text memungkinkan kita untuk menyisipkan beberapa teks dan daftar format
tag, seperti b, em, p, h1 dan ul.
 HTML menyediakan fasilitas untuk menyisipkan tag HTML untuk mistar
horizontal, head content, tabel, frame dan script.
 Server-code disediakan untuk halaman-halaman yang menggunakan bahasa
khusus seperti : ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced,
JSP dan PHP. Selain itu juga disediakan obyek-obyek server-code yang dapat
disisipkan dalam tampilan code.
 Application memungkinkan kita untuk menyisipkan elemen dinamis seperti
recordset, repeated region dan record insertion dan update form.
 Flash Elements untuk menyisipkan objek flash
 Favorites untuk mengelompokkan dan mengatur tombol-tombol baris insert
yang anda gunakan dalam satu wadah.

a). Common
Fitur tab umum yang banyak digunakan dalam Dreamweaver MX

Gambar 1.8 Tampilan Common Bar

Keterangan:
(1). Hyperlink: Klik diatas dan akan membuat anda untuk link ke lokasi lain
dari halaman web, file atau lokasi pada halaman yang sama.
(2). Email Link: Email link mengijinkan pengunjung situs mengirimkan
seseorang email dengan mengklik pada special link. Gunakan tool ini untuk
mempermudah link.
(3). 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
(4). Insert Table: Ketika anda mengklik tool ini, akan muncul jendela
menanyakan jika anda ingin memasukkan informasi dan membuat tabel.
 Ketika itu selesai, klik pada “OK” dan akan muncul tabel dalam halaman
web.
(5). 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 anda
mengklik tombol ini, kursor anda akan berubah menjadi salib, dan anda bisa
menarik layer pada halaman
(6). Image: Anda bisa dengan mudah menempatkan gambar dalam halaman web
dengan mengklik tombol ini. Ketika anda melakukannya, jendela baru akan
muncul. Dari sini, anda bisa membrowser komputer anda untuk mencari
gambar yang ingin dimasukkan ke dalam halaman web. Ingat, jika anda
berencana untuk menempatkan halaman anda dalam internet, anda harus
menaruh semua gambar yang digunakan dalam web dengan baik. Ini akan
diceritakan pada bagian “publishing”
(7). Image Placeholder: Penempatan gambar bisa digunakan secara efektif
dalam desain web. Ini merupakan pixel kosong yang bisa digunakan untuk
berbagai hal, seperti membuat ruang antar objek, atau membuat garis dan
kotak untuk layout.
(8). Fireworks HTML: Jika anda membuat halaman web memakai Macromedia
Fireworks, anda akan bisa memasukkannya ke dalam halaman
Dreamweaver MX dengan menggunakan tool ini.
(9). Flash: Mengijinkan anda untuk memasukkan elemen flash dalam halaman
web.
(10). Rollover image: Suatu efek khusus pada gambar, ketika kursor mouse
digerakkan pada gambar maka gambar akan berubah.
(11). Navigation Bar: Ini merupakan fungsi yang komplek dan akan membuat
anda untuk mengendalikan bar situs anda, dan mengubah gambar untuk
link ke halaman lain.
(12). Horizontal Rule: suatu garis sederhana yang bisa digunakan untuk
beberapa bagian isi halaman web. Klik tombol ini, memutuskan panjang
garis horisontal, dan ini akan dimasukkan ke halaman.
(13). Date: Klik tombol ini untuk memasukkan tanggal ke halaman web,
(14). Tabular Data: Memasukkan data ke dalam tabular
(15). 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.
(16). Tag Chooser: Memasukkan spesifik HTML tag dari daftar. Biasanya
digunakan oleh Web Developer yang sudah mahir.

b). Layout
Fungsi dalam layout tab membantu untuk membuat layout desain untuk
halaman.

Gambar 1.9 Tampilan Layout Bar

Keterngan:
(1). Insert Table: Ketika anda mengklik tool ini, jendela akan muncul
menanyakan anda untuk memasukkan informasi untuk membuat tabel.
Ketika anda selesai, klik pada “OK” dan tabel akan muncul dalam halaman
web anda.
(2). Draw Layer: Layer yang 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
anda mengklik tombol ini, kursor anda akan berubah menjadi salib, dan
anda bisa menarik layer pada halaman

c). Text
Fungsi di bawah ini membantu untuk mengedit dan memformat teks dalam
halaman web.

Gambar 1.10 Tampilan Text Bar

 Keterangan:
(1). Font Tag Editor: Ketika anda memiliki font spesial yang anda buat untuk
digunakan atau dalam Cascading Style Sheet, anda bisa mengedit tag dengan
mengklik ikon ini.
(2). Bold: Menebalkan teks yang anda pilih
(3). Italics: Memiringkan teks yang anda pilih.
(4). Strong: Seperti Bold hanya digunakan dalam HTML yang berbeda.
(5). Emphasis: Sama seperti “Italic,” hanya “Emphasis” digunakan untuk HTML
tag yang berbeda ().
(6). Paragraph: menempatkan ruang antar blocks teks untuk membuat paragraph.
(7). Block Quote: Pilih teks yang diinginkan, suatu teks akan diberi tanda kutip
dari sumber lain, dan klik tombol ini untuk mengubah format ke block quote.
(8). Preformatted Text: Teks akan terlihat monospace atau fixewidth font.
(9). Heading 1: Memilih teks ke ukuran besar.
(10). Heading 2: Memilih teks ke ukuran sedang.
(11). Heading 3: Memilih teks ke ukuran kecil
(12). Unordered List: Membuat daftar bulet
(13). Ordered List: Membuat daftar angka
(14). List Item: Mengijinkan anda untuk mengedit teks dari daftar item
(15). Definition List: Format otomatis ke daftar untuk definisi
(16). Definition Term: Format otomatis memasukkan definisi.
(17). Definition Description: Otomatis format deskripsi
(18). Abbreviation: Memasukkan dalam arti penuh
(19). Acronym: Memasukkan nama panjang dari acronim

d). Frames
Gunakan menu ini untuk mempermudah memformat frames

Gambar 1.11 Tampilan Frames Bar

Keterangan:
(1). Left Frame: Memasukkan frame pada sebelah kiri.
(2). Right Frame: Memasukkan frame pada sebelah kanan.
(3). Top Frame: Memasukkan frame di atas.
(4). Bottom Frame: Memasukkan frame disebelah bawah.
(5). Bottom and Nested Left Frame: Memasukkan frame utama di bawah, dan
sebagian kecil dikiri.
(6). Bottom and Nested Right Frame: Memasukkan frame utama di bawah, dan
sebagian kecil di bawah.
(7). Left and Nested Bottom Frame: Memasukkan frame utama disebelah kiri,
dan sebagian frame di bawah.
(8). Right and Nested Bottom Frame: Memasukkan frame disebelah kanan, dan
sebagian frame di bawah.
(9). Top and Bottom Frames: Memasukan fram diatas dan di bawah.
(10). Left and Nested Top Frame: Memasukkan frame utama disebelah kiri dan
sebagian diatas.
(11). Right and Nested Top Frame: Memasukkan frame utama disebelah kanan,
dan frame lainnya disebelah bawah.
(12). Top and Nested Left Frame: Memasukkan frame utama diatas, dan frame
lainnya disebelah kiri.
(13). Top and Nested Right Frame: Memasukkan frame utama diatas, dan frame
lainnya disebelah kanan

e). Forms
Agar halaman web lebih interaktif, anda bisa memasukkan element form.

Gambar 1.12 Tampilan Forms Bar

Keterangan:
(1). Form: Membuat area baru pada halaman web untuk form
(2). Text Field: Membuat kotak teks untuk user untuk memasukkan data dalam
halaman web
(3). Hidden Field: Bidang yang tersembunyi mengumpulkan informasi tentang
pengunjung lokasi. Informasi menyimpan bidang dikembalikan kepada
server ketika format disampaikan.
(4). Textarea: Sama seperti teks field, tapi diijinkan lebih dari satu garis teks
untuk dimasukkan.
(5). Checkbox: Checkbox mengijinkan users untuk memilih pilihan dari list users
bisa memilih lebih dari satu checkbox.
(6). Radio Button: radio button mengijinkan user untuk memilih satu pilihan dari
daftar.
(7). Radio Group: Memasukkan lebih dari satu radio button pada daftar.
(8). List/Menu: Membuat menu panah bawah
(9). Jump Menu: Membuat jump menu. Jump menu membawa users ke lokasi
yang berbeda tergantung apa yang dipilih dalam menu.
(10). Image Field: Memasukkan image ke field
(11). File Field: Membuat file dalam field yang mana akan upload.
(12). Button: Ketika user memasukkan data ke form dan field, harus disampaikan
melalui tombol. Tool ini memasukkan tombol pada halaman.
(13). Label: Membuat label untuk field.
(14). Fieldset: membuat tag untuk elemen group form.

f). Characters
Beberapa simbol umum dan karakter terdapat pada menu ini

Gambar 1.13 Tampilan Characters Bar

Keterangan:
(1). Line Break: Membuat ruang antar baris.
(2). Non-breaking Space: Membuat ruang antar huruf dan kata.
(3). Left Quote: Membuat tanda kutip kiri.
(4). Right Quote: Membuat tanda kutip kanan.
(5). Em Dash: Memasukkan dash panjang ke halaman.
(6). Pound: Memasukkan simbol poundsterling.
(7). Euro: Memasukkan simbol mata uang Euro.
(8). Yen: Memasukkan simbol mata uang Yen Jepang.
(9). Copyright: Memasukkan simbol copyright
(10). Registered Trademark: Memasukkan simbol registered trademark.
(11). Trademark: Memasukkan simbol trademark
(12). Other Characters: Memilih dari tambahan set simbol untuk

3. Rangkuman
a Software desain web merupakan perangkat lunak yang berguna untuk
membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
statis maupun dinamis.
b Software desain web yang popular saat ini yaitu: Macromedia
Dreamweaver, Macromedia fireworks, Microsoft Frontpage.
c Menjalankan Macromedia Dreamweaver MX dapat melalui tombol Start
dan pada ikon Dreamweaver pada desktop.
d Bagian-bagian lembar kerja Dreamweaver meliputi: Baris Menu, Insert Bar,
Document Window, Document Toolbar, Panel Groups, Tag Selector,
Property Inspector, dan Files Panel.
e Baris menu terdiri dari : file, edit, view, insert, modify, text, command, site,
window, dan help.
f Insert bar terdiri dari beberapa kategori yaitu: common, layout, form, text,
HTML, server code, application, flash element, dan favourite.

4. Tes objektif
Pilihlah salah satu jawaban yang paling benar!
1. Langkah-langkah yang digunakan untuk menjalankan Macromedia
Dreamweaver MX adalah ...
a. Start -> All Program -> Macromedia Flash -> Dreamweaver MX 2004
b. Start -> All Program -> Macromedia -> Dreamweaver MX
c. Start -> All Program -> Macromedia -> Macromedia Flash
d. Start -> All Program -> Macromedia Flash -> Macromedia Flash
e. Start -> All Program -> Macromedia -> Macromedia Extension Manager
2. Bagian dari lembar kerja Dreamweaver yang digunakan untuk menampilkan
dokumen dan menyisipkan berbagai objek web adalah ...
a. Document window
b. Document toolbar
 c. Insert bar
d. Property inspector
e. Panel Group
3. Bagian dari lembar kerja Dreamweaver yang digunakan untuk mengubah
berbagai property dari objek-objek web seperti teks, gambar, tabel dan lain
sebagainya yaitu...
a. Document window
b. Document toolbar
c. Insert bar
d. Property inspector
e. Panel Group

4.
Perhatikan gambar diatas!
Apa fungsi ikon yang ditunjukkan dengan no 6?
a. menyisipkan tabel
b. menyisipkan gambar
c. menyisipkan hyperlink
d. menyisipkan flash text
e. menyisipkan form

5.
Perhatikan gambar diatas!
Ikon yang digunakan untuk memformat teks cetak tebal ditunjukan dengan no?
a. 1
b. 2
c. 3
d. 4
e. 5
5. Tugas 1
1. Jalankan program Macromedia Dreamweaver di komputer, dan printscreen
langkah-langkahnya.

6. Kunci Jawaban Tes Objektif

1. B
2. A
3. D
4. B
5. B

7. Daftar Pustaka

Departemen Penelitian dan pengembangan, 2004. Seri Panduan Desain web

Macromedia Dreamweaver MX 2004. Yogyakarta: Andi Offset
Departemen Penelitian dan pengembangan, 2005. Mahir Dalam 7 Hari
Macromedia Dreamweaver MX 2004. Yogyakarta: Andi Offset
Syarif, Arry Maulana, 2003. Desain Grafis dan Web dengan Macromedia
Fireworks MX. Jakarta: PT. Elex Media Komputindo
B. Kegiatan Belajar 2
Mengelola Dokumen Desain web
1. Tujuan
Setelah mempelajari kegiatan belajar 1 diharapkan peserta didik mampu: (1).
Mengelola dokumen desain web yang meliputi: membuat dokumen, menyimpan
dokumen, menyimpan dokumen dengan nama lain, membuka dokumen; (2).
Mengatur property halaman web

2. Uraian Materi
a. Mengelola File Dokumen Web
Pengelolaan file halaman web di sini dimaksudkan sebagai pemrosesan dasar
sebuah file yang nantinya akan menjadi halaman web. Pengelolaan file ini
meliputi: pembuatan file baru (create new), penyimpanan (save) dan penyimpanan
dengan nama lain (save as), membuka dokumen (open). Dalam Macromedia
Dreamweaver disediakan fasilitas pendefinisian site, yang akan memudahkan
pengorganisasian halaman-halaman web sesuai dengan situsnya.
Terdapat 2 cara pendefinisian site, yaitu Basic dan Advance. Pilihan Basic
memberikan kemudahan dalam menyiapkan situs, pilihan Basic inilah yang akan
digunakan dalam modul ini. Langkah pendefinisian site pada pilihan Basic adalah
sebagai berikut:
1). Pilih Site  Manage Sites

Gambar 1.14 Tampilan Kotak Dialog Manage Sites

 Pada kotak dialog manage sites ini, untuk membuat sebuah situs baru,
dapat memlih tombol New sehingga tampil dua pilihan menu melayang yaitu
Site dan FTP & RDS Server. Jika memilih Site maka akan bekerja dengan
menggunakan situs lokal. Dan apabila memilih FTP& RDS Server maka
akan bekerja dengan menggunakan FTP . Untuk membuat situs lokal maka
pilihlah Site.
Selanjutnya akan tampil Kotak Dialog Site Definition seperti gambar di
bawah ini:

Gambar 1.15 Site Definition Langkah Menuliskan Nama Site

Pada halaman ini, Anda diminta untuk memasukkan nama untuk situs
yang akan dibuat pada kotak teks yang telah disediakan. Nama ini berfungsi
untuk identifikasi situs tersebut. Sebagai contoh, ketikkan “ My_Site”

2). Klik Next untuk masuk ke kotak dialog berikutnya

Pada kotak dialog selanjutnya, Anda diminta untuk memilih tipe dokumen
tempat Anda bekerja nanti. Perhatikan Gambar 15. Jika Anda pilih No Anda
akan memiliki situs statis tanpa memiliki halaman dinamis. Dan pilih Yes,
jika Anda memilih dokumen dinamis. Contoh dokumen dinamis antara lain
adalah: Macromedia ColdFusion, Microsoft Active server Pages (ASP),
 Microsoft ASP.NET, Sun Java server Pages (JSP) atau Hypertext
Preprocessor (PHP).

Gambar 1.16. Tampilan Site Definition Langkah Kedua

3). Klik Next untuk melanjutkan ke langkah berikutnya

Gambar 1.17 Site Definition Langkah ke tiga

Anda dapat memilih pilihan yang pertama Edit local copies on my machine,
then upload to server when ready (recommended). Setelah itu tentukan
tempat penyimpanan file pada harddisk dengan mengetikkan folder/directori
pada bagian kotak teks yang telah disediakan, atau dengan mengklik bagian
ikon folder dibagian kanan kotak teks sehingga akan tampil kotak dialog
 Choose Local Root Folder. Tentukan drive yang Anda inginkan, seperti
Gambar 17, kemudian klik tombol Select.

Gambar 1.18 Tampilan Choose Local Root Folder

4). Selanjutnya tekan tombol Next untuk menuju ke kotak dialog berikutnya. Pada
bagian tersebut Anda diminta untuk menentukan web server, dan apabila Anda
menggunakan situs lokal dan belum terkoneksi dengan web server, pilih
Local/Network.

Gambar 1.19 Site Definition langkah keempat

5). Kllik Next untuk menuju langkah berikutnya.
Pada kotak dialog pada Gambar 19, ditampilkan ringkasan dari setting yang
telah Anda buat. Klik tombol Done untuk mengakhiri proses.

Gambar 1. 20 Site Definition langkah kelima

Gambar 1. 21 Tampilan Situs My_Site pada Files Panel

b. Membuat Dokumen Baru

Membuat dokumen baru dilakukan dengan : Klik menu File  New,atau
dapat juga dengan menekan kombinasi tombol Ctrl + N dan akan tampil kotak
dialog New Document:
 Gambar 1. 22 Tampilan Kotak Dialog New Documents

Untuk membuat dokumen HTML, pilih tab General pada kategori Basic Page
dan option HTML, kemudian klik tombol create. Maka pada Document Window
Dreamweaver akan tampil seperti gambar di bawah ini:

Property Inspector

Gambar 1.23 Tampilan Halaman Kerja Dreamweaver

Pada gambar diatas diberikan contoh pembuatan halaman yang berisi teks.
Pengaturan format teks yang ditampilkan dalam document window ini terdapat
pada Property Inspector Text yang terletak di bagian bawah document window.
c. Menyimpan Dokumen
Untuk menyimpan dokumen baru, klik File kemudian klik Save seperti gambar
di bawah ini :

Gambar 1.24 Tampilan Langkah Menyimpan Dokumen

Kemudian akan muncul kotak dialog Save As, dan tentukan letak folder
tempat menyimpan halaman web tersebut seperti gambar di bawah ini:.

Gambar 1.25 Tampilan Kotak Dialog Save As

Agar document yang telah dibuat, dapat ditampilkan (diujicoba) pada web
browser, simpan document tersebut menjadi dokumen HTML dengan nama file
index.html. Kemudian klik kanan nama file tersebut pada Files Panel, pilih menu
Preview in browser. Maka file index.html tersebut akan tampil di browser seperti
gambar berikut :

Gambar 1.26 Tampilan Halaman Web di Browser

d. Membuka Dokumen
Untuk membuka kembali halaman web yang telah disimpan dengan cara pilih
menu File kemudian klik Open, seperti gambar di bawah ini:

Gambar 1.27 Tampilan Langkah Membuka Dokumen

Kemudian akan muncul kotak dialog Open. Pilih folder tempat menyimpan
halaman web, dan pilih file yang akan dibuka kemudian klik tombol Open.
Seperti gambar di bawah ini:
 Gambar 1.28 Tampilan Kotak Dialog Open

e. Menyimpan Dengan Nama Lain

Apabila ingin menyimpan halaman web dengan nama lain, yaitu dengan cari
pilih menu File kemudian pilih Save As seperti gambar di bawah ini :

Gambar 1.29 Tampilan Langkah Save As

 Kemudian akan muncul Kotak Dialog Save As, dan simpan halaman web
tersebut dengan nama lain kemudian tekan tombol Save, seperti gambar di bawah
ini:

Gambar 1.30 Tampilan Kotak Dialog Save As

Halaman web tersebut telah disimpan dengan nama lain, yaitu

”halaman_pertama.html”.

f. Mengatur Property Halaman

Setiap proses disain dan pembuatan halaman web, kita harus mengatur
properti halaman web yang akan dibuat tersebut melalui Page Properties. Properti
halaman ini akan menentukan bagus tidaknya disain yang dihasilkan. Melalui
Page Properties ini kita dapat mengatur judul halaman, warna latar belakang,
gambar halaman, warna teks, link serta margin halaman web. Semua ini
merupakan atribut dasar yang harus diperhatikan dalam pembuatan halaman web.
Untuk menampilkan kotak dialog page properties, dapat dilakukan dengan
cara sebagai berikut: Pilih menu Modify  Page Properties, atau gunakan
kombinasi tombol Ctrs + J.
 Kotak dialog Page Properties pada Dreamweaver MX 2004 terbagi dalam 5
kategori yaitu :
a). Appearance
Pada bagian ini, dapat mengatur jenis font, style, ukuran font, warna font,
warna atau gambar untuk latar belakang, serta ukuran margin halaman
b). Links
Pada bagian ini dapat menentukan jenis dan ukuran font untuk teks link,
mengubah warna teks untuk link yang dikunjungi, mengubah warna untuk
teks rollover, mengubah warna untuk teks link yang sedang aktif, serta
menentukan garis bawah pada teks link.
c). Headings
Pada kategori ini dapat menentukan sendiri style yang digunakan untuk teks
naskah
d). Title
Pada bagian ini dapat menentukan judul halaman web pada bagian Title
e). Tracing Image
Jika ingin menampilkan tampilan gambar sementara pada latar belakang
dapat diatur pada bagian ini.

Gambar 1.31 Tampilan Page Properties

Keterangan :
 Page Font: digunakan untuk menentukan jenis huruf halaman web
 Size : digunakan untuk menentukan ukuran huruf
 Text color: digunakan untuk menentukan warna teks
 Background color: menentukan warna latar belakang halaman.
 Background image : definisi file gambar yang hendak dijadikan latar
belakang halaman.
 Left margin : menentukan nilai margin kiri halaman web.
 Top margin : menentukan nilai margin atas halaman web.
 Margin width : menentukan nilai lebar margin halaman web.
 Margin height : menentukan nilai tinggi margin halaman web.

g. Menambahkan Judul Halaman Web

Title digunakan untuk memberikan judul halaman web. Selain melalui kotak
dialog Page properties, juga dapat memberikan judul untuk halaman web dengan
menggunakan salah satu perintah di bawah ini:
Pada bagian Document bar, ketik judul halaman web pada kotak Title

Gambar 1.32 Tampilan Document Toolbar

h. Mengisi Latar Belakang dengan Gambar

Background Image digunakan untuk mengisi latar belakang halaman web
dengan sebuah gambar. Gambar sebagai latar belakang ini dapat memperindah
tampilan halaman web, memberikan kesan elegan pada halaman web tersebut.
File gambar yang digunakan untuk keperluan Background image adalah file
gambar berekstensi gif, jpg, dan png. Langkah-langkah untuk mempergunakan
file ambar sebagai latar belakang halaman web adalah sebagai berikut:
(1). Klik kanan pada lembar kerja Document window. Pada daftar menu yang
tampil pilih Page properties; atau
(2). Pada Property Inspector, tekan tombol Page Properties
(3). Pada kotak dialog Page Properties, klik tombol Browse pada bagian
Background Image. Pililh file gambar yang akan dijadikan latar belakang
halaman web.
 Nama file gambar

Gambar 1.33 Tampilan Kotak Dialog Page Properties

Gambar 1.34 Tampilan Halaman Web dengan Background Image

a) Mengisi Latar Belakang dengan Warna

Pilihan background pada kotak dialog Page properties juga dapat diisi dengan
warna. Langkah-langkah yang digunakan untuk mengganti background halaman
web dengan warna adalah sebagai berikut:
(1). Pada kotak dialog Page Properties, klik dropdown pada bagian background
seperti gambar di bawah ini:
 Gambar 1.35 Tampilan Kotak Dialog Page Properties

Gambar 1.36. Tampilan Halaman Web dengan Background Warna

3. Rangkuman
Pengelolaan file ini meliputi : pembuatan file baru (create new), penyimpanan
(save) dan penyimpanan dengan nama lain (save as), membuka dokumen (open).
1. Membuat dokumen dapat melalui menu File  New, atau melalui kombinasi
tombol keyboard Ctrl+N
2. Menyipan Dokumen melalui menu File  Save, atau melalui kombinasi
tombol keyboard Ctrl+S
3. Menyimpan dengan nama lain melalui menu File  Save As,
4.Membuka dokumen dapat dilakukan melalui menu File  Open, atau
kombinasi tombol keyboard Ctrl+O
Mengubah property halaman web dapat melalui page properties yang ada pada
Property Inspector.
1. Menambahkan judul halaman melalui Title pada Toolbar document, atau pada
Title pada Page Properties
2. Mengisi latar belakang dengan gambar dapat dilakukan melalui Page properties
pada bagian Background Image
3. Mengisi latar belakang dengan warna dapat dilakukan melalui Page properties
pada bagian Background Color

4. Tes Objektif
Pilihlah salah satu jawaban yang paling benar!
1.

Perhatikan gambar di atas!

Bagian yang digunakan untuk menyisipkan judul halaman web ditunjukkan
no...
a. 1
b. 2
c. 3
d. 4
e. 5
2. File gambar apa saja yang dapat digunakan sebagai background halaman web ?
a. pdf, png, jpg
b. png, jpg, doc
c. png, jpg, gif
 d. gif, xls, pdf
e. xls, doc, pdf
3. Bagian yang digunakan untuk mengisi latar belakang dengan gambar adalah...
a. Text Color
b. Background color
c. Background image
d. Insert Image
e. Tracing image
4. Bagian yang digunakan untuk mengisi latar belakang dengan warna adalah...
a. Text Color
b. Background color
c. Background image
d. Insert Image
e. Tracing image
5. Langkah-langkah yang digunakan untuk menyimpan dokumen dengan nama
lain yaitu ...
a. File -> Save
b. File -> Undo
c. File -> New
d. File -> Save As
e. File -> Redo

5. Tugas
1. Buatlah sebuah dokumen baru, lakukan pengaturan sebagai berikut:
a. Beri judul halaman, misalnya: Halaman Web Pertama
b. Isi latar belakang dengan warna
2. Buatlah sebuah dokumen baru, lakukan pengaturan sebagai berikut:
a. Beri judul halaman, misalnya: My Web Site
b. Isi latar belakang dengan gambar
6. Kunci Jawaban Tes Objektif
1. D
2. C
3. C
4. B
5. D

7. Daftar Pustaka
Departemen Penelitian dan pengembangan, 2004. Seri Panduan Desain web
Macromedia Dreamweaver MX 2004. Yogyakarta: Andi Offset
Departemen Penelitian dan pengembangan, 2005. Mahir Dalam 7 Hari
Macromedia Dreamweaver MX 2004. Yogyakarta: Andi Offset
Syarif, Arry Maulana, 2003. Desain Grafis dan Web dengan Macromedia
Fireworks MX. Jakarta: PT Elex Media Komputindo