Info Harga Komputer dan Gadget

Membuat Website CMS Menggunakan Dreamweaver Bagian 3 Membuat style Template

Advertisement
advertisement
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
advertisement

10 comments:

sonirivaldi said...

Gan klo ada softwer dreamweaver, bsgi2 donk gan,
Saya admin blog Blank blank.
Beri komen fi blog saya lg ya gan klo ada softwernya.
Thanks

Arif Budiharjo said...

susah gk sih bikin template dari dreamweaver ?

Muslimedica said...

jujur mas, ora mudeng aku ki

website development said...

dreamweaver emang software yang mantab buat programmer website. selain sangat dimudahkan dreamweaver juga bisa memunculkan langsung tampilan website yang kita buat.

Wisata Pulau Tidung said...

Thanks bro informasinya, sangat interaktif, bermanfaat sekali.
Ditunggu postingan selanjutnya ya :D
Salam dari Wisata Pulau Tidung.

Wisata Pulau Tidung
Tidung
Pulau Tidung

Edikomputer said...

Cari aja gan di google, kalo ane softwarenya beli gan

Edikomputer said...

malah gampang pake dreamweaver gan karena tool-toolnya sangat lengkap

Edikomputer said...

sya juga dulu sempet putus asa mas karena pusing, mikirin kode yang njelimet, tapi karena saya senang akan hal ini lama-lama ya terbiasa dan mudah di lakukan

Edikomputer said...

Bener banget sob kita juga lebih gampang ngeset database instalasinya webnya, udah disediain form wizardnya :D

Edikomputer said...

Terima kasih atas kunjungannya

Post a Comment

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