Layout website dengan CSS
Met malem sobat blogger, dah lama ni gak pernah di update ni blog baru kali ini ane nyempetin update lagi.kali ini ane mau coba berbagi sedikit ilmu dasar penggunaan CSS (Cascading Style Sheet). yaitu tentang bagaimana cara membuat layout website tanpa tabel yaitu dengan menggunakan css. untuk penulisannya mungkin sobat bloger sudah lebi tau, baik itu menggunakan notepad ataupun dengan bantuan aplikasi lain, salah satunya Dreamweaver. tapi bagi yang belum tau cara menggunakan dreamweaver tenang ane share disini. ok tanpa panjang lebar
mari kita mulai,,,,
setelah aplikasi dreamweaver terbuka pada tampilan awal disitu akan muncul menu Open a Recent Item, Create New, & Top Feature
karna disini ita akan membuat file css maka sobat bloger pilih CSS yang ada pada sub menu Create New. atau bisa juga melalui meu bar yang ada pada bagian header aplikasi, klik File-New pilih Blank Page pilih CSS kemudian klik tombol Create.
Script lengkap CSSnya kurang lebih seperti ini nehh,,,
#bungkus-luar{ /*tanda pagar (#) dibaca 'id', Penggunaan pada
width:960px;
height:600px;
margin:auto; /*mengatur letak content pada tengah layar (auto)*/
#kepala {/*mengatur header web*/
border:#00C 1px solid;
width:958px;
height:75px;
}
#nav-kiri {
border:#060 1px solid;
width:150px;
height:250px;
margin-top:5px; /*berfungsi untuk mengatur jarak atas content*/
float:left; /*untuk mengatur posisi content menjadi disebelah kiri*/
position:relative;
}
#bungkus-daleman {
border:#F0F 1px solid;
width:801px;
height:251px;
float:left;
position:relative;
margin:5px 0px 0px 5px;/* mengatur jarak content top-right-botton-left*/
}
#isi {
border:#000 1px solid;
width:599px;
height:241px;
margin:5px 5px 5px 5px;
float:left
}
#nav-kanan {
border:#6F0 1px solid;
width:183px;
height:241px;
float:right;
margin:5px 5px 5px 0px;
}
#bawah {
border:#900 1px solid;
width:958px;
height:100px;
clear:both;
Ini html nya,,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan E-Commerce Kampus</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" /><!--untuk menghubungkan antara css dengan file .php/.html-->
<body>
<div id="bungkus-luar">
<div id="kepala">
Header
</div><!--akhir kepala-->
<div id="nav-kiri">
Nav Kiri
</div><!--nav-kiri-->
<div id="bungkus-daleman">
<div id="isi">
Content
</div><!--isi-->
<div id="nav-kanan">
` Kanan
</div><!--nav-kanan-->
</div><!--bungkus-daleman-->
<div id="bawah">
bawah
</div><!--bawah-->
</div><!--akhir bungkus-luar-->
</body>
</html>
