Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
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
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
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 ( CSS Beauty ( Stylegala Gallery ( CSS Vault ( Design Interact Site of the Week ( Open Source Web Design (
11
Layout dengan Tabel Kelebihan: Kekurangan:
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)
31
Referensi Jason Beaird, The Principles of Beautiful Web Design, SitePoint, 2007
Presentasi serupa
