.jpg)
Penggunaan CSS dalam layout web tidak hanya sebatas untuk menentukan margin, memberi border dan mewarnainya tapi juga bisa digunakan untuk menambahkan background pada komponen tersebut serta memodifikasi list menu sehingga terlihat lebih menarik. Modifikasi apa yang bisa dibuat untuk list menu? Salah satunya adalah dengan membuat warna background dari menu yang ditunjuk kursor berubah misalnya seperti pada Gambar a berikut :
Gambar a
Perhatikan list menu di sisi kiri contoh website pada Gambar a. Bila tidak ditunjuk oleh kursor, background menu berwarna abu-abu gelap tapi begitu disorot oleh kursor warnanya berubah menjadi biru.
Membuat tampilan website seperti Gambar a sebenarnya tidak serumit kelihatannya. kita bisa memanfaatkan layout web yang kita buat pada postingan sebelumnya (Menata Layout Web dengan CSS (part 1) ) dengan menghapus border yang tidak diperlukan dan memberikan background pada tiap komponen yang kita inginkan. Untuk memberikan background kita bisa menambahkan :
background: #000 url(nama_file.jpg);
pada style di file css komponen yang ingin kita beri background. Sementara itu untuk kotak pencarian/ search kita bisa menambahkan :
<input type="text"/>
pada file .html.
Untuk lebih jelasnya, source kode file .html nya adalah sebagai berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>lay out simple</title>
<link rel="stylesheet" href="tgsprak2.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="logo.png" alt="background" height="80" width="80"/></div>
<div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div>
<div id="home">Home</div>
<div id="sitemap">Sitemap</div>
<div id="RSS">RSS</div>
<div id="contact">Contact</div>
<div id="about">About Us</div>
</div>
<div id="webbody">
<div id="sidebar">
<div id="sidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News n Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips n Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</div>
<div id="sidebar2">
<div id="top"></div>
<div id="content">
<div id="textcontent">Kecerdasan Buatan</div>
<div id="textcontent2">
Istilah kecerdasan buatan sebenarnya berasal dari bahasa Inggris: “Artificial Intelligence”.
Jika diartikan tiap kata, artificial artinya buatan, sedangkan intelligence adalah kata sifat yang berarti cerdas.
Jadi artificial intelligence maksudnya adalah sesuatu buatan atau suatu tiruan yang cerdas.
Cerdas di sini kemungkinan maksudnya adalah kepandaian atau ketajaman dalam berpikir, seperti halnya otak manusia
dalam menyelesaikan suatu masalah.
</div>
</div>
<div id="right">
<div id="textright">Events</div>
<ul>
<li><a href="#">Seleksi Tim Robot</a></li>
<li><a href="#">Kuliah Tamu "Logika Fuzzy"</a></li>
<li><a href="#">Sosialisasi Praktek Industri</a></li>
<li><a href="#">Pendaftaran PPL</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="textfoot"align="center">2010 Teknik Elektro UM, Malang, Indonesia</div>
<div id="textfoot2"align="center">copyright : silvercyber19</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>lay out simple</title>
<link rel="stylesheet" href="tgsprak2.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="logo.png" alt="background" height="80" width="80"/></div>
<div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div>
<div id="home">Home</div>
<div id="sitemap">Sitemap</div>
<div id="RSS">RSS</div>
<div id="contact">Contact</div>
<div id="about">About Us</div>
</div>
<div id="webbody">
<div id="sidebar">
<div id="sidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News n Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips n Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</div>
<div id="sidebar2">
<div id="top"></div>
<div id="content">
<div id="textcontent">Kecerdasan Buatan</div>
<div id="textcontent2">
Istilah kecerdasan buatan sebenarnya berasal dari bahasa Inggris: “Artificial Intelligence”.
Jika diartikan tiap kata, artificial artinya buatan, sedangkan intelligence adalah kata sifat yang berarti cerdas.
Jadi artificial intelligence maksudnya adalah sesuatu buatan atau suatu tiruan yang cerdas.
Cerdas di sini kemungkinan maksudnya adalah kepandaian atau ketajaman dalam berpikir, seperti halnya otak manusia
dalam menyelesaikan suatu masalah.
</div>
</div>
<div id="right">
<div id="textright">Events</div>
<ul>
<li><a href="#">Seleksi Tim Robot</a></li>
<li><a href="#">Kuliah Tamu "Logika Fuzzy"</a></li>
<li><a href="#">Sosialisasi Praktek Industri</a></li>
<li><a href="#">Pendaftaran PPL</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="textfoot"align="center">2010 Teknik Elektro UM, Malang, Indonesia</div>
<div id="textfoot2"align="center">copyright : silvercyber19</div>
</div>
</div>
</body>
</html>
Untuk source kode CSS nya dengan nama tgsprak2.css adalah sebagai berikut :
#wrapper{
margin:auto;
width:750px;
height : 600px;
background: #000 url(wrap.jpg);
}
#header{
margin : 0px auto;
height: 80px;
background: #000 url(header1.jpg);
}
#logo{
margin : 0px 10px;
height: 60px;
width: 60px;
}
#text{
margin : -30px 100px;
color: black;
font-family: verdana;
font-size: 24px;
font-weight: bold;
}
#home{
margin : -60px 455px;
color: white;
font-family: garamond;
font-size: 14px;
}
#about{
margin : -60px 685px;
color: white;
font-family: garamond;
font-size: 14px;
}
#sitemap{
margin : 45px 515px;
color: white;
font-family: garamond;
font-size: 14px;
}
#contact{
margin : 45px 630px;
color: white;
font-family: garamond;
font-size: 14px;
}
#RSS{
margin : -60px 580px;
color: white;
font-family: garamond;
font-size: 14px;
}
#search{
margin : -10px 400px;
color: white;
font-family: garamond;
font-size: 18px;
width:50px;
height:20px;
}
#kotakcari{
margin: -20px 455px;
}
#webbody{
margin : 5px auto;
height: 455px;
}
#sidebar{
margin : 0px;
float: left;
width:205px;
height: 455px;
border : 2px solid white;
}
#sidemenu ul{
width:205px;
list-style-type:none;
padding:0;
margin:0;
}
#sidemenu a:link,#sidemenu a:visited, #sidemenu a:active{
padding-left:15px;
text-decoration:none;
}
#sidemenu a {
padding:5px 0px 5px 15px; display:block;
background: grey no-repeat center;
margin: 0px 0px 1px; color:#ffffff;
}
#sidemenu a:hover {
background: blue no-repeat center;
color:#ffffff;
}
#sidebar2{
margin : 0px;
float: right;
width:537px;
height: 455px;
}
#top{
margin : 0px;
background: #000 url(top2.jpg);
width:537px;
height: 155px;
}
#content{
margin : 0px;
float: left;
width:322px;
height: 290px;
background: white;
}
#textcontent{
color: black;
font-family: Garamond;
font-size: 24px;
font-weight: bold;
margin: 0px auto;
}
#textcontent2{
color: black;
font-family: verdana;
font-size: 14px;
margin: 0px auto;
}
#right{
margin : 3px;
float: right;
width:200px;
height: 180px;
border: 3px solid #1631b9;
background:#c5cae3;
}
#textright{
margin : 0px auto;
font-family: verdana;
font-size:14px;
font-weight: bold;
}
#footer {
height: 50px;
border: 1px solid blue;
Margin: 5px auto;
background: #000 url(foot.jpg);
}
#textfoot{
color: white;
font-family: verdana;
font-size: 10px;
margin:8px;
}
#textfoot2{
color: white;
font-family: verdana;
font-size: 10px;
margin:1px;
}
Selamat mencoba dan berkreasi!!! (^-^)v
0 komentar:
Posting Komentar