Scribd Logo
Unggah

Selamat datang di Scribd!

  • Template 3 Kolom

    Diunggah oleh

    Siti Zulaikha
    27 tayangan4 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    27 tayangan4 halaman

    Template 3 Kolom

    Diunggah oleh

    Siti Zulaikha

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    www.webdenny.

    com
    oke deh, Kali ini web denny.com akan membahas tentang cara belajar membuat pondasi layout 3
    kolom. Memang sih banyak tutorial cara membuat layout 3 kolom, tapi kebanyakan dari tutorial
    tersebut biasanya malah buat kita bingung. Ke-tidakkonsisten-an sering terjadi apabila layout
    tersebut dibuka di berbagai jenis browser maupun di berbagai resolusi layar. Kalau anda belum
    menemukan cara yang baik untuk membuat layout 3 kolom, anda bisa menggunakan teknik-teknik
    di bawah ini
    Rancangan dasar
    Pertama kita harus tahu dan mengerti pondasi dari layout yang akan kita buat. Hal ini menjaga agar
    tidak tersesat di kode-kode kita sendiri dan memudahkan kita untuk debugging nantinya. Berikut
    ini adalah struktur layout kita dalam XHTML:
    <di v i d="cont ai ner ">
    <di v i d="header "></ di v>
    <di v i d="si del ef t "></ di v>
    <di v i d="mi ddl e"></ di v>
    <di v i d="si der i ght "></ di v>
    <di v i d="f oot er "></ di v>
    </ di v>

    Dan di bawah ini adalah struktur layout kita dalam CSS:
    body { }
    #cont ai ner { }
    #header { }
    #si del ef t { }
    #mi ddl e { }
    #si der i ght { }
    #f oot er { }

    Ok kita sudah punya rancangannya, sederhana kan??? Strukturnya mudah dipahami begitu kita
    melihatnya. Selanjutnya kita akan bangun arsitektur layout kita berdasarkan rancangan diatas.

    Buka text editor anda, lalu buatlah file baru. Copy dan paste kode-kode berikut ke dalamnya, lalu
    save dengan nama layout.html (nama terserah).

    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>How to Build 3 Column Layout in A Good Way</title>
    <link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
    </head>
    www.webdenny.com
    <body>
    <div id="container">
    <div id="header">
    <h2>This is Header web denny.com</h2>
    </div>
    <div id="sideleft">
    <h3>Title Menu</h3>
    <ul>
    <li><a href="#" title="Menu">Menu 1</a></li>
    <li><a href="#" title="Menu">Menu 2</a></li>
    <li><a href="#" title="Menu">Menu 3</a></li>
    <li><a href="#" title="Menu">Menu 4</a></li>
    </ul>
    </div>
    <div id="middle">
    <h1>This is Title</h1>
    <p>Paragraph goes here..</p>
    <h2>This is Sub Title</h2>
    <p>Paragraph goes here..</p>
    <h2>This is Sub Title</h2>
    <p>Paragraph goes here..</p>
    </div>
    <div id="sideright">
    <h3>Title Menu web denny.com</h3>
    <ul>
    <li><a href="#" title="Menu">Menu 1</a></li>
    <li><a href="#" title="Menu">Menu 2</a></li>
    <li><a href="#" title="Menu">Menu 3</a></li>
    <li><a href="#" title="Menu">Menu 4</a></li>
    </ul>
    </div>
    <div id="footer">
    <h4>This is Footer</h4>
    </div>
    </div>
    </body>
    </html>






    www.webdenny.com
    Dengan text editor anda, buatlah 1 file baru lagi. Copy dan paste kode-kode berikut ke dalamnya, lalu save
    dengan nama layout.css. Letakkan kedua file pada folder yang sama.

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }

    #container {
    width: 900px; /* Set the value to fit your needs. */
    margin: auto;
    }

    #header {
    height: 100px; /* Set the value to fit your needs. */
    border: 1px solid #000;
    clear: both;
    }

    #sideleft {
    float: left;
    width: 170px; /* Set the value to fit your needs. */
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #000;
    }

    #middle {
    float: left;
    width: 474px; /* Set the value to fit your needs. */
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
    }

    #sideright {
    float: right;
    width: 170px; /* Set the value to fit your needs. */
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #000;
    }

    www.webdenny.com
    #footer {
    height: 40px; /* Set the value to fit your needs. */
    border: 1px solid #000;
    clear: both;
    }



    Lalu buka file layout.html dengan menggunakan browser.
    Kita akan mendapatkan hasil mirip gambar berikut:

    Anda mungkin juga menyukai