1 / 32

Desain dan Pemrograman Web 1

Desain dan Pemrograman Web 1. PG110 – 3 SKS. PERTEMUAN 09. MENU BERBASIS CSS. Menu dengan CSS. Buat file baru. Menu dengan CSS. Layout > Insert Div Tag Nama ID = menu. Menu dengan CSS. Buat daftar menu (enter untuk item menu). Menu dengan CSS. Ubah daftar menu menjadi List.

selia
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desain dan Pemrograman Web 1 PG110 – 3 SKS

  2. PERTEMUAN 09 MENU BERBASIS CSS

  3. Menu dengan CSS • Buat file baru

  4. Menu dengan CSS • Layout > Insert Div Tag • Nama ID = menu

  5. Menu dengan CSS • Buat daftar menu (enter untuk item menu)

  6. Menu dengan CSS • Ubah daftar menu menjadi List

  7. Menu dengan CSS • Ubah masing-masing item menu menjadi link

  8. Menu dengan CSS • Aktifkan object DIV menu (1) dan buat CSS baru (2)

  9. Menu dengan CSS • Buat aturan CSS baru, CSS disimpan di dokumen baru

  10. Menu dengan CSS • Simpan file CSS

  11. Menu dengan CSS • Atur warna background menu

  12. Menu dengan CSS • Atur lebar box menu (2) dan padding (3)

  13. Menu dengan CSS • Hasil sementara (box menu berwarna biru)

  14. Menu dengan CSS • Sorot object <ul> (1) dan buat CSS baru (2)

  15. Menu dengan CSS • Selector = #menu ul (2) dan definisikan CSS di style.css (3)

  16. Menu dengan CSS • Ubah type list menjadi none (2)

  17. Menu dengan CSS • Atur padding (2), margin (3) box menu item

  18. Menu dengan CSS • Item menu menjadi agak renggang dan bullet hilang

  19. Menu dengan CSS • Sorot object <a> (1) dan buat aturan CSS baru untuk mengatur masing2 item menu

  20. Menu dengan CSS • Selector = #menu a (2) dan define di file style.css (3)

  21. Menu dengan CSS • Atur font (2), ukuran (3), warna (4) dan hilangkan garis bawah menu (5)

  22. Menu dengan CSS • Atur warna background item menu (2)

  23. Menu dengan CSS • Atur display menu menjadi “Block” (2)

  24. Menu dengan CSS • Atur padding (2) item menu

  25. Menu dengan CSS • Hasil sementara

  26. Menu dengan CSS • Buat aturan CSS baru. Selector = #menu a:hover untuk mengatur CSS saat menu di-hover

  27. Menu dengan CSS • Atur warna tulisan (2)

  28. Menu dengan CSS • Atur background item menu (2)

  29. Menu dengan CSS • Hasil akhir

  30. Menu dengan CSS Artikel lengkap : Membuat Menu CSS dengan Dreamweaver Kembangkan untuk tampilan menu yang lebih menarik

  31. Contoh Menu Listamatichttp://css.maxdesign.com.au/listamatic CSS Based Menu http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/

  32. Terima Kasih Fakultas Teknologi InformasiUniversitas Budi Luhurhttp://fti.bl.ac.id

More Related