Monday, 27 September 2010

Membuat Layout dengan CSS (Sample 1)

| Monday, 27 September 2010 | 0 comments

Membuat Layout dengan CSS (Sample 1)




Pada  bagian  ini,  Anda  akan  dipandu  bagaimana  membuat  layout  desain  halaman  web
dengan memanfaatkan CSS. Dengan CSS, Anda tidak membutuhkan tabel dalam menata
layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan
juga  lebih  meminimalisasi  jumlah  byte  file.  Apabila  Anda  menggunakan  tabel  untuk
mendesain  layout,  maka  semakin  banyak  sel  yang  dibuat,  akan  semakin  besar  ukuran
byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.

Untuk membuat layout dengan CSS hal terpenting yang harus dilakukan adalah membagi
elemen halaman ke dalam division-division tertentu.

Berikut ini adalah code halaman web yang belum dilayout tampilannya.

<html>
<head>
<title>Dasar-dasar layout</title>
</head>
<body>
<div id="header">
    <h1>welcome to my site</h1>
</div>

<div id="navigasi">
    <h3>Menu Navigasi</h3>
    <ul>
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
<li><a href="link4.htm">Link 4</a></li>
<li><a href="link5.htm">Link 5</a></li>
<li><a href="link6.htm">Link 6</a></li>
    </ul>
</div>

<div id="isi">
    <img src="sunset.jpg" />
    <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
             Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
             Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
             Ini adalah bagian isi. Ini adalah bagian isi. 
          </p>

    <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
             Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 




Membuat Layout dengan CSS (Sample 1)



             Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
             bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
             Ini adalah bagian isi. Ini adalah bagian isi. 
          </p>
</div>

<div id="footer">
     <p>Copyright &copy; 2007 by rosihanari</p>
</div>

</body>
</html> 


Pada contoh ini, kita akan membuat layout sbb:




Perhatikan  desain  di  atas,  terdapat  4  bagian  sel  yang  akan  kita  buat.  Sebaiknya  untuk
nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami.

Untuk yang pertama, kita akan membuat sel untuk bagian header. Berikut ini style untuk
bagian header yang saya buat.


#header {
           padding:10px;               /* jarak teks dari tepi kotak */
           border:1px solid #000000;   /* membuat garis tepi 1 pixel */
           background-color:#CCCCCC;   /* membuat warna latar */
        }
 
Properti padding menyatakan jarak antara tepi sel dengan elemen yang ada di dalamnya.
Berikut contoh style lain dengan padding nya 40 pixel dan juga tipe garis bordernya
putus-putus (dashed).

#header {
           padding:40px;            
           border:3px dashed #000000;   /* garis tepi putus-putus */
           background-color:#CCCCCC;   
        } 

Kita kembalikan ke style yang header awal saja ya, karena contoh di atas hanya untuk
menjelaskan penggunaan padding dan dashed. Style header yang kita gunakan adalah

#header {
           padding:10px;            
           border:1px solid #000000;   
           background-color:#CCCCCC;   
        }

Sedangkan style untuk footernya dapat ditulis sebagai berikut:

#footer {
           padding:10px;
           border:1px solid #000000;
           background-color:#CCCCCC;
        } 

Selanjutnya kita buat style untuk bagian isi.

#isi {
       padding:10px;
       border:1px solid #000;
     }



0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com