7.1 Web Design Software
Web design software merupakan perangkat lunak yang berguna untuk membangun/membuat/mendesain halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat berbagai macam Web design software yang dikeluarkan oleh vendor yang berbeda beda.
Setiap Web design software itu menawarkan berbagai macam fitur unggulannya masing-masing. Web design software terpopuler yang ada saat ini antara lain: Adobe Image Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage dan lain sebagainya.
7.2 Mengenal Macromedia Dreamweaver
Macromedia Dreamweaver yang merupakan salah satu Web design software terpopuler dipilih sebagai Web design software 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 keunggulankeunggulan lainnya dibandingkan dengan Web design software yang lain.
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 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.
7.2.1 Workspace Dreamweaver
Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai selanjutnya.
Workspace Dreamweaver tersebut memiliki tampilan window seperti pada gambar 2. Window Dreamweaver ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel.
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 atau direktori kerja.
8 Workspace Dreamweaver MX ini memberikan kesatuan tampilan antara menu utama, panel, property inspector serta toolbar.
7.3 Hyper Text MarkUp Language (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 dari pada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
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 :
.
Keterangan :
1. <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
2. <head> </head> : mendefinisikan head dalam sebuah file HTML.
3. <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser.
4. <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.
7.3.1 Format Teks Dasar dalam HTML
1. 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.
2. Paragraf, setiap ada paragraf baru diawali dengan <p>
3. List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi.
4. Tidak bernomor (unordered list) :
5. Bernomor (ordered list) :
<ol>
<li>satu
<li>dua
<li>tiga
</ol>
6. Definisi (definition list) :
<dl>
<dt>
<dd>
<dt>
<dd>
</dl>
7. Performatted Text, dalam HTML, spasii, tab dan baris baru (enter) tidak memiliki pengaruh. Agar format tampilan sesuai dengan source-nya, maka diperlukan
tag<pre>.
<pre>Nama : Saya
Tanggal : Lahir
</pre>
8. Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>.
<p>paragraf satu</p>
<blockquote>
<p>paragraf masuk ke dalam</p>
</blockquote>
9. Ganti baris (line break), untuk menulis alamat surat dengan barisbaris pendek, tidak bagus jika menggunakan tag <p>(spasi terlalu lebar). Maka digunakan tag <br> untuk ganti baris.
Karangmalang.<br>
Yogyakarta.<br>
55281
10. 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.
<hr size=”4” width=”75%”>
h) Memformat karakter,
<b> atau <strong> untuk membuat teks Bold.
<i> atau <em> untuk membuat teks Italic.
<tt> atau <code> untuk membuat teks typewriter.
7.3.2 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 :
<a href=”dua.html#BT”>Tiga</a>
Pada bagian yang dituju, dituliskan :
3. Link ke suatu bagian di dokumen yang sama, caranya hamper 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.
<a href=”mailto:saya@gmail.com?subject=Masuk ga?”>
Kirim E-mail</a>
7.3.3 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 :
<img src=”foto.bmp” align=”top”>
3. Teks alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan gambar tersebut.
<img src=”foto.jpg” alt=”Foto”>
4. Atribut border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.
<img src=”foto.gif” border=”10”>
5. Gambar sebagai hyperlink
<a href=”registrasi.html”><img
src=”foto.gif”></a>
6. Gambar sebagai background
<body background=”file_gambar.jpg”>
7. Background warna
<body bgcolor=”red” text=”white” link=”green”>
7.3.4 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.
Keterangan
1. <table> </table> : mendefinisikan bahwa teks di dalamnya merupakan tag-tag pembuatan tabel.
2. <table border=2> : mendefinisikan penentuan ada atau tidaknya serta ukuran border pada tabel.
3. <tr> </tr> : table row, mendefinisikan bahwa teks di dalamnya akan berada dalam satu baris. Banyaknya tag <tr></tr> menunjukkan banyaknya baris pada suatu tabel.
4. <td> </td> : table division, mendefinisikan isi dari suatu kolom tag ini selalu berada di dalam tag <tr></tr>.
5. Banyaknya tag <td></td> diantara tag </tr></tr> menunjukkan banyaknya kolom dalam suatu baris.
7.3.5 Membuat Frame
Frame HTML digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya merupakan satuhalaman 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 :
Keterangan
1. 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 *).
2. Memberikan nama pada frame pertama yang telah dibuat dan menentukan nama file yang akan ditampilkan dalam frame tersebut.
3. Membagi baris kedua menjadi 2 kolom dengan ukuran kolom kiri 150 pixel dan kolom kanan memanfaatkan sisanya.
4. 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.
5. Mengakhiri pembuatan frame.
7.3.6 Membuat Form
Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna. Macam-macam form :
1. Input, dengan tipe : text, password, checkbox, radio button, reset, submit dan hidden.
2. Text area.
3. Select.
Berikut ini contoh tag pembuatan form :
7.4 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 pengor-ganisasian 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 melakukanpendefinisian site, klik Define Site pada Files Panel.
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.
Berikutnya akan ditampilkan kotak dialog untuk menentukan cara pengelolaan file, dalam Dreamweaver direkomendasikan agar file halaman web selalu disimpan terlebih dahulu dalam drive lokal
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.
Selanjutnya akan muncul kotak dialog yang menanyakan apakah anda akan memeriksa file atau tidak untuk
membolehkan anda dan para pekerja lainnya tidak dapat memperbaiki file yang sama dalam waktu yang bersamaan, seperti pada gambar berikut :
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
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).
7.4.1 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 :
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.
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.
Keterangan
| Apperance | Berisikan tentang pengaturan desain warna, background dan huruf pada halaman. Diantaranya : |
| Page font | Kelompok huruf yang akan dipakai pada halaman |
| Size | Menentukan ukuran huruf pada halaman |
| Text color | Menentukan warna huruf. |
| Background color | Menentukan warna dasar pada halaman web. |
| Background image | Definisi file gambar yang hendak dijadikan latar belakang halaman. |
| Repeat | Mengulang tampilan gambar latar belakang hingga tidak ada celah kosong pada halaman. |
| Left margin | Menentukan nilai margin kiri halaman web. |
| Top margin | Menentukan nilai margin atas halaman web. |
| Right margin | Menentukan nilai margin kanan halaman web. |
| Bottom margin | Menentukan nilai margin bawah halaman web |
Keterangan :
| Links | Berisikan tentang pengaturan link pada halaman, diantaranya : |
| Link Font | Menentukan kelompok huruf yang akan dipakai pada hyperlink. |
| Size | Menentukan ukuran huruf pada hyperlink. |
| Link color | Menentukan warna pada hyperlink yang tidak ditunjuk dengan pointer mouse. |
| Rollover links |
|
| Visited links | Menentukan warna hyperlink yang pernah dikunjungi. |
| Active links | Menentukan warna hyperlink yang sedang ditunjuk dengan pointer mouse. |
| Underline style | Menentukan gaya pada link. |
Keterangan :
| Headings | Berisikan tentang pengaturan ukuran huruf, diantaranya: |
| Heading font | Menentukan ukuran huruf judul web.
|
| Heading 1 s/d heading 6 | Menentukan warna dan ukuran judul web |
Keterangan
| Title/Encoding | Berisikan tentang judul halaman dan style huruf, diantaranya |
| Title | Memberi nama judul web yang akan dibuat. |
| Document Type (DTD) | Menentukan |
Keterangan :
| Tracing Image | Berisikan tentang pengambilan file gambar dan tranparansinya, diantaranya : |
| Tracing Image | Menentuka file gambar yang akan digunakan sebagai sarana bantu dalam mendesain halaman web. Tracing image hanya akan tampil pada Document window dan tidak akan tampil pada browser. |
| Tranparency | Mengatur tingkat transparansi obyek gambar |
| Tranparency | Mengatur tingkat transparansi obyek gambar |
7.4.2 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.
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 :
7.4.3 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 :
Keterangan :
| Rows | Menentukan banyaknya baris tabel. |
| Columns | Menentukan banyaknya kolom tabel. |
| Width | Menentukan ukuran lebar tabel beserta satuan ukuran yang digunakan, Percent atau Pixels. |
| Border | Mengatur ketebalan border atau batas tabel. |
| Cell padding | Mengatur jarak antara isi sel dengan tepi sel. |
| Cell spacing | Mengatur jarak antara sel dalam tabel. |
| Caption | Mengisi judul untuk tabel. |
| Align caption | Menentukan posisi caption/judul tabel. |
| Summary | Ringkasan isi tabel. |
| Rows | Menentukan banyaknya baris tabel. |
| Columns | Menentukan banyaknya kolom tabel. |
Jika parameter-parameter default pada kotak dialog Insert table diikuti (dengan meng-klik OK), maka pada document window akan tampil seperti gambar berikut:
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:
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 :
7.4.4 Menyisipkan Obyek
Menyisipkan gambarSeperti halnya pada proses menyisipkan tabel, untuk menyisipkan gambar ke dalam dokumen 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).
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.
Menyisipkan Link Link adalah suatu obyek yang dapat berupa teks atau gambar yang dipakai dalam dokumen HTML untuk melompat dari satu dokumen kedokumen 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 file Link pada Property Inspector dengan nama dokumen atau alamat URL yang akan dituju.
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.
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 :
1. Pastikan bahwa tidak ada dokumen yang sedang aktif.
2. Pilih menu File New, pada kotak dialog New Document aktifkan tabulasi General, lalu pilih kategori Framesets hingga muncul tampilan seperti pada gambar 39.
3. Setelah memilih salah satu frame, klik Create sehingga frame yang dipilih tampil pada document window.
Kemudian akan muncul kotak dialog untuk penamaan frame dan spesifikasiannya, seperti pada gambar di bawah ini :
Keterangan :
1. Frame : Spesifikasi/tata letak frame.
2. Title : Nama/judul dari spesifiksasi frame yang telah ditentukan sebelumnya.Setelah itu klik OK
§ 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 :
Keterangan :
1. 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 (.).
2. Frame Source : untuk menentukan sumber dokumen frame.
3. 3D Borders : untuk mengatur border pada frame.
4. Frame border color : untuk mengatur warna pada border.
5. Disable frame resize : untuk mengatur diperbolehkan atau tidaknya perubahan ukuran frame oleh web browser.
6. Frame scrollbars : untuk menampilkan scroll (batang penggulung) pada frame.
7. Margin width in pixels : untuk mengatur batas kanan dan kiri margin.
8. Margin height in pixels : untuk mengatur jarak margin atas dan bawah pada frame.
§ Mengatur properti frameset.
Untuk mengatur properti frameset, sebelumnya aktifkan dahulu frameset-nya.
Dapat langsung dilakukan dengan memilih pada Document window dengan mengklik salah satu border frame-nya atau dengan memilih border frame terluar pada panel frame. Selanjutnya pada Property Inspector akan tampil properti frameset seperti berikut ini :
Keterangan :
1. Border width in pixels : untuk mengatur lebar semua border pada frameset.
2. 3D Borders : untuk mengatur tampilan border frameset, apakah untuk ditampilkan atau disembunyikan.
3. Frameset color : untuk mengatur warna pada border frameset.
4. RowCol Selection : untuk memilih bagian kolom atau baris dengan klik bagian atas dan samping tampilan.
5. Row/column size : untuk mengatur tinggi baris atau lebar kolom yang dipilih.
6. RowCol size units : untuk mengatur ukuran lebar dan tinggi frame.
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 :
Langkah-langkah menyisipkan form:
1. Aktifkan tabular Form pada Insert bar, kemudian klik Form.
2. Pada document window akan muncul obyek form dengan tampilan, sebagai berikut :
3. Pada Property Inspector akan tampil seperti pada gambar 45 :
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.
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.
Menyisipkan Text Field. § Terdapat 3 jenis tipe text field :
1. Single line, merupakan tipe default text field yang beruap kotak satu baris. Biasa digunakan untuk menampung nama & alamat email.
2. 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.
3. 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.
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.
heckbox memungkinkan pengguna halaman web untuk memilih obyek yang terseleksi.
Untuk menyisipkan checkbox, klik tombol 
pada tab Form dalam Insert bar. 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.
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). 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.
ntuk menyisipkan List/Menu, klik tombol
pada tab Form dalam Insert bar. Selanjutnya pada document window akan tampil seperti gambar berikut : Gambar 7.56 List/Menu pada Document Window
Sedangkan pada Property Inspector, tampil sebagai berikut :
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 :
Berikut ini hasil tampilan pada web browser untuk tipe List dan Menu dari parameter-parameter yang diisikan pada kotak dialog List Values di atas.
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 : 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.
Keterangan :
1. Button name, menentukan nama button.
2. Label, menentukan label button.
3. Action, menentukan fungsi button, sebagai tombol Submit atau Reset.
7.5 Memperbaharui Halaman WEB
Memperbaharui halaman situs web dengan sesuatu yang baru, dengan mempertimbangkan kebutuhan pengunjung dan situs web itu sendiri. Hal ini dapat mempertahankan atau bahkan meningkatkan jumlah pengunjung. Untuk memperbaharui (update) halaman situs web yang perlu menjadi bahan pertimbangan sejak halaman web tersebut dirancang adalah kita harus memastikan agar elemen-elemen yang ada pada setiap halaman mudah untuk di rubah (edit).
7.5.1 Memeriksa informasi untuk relevansi dan keterkinian
Pada dasarnya dalam proses pembuatan situs web diperlukan kerjasama antara pihak pengembang dengan klien yang memesan situs web tersebut. Hal ini dilakukan untuk mempertemukan antara ide dan keinginan klien dan keahlian yang dimiliki pihak pengembang situs web, sehingga nantinya selain dihasilkan situs yang mendukung tujuan klien juga akan sangat membantu dalam proses editing (pembaharuan) yang mungkin terjadi.
Dalam menentukan content (content awal, tambahan maupun revisi) pihak pengembang harus lebih banyak mendengar apa yang menjadi kebutuhan klien. Pihak pengembang situs web harus dapat mengidentifikasikan tujuan pembu-atan situs web dari penjelasan klien mengenai masalah-masalah yang dialami.
Content sebuah situs web sebaiknya selalu diperbaharui, baik dengan menambah, mengubah, mengoreksi, atau lainnya, terutama jika situs web kita merupakan penyedia informasi, seperti situs berita, dan lain-lain. Langkah itu akan dapat menjaga kesegaran situs dengan informasi terbaru. Kita tetap harus menjaga kualitas situs web ini.
Interaktivitas pengguna menjadi jantung sebuah situs web. Pada mulanya web hanya menawarkan situs berbasis teks. Disertakannya hyperlink dalam bentuk teks merupakan satu langkah lebih maju ketimbang versi cetaknya. Dengan beragam opsi multimedia yang kini tersedia, seorang web desaigner dapat menawarkan berbagai cara pada pengguna untuk berinteraksi, mencari tahu dan menjelajahi content sebuah situs web.
Beberapa Gagasan yang disampaikan Tord Yard (programmer flash di WWW.EGO7.com) tentang pentingnya menambahkan interaktivitas pada content halaman sebuah situs web : Gunakan umpan balik grafik untuk menginformasikan pengguna tentang elemen interaktif, seperti status tombol yang bergulung
Sertakan suara sebagai bentuk umpan balik tambahan agar content tidak terlihat membosankan Pertimbangkan pemakaian animasi untuk menerangkan elemen penting, atau untuk meminta keikutsertaan pengunjung.
Web merupakan medium baru yang unik karena kemampuannya untuk berinteraksi dengan pengguna dan menyajikan banyak informasi, jadi manfaatkanlah dan berpikirlah melampaui kekangan yang dialami oleh medium lain.
Beberapa cara untuk memeriksa informasi content situs web untuk relevansi dan keterkinian, adalah sebagai berikut :
Sesuaikan content situs web dengan tujuan dan fungsi situs tersebut Lakukan riset untuk mencari informasi terbaru yang sesuai dengan content situs Content tambahan atau revisi juga bisa dengan meminta content tersebut ke pihak klien baik berupa data tertulis maupun elektronik Lakukan konfirmasi dalam menentukan batasan umur sebuah links, apakah akan dipertahankan atau dihapus Pihak pengembang selaku pembuat situs web bila perlu merevisi content yang mungkin diperlukan dengan mengkonfirmasikan dahulu dengan pihak klien
Secara teknis proses perubahan content situs web dapat dilakukan dengan beberapa cara, sebagai berikut (diterangkan secara teknis pada point 3) :
§ Untuk halaman yang sifatnya statis
Proses editing langsung dilakukan pada halaman dimana informasi/content yang akan dirubah atau ditambah berada.
§ Untuk halaman yang sifatnya dinamis Proses editing pada halaman yang bersifat dinamis, bisa dilakukan tanpa harus membuka halaman dimana informasi yang akan dirubah berada. Tetapi melalui fasilitas yang telah disediakan oleh pihak pengembang, biasanya berupa system admin yang menggunakan sistem database.
7.5.2 Memeriksa link dan navigasi
Link dan Navigasi adalah bagian yang terpenting dalam organisasi situs web karena keduanya sangat berpengaruh pada kenyamanan pengunjung situs web. Navigasi adalah gabungan dari struktur representasi informasi situs web dan mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan situs. Jadi link dan struktur situs sangat berhubungan erat dengan navigasi situs web.
Kemudahan bernavigasi dalam situs web melibatkan system navigasi situs web secara keseluruhan dan desain interface situs web tersebut. Navigasi membantu pengunjung untuk menemukan jalan yang mudah ketika menjelajahi situs web, memberitahu di mana mereka berada, ke mana mereka bias pergi. Dengan demikian mereka dapat menemukan apa yang mereka cari dengan cepat dan mudah.
Navigasi dapat ditampilkan dalam berbagai media, yaitu teks, image ataupun animasi. Untuk navigasi teks, beri tanda bahwa teks itu adalah navigasi, misalnya dengan sedikit memperbesar huruf teks, menambahkan garis bawah atau warna pada latarnya, atau yang lain. Kelebihannya, waktu downloading lebih cepat, cocok diterapkan pada situs yang memillki banyak menu. Hindari garis bawah teks yang bukan link. Garis bawah digunakan untuk membedakan apakah teks tersebut adalah link atau bukan. Jadi jangan melakukan penekanan kata dengan garis bawah tetapi bukan link.
Navigasi dari image dapat menawarkan banyak sekali variasi, misalnya dengan ikon, image, penggunaan huruf dan bentuk yang lebih jelas. Hindari penggunaan grafik untuk navigasi yang menggunakan bahasa yang berlainan karena sulit pemeliharaan dan pengembangannya. Sedangkan navigasi dengan animasi memang sangat menarik karena berbagai intraktivitas visual yang ditawarkannya.
Syarat navigasi yang baik :
1. Mudah dipelajari
2. Tetap konsisten
3. Memungkinkan feedback
4. Muncul dalam konteks
5. Menawarkan alternatif lain
6. Memerlukan perhitungan waktu dan tindakan
7. Menyediakan pesan visual yang jelas
8. Menggunakan label yang jelas dan mudah dipahami
9. Mendukung tujuan dan perilaku user
10. Beberapa hal yang perlu diperhatikan untuk membuat navigasi yang baik :
11. Rencanakan dengan benar sebelum membuat
12. Navigasi atau struktur situs web nantinya akan sulit diubah. Jadi sebelum membuat navigasi sebuah situs, tentukan konsepnya. Dalam membuat konsep, anda dapat membangun alur navigasi dalam bentuk tampilan pohon (tree-view), digambarkan mulai dari umum kemujdian bercabang menjadi yang lebih khusus dan detil. Sesuaikan dengan prioritas yang ingin ditunjukkan kepada audien.
13. Kelompokkan link navigasi dan aturlah sepeerlunya
14. Buat halaman dengan mock up navigasi elemen, jenis konten yang akan ada di setiap halaman dan prioritasnya.
15. Buatlah tampilan navigasi berbeda dari tampilan lainnya
16. Agar pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi. Bila perlu bedakan navigasi yang pernah digunakan dengan yang belum.
17. Buatlah navigasi yang singkat, tepat dan jelas
18. Buat navigasi yang logika susunannya mudah dipahami.
Kata-kata yang menjadi navigasi menerangkan tujuan navigasi. Gunakan kata-kata yang singkat, tepat dan jelas. Gunakan istilah-istilah yang biasa dipergunakan atau mudah dimengerti pengunjung. Jangan membuat image yang berkesan sebagai tombol, padahal bukan tombol atau link.
1. Buat navigasi yang memungkinkan user feedback
2. Seperti meletakkan Home dan Back.
3. Bila perlu buat breadcrumb
4. Untuk mempermudah pengunjung menjelajahi situs dengan cepat dan agar mereka tahu lokasi dan kedalaman kunjungan mereka di situs web
5. Jangan sampai navigasi tidak berfungsi
6. Broken link, baik internal atau eksternal, dan navigasi yang belum ada isinya jangan dicantumkan.
7. Jaga konsistensi
8. Posisi daerah navigasi harus tetap dan struktur navigasi harus konsisten dengan struktur isi, yang diurutkan berdasarkan logika pengunjung. Bila perlu letakkan pada tempat yang sama di tiap halaman, gunakan warna yang sama, dan tempatkan pada tempat yang mudah untuk dilihat.
7.5.3 Mengedit informasi sesuai kebutuhan
Dreamweaver merupakan piranti lunak yang sangat baik untuk membuat halaman web. Opsi-opsi dalam dreamweaver dirancang begitu detail, sehingga designer mahir bisa mengembangkan situsnya secara menyeluruh. Desain pemula pun dapat memahaminya dengan mudah. Selain itu, aplikasi ini cukup intuitif digunakan untuk membuat situs dalam waktu yang sangat singkat.
Dreamweaver memungkinkan kita berpindah secara mudah antar design view dan code view, ini berarti kita bisa explore code HTML begitu selesai menata halaman dengan menggunakan tampilan antar muka (GUI). Semua tool yang diperlukan tersedia di bagian depan interface.
Berikut adalah langkah-langkah untuk proses pengeditan halaman web dengan menggunakan fasilitas dreamweaver :
7.5.4 Mengubah Objek menjadi Background
Tidak semua gambar (image) pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai link/tombol, maka kita dapat menambahkan menu pull down agar tampilan website lebih menarik. Kita juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.
Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (background) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).
1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver. Seperti terlihat pada tampilan gambar 5-60
2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah
7.4.5. Pada bagian Properties, tertulis Src = images/index_r4_c6.jpg. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_r4_c6.jpg maka gunakan file tersebut sebagai latar belakang.
5. Ketikkan index_r4_c6.jpg pada kolom Bg.
6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan obyek berupa teks, animasi, maupun gambar
7.5.5 Memasukkan Obyek
Obyek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan obyek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih obyek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan obyek berupa teks.
Memperbaharui situs web yang bersifat statis
1. Letakkan kursor pada tempat yang akan ditambahkan teks.
2. Pada panel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
6. Apabila berhasil memasukkan gambar, maka akan terlihat obyek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
7.5.6 Memperbaharui situs web melalui fasilitas admin (yang bersifat dinamis)
Sebuah situs web yang dinamis membutuhkan fasilitas admin yang berfungsi untuk mengelola content dari situs tersebut, baik menambah content, memperbaharui ataupun proses menghapus jika ada content yang dianggap sudah tidak akan di tampilkan lagi. Biasanya untuk situs web seperti ini membutuhkan seorang pengelola situs yang bertanggung jawab untuk memantau keberadaan anggota, memberikan feedback atas saran, masukan, komentar pengunjung situs dan tentunya untuk menjaga agar situs tersebut tetap up to date.
Misalkan kita akan melakukan perubahan terhadap sebuah informasi/berita dengan menggunakan fasilitas admin, adalah sebagai berikut :
1. Masukan username dan password pada form login
2. Setelah login berhasil biasanya akan tampil halaman admin yang khusus di sediakan untuk pengelola situs web.
3. Misalkan kita akan melakukan proses maintenance terhadap sebuah informasi/berita, pada menu yang tampil kita pilih tombol/link untuk fasilitas berita, sehingga akan tampil fasilitas untuk melakukan proses maintenance berita :
4. Jika ingin melakukan proses perubahan/edit terhadap sebuah berita (misalnya point 1), pilih tombol Edit, sehingga akan tampil formulir pengisian berita :
5. Untuk melakukan proses edit, kita tinggal mengganti setiap opsi dengan informasi terbaru dengan cara menghapus informasi lama kemudian ganti dengan informasi yang benar :
6. Kemudian jika perubahan sudah dianggap selesai aktifkan tombol update, dan informasi baru tersebut sudah otomatis ditampilkan dihalaman utama (index).
7.5.7 Menguji dan memastikan perubahan-perubahan
Pengujian yang dilakukan terhadap situs web tidak sama dengan pengujian sebuah program aplikasi walaupun situs web juga dapat dibuat dengan web programming.
Secara umum, hal-hal yang harus diuji adalah sebagai berikut
Code Quality
Pengujian terhadap code quality maksudnya adalah pengujian terhadap kualitas kode HTML yang digunakan untuk membangun halaman-halaman situs web. Yang termasuk kedalam kategori ini adalah sebagai berikut :
Validasi HTML Kode HTML yang digunakan sebaiknya sesuai dengan standar W3C. Hal ini dilakukan agar tidak terjadi kesalahan dalam melakukan pengkodean HTML. Kategori ini juga menyarankan kita untuk menggunakan program aplikasi HTML editor/ Web Authoring.
Validasi Gambar dan huruf yang digunakan
Pengujian terhadap compatibility situs web maksudnya adalah pengujian yang dilakukan terhadap situs web tentang seberapa kompatibel dengan berbagai macam sistem operasi, browser dan hardware. Pengujian dengan sistem operasi akan membuktikan bagaimana kemampuan pada berbagai sistem operasi yang digunakan, misalnya Windows, Unix, OS/2, Macintos. Pengujian dengan browser akan membuktikan kemampuan pada berbagai browser yang digunakan untuk menampilkan halaman situs web, misalnya Internet Explorer, Netscape Navigator, Opera dan lain-lain. Sedangkan pengujian dengan hardware yang digunakan akan menguji sejauh mana situs dapat kompatibel dengan hardware, seperti : microprocessor, memory, monitor, audio, kecepatan transmisi, dan lain-lain.
Navigasi
Pengujian navigasi dilakukan untuk menguji kemampuan situs web dalam menyajikan link-link yang ada dalam seluruh halaman situs web. Pengujian ini dilakukan karena pentingnya aspek navigator dalam situs web. Berdasarkan penelitian di Amerika pada tahun 1998 pada 10 situs belanja di Amerika, bahwa:
Hampir 40% calon pembeli batal melakukan transaksi karena sistem navigasi terlalu sulit
Setiap US$1 yang dikeluarkan untuk iklan akan menghasilkan keuntungan US$5, setiap US$1 yang dikeluarkan untuk meningkatkan customer experience menghasilkan keuntungan US$60
Yang termasuk pengujian untuk navigasi situs web adalah : link, frame, organisasi situs. Pertanyaan ini dapat membantu untuk menguji navigasi pada situs web :
Apakah semua link akan menuju ke halaman yang benar, dan tidak ada link yang kosong? Jika ada sebuah link internal, apakah link tersebut tidak akan membuka sebuah jendela browser yang baru kecuali halaman help? Apakah semua link memberikan nilai tambah untuk situs web? Ketika pengunjung menekan tombol kembali, apakah data yang diisikan sebelumnya hilang? Apakah halaman yang ditampilkan dengan framesets ditampilkan dengan benar? Apakah informasi yang diinginkan pengunjung dapat dicapai dengan empat kali melakukan klik? Apakah pada situs web terdapat fasilitas search ?
User Interaction
Pengujian user interaction maksudnya adalah bahwa situs web diuji sejauh mana dapat berinteraksi dengan pengunjung yang mengunjungi situs web. Adapun karakteristik dari pengunjung yang semakin memahami teknologi dan pengunjung selalu mengharapkan situs web semakin mempermudahnya dalam mencari informasi. Yang termasuk kedalam user interaction adalah pengujian pada fasilitas form, validasi CGI script, validasi proses, interface, cookies, session dan lain sebagainya.
Usability and Accessbility
Pengujian usability dan accesbility situs web maksudnya adalah pengujian yang dilakukan terhadap situs web guna melihat sejauh mana situs dapat memenuhi keinginan pengunjung atau target pengguna situs web. Secara singkat dapat dilihat pula bagaimana tingkat kemudahan pengunjung dalam mengakses semua fasilitas yang disediakan di dalam situs web. Beberapa contoh pertanyaanberikut dapat digunakan untuk menguji tingkat usability dan accesbility situs web :
Halaman web yang menggunakan script atau aplet harus tetap dapat ditampilkan pada browser yang tidak mendukung fungsi aplet dan script tersebut. Jika menggunakan image maps, maka seharusnya halaman situs juga menyediakan link yang digunakan sebagai alternatif Situs web seharusnya juga dapat dipahami ketika dibuka menggunakan browser berbasis teks
Performance
Pengujian terhadap performance atau performa situs web maksudnya adalah pengujian yang dilakukan terhadap situs web untuk melihat sejauh mana kinerja situs web dalam berbagai keadaan. Berikut ini merupakan contoh standar yang harus dimiliki oleh sebuah situs yang memiliki kinerja yang baik :
95% halaman web dapat di download kurang dari 10 detik pada modem 28,8 kbps
Proses pemesanan dapat dilakukan dalam waktu 2 menit
Konfirmasi suatu transaksi dikirimkan pada user dalam 30 detik
Scalability
Pengujian scalability maksudnya adalah pengujian terhadap sejauh mana situs web/system yang dibangun dapat dikembangkan sebagai antisipasi terhadap perubahan teknologi di masa yang mendatang. Pengujian ini bersifat jangka menengah sampai jangka panjang. Karena pengujian ini dilakukan ketika situs web sudah diluncurkan dan pengujiannya bersifat evaluasi. Pengujian scalability juga memerlukan sebuah capacity planning. Evaluasi scalability dapat dilakukan dengan menguji sejauhmana situs web dalam :
Jumlah maksimal transaksi/detik yang masih dalam batas response-time-requirement Jumlah rata-rata transaksi pada saat normal Jumlah memori yang diperlukan untuk setiap transaksi
Reliability
Pengujian reliability situs web maksudnya menguji sejauh mana situs web masih dapat melakukan tugasnya dalam kondisi yang berat. Yang termasuk ke dalam pengujian ini adalah:
Low-resource testing : apakah aplikasi masih dapat berjalan pada reduced system resources. Endurance testing : menguji tingkat stress system dalam waktu yang cukup lama Volume testing : menguji unjuk kerja sistem dengan data yang besar Peak testing : menguji sistem pada saat yang paling sibuk
Pengujian post implementation situs web maksudnya adalah menguji apakah semua penenmpatan fasilitas-fasilitas situs web sudah benar. Hal ini dapat dilakukan dengan membuat sebuah survey atau polling dari pengunjung untuk menilai fasilitas yang ada pada situs web, apakah member nilai tambah untuk situs web atau belum. Harus dipastikan bahwa semua komponen yang mengimplementasikan pemrograman dapat berjalan dengan baik dan tidak mengandung kesalahan
