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.
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. 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 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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<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...
Catatan Penting : Pembuatan website diatas merupakan
salah satu cara perancangan web yang berbasis Table. selain menggunakan
table sebetulnya ada cara lain yaitu dengan menggunakan Div atau
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.
