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

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’

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

Layout Situs Dengan Tabel

0 comments

Notes on slide 1

Favorites, Groups & Events