Panduan Mudah Desain Web dengan 960gs –Bag 2

Di bagian kedua panduan desain web dengan 960gs ini, kita akan melihat penggunaan beberapa class untuk memperbaiki tampilan elemen. Walaupun pendek, dengan berbekal artikel ini dan pengetahuan dasar CSS dan HTML Anda akan mampu membuat projek desain web sederhana.

[hr]

Menggeser Elemen Untuk Perbaikan Tampilan

Di bagian pertama, kita telah melihat keberadaan class dengan nama push_X dan pull_X. Dalam prakteknya, kedua class ini berguna dalam mengubah tampilan elemen tanpa mengubah posisi markup.

Lihat contoh di atas. Misalnya Anda ingin menyimpan logo situs di tengah dan sebelumnya menambahkan beberapa paragraf. Dalam markup html, mungkin alurnya adalah menempatkan paragraf baru kemudian logo. Cara ini tidak tepat bagi search engine atau pengunjung dengan browser terbatas karena dengan begitu paragraf ditempatkan lebih penting daripada logo. Dengan class push_X dan pull_X, kita bisa mengubah posisi elemen tanpa perlu menggeser alur markup.

Penggunaan Class clear

960gs membuat kolom-kolom dengan cara mengubah element menjadi float (melayang). Dalam kondisi float, kita menarik elemen itu dari alur dokumen dan menarik semua elemen lain ke atas.

Perhatikan layout di atas. Artikel 4 otomatis berada di sebelah artikel 1 karena menyesuaikan dengan sisa area kosong yang diperolehnya. Bagaimana jika Anda ingin menyimpannya di baris baru, tepat di bawah artikel 1?

Anda dapat menambahkan div kosong dengan class clear untuk mengosongkan div yang sebelumnya dalam kondisi float.

1. Judul Artikel

Lorem ipsum dolor sit amet.

2. Judul Artikel

Quisque accumsan tristique tristique.

3. Judul Artikel

Maecenas consequat pellentesque sem.

4. Judul Artikel

Donec at orci nisi.

5. Judul Artikel

Donec at orci nisi.

6. Judul Artikel

Donec at orci nisi.

Kesimpulan

Sistem grid 960.gs memberi kita cara mudah dalam mendesain web secara terstruktur dan rapi. Cukup saja dengan teori. Di artikel berikutnya, saya akan memperlihatkan cara mendesain sebuah situs portfolio menggunakan sistem grid 960.

4 pemikiran pada “Panduan Mudah Desain Web dengan 960gs –Bag 2

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s