Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs resmi adobe yaitu www.adobe.com. Apabila anda sudah memiliki kedua aplikasi tersebut mari kita langsung saja memulai project pembuatan website sederhana.
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau pun mencoba untuk belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website pribadi, yaitu "Websiteku". Websiteku ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali atau SSS, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai. Berikut merupakan hasil jadi dari proyek Websiteku
Width : 700 pixel
Height : 875 pixel
Resolution : 72 pixel/inch
Background Content : Transparent
Pilih rounded retangle tool pada tool panel dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya arahkan 25ο dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:
Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel dengan isi : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo yang sesuai dengan keinginan anda dan judul Website anda. Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.
Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web dan akan muncul wizard seperti berikut
pada opsi dibawah save, ganti format gambar dari gif menjadi png-8 kemudian save, sebelum di save beri nama file anda dengan index dan simpan layout anda pada 1 folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.
Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi
Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :
Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.content {
background:url(images/index_06.png) bottom;
padding:20px 20px 40px 20px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1.psd) -->
<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="94">
<img src="images/index_01.gif" width="281" height="94" alt=""></td>
<td rowspan="4">
<img src="images/index_02.gif" width="419" height="328" alt=""></td>
</tr>
<tr>
<td height="76">
<img src="images/index_03.gif" width="281" height="76" alt=""></td>
</tr>
<tr>
<td height="64">
<img src="images/index_04.gif" width="281" height="64" alt=""></td>
</tr>
<tr>
<td height="94">
<img src="images/index_05.gif" width="281" height="94" alt=""></td>
</tr>
<tr>
<td colspan="2" class="content" ></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan-tulisan, gambar, serta suasana hati mereka dapat dibaca oleh banyak orang atau pun mencoba untuk belajar dan siapa tau kalau sudah menjadi webmaster bisa mendapatkan penghasilan tambahan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita akan menciptakan salah satu bentuk website pribadi, yaitu "Websiteku". Websiteku ini didesain dengan nuansa full color sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang proyek pertama ini sangat sederhana sekali atau SSS, hehehe. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai. Berikut merupakan hasil jadi dari proyek Websiteku
Membuat Disain Awal dengan Photoshop
jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut:Width : 700 pixel
Height : 875 pixel
Resolution : 72 pixel/inch
Background Content : Transparent
Pilih rounded retangle tool pada tool panel dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah
Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih
Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :
buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini
buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya arahkan 25ο dengan move tool
kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel dengan isi : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo yang sesuai dengan keinginan anda dan judul Website anda. Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut
Gunakan Slicetool
kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web dan akan muncul wizard seperti berikut
pada opsi dibawah save, ganti format gambar dari gif menjadi png-8 kemudian save, sebelum di save beri nama file anda dengan index dan simpan layout anda pada 1 folder yang anda beri nama Websiteku
Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.
Mark-Up Tag HTML dengan Dreamweaver
Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.
Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi
Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :
Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML anda.
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.content {
background:url(images/index_06.png) bottom;
padding:20px 20px 40px 20px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1.psd) -->
<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="94">
<img src="images/index_01.gif" width="281" height="94" alt=""></td>
<td rowspan="4">
<img src="images/index_02.gif" width="419" height="328" alt=""></td>
</tr>
<tr>
<td height="76">
<img src="images/index_03.gif" width="281" height="76" alt=""></td>
</tr>
<tr>
<td height="64">
<img src="images/index_04.gif" width="281" height="64" alt=""></td>
</tr>
<tr>
<td height="94">
<img src="images/index_05.gif" width="281" height="94" alt=""></td>
</tr>
<tr>
<td colspan="2" class="content" ></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Untitled-1