Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet itu sendiri adalah sebuah skrip yang dapat digunakan untuk memisahkan antara tampilan dan isi sebuah website. Dengan CSS, kita dapat mengubah tampilan sebuah website dengan mudah tanpa harus mengutakatik isi dari website tersebut. Manfaat dari penggunaan CSS ini baru akan terasa bila kita mempunyai banyak halaman pada sebuah website dan ingin segera mengubah tampilan website tersebut supaya lebih segar dan lebih menarik lagi saat dilihat oleh pengunjung yang datang. Pada praktek kali, kita akan membuat sebuah template website sederhana berbasis tiga kolom dan menggunakan sebuah teknik yang sangat menarik. Teknik ini saya sebut sebagai Teknik Layer CSS atau dalam bahasa Inggris-nya adalah CSS Layered Technique. Teknik ini terinspirasi dari teknik pelayeran yang dipakai aplikasi pengolah gambar terkenal seperti Adobe Photoshop, GIMP, dan lain-lain. Namun, kali ini kita akan menggunakan skrip CSS-nya diluar file utama HTML-nya atau istilah kerennya disebut External Style. Oiya, Teknik Layer CSS ini hanyalah sebuah teknik rekaan saya saja dan semata-mata hanya untuk mempermudah nalar saya dalam membuat template website. Bila ada kesamaan tokoh, cerita, dan lain-lain itu terjadi karena ketidaksengajaan belaka. Dalam praktek ini, saya hanya akan menggunakan tool-tool berikut : Web browser : Internet Explorer 7 Text Editor : Notepad++ OK. Setelah mempersiapkan semuanya, mari kita beralih ke langkah-langkah pembuatannya. Langkah-langkah pembuatannya adalah sebagai berikut: Membuat File Style.CSS 1. Buka aplikasi Notepad++. Pada menubar Language, pilihlah CSS. 2. Setelah itu, ketikkan skrip di bawah ini: /* layer pertama */ #background{ width : 700px; height: 1000px;
margin-left:40px; margin-top:30px; Penjelasan : Pada layer pertama ini, kita buat sebuah dasar template yang kita beri nama background menggunakan ID Selector (bertanda #). Pada background ini, kita tentukan luasnya yaitu 700x1000 piksel dengan warna hitam pekat. Background ini juga memakai margin kiri sebanyak 40 piksel dan margin atas sebanyak 30 piksel. Ini bertujuan agar template website ini tidak mepet pada jendela web browser nantinya. Sebagai info, layer pertama ini akan kita gunakan sebagai patokan untuk layer-layer lain diatasnya. 3. Selanjutnya, kita akan buat layer kedua dari template ini. Ketikkanlah skrip-skrip di bawah ini: /* layer kedua */ div#background div#header{ width:690px; height:140px; background-color:#505050; margin-top : 5px; margin-right : 5px; margin-left : 5px; div#background div#body{ width:690px; height:700px; background-color:#505050; margin : 5px; div#background div#footer{ width:690px; height:140px; background-color:#505050; margin-bottom : 5px; margin-right : 5px; margin-left : 5px; Penjelasan : Pada layer kedua ini, kita akan membagi luas dari background pada layer pertama tadi menjadi tiga bagian. Tiga bagian tersebut antara lain header, body, dan footer. Untuk membedakan layer kedua ini dengan layer pertama, kita samakan saja warnanya untuk ketiga bagian tersebut yakni abu-abu. Untuk header dan footer, kita beri pengaturan yang sama persis untuk lebar dan tingginya. Namun, untuk body kita akan memberikan porsi yang berbeda khususnya untuk pengaturan tingginya. Kalau dipersenkan menjadi 15% untuk header, 15% untuk footer, dan 70% untuk body. Ini dilakukan agar template kita menjadi simetris. Ketiga bagian itu mempunyai lebar yang sama yakni 690 piksel. Mengapa 690 piksel, bukannya lebar background tadi 700 piksel? Lalu dikemanakan sisa 10 pikselnya? Hmm... pertanyaan bagus. Sengaja kita memakai lebar 690 piksel dan menyisakan
10 piksel. Sisa 10 piksel ini kita gunakan untuk margin dengan rincian untuk margin kiri dan kanan masing-masing sebanyak 5 piksel. Seperti yang saya kemukakan sebelumnya, kita akan lebih meninggikan bagian body ketimbang untuk bagian header/footer. Untuk bagian header/footer, kita beri 140 piksel untuk tingginya. Sedangkan untuk bagian body, kita beri 700 piksel untuk tingginya. Wait a second! Jika dijumlahkan seluruh tingginya antara header, footer, dan body, kok hanya menjadi 980 piksel? Bukannya tinggi background tadi 1000 piksel? Kemana larinya 20 pikselnya? Lagi-lagi pertanyaan yang bagus. Sisa 20 piksel ini kita gunakan untuk margin, namun dengan rincian masing-masing 5 piksel untuk header dan footer serta 10 piksel untuk body. Untuk header, kita gunakan 5 piksel tersebut untuk margin atas. Sedangkan untuk footer, kita gunakan 5 piksel tersebut untuk margin bawah. Dan untuk body, kita gunakan 10 piksel sisanya untuk margin atas dan bawah. Margin-margin tersebut kita gunakan agar layer kedua ini tidak tumpang tindih alias mepet dengan layer pertama dan juga agar kita bisa membedakan mana bagian header, body, dan footer. 4. Selanjutnya, kita buat layer ketiganya. Ketikkanlah skrip di bawah ini! /* layer ketiga */ div#body div#right-sidebar{ width : 90px; height : 690px; margin-right : 5px; margin-top : 5px; margin-bottom: 5px; float : right; div#body div#center{ width : 490px; height : 690px; margin : 5px; float : left; div#body div#left-sidebar{ width : 90px; height : 690px; margin-left : 5px; margin-top : 5px; margin-bottom: 5px; float : left; Penjelasan : Sekarang kita berada pada layer ketiga. Pada layer ketiga ini, kita akan membelah bagian body dari layer kedua tadi. Kita akan membaginya menjadi tiga bagian lagi yaitu left-sidebar, center, dan right-sidebar. Pembagian lebar dan tingginya untuk masing-masing bagian, sama logikanya seperti pada layer kedua. Namun pada layer ketiga ini, pengaturan tingginya yang disamakan yaitu 690 piksel. Sedangkan untuk pengaturan lebar, right-sidebar dan left-sidebar masing-masing kita beri 90 piksel +
5 piksel untuk margin. Margin kanan untuk right-sidebar dan margin kiri untuk leftsidebar. Untuk bagian center, kita beri 490 piksel plus 5 piksel untuk margin kanan dan kiri. Satu hal yang perlu diperhatikan di sini adalah pengaturan float-nya. Float ini bertindak layaknya alignment pada teks tetapi hal ini hanya ditujukan untuk CSS. Jika Anda tidak memakai float, maka bisa dipastikan Anda tidak akan mendapati 3 buah kolom yang saling berdampingan. Anda hanya akan mendapati bahwa 3 kolom tersebut bersusun ke bawah bukannya ke samping. Untuk right-sidebar, kita atur floatnya di kanan dan untuk left-sidebar, kita atur float-nya di kiri. Sedangkan untuk center, kita atur saja float-nya di kiri. Kalau float-nya kita akan atur di kanan atau tengah pasti hasilnya akan hancur. Coba saja sendiri kalau tidak percaya. Oiya hampir lupa, kita beri warna hitam pekat untuk layer ketiga ini. 5. Simpanlah skrip-skrip tersebut dengan nama style.css. Membuat File Index.HTML Setelah membuat file CSS-nya yaitu style.css, sekarang kita akan membuat file HTMLnya. Kita akan memberinya nama index.html. Langkah-langkah pembuatan file tersebut adalah sebagai berikut : 1. Buka aplikasi Notepad++. Kali ini pada menubar Language, pilihlah HTML. 2. Ketikkan skrip-skrip di bawah ini. <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="background"> <div id="header"></div> <div id="body"> <div id="left-sidebar"></div> <div id="center"></div> <div id="right-sidebar"></div> </div> <div id="footer"></div> </div> </body> </html>
Penjelasan : Perintah <link rel="stylesheet" type="text/css" href="style.css"> kita gunakan untuk meng-embed file style.css ke dalam file index.html ini. Dikarenakan kita memakai ID Selector secara keseluruhan pada skrip-skrip di file style.css, maka untuk memanggil selector-selector tersebut kita harus memakai sintaks <div id= nama_selector ></div>. OK, selector yang kita panggil pertama adalah background. Seperti yang sudah saya katakan di awal tadi, background ini kita tempatkan sebagai layer pertama. Setelah background, kita panggil header, body, dan footer sebagai layer kedua. Terakhir, kita panggil left-sidebar, center, dan right-sidebar sebagai layer ketiga. Cara memanggilnya harus sama seperti yang tertera pada skrip di atas. Mengapa? Karena kita menggunakan sintaks div#selector_parent div#selector_child{ pada file style.css yang kita embed. Bila Anda memaksa untuk tidak mau mengikuti skrip di atas, Anda bisa memilih untuk menggunakan Class Selector dengan sintaks.nama_selector atau ID Selector biasa dengan sintaks #nama_selector dengan konsekuensi file style.css Anda tidak tersusun dengan rapi. 3. Simpanlah file index.html tersebut di tempat yang sama dengan file style.css, misalnya di drive E:\. 4. Setelah menyimpan file index.html tersebut, jalankanlah dengan cara klik ganda pada file tersebut. Maka Anda akan mendapati hasilnya pada jendela Internet Explorer 7 seperti gambar berikut ini!
Bila dirasa masih kurang bagus, Anda boleh mengkustomisasinya lebih lanjut, misalnya seperti gambar di bawah ini! Akhir kata, selamat bereksperimen!