Pada Postingan sebelumnya kita sudah
membahas mengenai pengertian CSS ,
deklarasi CSS
dan lain-lain. Pada topik kali
ini saya akan membahas mengenai Layout Halaman dengan CSS.
Disediakan 3 (tiga) pendekatan umum layout halaman web untuk mengatasi permasalahan fakta tersebut :
- Liquid page layout : halaman berubah mengikuti lebar jendela browser.
- Fixed page layout : menempatkan isi pada area halaman dengan ukuran pixel tertentu, tidak tergantung pada dimensi browser.
- Elastic page layout : memiliki area yang bertambah besar atau kecil ketika tulisan diubah ukurannya.
Untuk membuat layout halaman dengan CSS kita harus menggunakan Tag Div. Bagi seorang pemula dalam dunia Design Website, biasanya
akan banyak mengalami kendala ketika akan membuat sebuah layout website dengan
menggunakan TAG DIV. Hal ini dikarekanakan TAG DIV tidak dapat berdiri sendiri
dalam penggunaannya, dimana TAG DIV harus dibandingkan dengan CSS supaya dapat
menghasilkan bentuk design layout yang lebih menarik.
Contoh Layout Halaman
<body>
<div id="wrapper">
<div id="header">
<h3>Selamat Datang</h3>
</div>
<div id="menu">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Galeri Foto</a></li>
</ul>
</div>
<div id="sidebar">
<ul>
<li><a href="/sistem-informasi">SI</a></li>
<li><a href="/teknik-informatika">TI</a></li>
<li><a href="/manajemen-informatika">MI</a></li>
<li><a href="/komputerisasi-akuntansi">KA</a></li>
</ul>
</div>
<div id="kanan">
<div id="top">
<h2>Mikroskil MengubahTantangan Menjadi Peluang</h2>
</div>
<div id="content">
<p>Selamat datang pada pelajaran Desain Web. Hari ini tanggal 6 januari 2014,kita mempelajari bagaimana mendesain web menggunakan CSS layout dengan menggunakan DIV</p>
</div>
<div id="right">
<img src="Koala.jpg">
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<p>Copyright © 2012 by: <a href=https://www.mikroskil.ac.id> mikroskil.ac.id</a>
</p>
</div>
</div>
</body>
</html>
CSS
Letakkan kode yang dibawah ini diatas tag <body> yang diatas.
<style>
body{
background-color:#FFC;
fontfamily:"calibri";
}
#wrapper{
width:850px;
margin:15px auto;
height:500px;
padding:20px;
background-color:#FFF;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
}
#header{
width:850px;
height:auto;
border:1px solid #CCC;
text-align:center;
background-color:blue;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
}
#menu{
width:850px;
height:auto;
background-color:#CCC;
border:1px solid #FFF;
background-color:grey;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
}
#menu li{
margin:10px;
padding:0px;
display:inline;
}
#menu ul{
margin:4px 4px 4px 7px;
padding:0px;
list-style:none;
}
#menu a{
text-decoration:none;
}
#sidebar{
width:30%;
height:300px;
float:left;
border:1px solid #FFF;
background-color:yellow;
}
#kanan{
width:585px;
height:300px;
float:right;
border:1px solid #FFF;
background-color:#CCC;
box-shadow:0px 0px 10px #CCC;
}
#top{
width:585px;
height:50px;
float:left;
margin:0px auto;
border:1px solid #FFF;
background-color:grey;
text-align:left;
}
#content{
width:285px;
height:300px;
float:left;
border:1px solid #FFF;
background-color:white;
margin-bottom:7px;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
}
#right{
width:285px;
height:300px;
float:right;
border:1px solid #FFF;
background-color:blue;
}
#footer{
width:850px;
height:auto;
padding-top:20px;
border:1px solid #CCC;
text-align:center;
float:left;
background-color:green;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
}
.clear{
clear:both;
}
img{
width:285px;
height:300px;
box-shadow:0px 0px 20px #F60;
border-radius:10px
}
#sidebar li{
margin:10px;
padding:5px;
box-shadow:0px 0px 20px #F60;
border-radius:10px;
background-color:pink;
}
#sidebar ul{
margin:4px 4px 4px 7px;
padding:0px;
list-style:none;
}
#sidebar a{
text-decoration:none;
}
</style>
</head>
0 komentar:
Posting Komentar