Membuat Website CMS Menggunakan Dreamweaver Bagian 3 Membuat style Template
CMS menggunakan dreamweaver pastikan kamu sudah melihat tutorial ini dari awal karena ini adalah tutorial lanjutan dari tutorial sebelumnya untuk Indexnya tutorialnya bisa kamu lihat di bagia bawah artikel ini.
Kali ini kita akan membuat template atau tampilan sebuah situs yang akan kita buat karena setiap situs pasti memiliki sebuah template atau tampilan desain, agar situs tersebut bisa di lihat oleh para pengunjung. Sebelum membuat style template ada baiknya kamu mengenal terlebih dahulu tentang HTML, PHP dan CSS Agar kamu tidak bingung ketika saya menuliskan kode-kode yang saya tampilkan, karena dalam membuat website kita menggunakan kode kode seperti di atas.
Oke sekarang silahkan buka Program Dreamweaver kemudian buka dokumen index.php yang sebelumnya sudah kita seting lihat tutorial sebelumnya Tutorial membuat Website CMS Bagian 2 Seting Server di LocalHostkemudian tambahkan kode berikut ini di bagian antara <body>...</body>
Ini kode yang harus kamu tambahkan :
<div id="outer-wrapper">
<div id="wrapper">
<div id="header">
header</div>
<div id="menu">
Menu</div>
<div id="main">
<div id="post">
post</div>
<div id="sidebar">
Main Sidebar</div>
</div>
<div id="footer">
Footer</div>
</div>
</div>
<!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>Untitled Document</Title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer-wrapper"><div id="wrapper"><div id="header">header</div><div id="menu">Menu</div>
<div id="main"><div id="post">post</div><div id="sidebar">Main Sidebar</div></div>
<div id="footer">Footer</div>
</div></div>
</body></html>
Kemudian buat file baru dengan mode CSS lalu copy code css berikut ini
body {
background: #333;
font-family: Segoe UI;
font-size: 12px;
}
#outer-wrapper{
width: 940px;
margin:0 auto;
}
#wrapper {
position:absolute;
background: #fff;
width: 840px;
margin: 0 auto;
padding: 10px 15px 15px 15px;
border: 1px solid #ddd;
}
/*******************
* HEADER *
********************/
#header {width:840px;height:90px;background:#900;border:1px #CCC;
color: #333;
text-decoration: none;
}
.logo{font-size:28px;color:#fff;padding:10px;}
.description{font-size:13px;color:#fff;padding-left:10px;}
/*******************
* MENU *
********************/
#menu {
background: #333;
height: 28px;
width:840px;
margin: 0;
padding: 0;
border-top: 0px solid #f0f0f0;
border-bottom: 0px solid #cc0000;
}
#menu ul {
float: left;
list-style: none;
margin: 0 0 0 1px;
padding: 0;
}
#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #666;
}
#menu li a, #menu li a:link, #menu li a:visited {
margin: 0;
padding: 7px 12px 4px 12px;
color: #fff;
display: block;
font-size: 13px;
}
#menu li a:hover, #menu li a:active {
background: #000;
margin: 0;
padding: 7px 12px 4px 12px;
color: #fff;
display: block;
text-decoration: none;
border-bottom: none;
}
/*******************
* main *
********************/
#main{width:840px;background:#FC0;border:1px #FC0;
color: #333;
text-decoration: none;
}
/*******************
* POST *
********************/
#post{width:490px;background:#ddd;border:1px #cc0000;float:left;padding:10px;margin:10px 0 10px 0;
color: #333;
text-decoration: none;
}
img{width:100px;height:auto;float:left;}
#post h2{background:#900;color:#fff;padding:3px;padding-left:10px}
/*******************
* SIDEBAR *
********************/
#sidebar{width:300px;background:#ddd;border:1px #cc0000;float:right;padding:10px;margin:10px 0 10px 0;
color: #333;
text-decoration: none;
}
/*******************
* FOOTER *
********************/
#footer{width:820px;background:#fff;border-top:1px solid#ddd;float:left;padding:10px;
color: #333;
text-decoration: none;
}
Save di directory cmsku save dengan nama style.css
Oke sekarang silahkan save dan lihat hasilnya
Oke sampai disini dulu nanti kita lanjutkan lagi
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan