Memeriksa link dan navigasi

Direktorat Pembinaan SMK 2008 360 cepat, cocok diterapkan pada situs yang memillki banyak menu. Hindari garis bawah teks yang bukan link. Garis bawah digunakan untuk mem- bedakan apakah teks tersebut adalah link atau bukan. Jadi jangan melakukan penekanan kata dengan garis bawah tetapi bukan link. Navigasi dari image dapat mena- warkan 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 pengembangann- ya. 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 diper- hatikan untuk membuat navigasi yang baik : 11. Rencanakan dengan benar sebe- lum membuat 12. Navigasi atau struktur situs web nantinya akan sulit diubah. Jadi sebelum membuat navigasi se- buah 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 ber- beda dari tampilan lainnya 16. Agar pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi. Bila perlu be- dakan navigasi yang pernah digunakan dengan yang belum. Direktorat Pembinaan SMK 2008 361 17. Buatlah navigasi yang singkat, tepat dan jelas 18. Buat navigasi yang logika susunannya mudah dipahami. HOME Profile Human Resources Kepala Sekolah Edukatif Administratif Kurikulum Kesiswaan Ekstrakurikuler Data Siswa Fasilitas Perpustakaan Laboratorium Bangunan E-Learning E-Book E-Worksheet E_Assesment Web Facilities Galery Berita Gambar 7.59 Contoh Struktur Situs Sekolah Direktorat Pembinaan SMK 2008 362 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 se- bagai tombol, padahal bukan tombol atau link. 1. Buat navigasi yang memung- kinkan 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 be- lum ada isinya jangan dicantumkan. 7. Jaga konsistensi 8. Posisi daerah navigasi harus tetap dan struktur navigasi harus konsisten dengan struktur isi, yang diurutkan berdasarkan logi- ka 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 mem- buat 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 linktombol, maka kita dapat menam- bahkan menu pull down agar tampilan website lebih menarik. Kita juga dapat membuat tombol dalam bentuk mouse over, dan lain se- bagainya. Pada bagian ini, kita akan mencoba membahas tentang teknik pengganti- an objek gambar menjadi latar belakang background agar kita dapat memasukkan beberapa kom- ponen di dalamnya teks maupun grafik. Direktorat Pembinaan SMK 2008 363 1. Pertama kali, bukalah file in- dex.html menggunakan Macromedia Dreamweaver. Sep- erti 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 tom- bol. Sebagai contoh, klik image di bagian bawah

7.4.5. Pada bagian Proper-

ties, tertulis Src = imagesindex_r4_c6.jpg. Hal itu berarti kita tidak dapat me- masukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupa- kan background. Tekan Del untuk menghapusnya. Gambar 7.60 tampilan file index.html Gambar 7.61 imagesindex