Dalam membuat layout web/blog, hal yang sangat penting
untuk diperhatikan adalah tema web/blog itu sendiri. Sehingga kita bisa menyesuaikan
tema dan tampilannya. Secara umum index sebuah web terdiri dari : wrapper (isi
keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh
layout sebuah web/blog.
Selanjutnya
berikut script HTML dan CSS nya:
index.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
<div id="header">
<h1>Header</h1>
</div>
<!--------------- #menu --------------->
<div id="menu">
<ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Galeri Foto</a></li>
</ul>
</div>
<!--------------- #sidebar --------------->
<div id="sidebar">
<div class="previous">Sidebar</div>
</div>
<!--------------- #content --------------->
<div id="content">
<img src="image/esdua.png" width="144" height="144" />
<br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
</div>
<!--------------- #footer --------------->
<div id="footer">
Copyright © 2012 by: <a href="#">esdua.web.id</a></div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
<div id="header">
<h1>Header</h1>
</div>
<!--------------- #menu --------------->
<div id="menu">
<ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Galeri Foto</a></li>
</ul>
</div>
<!--------------- #sidebar --------------->
<div id="sidebar">
<div class="previous">Sidebar</div>
</div>
<!--------------- #content --------------->
<div id="content">
<img src="image/esdua.png" width="144" height="144" />
<br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
</div>
<!--------------- #footer --------------->
<div id="footer">
Copyright © 2012 by: <a href="#">esdua.web.id</a></div>
</div>
</div>
</body>
</html>
style.css
1. WRAPPER
2. HEADER
3. MENU
4. SIDEBAR
5. CONTENT
6. FOOTER
*/
body {
background-color: #FFC;
font-family: "calibri"
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
width: 850px;
margin: 15px auto;
height: auto;
padding: 20px;
background-color: #FFF;
box-shadow: 0px 0px 20px #F60;
-moz-box-shadow:0px 0px 20px #F60;
-webkit-box-shadow: 0px 0px 20px #F60;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}
/* 2. HEADER
---------------------------------- */
#header {
width: 850px;
height: 70px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 3. MENU
---------------------------------- */
#menu {
width: 850px;
height: 27px;
margin-bottom: 7px;
border: 1px solid #FFF;
background-color: #CCC;
font-size:17x;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu ul{
margin: 4px 4px 4px 7px;
padding: 0px;
list-style: none;
}
#menu li{
margin: 10px;
padding: 0px;
display: inline;
}
#menu a{
padding: 6px 6px 6px 6px;
text-decoration: none;
}
#menu a:hover{
padding: 5px 5px 2px 5px;
text-decoration: none;
color: #FFF;
background: #FF9000;
}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
float: right;
width: 300px;
height: 290px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 5. CONTENT
---------------------------------- */
#content {
width: 538px;
height: 290px;
margin-bottom: 2px;
border: 1px solid #CCC;
margin-bottom: 7px;
}
#content img{
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow:0px 0px 10px #CCC;
-webkit-box-shadow: 0px 0px 10px #CCC;
padding: 2px; margin-right: 10px;
float:left;
}
/* 6. FOOTER
---------------------------------- */
#footer {
width: 850px;
height: 20px;
padding-top: 0px;
border: 1px solid #CCC;
text-align: center;
background-color: #CCC;
clear: both;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Dalam
membuat layout web/blog, hal yang sangat penting untuk diperhatikan
adalah tema web/blog itu sendiri, sehingga kita bisa menyesuaikan tema
dan tampilannya. Secara umum index sebuah web terdiri dari: wrapper (isi
keseluruhan), header, menu, sidebar, content , dan footer. Berikut
contoh layout sebuah web/blog.
- See more at: http://abtista-web.blogspot.com/2013/02/desain-layout-webblog-menarik-dengan.html#sthash.oxRwkSTJ.dpuf
mantap
ReplyDeletebagus ni makasih ya,,,buat ilmunya
ReplyDeleteTerima kasih Mba, tulisan anda sangat membantu sekali buat pemula seperti saya.
ReplyDeletemakasih buat tutorialnya
ReplyDeletewww.smartkiosku.com