kali ini saya ,mau share bagaimana cara membuat atau mendisain layOut website dengan menggunakan CSS dan simpel html , mungkin buat sobat yang pengen tau gimana cara membuat website ini bisa berguna .dalam pembuatan website pada umumnya terbagi menjadi 6 bagian yakni :
1. wrapper
2. header
3. menubar
4. left menu & rigth menu
5. content
6. footer
seperti di bawah ini ,
nah disini saya akan membagikan bagaimana membuat 6 bagian tersebut dengan mudah langsung saja kalo begitu , kita mulai membuat layOut webnya .. :)
pertama kita membuat file HTML terlebih dahulu
<HTML>
<title>dsantos913 membuat layOUT</title>
<head></head>
<body >
<div id ='wrapper'>
<div id ='header'>
header disini
</div>
<div id ='menubar'>
menu bar disini
</div>
<div id='isi'>
<div id='left_menu'>
menu kiri disini
</div>
<div id='story'>
isi konten
</div>
<div id='rigth_menu'>
menu kanan disini
</div>
</div>
<div id='footer'>
footer disini
</div>
</div> <!--end wrapper-->
</body>
</html>
kedua isikan kode css untuk memperjelas tampilan Layout website anda ,
kode cssnya sperti ini ,
<style type='text/css'>
*{
padding : 0; margin:0;
font-family: helvetica, Arial, Sand-serif;
}
body {
background : white;
}
#wrapper {
text-align: left; margin: 5px auto;
width: 800px; height:auto;
background: white;
overflow: hidden;
}
#header {
width: 800px; height:130px;
background: green;
}
#menubar{
width: 800px; height: 30px;
background: #1c81e8;
}
#isi {
width: 800px; height:460px;background: #1c8;margin-top: 10px;
}
#left_menu {
width: 160px;
margin-right: 5px;
float: left;
margin-top: 20px;
background: yellow;
height: 200px;
}
#content {
width: 450px;
height: 400px;
margin-right: 5px;
float: left;
margin-top: 20px;
background: yellow;
}
#rigth_menu {
float:left ; width:160px;
margin-right: 5px;
float: left;
margin-top: 20px;
background: yellow;
height: 200px;
}
#footer{
padding-top: 10px;
float:left ;
width: 800px; height: 30px;
background: #1c81e8;
}
</style>
simpan text CSS ini di atas <body> kemudian save file tersebut dalam format file HTML
dan hasilnya seperti ini
jika masih bingung silahkan download filenya di sini ,
