Kamis, 18 April 2013

Layout Halaman Website dengan CSS

Dalam pembuatan sebuah halaman website, diperlukan perancangan yang baik agar website yang dihasilkan maksimal. salah satunya adalah dengan penggunaan CSS dalam pembuatan halaman layout.
copikan script ini ke kedalam dreamweaver atau notepad atau notepad++ dan simpan dengan nama style.css

@charset "utf-8";
/* CSS Document */
root {
    display: block;
}
/*Membuat bentuk dari kotak1 samapai kotak 7*/
#kotak1{
    width:1000px;/*Lebar kotak*/
    height:757px;/*Tinggi kotak*/
    border:1px solid #cdcdcd; /*Border kotak*/
    background:#f0f3f6;/*Background/warna kotak*/
    margin:auto;/*Supaya kotak berada di tengah*/
}
#kotak2{
    width:980px;
    height:150px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/
}
#kotak3{
    width:980px;
    height:40px;
    border:1px solid #cdcdcd;
    background:#2fb075;
    margin:auto;
    margin-top:5px;
}
#kotak4{
    width:980px;
    height:500px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;
}
#kotak5{
    width:240px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;/*Supaya kotak berada di pinggir kiri*/
    margin-left:5px;
    margin-top:5px;
}
#kotak6{
    width:720px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;
    margin-left:5px;
    margin-top:5px;
    margin-right:5px;
}
#kotak7{
    width:980px;
    height:30px;
    border:1px solid #cdcdcd;
    background:#2fb075;
    margin:auto;
    margin-top:5px;
}

setelah itu, copikan script berikut dan simpan dengan nama index.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <!-- Memanggil file css -->
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>        
        <div id="kotak1"><!-- Membuat Kotak 1-->
            <div id="kotak2">              
            </div>
            <div id="kotak3">            
            </div>
            <div id="kotak4">
                <div id="kotak5">             
                </div>
                <div id="kotak6">             
                </div>
            </div>
            <div id="kotak7">             
            </div>
        </div>
    </body>
</html>

jalankan file index.php dan lihat hasilnya.







Selamat mencoba....