Senin, 01 Maret 2010

Membuat layout sederhana pada web dengan division

Layout yang kita buat saat ini akan memanfaatkan CSS ( Cascading Style Sheet ), bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun table tidak disarankan untuk pembuatan layout dan sebagai gantinya adalah dengan memanfaatkan division. Pertama kita buat layoutnya. Lebih lengkapnya ikuti scrip CSS dibawah ini.
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}

#header {
height: 80px;
border: 1px solid blue;
}

#menu_bar {
float: right;
height: 30px;
width: 280px;
margin-top: 10px;
margin-right: 10px;
}

#search {
float: right;
height: 30px;
width: 240px;
margin-right: 20px;
margin-left: 200px;
margin-top: 5px;
}


#logo {
float: left;
height: 60px;
width : 60px;
margin-left: 20px;
margin-top: 10px;
}

#top {
float: right;
height: 80px;
width: 544px;
border: 1px solid blue;
}

#right {
float: right;
height: 180px;
width: 190px;
border: 1px solid red;
}

#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}

#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 412px;
border: 1px solid red;
}

#content {
margin-left: 201px;
margin-right: 200px;
margin-top: 80px;
width: 344px;
height: 330px;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
background: green;
}

simpan file diatas dengan nama mystyle1.css
lalu ketikan scrip html nya dengan scrip dibawah ini.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>


</head>

<body>

<div id="wrapper">
<div id="logo">
</div>

<div id="menu_bar">
</div>

<div id="search">
</div>

<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
sidebar
</div>

<div id="top">
top
</div>

<div id="right">
right
</div>

<div id="content">
content
</div>
</div>

<div id="footer" align="center">
footer
</div>

</body>
</html>

maka tampilan akan seperti ini



untuk memberikan desain yang menarik ketikan scrip html dibawah ini.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>

<style type="text/css">
<!--
#leftmenu ul {
width: 180px;
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
}
-->
</style>

</head>

<body>

<div id="wrapper">
<div id="logo">
<img src="koala.gif" border="0" />
</div>

<div id="menu_bar">
Home | Site map | RSS | Contact | About us
</div>

<div id="search">
search <input type="text"/>
</div>

<div id="header">
<h2>KOALA ADVERTISING</h2>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & media</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tip & triks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>

<div id="top">
<img src="top.jpg" border="0" />
</div>

<div id="right">
Event
<ul>
<li>lomba pertama</li>
<li>lomba kedua</li>
<li>lomba ketiga</li>
</ul>
</div>

<div id="content">
<h3>Lomba Desain WEB</h3>
<h4>1 Maret 2010 [07:00]</h4>
dalam rangka memperingati hari senin, KOALA ADVERTISING membuat acara yaitu lomba desain web.
</div>
</div>

<div id="footer" align="center">
@ 2010 KOALA ADVERTISING Malang, Indonesia
</div>

</body>
</html>

maka tampilan akan seperti dibawah ini.
untuk background division bisa ditambahkan pada file CSS, contoh :

"background: green;"

Tidak ada komentar:

Posting Komentar