Layout situs dengan table

Posted on July 15, 2015. Filed under: Desain Web 1 ( Semester 2) |

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:
        Mudah, terutama untuk pemula.
         Kekurangan:
        Cukup rumit
        Boros bandwidth (ukuran besar).
        Beberapa browser tidak terlalu baik dalam menampilkannya.
Praktikum : Membuat layout dengan table
         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 isi (content)
Buat table untuk bagian footer
Buat cell untuk bagian header
Buat cell untuk bagian menu
Buat cell untuk bagian isi (content)
Buat cell untuk bagian footer
Atur warna background bagian header
Atur warna background bagian navigasi
Atur warna background bagian footer
Atur judul situs dibagian header
Tambahkan menu item di bagian navigasi
Preview di browser (F12)
Referensi
         Jason Beaird, The Principles of Beautiful Web Design, SitePoint, 2007

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Blog Stats

    • 53,773 hits
  • Top Rated

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: