Layout Situs dengan
                                                            Tabel
                                    ...
Outline
   Konsep Dasar Layout
   Macam-macam Layout
   Layout dengan Tabel
   Membuat Layout Tabel dengan Dreamweaver
Apa itu Layout?
 Layout situs adalah tata letak komponen
  halaman situs web.
 Layout situs yang baik akan menjadikan si...
Layout Situs yang Baik
 Pengunjung merasa nyaman dengan tampilan
  (layout) situs, tetapi tetap dapat fokus pada isi
  (c...
Web Page Anatomy
Web Page Anatomy
 Containing Block. Bagian dari halaman web
  yang membungkus semua komponen halaman
  web. Umumnya dibua...
Web Page Anatomy
 Content. Content is king. Isi adalah segalanya, karena
  disinilah sebagian besar informasi disajikan.
...
Bentuk-bentuk Layout
 Left-column navigation. Banyak
  digunakan, standar, klasik, sedikit kaku.
 Right-column navigatio...
Trend Layout Situs
 Expansive Footer Navigation. Navigasi terletak
  di footer, footer memiliki ukuran yang lebih
  lebar...
Situs Inspirasi Layout
 CSS Zen Garden
  (http://www.csszengarden.com/)
 CSS Beauty (http://www.cssbeauty.com/)
 Styleg...
Layout dengan Tabel
 Kelebihan:
   Mudah, terutama untuk pemula.
 Kekurangan:
   Cukup rumit
   Boros bandwidth (ukur...
Praktikum: Membuat Layout dengan
             Tabel
   Buka Dreamweaver dan Buat halaman baru
   Pilih Layout mode
   B...
Buat halaman baru dan ubah mode
    tampilan menjadi ‘Layout’
Pilih mode ‘Layout Table’
Buat table sebagai dasar tampilan
            (container)
Buat table untuk header
Buat table untuk bagian navigasi
Buat table untuk bagian content (isi)
Buat table untuk bagian footer
Buat cell untuk bagian header
Buat cell untuk bagian menu
Buat cell untuk bagian content (isi)
Buat cell untuk bagian footer
Atur warna background bagian
           header
Atur warna background bagian menu
             navigasi
Atur warna background bagian footer
Atur Judul situs di bagian header
Tambahkan menu item di bagian
          navigasi
Preview di Web Browser (F12)
Video Praktikum
 Layout dengan Table (bagian 1)
 Layout dengan Table (bagian 2)
Referensi
 Jason Beaird, The Principles of Beautiful Web
  Design, SitePoint, 2007
Upcoming SlideShare
Loading in …5
×

Layout Situs Dengan Tabel

3,353 views

Published on

Layout Situs dengan Tabel

Published in: Education, Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,353
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Layout Situs Dengan Tabel

  1. 1. Layout Situs dengan Tabel Pertemuan 05 Desain dan Pemrograman Web 1 © 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
  2. 2. Outline  Konsep Dasar Layout  Macam-macam Layout  Layout dengan Tabel  Membuat Layout Tabel dengan Dreamweaver
  3. 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. 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. 5. Web Page Anatomy
  6. 6. Web Page Anatomy  Containing Block. Bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.  Logo. Identitas perusahaan, organisasi, pemilik situs.  Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
  7. 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. 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. 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. 10. Situs Inspirasi Layout  CSS Zen Garden (http://www.csszengarden.com/)  CSS Beauty (http://www.cssbeauty.com/)  Stylegala Gallery (http://www.stylegala.com/archive/)  CSS Vault (http://cssvault.com/)  Design Interact Site of the Week (http://www.designinteract.com/sow/)  Open Source Web Design (http://oswd.org)
  11. 11. Layout dengan Tabel  Kelebihan:  Mudah, terutama untuk pemula.  Kekurangan:  Cukup rumit  Boros bandwidth (ukuran besar).  Beberapa browser tidak terlalu baik dalam menampilkannya.
  12. 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. 13. Buat halaman baru dan ubah mode tampilan menjadi ‘Layout’
  14. 14. Pilih mode ‘Layout Table’
  15. 15. Buat table sebagai dasar tampilan (container)
  16. 16. Buat table untuk header
  17. 17. Buat table untuk bagian navigasi
  18. 18. Buat table untuk bagian content (isi)
  19. 19. Buat table untuk bagian footer
  20. 20. Buat cell untuk bagian header
  21. 21. Buat cell untuk bagian menu
  22. 22. Buat cell untuk bagian content (isi)
  23. 23. Buat cell untuk bagian footer
  24. 24. Atur warna background bagian header
  25. 25. Atur warna background bagian menu navigasi
  26. 26. Atur warna background bagian footer
  27. 27. Atur Judul situs di bagian header
  28. 28. Tambahkan menu item di bagian navigasi
  29. 29. Preview di Web Browser (F12)
  30. 30. Video Praktikum  Layout dengan Table (bagian 1)  Layout dengan Table (bagian 2)
  31. 31. Referensi  Jason Beaird, The Principles of Beautiful Web Design, SitePoint, 2007

×