1 AUTHOR : RUDI SETYAWAN NIM : MATA KULIAH : WEB STATIS TUTORIAL FRAMEWORK 960gs Konsep 960gs adalah dengan membagi area desain selebar 960px kedalam ...
TUTORIAL FRAMEWORK 960gs Konsep 960gs adalah dengan membagi area desain selebar 960px kedalam beberapa kolom. Angka 960 dipilih karena dapat dibagi dengan mudah sehingga menjadi 2 sampai 24 kolom. Untuk saat ini framework 960px dibagi ke dalam 12, 16, dan 24 kolom. Nanti akan kita coba untuk yang 12 kolom, seperti contoh dibawah :
MEMULAI Hal pertama yang akan kita lakukan adalah mendownload dan meng-extrax framework dari website http://960.gs. Lalu cari file 960_12_col.css (untuk 12 kolom) dan buka dalam text editor. Kalau saya pakai notepad++ lalu buat kode berikut :
Kita siapkan area yang akan kita dibagi ke dalam 12 kolom,lalu buat kode berikut :
Lalu kita berikan nama class yang sesuai dengan lebar kolom. Contoh untuk membuat 9 kolom dan 3 kolom cukup menambahkan class grid_9 dan grid_3. Dalam pemberian kolom, yang terpenting jumlahnya tidak lebih 12 kolom, sebagai contoh apabila kita mengisi dengan grid_9 dan Grid_4 maka tidak bisa karena hasil dari grid_9 tambah grid_4 lebih dari 12 kolom. Berikut contoh markupnya :
...
...
Menggeser kolom kita bisa menggeser posisi beberapa kolom tertentu dengan menambahkan class push_x dan pull_x, kegunaan class push_x untuk menggeser kekanan sejauh x dan pull_x untuk menggeser kolom ke kiri sejauh x. Berikut contoh markupnya :
Mengosongkan kolom kita bisa menggunakan fitur class perfix_x untuk bagian belakang dan suffix_x untuk bagian depan, dengan format prefix_4+grid_4+suffix_4 saat kita menggunakan 12 kolom. Berikut contoh markupnya :
Membuat child kolom Untuk membuat child kolom pada framework 960gs memamg gampang gampang susah, dalam kolom child, kita cukup menandai kolom awal dengan alpha dan kolom akhir dengan omega. Berikut contoh markupnya :
Pada tutorial kali ini saya mencontohkan untuk membuat halaman web sederhana. Nanti ada bagian untuk header, bagian untuk artikel, bagian untuk sidebar dan bagian untuk footer. Kita coba membuat 12 kolom dengan 860px bagian utama dan 60px sidebar. Untuk itu kita akan menggunakan grid 9 dan grid 11 bersama-sama.Pada tutorial kali ini saya mencontohkan untuk membuat halaman web sederhana. Nanti ada bagian untuk header, bagian untuk artikel, bagian untuk sidebar dan bagian untuk footer. Kita coba membuat 12 kolom dengan 860px bagian utama dan 60px sidebar. Untuk itu kita akan menggunakan grid 9 dan grid 11 bersama-sama.
<article>
<span>
Judul Artikel ke 2 (grid_6)
Pada tutorial kali ini saya mencontohkan untuk membuat halaman web sederhana. Nanti ada bagian untuk header, bagian untuk artikel, bagian untuk sidebar dan bagian untuk footer. Kita coba membuat 12 kolom dengan 860px bagian utama dan 60px sidebar. Untuk itu kita akan menggunakan grid 9 dan grid 11 bersama-sama.Pada tutorial kali ini saya mencontohkan untuk membuat halaman web sederhana. Nanti ada bagian untuk header, bagian untuk artikel, bagian untuk sidebar dan bagian untuk footer. Kita coba membuat 12 kolom dengan 860px bagian utama dan 60px sidebar. Untuk itu kita akan menggunakan grid 9 dan grid 11 bersama-sama.
Bila ku terjatuh nanti, kita siap melompat lebih tinggi.. bersama kita bagai hutan dan hujan. aku ada karena kau telah tercipta..
Kupetik bintang, untuk kau simpan, cahayanya terang berikan kau perlindungan, sebagai pengingat teman
Nanti kita akan coba untuk menambahkan Header, maincontent, sidebar, dan footer.Sekarang kita telah punya grid default, nah sekarang kita akan coba untuk membuat design kita sendiri
Nanti kita akan coba untuk menambahkan Header, maincontent, sidebar, dan footer.Sekarang kita telah punya grid default, nah sekarang kita akan coba untuk membuat design kita sendiri
Sekarang kita telah punya grid default, nah sekarang kita akan coba untuk membuat design kita sendiri. Nanti kita akan coba untuk menambahkan Header, maincontent, sidebar, dan footer.Sekarang kita telah punya grid default, nah sekarang kita akan coba untuk membuat design kita sendiri. Nanti kita akan coba untuk menambahkan Header, maincontent, sidebar, dan footer.Sekarang kita telah punya grid default, nah sekarang kita akan coba untuk membuat design kita sendiri.
