PRAKTIKUM 2: CSS

Untuk materi dan file HTML praktikum 2 bisa di download disini. (termasuk 960 grid system [960.css])

Tujuan dari menggunakan framework 960 Grid System adalah untuk mempermudah kita membuat layout website. Dengan cara pandang grid yang berupa kolom2.

berikut ini contoh2 layout website pada umumnya :

 

960 menunjukan bahwa maksimal width dari website kita adalah 960 pixel.

Karena terdiri dari kolom2 ada yang 12 , 16 sampai 24 kolom. Untuk tugas ini cukup gunakan 12 saja.









Kebanyakan website terdiri dari header, konten, menu, sidebar, dan footer.

Header posisi selalu diatas, konten merupakan isi artikel website tersebut, menu bisa diposisikan dimana saja sesuai desaign (kebanyakan pada header, atau sampi di sidebar). Sidebar berada disamping dan footer selalu paling bawah yang menyediakan informasi hakcipta, dll.

Untuk menggunakannya gunakan penempatan css external seperti biasanya pada 960.css

Setelah itu silahkan pahami sintaks berikut :



\

"container_12" menunjukan layout yang kita buat tersusun dari 12 kolom.

class "grid_12" menunjukan kita menggunakan keseluruhan kolom. seperti gambar diatas dengan 940 pixel

class "grid_9" menunjukan kita menggunakan 9 kolom.
class "grid_3" menunjukan menggunakan 3 kolom. karena total sudah 12 kolom maka jika mendefinisikan grid lagi otomatis ke bawah.

ok seperti itu,.. haha,. gampang kan?

untuk mengatur height bisa diatur di div masing2, (mendefinisikan css yang lain = header, menu, footer, dll).

Untuk operasi lanjut ada push dan pull, untuk lebih jelasnya silahkan lihat gambar berikut :

 

Ada juga prefix dan suffix, kalau suffix efeknya didepan kalau prefix efeknya di belakang, untuk lebih jelasnya lihat gambar dibawah ini :

ok gampang kan? gampang donk. ok monggo digarap..

Posted in: Pemrograman Web