desain dan pemrograman web 1
Download
Skip this Video
Download Presentation
Desain dan Pemrograman Web 1

Loading in 2 Seconds...

play fullscreen
1 / 33

Desain dan Pemrograman Web 1 - PowerPoint PPT Presentation


  • 152 Views
  • Uploaded on

Desain dan Pemrograman Web 1. PG110 – 3 SKS. PERTEMUAN 07. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Desain dan Pemrograman Web 1' - axl


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
outline
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
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
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
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
Navigasi dengan Flash
  • Kelebihan:
    • 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 2
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 button 2
Menu dengan Flash Button (2)
  • Preview jenis tombol
  • Jenis tombol
  • Teks menu
  • Jenis dan ukuran tulisan
  • Halaman / link menu
jump menu dropdown menu
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 menu2
Jump Menu (Dropdown menu)
  • Item menu
  • Teks menu
  • Link menu
  • Pilihan (opsi) menu
  • Tombol untuk menambah, mengurang dan mengatur posisi menu
navigasi dengan tabel
Navigasi dengan Tabel

Menu / navigasi dengan memanfaatkan tag <table> untuk mengatur item navigasi dan tampilannya.

Macromedia Dreamweaver menyediakan beberapa bentuk navigasi tabel siap-pakai (snippets).

Kelebihan: mudah

Kekurangan: kurang menarik, tambahkan CSS agar menarik.

pop up menu
Pop Up Menu

Bentuk navigasi bertingkat (tree)

Cocok dipilih jika jumlah item navigasi (menu) cukup besar.

Javascript based

Dreamweaver menyediakan fasilitas pembuatan Popup Menu.

video praktikum
Video Praktikum

Video Praktikum Menu dan Navigasi

terima kasih
Terima Kasih

Fakultas Teknologi Informasi

Universitas Budi Luhur

http://fti.bl.ac.id

ad