cara mengoperasikan software web design

BAB I

PENDAHULUAN

A. DESKRIPSI JUDUL

Mengoperasikan Software Web Design merupakan modul teori dan atau praktikum yang membahas tentang pengoperasian software Web Design. Modul ini terdiri dari 3 (tiga) kegiatan belajar. Kegiatan Belajar 1 berisi tentang pengenalan software web design. Kegiatan Belajar 2 berisi tentang dasar-dasar HTML dan pada Kegiatan Belajar 3 berisi tentang pengoperasian Macromedia Dreamweaver untuk membuat halaman web.

Setelah menguasai modul ini diharapkan peserta diklat mampu mengoperasikan dan menggunakan software web design untuk melakukan desain dan pembuatan halaman-halaman web. Modul ini terkait dengan modul lain yang membahas tentang pengoperasian periferal web dan modul tentang Entry Data [Web] dengan menggunakan Image Scanner (Level 2).

B. PRASYARAT

Kemampuan awal yang dipersyaratkan untuk mempelajari modul ini adalah :

Peserta diklat telah lulus modul/materi diklat Mengoperasikan Periferal Web.
Peserta diklat telah lulus modul/materi diklat Melakukan Entry Data [Web] dengan menggunakan Image Scanner (Level 2).
Peserta diklat memiliki dan memahami pengetahuan tentang objek gambar dan karakteristiknya, serta komposisi gambar dan warna.
Peserta diklat memiliki dan memahami pengetahuan tentang Free-hand drawing.

C. PETUNJUK PENGGUNAAN MODUL

1. Petunjuk Bagi Peserta diklat

Peserta diklat diharapkan dapat berperan aktif dan berinteraksi dengan sumber belajar yang mendukungnya, karena itu harus memperhatikan hal-hal sebagai berikut :

a. Langkah-langkah belajar yang ditempuh :

1) Memahami bagaimana menguasai pengoperasian periferal web dengan baik.

2) Memahami bagaimana melakukan entry data Web dengan menggunakan Image Scanner.

3) Membaca dengan seksama uraian materi pada setiap kegiatan belajar.

4) Mencermati langkah – langkah kerja pada setiap kegiatan belajar sebelum mengerjakan dan bila belum jelas tanyakan pada instruktur.

5) Mengerti apakah telah benar – benar memahami modul ini.

b. Perlengkapan yang Harus Dipersiapkan

Guna menunjang keselamatan dan kelancaran tugas/pekerjaan yang harus dilakukan, maka persiapkanlah seluruh perlengkapan yang diperlukan, pelajarilah terlebih dahulu modul ini dan buku-buku yang menunjang.

c. Hasil Pelatihan

Peserta diklat mampu melakukan tugas pengoperasian software web design untuk membangun web site sesuai dengan kebutuhan.

2. Peran Guru

Guru yang akan mengajarkan modul ini hendaknya mempersiapkan diri sebaik-baiknya yaitu mencakup aspek strategi pemelajaran, penguasaan materi, pemilihan metode, alat bantu media pemelajaran dan perangkat evaluasi.

Guru harus menyiapkan rancangan strategi pemelajaran yang mampu mewujudkan peserta diklat terlibat aktif dalam proses pencapaian/penguasaan kompetensi yang telah diprogramkan. Penyusunan rancangan strategi pemelajaran mengacu pada kriteria unjuk kerja (KUK) pada setiap sub kompetensi yang ada dalam GBPP.

D. TUJUAN AKHIR

1. Peserta diklat mampu melakukan persiapan software web design untuk proses pembuatan sebuah web site.

2. Peserta diklat mampu mengenali objek-objek web dan tag-tag HTML di dalamnya.

3. Peserta diklat mampu melakukan kombinasi objek-objek web dan tag-tag HTML untuk membuat halaman-halaman web.

4. Peserta diklat mampu melakukan pengelolaan halaman-halaman web.

5. Peserta diklat mampu mengoperasikan software web design untuk membuat halaman-halaman web.

E. KOMPETENSI

Sub Kompetensi	Kriteria Unjuk Kerja	Lingkup Belajar	Materi Pokok Pemelajaran
Sub Kompetensi	Kriteria Unjuk Kerja	Lingkup Belajar	Sikap	Pengetahuan	Ketrampilan
1	2	3	4	5	6
1. Mempersiapkan software web (web design)	§ Software web design telah terinstalasi dan dapat ber-jalan normal § User manual software web design sudah disediakan dan dipahami § Perangkat komputer sudah dinyalakan, dengan sistem operasi dan persyaratan sesuai dengan Installation manual dan SOP yang berlaku. § Software web design dijalankan.	§ Pengenalan software web design	§ Mengamati proses aktifasi sistem operasi dan software web design dengan seksama	§ Menjelaskan fungsi software web design	§ Menyalakan komputer sesuai dengan Installation manual dan SOP § Menjalankan software web design sesuai prosedur. Contoh: Adobe ImageReady,Macromedia Dream-weaver, Macromedia Fireworks, Microsoft Frontpage
2. Mengenali tag-tag HTML, membuat, membuka, menyimpan file halaman web	§ Objek web dan tag-tag HTML dikenali berdasarkan user manual § Fitur pengelolaan file halaman web dapat digunakan, seperti: buat/ create/ new, simpan/save, buka/ open, simpan dengan nama lain/ save as. § Tag-tag HTML digunakan untuk membuat halaman web dengan kombinasi: text, image, link, table, layer, form, frame, dsb. § File halaman web disimpan dengan format: html.	§ Objek web § Fitur pengelolaan file halaman web § Tag-tag HTML § Teknik penyimpanan file gambar vektor	§ Mengenali objek web dengan tepat § Mengenali fitur pengelolaan file halaman web dengan tepat § Mengenali aplikasi tag-tag HTML dalam pembuatan halaman web § Mengamati proses penyimpanan file halaman web dengan seksama	§ Mengidentifikasi objek yang dipergunakan dalam pembuatan halaman web § Menjelaskan tujuan pengelolaan file halaman web § Mengidentifikasi fungsi tag-tag HTML dalam pembuatan halaman web § Menjelaskan maksud penyimpanan file gambar dengan meng-gunakan versi dan option atribut lain	§ Memilih objek yang akan dipergunakan dalam pembuatan halaman web dengan tepat § Menggunakan fitur pengelolaan file halaman web sesuai tujuannya § Menggunakan tag-tag HTML dalam pembuatan halaman web sederhana § Menyimpan file halaman web dengan menggunakan format html
3. Melakukan pembuatan halaman web dengan software web	§ Objek web, menu, dan inter-face yang disediakan software web beserta shortcut-nya dikenali berdasarkan user manual § Fitur pengelolaan file software web dapat digunakan, seperti: buat/ create/ new, simpan/ save, buka/open, simpan dengan nama lain/ save as. § Fasilitas siap pakai seperti wizard, libraries, atau template pada software web dimanfaatkan untuk pembuat-an web sederhana § Pembuatan web dinamik dengan software web § File halaman web dari software web disimpan dengan format: html, dhtml, xml, dsb.	§ Objek web, menu dan inter-face software web § Fitur pengelolaan file software web § Fasilitas wizard, libraries atau wizard § Teknik pembuatan web dinamik dengan software web § Teknik penyimpanan file halaman web dinamik	§ Mengenali objek web, menu dan interface dengan tepat § Mengenali fitur penge-lolaan file software web dengan tepat § Mencermati fasilitas wizard/libraries/ template halaman web sederhana § Mengamati proses pem-buatan halaman web dinamik dengan tekun § Mengamati proses pe-nyimpanan file halaman web dengan seksama	§ Mengidentifikasi objek web, menu dan interface software web § Menjelaskan tujuan pengelolaan file software web § Menjelaskan manfaat fasilitas wizard/libraries/ template halaman web sederhana § Menjelaskan tahapan proses pembuatan halaman web dinamik dengan software web § Menjelaskan motif pe-nyimpanan file halaman web dengan berbagai format	§ Menggunakan menu dan interface software web secara tepat § Menggunakan fitur pengelolaan file halaman web sesuai tujuannya § Membuat halaman web sederhana dengan fasilitas wizard/libraries/ template § Membuat halaman web dinamik dengan software web § Menyimpan file halaman web dinamik dengan menggunakan format dhtml

F. CEK KEMAMPUAN

Isilah cek list (√) seperti pada tabel di bawah ini dengan sikap jujur dan dapat dipertanggung jawabkan untuk mengetahui kemampuan awal yang telah dimiliki.

Sub Kompetensi	Pernyataan	Saya dapat Melakukan Pekerjaan ini dengan Kompeten		Bila Jawaban “Ya” Kerjakan
Sub Kompetensi	Pernyataan	Ya	Tidak	Bila Jawaban “Ya” Kerjakan
1. Mempersiapkan software Web Design.	1. Mengetahui berbagai macam software web design beserta kekurangan dan kelebihannya.			Tes Formatif 1
1. Mempersiapkan software Web Design.	2. Mampu mempersiapkan dan memahami fitur-fitur dalam software web design.			Tes Formatif 1
2. Mengenali tag-tag HTML, membuat, membuka, menyimpan file halaman web.	1. Mengenali penggunaan tag-tag HTML			Tes Formatif 2
	2. Mengerti fitur-fitur software web design dalam fungsinya untuk mengelola halaman web.			Tes Formatif 2
	3. Mampu membuat halaman-halaman web HTML dengan memadukan tag-tag HTML dan objek-objek web lainnya.			Tes Formatif 2
3. Melakukan pembuatan halaman web dengan software web design.	1. Mampu membuat objek-objek halaman web, seperti : menu dan interface web.			Tes Formatif 3
	2. Memanfaatkan fasilitas siap pakai dalam software web design untuk membuat halaman sederhana.			Tes Formatif 3
	3. Mampu membuat halaman-halaman web dengan berbagai format.			Tes Formatif 3

Apabila anda menjawab TIDAK pada salah satu pernyataan di atas, maka pelajarilah modul ini.

BAB II

PEMELAJARAN

A. RENCANA PEMELAJARAN

Kompetensi : Mengoperasikan Software Web Design.

Jenis Kegiatan	Tanggal	Waktu	Tempat Belajar	Alasan Perubahan	Tanda Tangan Guru
Mempersiapkan software Web Design.
Mengenali tag-tag HTML, membuat, membuka, menyimpan file halaman web.
Melakukan pembuatan halaman web dengan software web design.

B. KEGIATAN BELAJAR

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.

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

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

e. 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!

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

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

7) Setelah diteliti matikan komputer dan rapikan seperti semula.

2. Kegiatan Belajar 2: Dasar-dasar HTML

a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat dapat mengenali obyek-obyek web dan tag-tag HTML dalam pembuatan halaman-halaman web.

2) Peserta diklat dapat mengenali fitur-fitur pengelolaan file halaman web.

3) Peserta diklat dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk membangun halaman web yang disimpan dalam format HTML.

b. Uraian Materi 2

1) HTML

HTML yang merupakan kepanjangan dari Hyper Text MarkUp Language memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

File-file HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad.

Struktur dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut :

Gambar 3. Struktur Dasar HTML.

Keterangan :

a) <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.

b) <head> </head> : mendefinisikan head dalam sebuah file HTML.

c) <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser.

d) <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.

2) Format Teks Dasar dalam HTML

a) Heading, HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal daripada teks normal.

<h1>heading level 1</h1>, <h2>heading level 2</h2>dst.

Gambar 4. Tag Heading.

b) Paragraf, setiap ada paragraf baru diawali dengan <p>

<p>paragraf satu</p>, dst.

c) List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi.

· Tidak bernomor (unordered list) :

<ul>

<li>satu

<li>dua

<li>tiga

</ul>

Gambar 5. Tampilan dari Tag Unordered List

· Bernomor (ordered list) :

<ol>

<li>satu

<li>dua

<li>tiga

</ol>

Gambar 6. Tampilan dari Tag Ordered List

· Definisi (definition list) :

<dl>

<dt>

<dd>

<dt>

<dd>

</dl>

Gambar 7. Tampilan dari Tag Definition List

d) Performatted Text, dalam HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh. Agar format tampilan sesuai dengan sourcenya, maka diperlukan tag <pre>.

<pre>

Nama : Saya

Tanggal : Lahir

</pre>

Gambar 8. Tampilan dari Tag Preformatted Text

e) Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>.

<p>paragraf satu</p>

<p>paragraf masuk ke dalam</p>

</blockquote>

Gambar 9. Tampilan dari Tag Blockquote

f) Ganti baris (line break), untuk menulis alamat surat dengan baris-baris pendek, tidak bagus jika menggunakan tag <p>(spasi terlalu lebar). Maka digunakan tag <br> untuk ganti baris.

Karangmalang.<br>

Yogyakarta.<br>

55281

g) Garis datar (horizontal rule), untuk membuat garis horizontal yang digunakan untuk membatasi bagian-bagian digunakan tag <hr>. Yang dapat diikuti dengan penentuan ukurannya dengan atribut size dan width.

h) Memformat karakter,

<b> atau <strong> untuk membuat teks Bold.

<i> atau <em> untuk membuat teks Italic.

<tt> atau <code> untuk membuat teks typewriter.

Gambar 10. Hasil Format Karakter

3) Dasar Link HTML

1) Relative dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut sebagai relative link. Misal :

a href=”Harga/index.html”>Daftar Harga</a>

Alamat (URL) dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link, disebut link absolute :

a href=”http://gmail.google.com”>E-mail Google</a>

2) Link ke suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di dua.html, caranya adalah :

Pada dokumen satu.html, dituliskan :

Pada bagian yang dituju, dituliskan :

3) Link ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas :

Pada dokumen satu.html, dituliskan :

Pada bagian yang dituju, dituliskan :

4) Mailto, link yang langsung menuju ke alamat e-mail.

Kirim E-mail</a>

4) Menyisipkan Gambar

1) Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.

<img src=”foto.fpg” height=”200” width=”100”.

2) Pelurusan gambar, posisi gambar terhadap teks sebelum dan sesudahnya bisa fleksibel, misalnya lurus atas :

3) Teks alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan gambar tersebut.

4) Atribut border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.

5) Gambar sebagai hyperlink.

6) Gambar sebagai background

7) Background warna

5) Membuat Tabel

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Berikut contoh untuk membuat sebuah tabel yang terdiri dari 2 kolom dan 2 baris.

Gambar 11. Tag HTML untuk Membuat Tabel

Keterangan :

a) <table> </table> : mendefinisikan bahwa teks di dalamnya merupakan tag-tag pembuatan tabel.

b) <table border=2> : mendefinisikan penentuan ada atau tidaknya serta ukuran border pada tabel.

c) <tr> </tr> : table row, mendefinisikan bahwa teks di dalamnya akan berada dalam satu baris. Banyaknya tag <tr></tr> menunjukkan banyaknya baris pada suatu tabel.

d) <td> </td> : table division, mendefinisikan isi dari suatu kolom, tag ini selalu berada di dalam tag <tr></tr>. Banyaknya tag <td></td> diantara tag </tr></tr> menunjukkan banyaknya kolom dalam suatu baris.

Gambar 12. Hasil Pembuatan Tabel

6) Membuat Frame

Frame HTML digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya merupakan satu halaman HTML yang terpisah. Frame bernmanfaat saat suatu halaman HTML pada suatu bagiannya gerganti-ganti isi, sedangkan pada bagian lainnya relatif tetap, sehingga lebih menghemat bandwidth internet.

Berikut contoh pembuatan frame :

Gambar 13. Tag HTML untuk Membuat Frame

Keterangan :

a) Menentukan banyaknya baris dan tinggi masing-masing frame. Di sini dibuat dua baris dengan tinggi 80 pixel untuk baris pertama, dan tinggi baris kedua memanfaatkan sisa ruang pada web browser (dinyatakan dengan tanda *).

b) Memberikan nama pada frame pertama yang telah dibuat dan menentukan nama file yang akan ditampilkan dalam frame tersebut.

c) Membagi baris kedua menjadi 2 kolom dengan ukuran kolom kiri 150 pixel dan kolom kanan memanfaatkan sisanya.

d) Memberikan nama frame paling kiri pada baris kedua dengan nama left_menu dan menentukan file menu.html menjadi isi pada frame ini. Frame sebelah kanan dinamai main_page dengan file isi.html sebagai isinya.

e) Mengakhiri pembuatan frame.

Gambar 14. Tampilan Halaman Web dengan Frame

7) Membuat Form

Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna. Macam-macam form :

a) Input, dengan tipe : text, password, checkbox, radio button, reset, submit dan hidden.

b) Textarea.

c) Select.

Berikut ini contoh tag pembuatan form :

Gambar 15. Tag HTML untuk Pembuatan Form

Gambar 16. Tampilan Macam-Macam Form

c. Rangkuman 2

1) Pengenalan terhadap tag-tag HTML belum memerlukan web editor (software web design) seperti Macromedia Dreamweaver, MX tetapi cukup menggunakan teks editor (misalkan : Notepad).

2) Dasar-dasar HTML mencakup struktur dasar dokumen HTML dan format teks dasar HTML.

d. Tugas 2

1) Ketiklah lagi tag-tag HTML pada masing-masing contoh pada uraian materi di atas dengan menggunakan Notepad. Kemudian simpan menjadi file HTML (dengan ekstensi *.html) dan taruh di dalam folder yang sama. Jalankan dokumen – dokumen HTML tersebut pada browser dan amati!

2) Cari sumber bacaan maupun buku referensi yang menjelaskan secara detail tentang dasar-dasar HTML.

e. Tes Formatif 2

1) Apa yang anda ketahui tentang HTML dan web editor?

Buatlah halaman HTML untuk menampilkan formulir isian biodata anggota, seperti gambar 17 menggunakan editor Notepad.

Gambar 17. Form Isian Biodata Anggota

f. Kunci Jawaban Formatif 2

1) HTML adalah Hyper Text MarkUp Language, yang berfungsi memformat dokumen teks biasa untuk bisa digunakan pada WWW.

Web editor dapat diartikan sama dengan pengertian dari software web design, yaitu sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain dan mengedit halaman-halaman web, baik yang bersifat statis maupun dinamis.

2) Dokumen HTML-nya :

Gambar 18. Tag-tag HTML Halaman Isian Biodata

g. Lembar Kerja 2

Alat dan Bahan

PC (Personal Computer) yang telah dilengkapi dengan web browser dan editor teks Notepad.

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) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik di dekat komputer (magnet, handphone, dan sebagainya).

5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain game.

6) Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

1) Siapkanlah semua peralatan yang akan digunakan!

2) Periksa semua kabel penghubung pada PC.

3) Nyalakan PC dan jalankan program editor notepad dan web browser Internet Explorer.

4) Kerjakan Tugas 2 dan Tes Formatif 2 di atas.

5) Apabila menemui kesulitan dalam memahami materi yang ada, segera tanyakan denga instruktur.

6) Setelah selesai, matikan komputer dan rapikan seperti semula.

3. Kegiatan Belajar 3: Mengoperasikan Macromedia Dreamweaver

a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat mengenali penggunaan obyek web, menu dan interface yang disediakan Macromedia Dreamweaver MX untuk membuat halaman web.

2) Peserta diklat dapat memanfaatkan fasilitas siap pakai yang disediakan Macromedia Dreamweaver MX.

3) Peserta diklat dapat membuat halaman-halaman web dalam berbagai format.

b. Uraian Materi 3

Mendesain/membuat halaman web merupakan perpaduan seni, ilmu pengetahuan dan keterampilan. Situs web yang baik harus memiliki kesatuan desain, atau dapat juga dikatakan mempunyai kesamaan tema dalam halaman-halamannya. Terdapat beragam fasilitas yang disediakan oleh Dreamweaver MX untuk mewujudkan hal ini.

Macromedia Dreamweaver MX merupakan software web editor yang telah dilengkapi dengan fasilitas penyuntingan secara visual sehingga user dapat menambah desain dan fungsionalitas halaman web tanpa perlu menulis satu baris pun kode (tag) HTML. Sehingga pada bagian ini tidak akan dibahas tentang tag-tag HTML secara mendetail, karena pembuatan halaman web dibuat secara visual.

1) Pengelolaan File Halaman 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). 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. Untuk melakukan pendefinisian site, klik Define Site pada Files Panel.

Gambar 19. Definisi Nama Site

Langkah pertama pendefinisian site adalah menentukan nama site, yang kemudian akan diikuti dengan pemilihan tipe dokumen dinamis atau dokumen statis. Pada gambar 20 dipilih option yang menyatakan bahwa kita tidak menggunakan dokumen dinamis, sehingga tidak menggunakan teknologi server.

Gambar 20. Definisi Server yang Digunakan

Berikutnya akan ditampilkan kotak dialog untuk menentukan cara pengelolaan file, dalam Dreamweaver direkomendasikan agar file-file halaman web selalu disimpan terlebih dahulu dalam drive lokal.

Gambar 21. Definisi Lokasi File

Pada kotak dialog berikutnya, dilakukan penentuan web server yang digunakan. Untuk bekerja secara lokal, dipilih Local/Network yang kemudian diikuti dengan penentuan direktori lokal untuk menyimpan seluruh file halaman web yang dibuat.

Gambar 22. Definisi Web Server

Berikutnya akan ditanyakan apakah akan dilakukan testing ke web server atau tidak. Setelah proses pendefinisian site selesai akan ditampilkan ringkasan pendefinisian site, seperti gambar berikut ini :

Gambar 23. Ringkasan Pendefinisian Site

Gambar 24. Tampilan Situs Lokal dalam Files Panel

Hasil dari definisi site dapat dilihat pada Files Panel, dimana Files Panel telah menampilkan root folder lokal untuk situs pengoperasian_dreamweaver beserta daftar halaman-halaman web yang telah ada didalamnya (gambar 24).

2) 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 25. New Document

Untuk membuat dokumen HTML, pilih tab General pada category Basic Page dan option HTML, kemudian klik tombol create. Maka pada Document Window Dreamweaver akan tampil seperti gambar 26. Pada gambar 26 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.

Gambar 26. Untitled Document

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.

Gambar 27. Page Properties

Keterangan :

a) Title : Menentukan judul halaman web yang dibuat.

b) Background image : definisi file gambar yang hendak dijadikan latar belakang halaman.

c) Background : menentukan warna latar belakang halaman.

d) Text : menentukan warna teks.

e) Links : menentukan warna yang akan digunakan pada semua teks dan email link yang mengandung hyperlink.

f) Visited links : menentukan warna hyperlink yang pernah dikunjungi.

g) Active link : menentukan warna hyperlink yang sedang ditunjuk dengan pointer mouse.

h) Left margin : menentukan nilai margin kiri halaman web.

i) Top margin : menentukan nilai margin atas halaman web.

j) Margin width : menentukan nilai lebar margin halaman web.

k) Margin height : menentukan nilai tinggi margin halaman web.

l) Document encoding : menentukan jenis encode halaman web.

m) Tracing image : menentukan file gambar yang akan digunakan sebagai sarana bantu dalam mendisain halaman web. Tracing image hanya akan tampil dalam Document window dan tidak akan tampil pada browser.

n) Image transparancy : mengatur tingkat transparansi obyek gambar.

3) Menyimpan Dokumen

Untuk menyimpan dokumen baru, klik File kemudian klik Save, maka akan muncul kotak dialog Save As, dimana direktori default untuk menyimpan dokumen tersebut ditentukan pada root direktori web, sesuai pada definisi site sebelumnya.

Gambar 28. Save As

Agar document pada tampilan gambar 26, dapat ditampilkan (diujicoba) pada web browser, kita 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 29. Tampilan File index.html pada Browser

4) Menyisipkan Tabel dalam Dokumen

Sebelum mempelajari cara menyisipkan tabel ke dalam dokumen, terlebih dahulu harus disiapkan dokumen yang hendak disisipi tabel. Misalnya, kita gunakan file index.html yang telah dibuat sebelumnya. Jika file index.html ini telah ditutup, buka kembali file ini dengan klik File à Open à index.html, atau dapat pula dilakukan dengan klik double pada file index.html dalam Files Panel.

Kemudian yakinkan bahwa Document window file index.html aktif, selanjutnya pilih lokasi dalam dokumen index.html yang hendak disisipi tabel. Klik menu Insert à Table, atau dapat juga dengan menekan kombinasi tombol Ctrl+Alt+T pada keyboard, maka akan muncul kotak dialog :

Gambar 30. Insert Table

Keterangan :

a) Rows : menentukan banyaknya baris tabel.

b) Columns : menentukan banyaknya kolom tabel.

c) Width : menentukan ukuran lebar tabel beserta sataun ukuran yang digunakan, Percent atau Pixels.

d) Border : mengatur ketebalan border atau batas tabel.

e) Cell padding : mengatur jarak antara isi sel dengan batas tepi sel.

f) Cell spacing : mengatur jarak antarsel dalam tabel.

Jika parameter-parameter default pada kotak dialog Insert tabel diikuti (dengan meng-klik OK), maka pada document window akan tampil seperti gambar berikut :

Gambar 31. Tampilan Tabel yang Disisipkan

Tabel yang telah tampil dalam Document Window tersebut dapat diatur dan dimodifikasi lagi dengan menggunakan properti tabel pada Property Inspector yang terletak di bagian bawah Document Window, seperti yang terlihat pada gambar berikut ini :

Gambar 32. Property Inspector Tabel

Pengaturan dan modifikasi tabel melalui properti tabel tersebut antara lain berupa : mengubah ukuran tabel, mengubah jumlah baris dan kolom tabel, menentukan warna, perataan tabel dan pengaturan tabel lainnya. Untuk mengisikan teks (data) pada sel-sel dalam tabel, dilakukan dengan mengisikan langsung ke sel yang diinginkan pada Document window. Simpan perubahan yang telah dilakukan dengan klik menu File à Save, atau dengan kombinasi tombol Ctrl + S, kemudian preview file index.html yang telah disisipi tabel dalam web browser. Maka tampilan file index.html akan menjadi :

Gambar 33. Halaman index.html yang Disisipi Tabel

5) Menyisipkan Obyek

a) Menyisipkan gambar

Seperti halnya pada proses menyisipkan tabel, untuk menyisipkan gambar ke dalam document halaman web terlebih dulu pastikan kita berada pada Document window dan klik lokasi yang hendak disisipi gambar. Kemudian klik ikon image pada Insert bar, atau dapat juga dengan klik Insert à Image. Pilihan ini akan menampilkan kotak dialog Select Image Source (gambar 34).

Gambar 34. Menyisipkan Gambar

Melalui kotak dialog tersebut, kita memilih file gambar yang akan disisipkan, kemudian klik OK. Jika file gambar yang dipilih belum berada dalam direktori root, setelah klik OK akan muncul kotak dialog seperti gambar 35. Kotak dialog ini mengkonfirmasi agar file gambar yang disisipkan ikut disalin ke dalam direktori tempat file halaman web yang disisipi berada. Hal ini bertujuan untuk menghindari tidak ditampilkannya gambar saat halaman web dijalankan di browser.

Gambar 35. Kotak Dialog Penyalinan Gambar

b) Menyisipkan Link

Link adalah suatu obyek yang dapat berupa teks atau gambar yang dipakai dalam dokumen HTML untuk melompat dari satu dokumen ke dokumen atau tempat lain pada dokumen yang sama. Untuk menyisipkan link pada teks/gambar yang telah ada dalam document window yang harus dilakukan adalah meletakkan kursor pada teks/gambar tersebut, kemudian isi fiel Link pada Property Inspector dengan nama dokumen atau alamat URL yang akan dituju.

Gambar 36. Field Link pada Property Inspector

Selain langkah tersebut di atas, link juga dapat dibuat dengan klik kanan pada obyek yang akan disisipi link dan pilih menu Make Link (gambar 37) yang akan diikuti dengan munculnya kotak dialog seperti gambar 38.

Gambar 37. Menu Make Link pada Klik-Kanan Obyek

Gambar 38. Pemilihan File/URL yang Akan Di-link

6) Menyisipkan Frame

Frame merupakan sebuah teknologi yang dipakai untuk menggabungkan beberapa halaman web menjadi satu halaman yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian. Dalam penggunaan frame pada pembuatan halaman-halaman web, dikenal istilah frame dan frameset. Frameset adalah suatu frame induk yang dapat menampung beberapa frame di dalamnya dan dapat memiliki frameset sendiri. Sedangkan frame sendiri adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya.

Langkah-langkah menyisipkan frame :

a) Pastikan bahwa tidak ada dokumen yang sedang aktif.

b) Pilih menu File à New, pada kotak dialog New Document aktifkan tabulasi General, lalu pilih kategori Framesets hingga muncul tampilan seperti pada gambar 39.

c) Setelah memilih salah satu frame, klik Create sehingga frame yang dipilih tampil pada document window.

Gambar 39. Menyisipkan Frame

Mengatur properti frame

Untuk melakukan pengaturan sebuah frame, gunakan kombinasi tombol Alt + Klik pada frame yang diinginkan. Maka akan muncul Property Inspector Frame, seperti gambar berikut :

Gambar 40. Property Inspector Frame

Keterangan :

a) Frame Name : nama frame, berfungsi sebagai referensi script dan target hyperlink. Pemberian nama frame tidak boleh diawali dengan huruf, tanpa spasi dan tanpa tanda minus (-) dan titik (.).

b) Frame Source : untuk menentukan sumber dokumen frame.

c) 3D Borders : untuk mengatur border pada frame.

d) Frame border color : untuk mengatur warna pada border.

e) Disable frame resize : untuk mengatur diperbolehkan atau tidaknya perubahan ukuran frame oleh web browser.

f) Frame scrollbars : untuk menampilkan scroll (batang penggulung) pada frame.

g) Margin width in pixels : untuk mengatur batas kanan dan kiri margin.

h) Margin height in pixels : untuk mengatur jarak margin atas dan bawah pada frame.

Mengatur properti frameset.

Untuk mengatur properti frane set, sebelumnya aktifkan dahulu frame-setnya. Dapat langsung dilakukan dengan memilih pada Document window dengan meng-klik salah satu border frame-nyaatau dengan memilih border frame terluar pada panel frame. Selanjutnya pada Property Inspector akan tampil properti frameset seperti berikut ini :

Gambar 41. Property Inspector Frameset

Keterangan :

a) Border width in pixels : untuk mengatur lebar semua border pada frameset.

b) 3D Borders : untuk mengatur tampilan border frameset, apakah untuk ditampilkan atau disembunyikan.

c) Frameset color : untuk mengatur warna pada border frameset.

d) RowCol Selection : untuk memilih bagian kolom atau baris dengan klik bagian atas dan samping tampilan.

e) Row/column size : untuk mengatur tinggi baris atau lebar kolom yang dipilih.

f) RowCol size units : untuk mengatur ukuran lebar dan tinggi frame.

7) Menyisipkan Form

Untuk menyisipkan obyek form, terlebih dahulu harus disiapkan wadah yaitu form itu sendiri untuk menampung obyek form tersebut. Tujuannya adalah agar informasi yang dimasukkan ke dalam form itu nantinya dapat terkirim.

Beberapa obyek yang terdapat pada form antara lain adalah text field, image field, list box, checkbox, menu pop-up, filed password, button dan radio button. Berikut insert form yang terdapat pada Insert bar :

Gambar 42. Insert Form dalam Insert Bar

Langkah-langkah menyisipkan form :

a) Aktifkan tabular Form pada Insert bar, kemudian klik Form.

b) Pada document window akan muncul obyek form dengan tampilan, sebagai berikut :

Gambar 43. Tampilan Obyek Form

c) Pada Property Inspector akan tampil seperti pada gambar 44 :

Gambar 44. Property Inspector Form

Tampilan form dapat menjadi lebih rapi jika ditambahkan dengan tabel di dalam form sebagai tempat meletakkan obyek form. Tanpa menggunakan bantuan tabel, penataan dan pengaturan obyek form akan menjadi lebih sulit.

Menyisipkan Text Field.

Text field merupakan sarana untuk memasukkan teks ke dalam form. Text field menampung informasi yang berupa teks atau karakter lainnya, seperti nama, alamat e-mail, komentar dan lain sebagainya.

Terdapat 3 jenis tipe text field :

a) Single line, merupakan tipe default text field yang beruap kotak satu baris. Biasa digunakan untuk menampung nama & alamat e-mail.

Gambar 45. Single Line Text Field

b) Multi line, merupakan tipe text field yang menyediakan kotak teks dengan beberapa baris di dalamnya. Biasa dipergunakan untuk menampung data keterangan, komentar, saran dan lain sebagainya.

Gambar 46. Multi Line Text Field

c) Password, tipe text field yang dipergunakan untuk mengisikan password, biasa dipergunakan pada halaman web yang memerlukan pengamanan. Data yang dimasukkan pada text field ini akan ditampilkan dalam bentuk bintang-bintang.

Gambar 47. Password Text Field

Menyisipkan Text Area

Text area memiliki bentuk tampilan yang sama persis dengan multi line text field, sehingga dapat dikatakan bahwa text area merupakan nama lain dari multi line text field.

Untuk menyisiokan text area, klik tombol

pada tab Form dalam Insert bar.

Menyisipkan Checkbox

Checkbox adalah sebuah kotak yang disediakan bagi pengunjung halaman web untuk memilih informasi yang disediakan. Jumlah checkbox yang disisipkan dapat disesuaikan dengan kebutuhan. Checkbox memungkinkan pengguna halaman web untuk memilih obyek yang terseleksi.

Untuk menyisipkan checkbox, klik tombol

pada tab Form dalam Insert bar.

Gambar 48. Tampilan Checkbox pada Web Browser

Menyisipkan Radio Button

Radio button memiliki fungsi yang sama dengan checkbox, yaitu untuk menentukan pilihan dari suatu daftar pilihan. Hanya saja, pada radio button pengguna hanya dapat memilih satu pilihan saja.

Untuk menyisipkan radio button, klik tombol

pada tab Form dalam Insert bar.

Gambar 49. Tampilan Radio Button pada Web Browser

Menyisipkan Radio group

Radio group merupakan kumpulan dari beberapa radio button. Radio group memudahkan proses pembuatan daftar pilihan, karena tidak perlu menyisipkan radio button sebanyak daftar pilihan yang hendak dibuat, tetapi cukup dengan memasukkan nilai dan label dari radio button tersebut pada kotak dialog radio group.

Untuk menyisipkan radio group, klik tombol

pada tab Form dalam Insert bar. Selanjutnya akan tampil kotak dialog untuk melakukan setting parameter radio button (gambar 50).

Gambar 50. Kotak Dialog Radio Group

Gambar 51. Tampilan Radio Group pada Web Browser

Menyisipkan List dan Menu.

List dan Menu memungkinkan pemberian berbagai macam pilihan yang ditampilkan pada area yang ringkas untuk ditampilkan kepada pengunjung. List menyediakan scroll bar yang memungkinkan pengunjung melakukan navigasi pada keseluruhan item. Scrolling list memungkinkan penampilan banyak pilihan di dalam suatu area (spasi). Pengunjung dapat menggulung list yang ada dan memilih lebih dari satu pilihan. Seperti halnya pada checkbox.

Menu merupakan sebuah obyek yang digunakan untuk menampung beberapa pilihan dalam bentuk drop-down. Dalam menu. Pengunjung hanya dapat memilih satu pilihan saja, seperti pada radio button.

Untuk menyisipkan List/Menu, klik tombol

pada tab Form dalam Insert bar. Selanjutnya pada document window akan tampil seperti gambarberikut :

Gambar 52. List/Menu pada Document Window

Sedangkan pada Property Inspector, tampil sebagai berikut :

Gambar 53. Property Inspector List/Menu

Properti Height dan Selections hanya aktif pada tipe List, Height berfungsi untuk menentukan jumlah baris yang ditampilkan pada kotak teks. Sedangkan Selections berfungsi untuk mengijinkan atau tidak pengunjung untuk melakukan pemilihan banyak pilihan.

Untuk menentukan isi dari pilihan-pilhan yang hendak ditampilkan, klik tombol List Values yang kemudian akan memunculkan kotak dialog seperti pada gambar berikut ini :

Gambar 54. Kotak Dialog List Values

Berikut ini hasil tampilan pada web browser untuk tipe List dan Menu dari parameter-parameter yang diisikan pada kotak dialog List Values di atas.

Gambar 55. Tampilan List pada Web Browser

Gambar 56. Tampilan Menu pada Web Browser

Menyisipkan File Field

File field digunakan untuk mengirimkan (upload) file ke server. Untuk dapat memanfaatkan file field digunakan method post atau IIS untuk action dari form. Tampilan Fiel Field ini sama seperti Text Field, hanya saja di sebelah kanan obyek File Field terdapat sebuah tombol bernama Browse yang berfungsi untuk mencari file yang hendak di-upload. Namun, pengguna juga dapat secara langsung mengetikkan nama file beserta path-nya secara lengkap pada kotak teks.

Untuk menyisipkan File Field, klik tombol

pada tab Form dalam Insert bar. Selanjutnya pada document window akan muncul tampilan seperti gambar berikut ini :

Gambar 57. File Field

Menyisipkan Button

Button merupakan sebuah tombol yang dipergunakan untuk melakukan proses tertentu, seperti submit atau reset. Kedua tombol ini digunakan dalam sebuah proses di dalam form. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan ke dalam form untuk selanjutnya diolah di dalam server. Sedangkan tombol reset berguna untuk mengosongkan atau mengembalikan ke nilai default dari suatu data yang terletak di dalam form.

Untuk menyisipkan Button, klik tombol

yang terdapat pada tab Form dalam Insert bar. Berikut tampilan Property Inspector untuk Button.

Gambar 58. Property Inspector Button

Keterangan :

a) Button name, menentukan nama button.

b) Label, menentukan label button.

c) Action, menentukan fungsi button, sebagai tombol Submit atau Reset.

c. Rangkuman 3

Pembuatan halaman web menggunakan Dreamweaver MX yang memanfaatkan fasilitas penyuntingan visual tidak memerlukan penulisan tag-tag HTML secara manual. Kita hanya tinggal menuangkan apa yang hendak ditampilkan dalam halaman web pada document window, sedangkan tag-tag HTML-nya akan secara otomatis dituliskan oleh Dreamweaver MX.

d. Tes Formatif 3

1) Apakah fungsi dari link, form dan frame dalam pembuatan web?

2) Apa perbedaan frame dan frameset?

3) Apa perbedaan checkbox dan radio button?

4) Apakah fungsi dari tombol Submit dan Reset?

e. Kunci Jawaban Formatif 3

1) Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain, dapat berupa teks maupun gambar.

Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi dengan pengunjung) karena form dapat berupa model isian yang harus diisi pengunjung dan akan dibca oleh pemilik web.

Frame, merupakan pembagi halaman.

2) Frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya.

3) Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak menentukan satu pilihan saja.

4) Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan dalam form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam form.

f. Lembar Kerja 3

Alat dan Bahan

Personal Computer yang telah terinstal software Macromedia Dreamweaver MX .

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) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik di dekat komputer (magnet, handphone, dan sebagainya).

5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain game.

6) Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

1) Siapkanlah semua peralatan yang akan digunakan!

2) Periksa semua kabel penghubung pada PC.

3) Nyalakan PC dan jalankan program Macromedia Dreamweaver MX.

4) Pelajari dan praktekkan semua materi yang telah disampaikan pada kegiatan belajar 2 ini.

5) Kerjakan Tes Formatif 3.

6) Apabila menemui kesulitan dalam memahami materi yang ada, segera tanyakan denga instruktur.

7) Setelah selesai, matikan komputer dan rapikan seperti semula.

BAB III

EVALUASI

A. PERTANYAAN

1. Jelaskan apa yang dimaksud dengan software desain web!

2. Jelaskan definisi dari relative link dan absolute link!

3. Jelaskan perbedaan workspace Dreamweaver 4 dengan Dreamweaver MX?

4. Buatlah halaman web yang berisi formulir biodata, seperti pada Tes Formatif 2 nomor 2 menggunakan Macromedia Dreamweaver!

B. KUNCI JAWABAN EVALUASI

1. Software design web atau dapat pula disebut sebagai web editor merupakan sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis

2. Relative link adalah link yang dibuat dengan menentukan relative path dokumen tujuan dari dokumen asal berada.

Absolute link adalah link yang dibuat dengan menuliskan secara lengkap (absolute) dokumen/alamat (URL) tujuan.

3. Pada workspace Dreamweaver 4, komponen-komponen Dreamweaver berada pada window yang berbeda (memiliki window masing-masing) sedangkan pada workspace Dreamweaver MX, semua komponen-komponen Dreamweaver berada dalam satu window.

4. Hasil pembuatan halaman web ini setidaknya menghasilkan tampilan pada web browser yang sama dengan hasil pada Tes Formatif 2 soal nomor 2. seperti gambar berikut ini :

Gambar 59. Tampilan Form Biodata pada Web Browser

C. KRITERIA PENILAIAN

Aspek	Skor (1-10)	Bobot	Nilai	Keterangan
Kognitif (soal no 1 s/d 3)		4		Syarat lulus nilai minimal 70 dan skor setiap aspek minimal 7
Halaman web yang menarik, variatif dan kreatif.		5
Ketepatan waktu		1
Nilai Akhir

Kategori kelulusan:

70 – 79 : Memenuhi kriteria mininal. Dapat bekerja dengan bimbingan.

80 – 89 : Memenuhi kriteria minimal. Dapat bekerja tanpa bimbingan.

90 – 100 : Di atas kriteria minimal. Dapat bekerja tanpa bimbingan.

BAB IV

PENUTUP

Setelah menyelesaikan modul ini dan mengerjakan semua tugas serta evaluasi maka berdasarkan kriteria penilaian, peserta diklat peserta diklat dapat dinyatakan lulus/tidak lulus. Apabila dinyatakan lulus maka dapat melanjutkan ke modul berikutnya sesuai dengan alur peta kududukan modul, sedangkan apabila dinyatakan tidak lulus maka peserta diklat harus mengulang modul ini dan tidak diperkenankan mengambil modul selanjutnya.

DAFTAR PUSTAKA

-------------, 2004, Seri Panduan Desain Web Macromedia Dreamweaver MX 2004, Andi Offset, Yogyakarta.

http://ilmukomputer.com, (30 Januari 2005, 17:36).

Indonesia

Search This Blog