Desain dan pemrograman web 1
This presentation is the property of its rightful owner.
Sponsored Links
1 / 33

Desain dan Pemrograman Web 1 PowerPoint PPT Presentation


  • 113 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Desain dan Pemrograman Web 1

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


Desain dan pemrograman web 1

Desain dan Pemrograman Web 1

PG110 – 3 SKS


Menu dan navigasi situs

PERTEMUAN 07

MENU dan navigasi situs


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 1

Menu dengan Flash Text (1)


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 text 3

Menu dengan Flash Text (3)


Menu dengan flash button 1

Menu dengan Flash Button (1)


Menu dengan flash button 2

Menu dengan Flash Button (2)

  • Preview jenis tombol

  • Jenis tombol

  • Teks menu

  • Jenis dan ukuran tulisan

  • Halaman / link menu


Menu dengan flash button 3

Menu dengan Flash Button (3)


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 menu1

Jump Menu (Dropdown 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


Jump menu dropdown menu3

Jump Menu (Dropdown 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.


Navigasi dengan tabel1

Navigasi dengan Tabel


Navigasi dengan tabel2

Navigasi dengan Tabel


Navigasi dengan tabel3

Navigasi dengan Tabel


Navigasi dengan tabel4

Navigasi dengan Tabel


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.


Pop up menu1

Pop Up Menu


Pop up menu2

Pop Up Menu


Pop up menu3

Pop Up Menu


Pop up menu4

Pop Up Menu


Pop up menu5

Pop Up Menu


Pop up menu6

Pop Up Menu


Pop up menu7

Pop Up Menu


Pop up menu8

Pop Up 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


  • Login