Post Tutorial desain web sederhana
seperti tutorial sebelumnya kita harus mendefinisikan atribut-atribut yang diperlukan berikut ini adalah source code dari style.css:
#wrapper {
margin: auto;
width: 750px;
border: 0px solid red;
}
#header {
height: 80px;
border: 0px solid blue;
}
#templatemo_menu_panel{
width: 750px;
height: 80px;
repeat: x;
background: url(back.png);
}
#templatemo_menu_section ul {
float: right;
width: 350px;
margin: 0;
padding: 0 27px 0 0;
list-style: none;
}
#templatemo_menu_section ul li a{
float: left;
width: 50px;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #00034b;
border-right: 1px solid #5f3b11;
}
#searchfield{
border: 1px solid #ffffff;
color: #000000;
font-size: 13px;
font-variant: normal;
height: 15px;
line-height: normal;
width: 100px;
}
#searchbutton{
float: right;
cursor: pointer;
font-size: 10px;
font-weight: bold;
height: 20px;
margin: 0 0 0 7px;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 50px;
}
#boxImage{
float: left;
margin: 10px;
width: 70px;
height: 50px;
}
#boxText{
float: left;
margin: 10px;
padding: 10px 0 0 0;
width: 250px;
height: 50px;
font-size: 20px;
font-weight: bold;
text-align: left;
color: blue;
}
#boxButton{
float: right;
padding: 30px 0 0 0;
width: 50px;
height: 15px;
}
#boxTF{
float: right;
padding: 30px 50px 0 0;
width: 170px;
height: 15px;
}
#inner {
float: left;
height:330px;
border: 0px solid black;
}
#sidebar {
float: left;
width: 200px;
height: 330px;
background: #ffff78;
border: 0px solid red;
}
#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: #6cae15 no-repeat left center;
margin: 0px 0px 1px;
color: #ffffff;
}
#leftmenu a:hover{
background: #5e9711 no-repeat left center;
color: #ffffff;
}
#content1 {
float: left;
width: 550px;
height: 330px;
border: 0px solid green;
background: yellow;
}
#top {
float: left;
width: 550px;
height: 100px;
border: 0px solid blue;
}
#content {
float: left;
width: 374px;
height: 230px;
border: 0px solid red;
background: #fff89d;
}
#right {
float: right;
width: 150px;
height: 150px;
font-size: 12px;
font-weight: bold;
background: #ffff78;
border: 0px solid orange;
}
#fontRight{
font-size: 10px;
font-weight: bold;
}
#footer {
clear: both;
text-align: center;
height: 50px;
border: 0px solid blue;
background: orange;
}
dan berikutnya adalah souce code dari file utamanya:
<!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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tgs32.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="templatemo_menu_panel">
<div id="boxImage" align="right">
<img src="um.png" height="50" width="50"/>
</div>
<div id="templatemo_menu_section">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Situs_Map">Situs Map</a></li>
<li><a href="#RSS">RSS</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About_US">About Us</a></li>
</ul>
</div>
<div id="boxText">
TEKNIK ELEKTRO
</div>
<div id="boxTF">
<input type="text" name="q" size="10" id="searchfield" title="searchfield" />
</div>
<div id="boxButton">
<input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#News_and_Media">News and Media</a></li>
<li><a href="#Tutorials">Tutorials</a></li>
<li><a href="#Tips_and_Tricks">Tips and Tricks</a></li>
<li><a href="#Downloads">Downloads</a></li>
</ul>
</div>
</div>
<div id="content1">
<div id="top">
<img src="teknik.png" height="100" width="550"/>
</div>
<div id="content">
<h3 align="center"><font color="green">Website Elektro</font></h3>
<p align="right" style="color:red; font-style:italic">
<!-- menggunakan path absolut -->
"sahabat bagai bintang yg slalu menemani mlm2 qt,yg slalu berkedip s”tqt senang,n sedih.
cahayax slalu memberi inspiransi!,Nsmangat wlau kdng hilang,ttpi dy ttp
ada,,"
<hr align="right" style="color:yellow" width="130" />
<img src="sayap.gif" align="right" border="3" style="color:yellow" width="50" height="30" />
</div>
<div id="right">
EVENTS
<div id="fontRight">
<ul>
<li>Lomba Panjat tiang listrik</li>
<li>Lomba Tarik Kabel</li>
<li>Balap Karung 10 KM</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
© 2010 Teknik Elektro UM Malang, Indonesia
</div>
</div>
</body>
</html>
Selamat mencoba!!!
Semoga bermanfaat… Amin…
0 komentar:
Posting Komentar