Membuat Desain Layout Halaman Web Sederhana

3/04/2010 11:28:00 AM |

Untuk membuat desain layout halaman web sederhana kali ini kita memanfaatkan CSS (Cascading Style Sheeta)dan fungsi dari div. Gambar di bawah ini merupakan contoh dari desain laoyut standar yang terdiri dari header, sidebar, content dan footer.



Untuk code CSSnya yaitu sebagai berikut:

#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}

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

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

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

#isi {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}

#top{
height: 70px;
border: 1px solid red;
}

#content {
float: left;
width: 200px;
height: 255px;
border: 1px solid green;
}

#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid orange;
}

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

dan untuk code html-nya:

<!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>Layout Halaman Web</title>
<link rel="stylesheet" href="Tugas1Modul3.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="isi">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>

0 komentar:

Posting Komentar