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 iseng saja 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 personal. Website ini didesain dengan nuansa full color
sehingga mempunyai kesan yang menarik dan indah walaupun bisa dibilang
proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian
anda bisa memodifikasinya sendiri sesuai dengan yang anda sukai.
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.
Mari kita memulai project pembuatan website sederhana apabila anda sudah
memiliki kedua aplikasi tersebut. Berikut merupakan hasil 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 putarkan sampai arah kemiringan 25
0 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
Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang
Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan
judul Website yang sesuai dengan keinginan 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, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.
apabila sudah memilih sebelum di save beri nama file anda dengan
index, pilih opsi HTML and Images, simpan layout anda pada satu 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>
Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "
Show Design View" kemudian isi bagian kolom
content dengan hal-hal yang ingin anda publikasikan pada website anda. setelah selesai save
index.html, lalu save as dengan nama file yang berbeda
about.html pada folder yang sama, save as lagi dengan nama file
gallery.html dan yang terakhir
link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).
Isi kolom content pada masing-masing file yang sudah anda buat sesuai
dengan tema masing-masing file, yakni isi halaman utama website,
tentang kita, galeri dan link. saya contohkan dibawah merupakan isi
halaman utama
Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja.
click setiap menu link pada website kita lalu pada
properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :
pilih file yang ingin di hubungkan
Lakukan hal yang sama dan hubungkan semua file... selesailah project
anda, kini anda mempunyai website yang anda rancang sendiri...
