Tutorial Membuat Web Sederhana

kali ini saya akan membahas Tutorial Membuat Web Sederhana mengunakan Adobe Photoshop dan Adobe Dreamweaver cs 5. perlu diketahui bahwa web yang akan kita buat kali ini tidak menggunakan tabel melainkan menggunakan css sebagai pengatur komponen.
Web Sederhana ini bertemakan lingkungan dengan satu hompage, 3 halaman artikel dan 1 halaman gallery dengan menggunakan template flash.

kita mulai Tutorial Membuat Sederhana ini denganmembuat desain tampilan web menggunakan Adobe Photoshop cs 5. berikut ini adalah contoh desain web yang akan kita gunakan.

buat slice setiap komponen. artinya kita akan memecah setiap komponen yang akan digunakan dengan menggunakan slice tool sehingga semua bagian terpisah seperti kompnen header dibawah ini.

 jika sudah di slice, langkah selanjutnya adalah menyimpan hasil slice tadi dengan cara klik file > save for web and devices.

simpan seluruh slice gambar di dalam folder images. maka langkah selanjutnya adalah mengedit tampilan web menggunakan Dreamweaver cs 5. silakan buka dreamweaver cs5.kemudian pilih file .css untuk menampilkan potongan gambar yang tadi.
berikut adalah css file yang saya gunakan untuk contoh web ini.

@charset "utf-8";
/* CSS Document */

body {
 background-image: url(images/w39.jpg);
 background-repeat: no-repeat inherit;
 background-attachment:fixed;
}
.header {
 width: 684px;
    margin: 0 auto;
    height:116px;
 background: url(images/home_page1.png) ;
}
.atas {
 width: 684px;
    margin: 0 auto;
    height: 27px;
 background : url(images/atas.gif) top right no-repeat;
 
}
.tengah {
 width: 684px;
    margin: 0 auto;
    max-height: auto;
 min-height: 426px;
 background: url(images/konten_10.png);

}
.bawah {
 width: 684px;
    margin: 0 auto;
    height: 19px;
 background: url(images/konten_11.png) top right no-repeat;
}
.footer {
 width: 683px;
    margin: 0 auto;
    height: 144px;
 background: url(images/footer.png);
}
.content{
    width: 683px auto;
    margin: 0 auto;
    height: 426px;
 background: url(images/konten_10.gif);
}
.container{
 padding : 10px;
 text-align: left;
}
.konten {
 background-image: url(images/home_page_09.gif);
}

    
    #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* werna background utama , silakan ganti dengan value lain */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

simpan dengan nama style.css


kemudian buat file .html baru untuk homepage dan simpan dalam satu folder dengan script css dan folder images yang td.


untuk menghubungkan css dengan file html gunakan script berikut

<link rel="stylesheet" href="styles.css" type="text/css" media="all" />

berikut ini adalah contoh halaman web yang akan kita buat.

untuk background silakan gunakan gambar apa saja tetapi harus berukuran besar agar tidak terpotong ketika diimplementasikan ke dalam web browser.

untuk menu dropdown, bisa menggunakan unorderd list pada html dengan menggunakan css berikut.

   #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* jenis font yang digunakan, silakan ganti */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

berikut ini adalah isi html dari homepage.

<html>
<head>
<title>home_page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (home_page.psd) -->


<div class="header">
</div>


<!--d-->

<!--d-->
<div>

   
    <div id='menudrop'>
    <ul id='menustyle'>
    <li><a href='file:///D:/tugas%20web/home_baru/home_baru.html'>home</a></li>
    <li><a href=''>pages</a>
    <ul>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-1.html'>12 Langkah Menghemat Energi</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-2.html'>4 Langkah Menghemat Plastik</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-3.html'>6 Upaya Pencegahan atas Pencemaran Lingkungan</a></li>
    </ul>
    <li><a href='file:///D:/tugas%20web/home_baru/gallery.html'>gallery</a> 
    <li><img src="images/home_page_07.gif" width="419" height="36">   
</div>
<!--d-->

<div class="atas"></div>
<div class="tengah"> 
<div class="container"> 
          <h1>SELAMAT DATANG </h1>
    <p>Selamat datang di web eco-save. web ini berisi artikel dan kumpulan gambar bertema "penyelamatan ligkungan". karena semakin hari lingkungan yang kita tempati,yaitu bumi, sedang mengalami Global Warming (Pemanasan Global), maka web ini berusaha menyajikan berbagai cara memperlambat atau bahkan mengurangi kerusakan bumi kita tercinta.
</p>

</div>
</div>
<div class="bawah">
</div>
<div class="footer">
</div>


<!-- End Save for Web Slices -->
</body>
</html>

tampilan homepage tersebut akan kita gunakan untuk page selanjutnya. buat file .html baru bernama artikel-1.html, kemuadian copy paste sourcecode di atas ke dalam sourcecode file artikel-1.html. file html ini berfungsi untuk page yang akan di isi artikel atau konten. isi konten diletakan antara code <div class="tengah">
<div class="container">
dan code
</div>
</div>

<div class="tengah">

<div class="container">

!!!!!!!!isi konten di sini!!!!!!!!

</div>

</div>

 
buat halaman artikel seperti di atas sebanyak page dengan menggunakan sourcecode yang sama. hanya isi artikelnya saja yang berbeda. berikut ini contoh artikel.