Mendesign web sederhana dengan Adobe Photoshop + CSS

Untuk designnya mungkin tidak akan saya jelaskan cara pembuatannya karena sangat sederhana...

Usahakan hasil potongan atau slicenya ada 4 bagian seperti gambar dibawah.....

bg body	bg atas
	bg tengah
	bg bawah

 

1. Pertama buka Aplikasi Dreamweaver...



2. Atur Page Propertiesnya seperti gambar dibawah








• Keterangan Gambar :



• Untuk margin beri nilai 0 pixel (margin-left, margin-top, margin-right, margin-bottom)



• Background-image : pilih browse, lalu cari gambar background yang telah anda buat designya sendiri... ( bg body pada gambar diatas )



• Beri repeat : repeat-x



• Background-Color : #ffffff ( putih )



• Text-color : pilih sesuai selera ( saya menggunakan kode warna= #333333 ) dengan sizenya : 12px dan Font : arial...



• sehingga hasilnya seperti berikut :










3. lalu tambahkan syntax CSSnya sedikit :
   


<style type="text/css">


<!--


body {


background-color: #FFFFFF;


margin-left: 0px;


margin-top: 0px;


margin-right: 0px;


margin-bottom: 0px;


background-image: url(images/lat1_01.gif);


background-repeat: repeat-x;
}


body,td,th {


font-family: Arial, Helvetica, sans-serif;


font-size: 12px;


color: #333333;


}


#wrapper {


width:774px;


margin:180px auto 0px;


}


#bg_atas {


background-image:url(images/lat1_04.gif);


background-repeat:no-repeat;


width:774px;


height:60px;


float:left;


background-position:bottom;


}


#bg_mid {


background-image:url(images/lat1_07.gif);


background-repeat:repeat-y;


width:774px;


float:left;


}


#bg_bawah {


background-image:url(images/lat1_09.gif);


background-repeat:no-repeat;


width:774px;


height:31px;


float:left;


}


#menu {


margin:0px 0px 0px 30px;


}


#menu a:link, #menu a:visited {


background-color:#00CCFF;


float:left;


padding:5px;


color:#FFFFFF;


font-weight:bold;


text-decoration:none;


margin-left:5px;


}


#menu a:hover {


background-color:#00CC00;


}





-->


</style>


4. dan dibagian bodynya masukkan syntas ini...
   
   
   
   
   
   




<div id="wrapper">


  <div id="bg_atas">


     <div id="menu">


        <a href="#">Home </a>


        <a href="#">ads</a>


        <a href="#">edit</a>


     </div>


  </div>


  <div id="bg_mid">


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


        <p>&nbsp;</p> <!-- Kamu bisa taruh isi web kamu disini -->


  </div>


  <div id="bg_bawah">


  </div>


</div>




5. wadhu... akhirnya jadi... mudah kan... dimaafin ya kalo ada salah... kalo mo tanya2,, via email aja ok!!!



6. Dan dipastikan syntax diatas tadi, kompatibel di berbagai browser... mungkin, hehehe... tapi setau saya baru coba di Opera 10, Mogilla firefox 3.5.3 n IE 6... yg pasti udah ok disana semua... klop abis deh...