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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5x_ayj7MdDKPkmidAW_9Go40VFwf2YPDx-zxw5qVm2Fm1H17HcBiEFHasyuoioFnRl5eavIy6v8J0gsKeJMEY6qYYVhGKUV8-d9cmqmKmzwqCItHZDfTvBkOx45161IE3JaiCFswlLt8/s200/TOOL.jpg)
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 250 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
:
Lakukan hal yang sama dan hubungkan
semua file... selesailah project anda, kini anda mempunyai website yang anda
rancang sendiri...
Catatan Penting : Pembuatan website diatas merupakan salah satu cara
perancangan web yang berbasis Table. selain menggunakan table sebetulnya
ada cara lain yaitu dengan menggunakan Divatau campuran keduanya Div+Table.
kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan
sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat
website.