Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260 Website:

Presentasi serupa


Presentasi berjudul: "© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260 Website:"— Transcript presentasi:

1 © 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan Website: Layout Situs dengan Tabel Pertemuan 05 Desain dan Pemrograman Web 1

2 Outline  Konsep Dasar Layout  Macam-macam Layout  Layout dengan Tabel  Membuat Layout Tabel dengan Dreamweaver

3 Apa itu Layout?  Layout situs adalah tata letak komponen halaman situs web.  Layout situs yang baik akan menjadikan situs baik juga.  Layout situs yang baik harus mendukung tujuan pembuatan situs itu sendiri.

4 Layout Situs yang Baik  Pengunjung merasa nyaman dengan tampilan (layout) situs, tetapi tetap dapat fokus pada isi (content). Desain situs tidak mengganggu kejelasan bagian isi.  Pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif.  Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content).

5 Web Page Anatomy

6  Containing Block. Bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag, atau.  Logo. Identitas perusahaan, organisasi, pemilik situs.  Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.

7 Web Page Anatomy  Content. Content is king. Isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.  Footer. Umumnya terdapat di bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.  Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung bisa “bernafas” di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.

8 Bentuk-bentuk Layout  Left-column navigation. Banyak digunakan, standar, klasik, sedikit kaku.  Right-column navigation. Umumnya digunakan oleh situs yang mengutamakan content (isi).  Three-column navigation. Digunakan untuk situs yang memiliki jumlah navigasi banyak, content relatif sedikit, dan menampilkan beberapa iklan (banner).

9 Trend Layout Situs  Expansive Footer Navigation. Navigasi terletak di footer, footer memiliki ukuran yang lebih lebar.  Three column with Contents First. Navigasi ada 2, content ditampilkan disisi kanan atau kiri (bukan di tengah)

10 Situs Inspirasi Layout  CSS Zen Garden (http://www.csszengarden.com/)http://www.csszengarden.com/  CSS Beauty (http://www.cssbeauty.com/)http://www.cssbeauty.com/  Stylegala Gallery (http://www.stylegala.com/archive/)http://www.stylegala.com/archive/  CSS Vault (http://cssvault.com/)http://cssvault.com/  Design Interact Site of the Week (http://www.designinteract.com/sow/)http://www.designinteract.com/sow/  Open Source Web Design (http://oswd.org)http://oswd.org

11 Layout dengan Tabel  Kelebihan:  Mudah, terutama untuk pemula.  Kekurangan:  Cukup rumit  Boros bandwidth (ukuran besar).  Beberapa browser tidak terlalu baik dalam menampilkannya.

12 Praktikum: Membuat Layout dengan Tabel  Buka Dreamweaver dan Buat halaman baru  Pilih Layout mode  Buat tabel untuk container  Buat tabel untuk header  Buat tabel untuk navigasi  Buat tabel untuk content  Buat tabel untuk footer  Buat cell untuk masing-masing komponen  Atur pewarnaan untuk masing-masing komponen.

13 Buat halaman baru dan ubah mode tampilan menjadi ‘Layout’

14 Pilih mode ‘Layout Table’

15 Buat table sebagai dasar tampilan (container)

16 Buat table untuk header

17 Buat table untuk bagian navigasi

18 Buat table untuk bagian content (isi)

19 Buat table untuk bagian footer

20 Buat cell untuk bagian header

21 Buat cell untuk bagian menu

22 Buat cell untuk bagian content (isi)

23 Buat cell untuk bagian footer

24 Atur warna background bagian header

25 Atur warna background bagian menu navigasi

26 Atur warna background bagian footer

27 Atur Judul situs di bagian header

28 Tambahkan menu item di bagian navigasi

29 Preview di Web Browser (F12)

30 Video Praktikum  Layout dengan Table (bagian 1) Layout dengan Table (bagian 1)  Layout dengan Table (bagian 2) Layout dengan Table (bagian 2)

31 Referensi  Jason Beaird, The Principles of Beautiful Web Design, SitePoint, 2007


Download ppt "© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260 Website:"

Presentasi serupa


Iklan oleh Google