Membuat Website CMS Menggunakan Dreamweaver Bagian 3 Membuat style Template

Membuat Website CMS Menggunakan Dreamweaver Bagian 3 Membuat style Template
Oke sobat Edikomputer.com kali pada postingan kali ini saya akan melanjutkan cara membuat Website
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>
Sehingga keseluruhan kode menjadi seperti ini :
<!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>
Keterangan : Kode warna merah adalah kode yang baru ditambahkan

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
Membuat Website CMS Menggunakan Dreamweaver Bagian 3 Membuat style Template

Oke sampai disini dulu nanti kita lanjutkan lagi

Related Posts

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan