Lanjutan dari latihan sebelumnya, yaitu membuat layout web menggunakan division dengan CSS ini merupakan pengembangan dengan men-generate image, background, maupun sebagian text. Dalam contoh website sederhana ini, menggunakan teknik division untuk mengelompokkan masing-masing bagian. Kemudian, dapat dilanjutkan dengan mengatur tata letak masing-masing divisi dan men-generate gambar.Tetapi, dalam file css ada yang perlu dibedakan dalam penggunaan style. Jika style ditulis menggunakan titik (.), artinya style tersebut dapat digunakan berkali-kali atau bersama-sama. Sedangkan, style dengan awalan pagar (#) digunakan untuk mendeklarasikan mnemonic khusus, seperti header, footer, sidebar, dll.
Langsung saja, berikut adalah kode program dari file css.
<em>Ampersands & angle brackets need to be encoded.</* { margin: 0; }
body {
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}
#wrapper {
margin:auto;
width:980px;
}
#header {
height:80px;
margin:0px auto;
background:#0000;
}
#header-content{
height:70px;
margin:auto;
background:#fff url(BgHeader.jpg);
}
#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}
#logo {
float:left;
margin:10px 10px 10px 50px;
height:50px;
}
#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}
#search {
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}
#inner {
float:left;
margin:0px;
}
#footer {
clear:both;
height:60px;
background:#2033a9;
}
#footer p {
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background-color:#bbbbbb;
}
#content {
float:right;
width:780px;
height:400px;
background:#FFF;
}
#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(TopBg.jpg)
}
#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}
#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
.style1 {
font-size:x-small;
}
#content-main hr{
width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;
}
#content-right {
float:right;
margin:10px auto;
width:260px;
border: 2px solid blue;
background:#4a5cca;
}
#content-right h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
#content-right ul{
padding: 10px 20px 20px 40px;
list-style:square;
}
#leftmenu ul {
width:200px;
list-style-type:none;
padding:0;
margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left:15px;
text-decoration:none;
}
#leftmenu a {
padding: 5px 0px 5px 15px;
display:block;
background:#818dd5 no-repeat left center;
margin: 0px 0px 1px; color:#000;
}
#leftmenu a:hover {
background:#5e9711 no-repeat left center;
color:#fff;
}em>
Kemudian disimpan dengan nama layout 2.css.
Kode program dari html-nya seperti di bawah ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout2.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logo_um.png" width="50" alt="" />
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Pengumuman Lomba Desain Header Web</h3>
<hr />
<p class="style1">
Minggu, 28 Februari 2010
</p>
<p>
Setelah sempat tertunda beberapa hari, akhirnya panitia lomba desain header web mengumumkan hasil akhir lomba. Sebagaimana disampaikan pada tulisan sebelumnya, seleksi dilakukan secara ketat melalui tiga tahap: 10 besar, 5 besar, dan 3 besar. Dalam pelaksanaannya, panitia teknis dan tim juri bekerja secara cermat dan hati-hati. Adapun hasil selengkapnya bisa dilihat di blog resmi Jurusan Teknik Elektro.
Penyerahan hadiah dan sekaligus piagam penghargaan akan dijadwalkan secepatnya. Untuk itu, diharap para pemenang segera menghubungi panitia guna melakukan verifikasi akhir. Rencananya, penyerahan secara simbolis akan dilakukan langsung oleh Ketua Jurusan, Bapak Slamet Wibawanto.
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Pelatihan KORPS ASISTEN ELEKTRO</a></li>
<li><a href="#">Projas TE</a></li>
<li><a href="#">Kontes Robot Indonesia</a></li>
<li><a href="#">Kunjungan Industri S1 PTI</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body>
</html>
Simpan file dengan nama index2.html.
Contoh di atas digunakan sebagai pembelajaran awal bagi yang ingin belajar pemrograman web dengan menggunakan css. Memang di sini hanya sebatas tampilan kecil, tetapi setidaknya setelah kita mencoba kita dapat mengembangkan menjadi sebuah web yang sesungguhnya. Sekian dulu modul kali ini, jika ada saran-saran bisa meninggalkan pesan di bawah ini. :-)
0 komentar:
Posting Komentar