Membuat Desain Web Liquid Dengan CSS
Ditulis Oleh Likaliku, 25/04/2010

Membuat Desain Web Liquid Dengan CSS

Hari ini aku mau ngajak kalian buat belajar mendesain web, lebih khusus lagi Web Liquid. Ehm maksudnya gmn ya? Liquid itu artinya cairan, yang bisa juga berarti fleksibel.Lho kok Fleksibel? ya..karena Desain web kita kali ini tidak memiliki ukuran tetap, dan mengikuti resolusi monitor si pengunjung?Terus Keuntungannya apa?

Keuntungan yang paling utama adalah, kita menjadi desainer yang mengikuti trendsetter.. hehehe...yak..Setelah pemikiran tentang mendesain web berubah, dari berbasis table dan beralih menjadi tableless ( dengan DIV ), saat ini tren layout yang lagi trend yaitu desain liquid dengan CSS, awalnya banyak diaplikasikan untuk blog blog personal aja, tapi dengan semakin berkembangnya teknologi CSS dan Jquery, makan semakin kaya dan beragam lah hasil desain dan layout yang unik. Sehingga saat ini banyak sekalia perusahaan yang melirik model Desain Liquid ini.

Untuk pelajaran kita hari ini, tools yang mesti kita siapkan yaitu Macromedia Dreamweaver, Air mineral dingin segelas, dan sebatang rokok..hehehe..Kita coba untuk mendesain sebuah layout yang sangat sederhana sebagai pengenalan..yuk mulai......!

  1. Sebelum kita mulai, ada baiknya kita liat rencana layout yang akan kita Buat.Liquid Layout with CSS
  2. Siapkan Halaman HTML pada dreamweaver.
  3. Ketikkan Script dibawah ini pada bagian <body>,
    <div id="layout">   
      <div id="header">HEADER</div>  
        <div id="content">    
           <div id="left">LEFT</div>

           <div id="center">CENTER</div>

           <div id="right">RIGHT</div>

        </div>
    </div>


    Heheheh...bingung yak....sabar..neh baru mau dijelasin, jadi kita sedang menyusun sebuah tag tag DIV yang disesuaikan dengan rencana layout kita diatas, tapi emang blon muncul karena kita belum menyisipkan aturan tuk masing masing DIV. kita bisa anggap DIV itu seperti TD, TR pada layout dengan table.  
  4. Nah, Sekarang kita mulai menyisipkan CSSnya.
    Coba masuk ke dalam script htmlnya, n mulai dengan klik kanan mouse kamu,diantara pembuka <div id="layout">, liat gambar berikut :

  5. Lanjutkan dengan menklik CSS Styles > New, untuk bagian DIV Layout ini, atur css seperti berikut:
    background-color:#333333
    Width : 100%
    , dan akhiri dengan mengklik OK.
  6. Lalu kita masuk pada DIV kedua, yaitu  Header, dengan cara yg sama, atur nilai cssnya seperti berikut :
    #layout #header {
    background-color: #b6e24b;
    height: 150px;
    width: 96%;
    font-size: 24px;
    font-weight: bold;
    padding: 2%;
    }

Lanjutkan semuanya dengan menyesuaikan semua nilainya menjadi seperti layout diatas...
Skrip selengkapnya dapat dilihat disini :

Belajar CSS

Gimana mudah bukan? hah bingung..? hehehe..oleh deh kita jelasin dikit ya, jadi box width diatas maksudnya itu ukuran kotak DIV nya, contohnya ukuran DIV Header ada 96%, artinya ukurannya 96% dari ukuran keseluruhan layout ( ukuran resolusi ), sementara padding kita beri 2% untuk seluruh bagian ( top, bottom,left, right ) maksudnya ada jarak antara tulisan ke sisi DIV sebesar 2%, tujuanya apa? agar tulisannya / isi didalam ndak nempel dengan batas DIV.

Apabila kalian melakukan dengan benar, maka hasilnya kira kira akan seperti ini :

Klo masih bingung, kontak aku aja...okeh...

Update : 19/05/2010, 10:42 WIB

Bookmark and Share

Komentar
wahyu
26/04/2010, 01:24 WIB
"...Bingung???, wkwkwkkwkwkkwkwkwk, ndak nyampe wak otakku wkwkwkwkk..."
princessjulie
26/04/2010, 09:24 WIB
"......hu'uuummmmm bingung, mending kontak aja yah...;;)..."
Likaliku
26/04/2010, 09:58 WIB
"...hehehe..iya yu..jgn sampe ngerti lah..byk kali yg ngerti semakin sempit lahan kami tukang web..:D
terlalu banyak saingan..wkakwakwa..."
goemon
01/10/2010, 19:52 WIB
"...Mas mw nanya law css buat ngatur resolusi monitor otomatis buat website gmana ea ? ? ? ..."
Likaliku
02/10/2010, 23:47 WIB
"...Wah...css kyknya ndak bisa tuk ngatur resolusi monitor mas..
klo ngatur ukuran lebar webnya seh bisa....:D..."
cobar
10/05/2011, 10:35 WIB
"...maz...kl bikin ukuran background web menyesuaikan browser gmn ya...?
trus minta scrip php buat halaman member ,sama login dong maz..please..
buat Tugas Akhir nih maz....Agustus dah mulai sidang...tlng bantu y..
^_^ makasih maz...
..."
Likaliku
10/05/2011, 18:07 WIB
"...Wah..klo background dalam pengertian gambar udah pasti ndak bisa donk mas...paling2 gambar backgroundnya di repeat -x. -y gt...jadi ntar penuh sesuai dengan ukuran resolusi monitor yang dipake...

biasanya tuh designer bakal ngebuat ukuran background super besar tapi posisinya proporsional dengan design web, jadi waktu ukuran resolusi berubah webnya masih keliatan utuh..contohnya likaliku.com ini...hehehhe..."
pitik
29/04/2013, 10:27 WIB
"...mas ak punya css donlodan kayak gini:
--edited--
bagian bodinya tdk bs fleksibel..caranya piye biar bs fleksibel..."
Likaliku
29/04/2013, 11:16 WIB
"...bisa diemail ke irwan[at]likaliku.com aja tagnya...heheheh agak ribet bacanyanya......."