Layout website adalah pengaturan tata letak dari elemen elemen sebuah halaman web .Elemen-elemen itu sendiri bisa terdiri terdiri dari sebuah header, navigasi, body (content), footer dll. Kali ini saya akan membahas bagaimana cara membuat sebuah layout.
Buatlah dokument baru kemudian simpan dengan nama "satukolom.php" karena kita akan membuat layout satu kolom.
<html>
<head>
<title>Layout Website 1 Kolom</title>
<style type="text/css">
*{margin:0 auto; padding:0} //agar layout berada ditengah
body{background:#ffffff;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1000px; //
//agar header, menu, content , footer menjadi satu kesatuan dengan lebar 1000 px
//sedangkan tingginya tidak didelarasikan karena akan menyesuaikan dengan tingii header, content dll
}
#header{height: 150px;
background: #F58634 ;
}
#menu{height: 70px;
background: #C71414 ;
}
#content{height: 500px;
background: #669933 ;
}
#footer{ height:100px; background: #FFBD0B ;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hasil :
Selanjutnya kita akan membuat layout 2 kolom. Buat dokumen baru dan beri nama duakolom.html.
<html>
<head>
<title>Layout Website 2 Kolom</title>
<style type="text/css">
*{margin:0 auto; padding:0} //agar layout berada ditengah
body{background:#ffffff;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1000px; //
//agar header, menu, content , footer menjadi satu kesatuan dengan lebar 1000 px
//sedangkan tingginya tidak didelarasikan karena akan menyesuaikan dengan
//tinggi header, content dll
}
#header{height:100px; background: #F58634 ;
}
#menu{height: 50px;
background: #C71414 ;
}
#content{
}
.side_left { height :500px; width: 300px; background: #669933 ; float :left;
}
.side_right { height :500px; width: 700px; background: #2893D6 ; float :right;
}
.clear {clear :both; }
#footer{ height:100px; background: #FFBD0B ;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
<div class="side_left">
</div>
<div class="side_right">
</div>
<div class="clear">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hasil :
Buatlah lagi dokument baru, kali ini beri nama dokument tersebut dengan nama "tigakolom.html".
<html>
<head>
<title>Layout Website 3 Kolom</title>
<style type="text/css">
*{margin:0 auto; padding:0} //agar layout berada ditengah
body{background:#ffffff;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1000px; //
//agar header, menu, content , footer menjadi satu kesatuan dengan lebar 1000 px
//sedangkan tingginya tidak didelarasikan karena akan menyesuaikan dengan
//tinggi header, content dll
}
#header{height:100px; background: #F58634 ;
}
#menu{height: 50px;
background: #C71414 ;
}
#content{
}
.side_left { height :500px; width: 250px; background: #669933 ; float :left;
}
.center { height :500px; width: 500px; background: #A50CC7 ; float :left;
}
.side_right { height :500px; width: 250px; background: #2893D6 ; float :right;
}
.clear {clear :both; }
#footer{ height:100px; background: #FFBD0B ;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
<div class="side_left">
</div>
<div class="center">
</div>
<div class="side_right">
</div>
<div class="clear">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hasil :
Cukup itu saja yang bisa saya tulis, untuk selanjutnya kalian bisa mengembangkan sendiri desain layout kalian. Berikut ini merupakan desain layout yang pernah saya buat Klik
