Desain dan Pemrograman Web 1

PG110 3 SKS

2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260 Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

PERTEMUAN 09

MENU BERBASIS CSS

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Buat file baru

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Layout > Insert Div Tag  Nama ID = menu

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Buat daftar menu (enter untuk item menu)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Ubah daftar menu menjadi List

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Ubah masing-masing item menu menjadi link

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Aktifkan object DIV menu (1) dan buat CSS baru (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Buat aturan CSS baru, CSS disimpan di dokumen baru

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

Menu dengan CSS

 Simpan file CSS

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

10

Menu dengan CSS

 Atur warna background menu

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

11

Menu dengan CSS

 Atur lebar box menu (2) dan padding (3)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

12

Menu dengan CSS

 Hasil sementara (box menu berwarna biru)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

13

Menu dengan CSS

 Sorot object <ul> (1) dan buat CSS baru (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

14

Menu dengan CSS

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

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

15

Menu dengan CSS

 Ubah type list menjadi none (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

16

Menu dengan CSS

 Atur padding (2), margin (3) box menu item

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

17

Menu dengan CSS

 Item menu menjadi agak renggang dan bullet hilang

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

18

Menu dengan CSS

 Sorot object <a> (1) dan buat aturan CSS baru untuk mengatur masing2 item menu

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

19

Menu dengan CSS

 Selector = #menu a (2) dan define di file style.css (3)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

20

Menu dengan CSS

 Atur font (2), ukuran (3), warna (4) dan hilangkan garis bawah menu (5)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

21

Menu dengan CSS

 Atur warna background item menu (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

22

Menu dengan CSS

 Atur display menu menjadi Block (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

23

Menu dengan CSS

 Atur padding (2) item menu

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

24

Menu dengan CSS

 Hasil sementara

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

25

Menu dengan CSS

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

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

26

Menu dengan CSS

 Atur warna tulisan (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

27

Menu dengan CSS

 Atur background item menu (2)

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

28

Menu dengan CSS

 Hasil akhir

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

29

Menu dengan CSS

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

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

30

Contoh Menu
 Listamatic http://css.maxdesign.com.au/listamatic  CSS Based Menu http://www.smashingmagazine.com/2007/03 /14/css-based-navigation-menus-modernsolutions/

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

31

Terima Kasih
 Fakultas Teknologi Informasi Universitas Budi Luhur Jakarta Selatan http://fti.bl.ac.id

FAKULTAS TEKNOLOGI INFORMASI

DESAIN DAN PEMROGRAMAN WEB 1 PG110 3 SKS

32