Layout situs dengan table

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 situs baik juga.

• Layout situs yang baik harus mendukung tujuan pembuatan situs itu sendiri.

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).

Web page anatomy

• 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.

• 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.

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).

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)

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/)

Layout dengan table

• Kelebihan: