Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

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.

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="grid_4">
  <h3>1. Judul Artikel</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
 
<div class="grid_4">
  <h3>2. Judul Artikel</h3>
  <p>Quisque accumsan tristique tristique.</p>
</div>
 
<div class="grid_4">
  <h3>3. Judul Artikel</h3>
  <p>Maecenas consequat pellentesque sem.</p>
</div>
 
<div class="clear"></div>
 
<div class="grid_4">
  <h3>4. Judul Artikel</h3>
  <p>Donec at orci nisi.</p>
</div>
 
  <div class="grid_4">
    <h3>5. Judul Artikel</h3>
  <p>Donec at orci nisi.</p>
</div>
 
<div class="grid_4">
  <h3>6. Judul Artikel</h3>
  <p>Donec at orci nisi.</p>
</div>

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 Responses to Panduan Mudah Desain Web dengan 960gs –Bag 2

  1. hakim 31 May 2012 at 8:57 am #

    keren mas tutorialnya…
    aku tau sekarang cara penggunaan 960gs…

  2. phu 1 June 2012 at 10:41 am #

    thanks tipsnya!

  3. affanul 12 June 2012 at 8:10 am #

    thanks ms jaka tutorialnya membantu, sy juga masih belajar tentang 960 agak bingung juga tapi sekarang dh mulai jelas,.

Trackbacks/Pingbacks

  1. Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2 | Desaindigital - 13 June 2012

    [...] dengan Framework 960gs. Pastikan Anda telah menguasai dua artikel sebelumnya tentang 960gs yaitu Panduan Mudah Desain Web dengan 960gs –Bag 2 dan Bag [...]

Tinggalkan komentar Anda.

var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-9527890-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })(); (function() { var em = document.createElement(\'script\'); em.type = \'text/javascript\'; em.async = true; em.src = (\'https:\' == document.location.protocol ? \'https://id-ssl\' : \'http://id-cdn\') + \'.effectivemeasure.net/em.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(em, s); })();