Tips: Membuat Tata Letak 2-3 Kolom dengan CSS dan Prado

(1/1)

Kabayan:
Dalam pembuatan tata letak, tips ini mungkin tidak begitu membantu mengingat selera ikut bermain. Satu orang mungkin menyukai desain A, akan tetapi belum tentu disukai oleh yang lainnya. Oleh karena itu,  saya mengambil jalan tengah, yakni menjelaskan bagaimana cara cepat dalam menyiapkan tata letak (lay out) untuk sebuah situs. Gambar-gambar tidak akan menggunakan gambar aneh apalagi vulgar. Seandainya anda belum memahami CSS, mungkin ini akan mendorong anda untuk mempelajari CSS lebih lanjut. Saya hanya menjelaskan secara sekilas mengenai CSS karena tidak pada tempatnya saya untuk dijelaskan secara mendalam dalam forum ini.

Tata letak 2 atau 3 kolom lebih dikenal dengan sebutan Fluid Layout dan Fixed Layout, dengan kerangka dasar dua kolom atau tiga kolom. Pada tata letak dua kolom, pada kolom kiri mungkin berisi lebih dari satu kolom (sub kolom), sedangkan kolom kanan untuk keperluan menampilkan produk atau informasi lain. Untuk tata letak tiga kolom, kolom kiri biasanya dipakai untuk menu vertikal, formulir masuk, dan info singkat. Kolom tengah dipakai untuk menampilkan rincian produk atau isi berita utama, sedangkan kolom kanan biasanya dipergunakan untuk menampilkan ringkasan produk-produk atau info-info lain.

Kendala dalam tips ini adalah, tidak bisa menampilkan gambar kerangka tata letak karena keterbatasan aturan forum.

Selanjutnya: elemen-elemen penting CSS

Kabayan:
Elemen-elemen CSS yang penting diketahui (untuk sementara) adalah selector, margin, padding, color, font, text dan border.
Setiap selektor memiliki properti dan nilai yang ditandai dengan kurung kurawal {}.

Satuan Panjang dan Prosentase.
em adalah unit yang diperhitungkan dari besarnya font. Maka "2em", adalah dua kali ukuran font saat ini.
px adalah unit untuk pixel.
pt adalah unit point.
% adalah unit untuk prosentase.

Jika nilai berisi nol Anda tidak perlu menyertakan secara keseluruhan pada nilai properti, contohnya border: 0 tidak harus border: 0 0 0 0

Anda dapat menemukan tutorial mengenai CSS untuk pemula, lanjutan, dan tingkat mahir di http://www.htmldog.com/guides/cssbeginner/.
Silahkan Anda pelajari beserta contoh tampilannya karena saya tidak akan mengulangnya di sini.

Kabayan:
Dengan harapan bahwa Anda sudah mempelajari CSS di alamat yang saya rujuk sebelumnya. Minimal elemen-elemen yang ada di dalam CSS berikut tidak lagi menjadi asing bagi Anda. Selanjutnya kita akan membuat tata letak tiga kolom Fluid yang sangat sederhana berisi header, kolom kiri (20%) kolom konten (55%), kolom kanan (25%) dan footer seperti berikut:

Nama file: mystyle.css
Code:

body{
   margin:0;
   padding:0;
   line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#header{
   background: #EAEAEA;
   height: 90px;
}

#header h1{
  margin: 0;
  padding-top: 15px;
}

#contentwrapper{
   float: left;
   width: 100%;
}

#kolomKonten{
   margin: 0 25% 0 20%;
}

#kolomKiri{
   float: left;
   width: 20%;
   margin-left: -100%;
   background: #C8FC98;
}

#kolomKanan{
   float: left;
   width: 25%;
   margin-left: -25%;
   background: #FDE95E;
}

#footer{
   clear: left;
   width: 100%;
   background: black;
   color: #FFF;
   text-align: center;
   padding: 4px 0;
}

#footer a{
   color: #FFFF80;
}

.lingkarDalam{
   margin: 10px;
   margin-top: 0;
}


Selanjutnya: penjelasan CSS dan implementasi dalam Prado.

Kabayan:
Sejauh ini mungkin belum terbayang tampilan yang akan dihasilkan menggunakan CSS ini. Pengujian termudah adalah dengan menerapkannya langsung pada file html secara langsung hanya untuk melihat tampilannya.

body: dipakai untuk mengatur keseluruhan halaman, dalam hal ini hanya marjin, jarak, dan tinggi baris.
#header: dipkakai untuk menampilkan tulisan pada header
#contentwrapper: dipakai untuk menaungi semua kolom: konten, kiri, dan kanan.
#kolomKonten: dipakai untuk menampung data di tengah.
#kolomKanan: dipakai untuk menampung data pada sisi kanan.
#kolomKiri: dipakai untuk menampung data pada sisi kiri.
#footer: dipakai untuk menampung data pada footer (kaki halaman).
#lingkarDalam: dipakai untuk menampung data di lingkup lebih dalam untuk setiap kolom.
 b dan em untuk menetapkan ukuran font dan warnanya

Kabayan:
Anda dapat menyiapkan folder dengan prado-cli.php, misalnya seperti contoh berikut:
Code:

E:\www\Komunitas\Prado>php \www\Prado\framework\prado-cli.php -c TutorCSS
Command line tools for Prado 3.1.2a.
creating E:\www\Komunitas\Prado\TutorCSS\assets
creating E:\www\Komunitas\Prado\TutorCSS\protected
creating E:\www\Komunitas\Prado\TutorCSS\protected\runtime
creating E:\www\Komunitas\Prado\TutorCSS\protected\pages
creating E:\www\Komunitas\Prado\TutorCSS\index.php
creating E:\www\Komunitas\Prado\TutorCSS\protected\application.xml
creating E:\www\Komunitas\Prado\TutorCSS\protected\.htaccess
creating E:\www\Komunitas\Prado\TutorCSS\protected\pages\Home.page

E:\www\Komunitas\Prado>

Untuk mengimplementasikan CSS ke dala PRADO, dalam contoh ini cukup mengganti isi dari Home.page dengan kode berikut:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<com:THead Title="Contoh Layout CSS" >
<link rel="stylesheet" type="text/css" href="mystyle.css">
</com:THead >

</body>
<div id="header">
  <div class="lingkarDalam"><h1>Contoh Tata Letak CSS 3Kolom</h1></div>
</div>

<div id="contentwrapper">
  <div id="kolomKonten">
  <div class="lingkarDalam">
     <b>Konten Kolom: Tata Letak <em>Fluid</em></b> <br />
Di dalam CSS sudah ditetapkan bahwa lebar kolom sebesar <em>sisa dari kolom kanan dan kiri</em></b>
untuk kolom konten ini.
  </div>
  </div>
</div>

<div id="kolomKiri">
<div class="lingkarDalam">
<b>Sisi Kiri:</b> Di dalam CSS sudah ditetapkan bahwa lebar kolom sebesar <b><em>20%</em></b>
untuk kolom di sebelah kanan.
</div>
</div>

<div id="kolomKanan">
<div class="lingkarDalam">
<b>Sisi Kanan:</b> Di dalam CSS sudah ditetapkan bahwa lebar kolom sebesar <b><em>25%</em></b>
untuk kolom di sebelah kanan.
text
</div>
</div>

<div id="footer"><a href="http://www.pradosoft.com/">Komunitas PRADO Indonesia</a></div>
</body>
</html>

Halaman ini tidak berisi kontrol apa pun karena tujuannya adalah melihat bagaimana tata letak dibentuk. Untuk tampilan dua kolom, Anda dapat bereksperimen sendiri karena dua kolom sangat mudah.

Navigation

[0] Message Index