MENU dan navigasi situs

Slides:



Advertisements
Presentasi serupa
Oleh Apriliya saputri X ti b
Advertisements

Mengelola isi halaman web
Hyper Text Markup Language
Layout Situs dengan Tabel
Dasar-dasar Web Design
FAKULTAS TEKNOLOGI INFORMASI1DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS © 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan.
Membuat Template Web Website yang baik adalah website yang konsisten. Konsisten di sini berarti memiliki bentuk, layout dan navigasi yang sama antar satu.
Desain Web Nanik Triana, M.Kom
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
Desain web – pertemuan 10 CSS (Part 3).
Desain Web R0312 – Grafik Komputer.
HTML PEMROGRAMAN INTERNET. Form & Input HTML Form adalah area yang bisa ditempati oleh elemen form. Elemen form adalah elemen yg mengijinkan user memasukkan.
Lily Puspa Dewi 1 PPA Pertemuan ke – 3 Chapter 3 & 4.
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
Menu dan Formulir Materi Pertemuan Ke-3.
Usability.
HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.
Cascading Style Sheet Oleh : Edy Mulyanto
HTML-LINK-LIST.
HTML Basic.
HTML Achmad Yasid,SKom. HTML Singkatan dari HyperText Markup Language adalah bahasa yang menjelaskan bagaimana suatu teks, video, grafik, animasi dan.
TABEL , FORM DAN FRAME.
Atribut dalam Body Atribut dan contoh penulisan Fungsi
ADD-ON Dasar HTML.
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian.
CSS (Cascading Style Sheet)
Usability: Disain Web yang Brilian
Pertemuan 2 : HTML.
Pertemuan 3 Menu dan Formulir
1. Item menu 2. Teks menu 3. Link menu 4. Pilihan (opsi) menu 5. Tombol untuk menambah, mengurang dan mengatur posisi menu.
Mengelola isi halaman web
Interaksi Manusia & Komputer Website
Bahasa Style CSS L. Erawan.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Menu, Form, dan Kotak Dialog
NAVIGASI.
PERTEMUAN 2 HTML (Lanjutan).
Menu dan Formulir Materi Pertemuan Ke-3.
Macromedia Dreamweaver
KONSEP DASAR DESAIN WEB
Pramita Firnanda 2 D3 Teknik Informatika A
NAVIGASI.
Web-Based User Interface
Web-Based User Interface
Web-Based User Interface
CSS - Cascading Style Sheets
Tak Kenal Maka Tak Sayang (HTML)
Internet dan Web By : Lisda Juliana P..
Mendesain Halaman WEB.
Menu Drop Down.
TOT FASILITATOR By N a h d i.
ELEMEN SITUS WEB A. Ridwan Siregar.
Area Kerja Dreamweaver
PJ : Nuraini Purwandari
PRESENTASI FRONT PAGE 2003 (XI.IMERCY)
MEMANFAATKAN DESIGN TEMPLATE
Pemrograman Berorientasi Platform
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Pengembangan Aplikasi Framework
Pengembangan Aplikasi Framework (IT657)
Mengelola isi halaman web
Menu dan Formulir Materi Pertemuan Ke-3.
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Desain web Good vs bad Dimas wahyu utomo
Darmawan satyananda Mathematics department State university of malang
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
DREAMWEAVER.
List dan Image pada HTML
Web Design CSS.
Transcript presentasi:

MENU dan navigasi situs

Outline Karakteristik navigasi situs yang baik. Jenis-jenis navigasi situs Membuat navigasi dengan fasilitas yang sudah tersedia di Dreamweaver Navigasi Flash Navigasi dari Snippet Pop Up Menu Membuat navigasi dengan tabel

Pembagian Navigasi Inline Navigation. Adalah navigasi yang menjadi bagian dari suatu content (isi) utama, umumnya berupa link dan bentuknya sederhana. Site Navigation. Adalah navigasi yang letaknya terpisah dari content, umumnya terletak di atas, kiri atau kanan. Umumnya navigasi jenis ini dibuat semenarik dan sejelas mungkin. Search-based Navigation. Adalah navigasi yang didasarkan pada form pencarian, jadi disini pengunjung dapat menginputkan suatu kata kunci dan akan ditampilkan halaman sesuai. Fasilitas ini sangat penting jika situs memiliki content atau halaman yang cukup banyak.

Pembagian Navigasi Dilihat dari Bentuknya List of contents. Breadcrumb trail Horizontal top bar Tabs 2-level top (bar or tabs) Top and side bars Buttons bar with revealed drop-down Multiple-level tree nav Paging

Navigasi yang Baik Jumlah item dalam navigasi tidak terlalu banyak. Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi. Jika menggunakan image, sertakan juga atribut alt pada tag <img>. Halaman utama (homepage) harus mudah ditemukan. Integrasikan fasilitas navigasi dengan content. Hindari frame jika mungkin (gunakan tabel atau CSS).

Navigasi dengan Flash Kelebihan: Kekurangan Jenis menu dengan Flash: Dengan Dreamweaver cukup mudah. Animasi dapat dibuat untuk menarik pengunjung Kekurangan Tidak semua browser harus mendukung flash (terinstall flash player) Relatif lebih lambat (boros bandwidth) Jenis menu dengan Flash: Menu dengan Flash Text Menu dengan Flash Button

Menu dengan Flash Text (1)

Menu dengan Flash Text (2) Jenis font dan ukurannya Warna tulisan dan warna background Teks menu Halaman / link menu Nama file flash

Menu dengan Flash Text (3)

Menu dengan Flash Button (1)

Menu dengan Flash Button (2) Preview jenis tombol Jenis tombol Teks menu Jenis dan ukuran tulisan Halaman / link menu

Menu dengan Flash Button (3)

Jump Menu (Dropdown menu) Menu berbentuk Dropdown (combo box). Umumnya digunakan untuk navigasi cepat. Memanfaatkan fungsi Javascript untuk mengatur menu / navigasi. Di Dreamweaver dapat diakses melalui menu Insert > Form > Jump Menu.

Jump Menu (Dropdown menu)