We Share Because We Care: Cara Menggunakan 960Grid System dengan Adobe Dreamweaver Pt. 1

960grid adalah framework yang digunakan untuk layouting dan menggunakan panjang standar 960pixel, ada tiga type container untuk 960grid, yaitu: 12 kolom, 16 kolom dan 24 kolom yang dapat digunakan secara bersama maupun terpisah.

Penggunaan grid mempermudah pengaturan layouting dalam website yang akan kita buat, dalam container 12grid mempunyai whitespace 20pixel dan panjang per-grid 60pixel, container 16grid mempunyai whitespace 20pixel dan panjang per-grid 40pixel dan untuk container 24grid mempunyai whitespace 10pixel dan panjang per-grid 30pixel, penggunaan container disesuaikan dengan kebutuhan website yang akan kita buat, misalkan desainnya simple, lebih baik menggunakan container 12grid saja apabila layouting-nya sangat rumit disarankan menggunakan container 24grid.
Dalam tutorial kali ini akan menggunakan container 12grid dan diaplikasikan di Adobe Dreamweaver, persiapkan file 960.css, reset.css dan text.css yang dapat diunduh di http://github.com/nathansmith/960-Grid-System/zipball/master/
Pertama buka terlebih dahulu Adobe Dreamweaver dan pilih “Create New” dengan type file HTML.

Lihat di pallete File -> Local File pastikan bahwa file 960grid sudah tersimpan di komputer, lalu simpan terlebih dahulu file HTML tadi di dekat file 960grid (hal ini dilakukan agar penulisan lokasi file tidak telalu panjang). Kemudian lihat tab CSS Style dan klik “Attach Style Sheet”

lalu masukan “File/URL” dimana file 960grid.css disimpan, “Add as” sebagai Link dan pilih “Media” All. Disini sudah terlihat bahwa file 960grid.css sudah terhubung dengan file HTML.

Hubungkan semua stylesheet yang dibutuhkan untuk penggunaan 960grid dan stylesheet anda pribadi, misalkan style.css.

Apabila semua stylesheet sudah terhubung, langkah selanjutnya adalah memanggil class 960grid tersebut kedalam body di HTML dengan cara klik “Insert Div Tag” di dalam pallete Insert -> Common masukan “Class: container_12” karena kita akan menggunakan 12grid dan “ID: content” untuk pengaturan pribadi yang akan disimpan di stylesheet style.css.

Apabila sudah dimasukan maka class container_12 tadi sudah masuk dalam body.

Untuk mengetes class dan id yang dimasukan dalam body kita berikan settingan seperti dibawah dan disimpan dalam style.css

Dan apabila berhasil maka tampilan akan seperti dibawah ini.

Selanjutnya adalah memasukan kembali class ke dalam container didalam body, dengan cara “Insert Div Tag” seperti tadi, tetapi sekarang bukan memasukan container, tapi grid yang akan dimasukan, karena kita menggunakan container_12 maka total grid setiap baris haruslah berjumlah 12grid, misalkan kita akan membuat banner dengan 2grid untuk logo AUGI dengan nama augi.png, 2grid untuk menu Home, 2grid untuk menu Artikel, 2grid untuk menu News, 2grid untuk menu Forum dan 2grid untuk menu About maka total semua grid dalam satu baris adalah 12grid.

dan jangan lupa pindahkan ID: content ke setiap grid menu dan tambahkan settingannya menjadi seperti gambar dibawah ini.

Maka hasilnya

Selanjutnya adalah membuat tampilan gambar ditengah dengan 12grid dengan panjang gambar 940pixel yang kita simpan dengan nama 1.jpg.

mengapa harus 940 pixel? Karena yang kita gunakan adalah container_12 dan 12grid didalamnya maka rumusnya
(A*B)+((A-1)*C)=IMG
A=Jumlah grid yang digunakan
B=Panjang satu grid
C=Panjang satu whitespace
(12*60px)+((12-1)*20px)=940px

Jangan lupa apabila sudah selesai satu baris maka kita wajib memasukan class “clear”, clear ini digunakan untuk menghapus stylesheet pribadi agar tidak masuk ke baris selanjutnya, misalakan dalam penggunaan float. Maka tampilan akan menjadi seperti dibawah ini.

Selanjutnya adalah memberi konten tulisan yang akan dibagi menjadi 3kolom, sehingga satu kolom memerlukan 4grid. Maka tambahakan class dan ID:three seperti dibawah ini