Layout Situs Dengan Tabel

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

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

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.

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 Tabel
 Kelebihan:
 Mudah, terutama untuk pemula.
 Kekurangan:
 Cukup rumit
 Boros bandwidth (ukuran besar).
 Beberapa browser tidak terlalu baik dalam
menampilkannya.

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.

Buat halaman baru dan ubah mode
tampilan menjadi ‘Layout’

Buat table sebagai dasar tampilan
(container)

Buat table untuk bagian navigasi

Buat table untuk bagian content (isi)

Buat table untuk bagian footer

Buat cell untuk bagian content (isi)

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

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

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

Layout Situs Dengan Tabel

Related slideshows

More Related Content

Layout Situs Dengan Tabel