Belajar Membuat Website Semantik Tanpa Table dengan PhotoShop & Dreamweaver Part 1
HTML & CSS Categories
Setelah postingan blog saya yang lalu tentang belajar membuat
website sederhana dengan photoshop dan dreamweaver. Sekarang mari kita
mulai membuat project website kedua yaitu membuat website semantik tanpa
tabel dan tentunya masih menggunakan photoshop dan dreamweaver. Bila
anda belum membaca tutorial sebelumnya, saya sarankan untuk membaca dan
mempraktekannya terlebih dahulu supaya lebih mantap lagi untuk memulai
project kita kali ini, untuk membacanya silahkan klik
disini.
Project kali ini sedikit agak rumit dan bila koneksi anda menggunakan
dial-up tutorialnya mungkin lumayan lama karena yang pasti kali ini
banyak sekali gambar yang harus di load. Bila salah satu image dalam
tutorial ini tidak muncul, klik kanan pada image kemudian pilih show
image/reload image (untuk FFox, saya sarankan selalu menggunakan
FireFox). Tampilan project website kita kali ini adalah sebagai berikut
(klik untuk memperbesar)
Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini
Untuk mengerjakan tutorial saya ini maka Anda harus menguasai dasar
dari CSS, HTML dan minimal bisa membuat website dengan table. Berikut
daftar yang bisa anda pelajari terlebih dahulu:
Membuat Desain Awal dengan Photoshop
Silahkan buka photoshop anda kemudian buat kanvas baru dengan ukuran 1280 X 800 pixel dan background content white, settingan yang lainnya tidak perlu dirubah.
Double click pada layer 0 yang baru saja dibuat, ganti nama layer
menjadi background. Selanjutnya click kanan pada layer background dan
pilih blending option :
pada dialog blending option centang dan klik gradient overlay
kemudian atur gradasi warna sehingga menjadi seperti pada gambar berikut
:
pilih ellipse tool kemudian buat bidang bulat pada
layer background yang telah diberi warna gradasi hitam putih, sehingga
menjadi sebagai berikut :
buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah sehingga menjadi sebagai berikut :
klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius Gausian Blur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua bidang :
apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :
buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong kemudian tempatkan disebelah atas :
Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehingga gambar menjadi sebagai berikut :
Dengan demikian background untuk website kita kali ini bisa dikatakan
selesai, anda bisa saja menambahkan variasi sesuka anda. Sebagai
catatan saja dari saya, background yang kita buat usahakan selalu dengan
ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rata
resolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop
berukuran hanya 1024 x 780 pixel. Jika kita membuat background dengan
ukuran lebar 1024 tentu tidak akan tampil bagus pada resolusi diatasnya,
lebih baik lagi bila kita bisa membuat background yang dinamis namun
indah dan dengan ukuran byte yang rendah.
Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout content website kita.
Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640 pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang berwarna putih.
geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan menggunakan move tool

.. klik kanan pada layout kemudian pilih
blending option gunakan setingan berikut
hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di gabungkan dengan background akan menghasilkan gambar sebagai berikut
buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih merge visible
Gabungkan gambar awan dengan design website sebelumnya kemudian
tambahkan bulatan-bulatan hitam lain disekelilingnya sehingga kita
mendapatkan design website seperti gambar berikut
OK sekarang content website dan background sudah jadi, selanjutnya mari kita buat Design Menu untuk website kita. langkah pertama adalah buat bidang persegi dengan rectangle tool pada bagian atas content selebar content atau 640 pixel kemudian tambahkan gradient overlay pada blending option dengan variasi warna merah tua dengan hitam (caranya sama seperti sebelumnya)
buatkan lagi bidang kali ini dengan rounded rectangle tool
disebelah pojok kiri atas yang nantinya akan kita gunakan untuk input
pencarian, beri gradisi warna seperti sebelumnya tambahkan icon
pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logo
website anda sehingga bagian atas menu tampak seperti gambar berikut
Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren
Mark Up Design dengan xHTML dan CSS
Sekarang anda sudah memiliki design website yang anda buat sendiri
dengan photoshop, nah langkah selanjutnya adalah membuat Mark Up atas
Desain yang telah kita buat kedalam xHTML dan CSS, silahkan buka
Macromedia Dreamweaver anda.
Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan nama index.html.
Setiap kita membuat file baru maka akan ditampilkan tag html bawaan, ubah tag <title>Untitled Document</title> yang berfungsi untuk memberi title website pada tab browser sesuai dengan title website yang anda kehendaki.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Welcome | Websiteku </title>
</head>
<body>
</body>
</html>
|
Sebelum melanjutkan XHTML mari kita kembali lagi ke photoshop untuk
menyiapkan background dokumen, pastikan save gambar pada photoshop yang
telah kita buat dengan ekstensi psd. Delete dulu semua image menu,
kemudian pada blending option untuk layout content centang dan ubah color overlay menjadi hitam pekat ( #000000 )
potong atau crop gambar sehingga memiliki ukuran
dengan kb yang lebih kecil, buat persis menjadi sebagai berikut dan
pastikan layout hitam berada ditengah-tengah..
Simpan gambar background yang telah di crop dengan nama
background.jpg, tempatkan pada direktori image yang terdapat pada
direktori index.html. Ingat pada saat menyimpan gambar, gunakanlah save for web sehingga kita bisa mengoptimasi ukuran byte gambar dan gambar lebih cepat untuk di load oleh browser
kita terapkan CSS untuk Tag body XHTML. Sementara untuk memudahkan
kita, terapkan CSS dengan cara internal style sheet dulu baru kemudian
setelah semua mark up selesai kita pindahkan menjadi eksternal
stylesheet dengan ekstensi tersendiri. bila anda belum paham dengan
penerapan CSS silahkan buka artikel saya sebelumnya
Pengertian CSS dan Cara Penerapan CSS pada HTML. OK, tambahkan tag CSS berikut dibawah tag title html
1
2
3
4
5
6
7
|
<style media="screen">
body {
margin:0;
background:#000000 url(images/background.jpg) no-repeat top;
font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif
}
</style>
|
Penambahan mark up css diatas bila kita lihat di browser akan menampilkan dokumen web sebagai berikut
Sekarang kembalikan lagi layout content web menjadi putih kembali (
undo color overlay ) kemudian delete layout background sehingga kita
mendapatkan gambar sebagai berikut
klik kanan pada layer kemudian pilih merge visible
pastikan bagian tetap transparent persis seperti gambar diatas.
Selanjutnya potong gambar dengan crop menjadi tiga bagian, bagian yang
harus dipotong dapat anda lihat pada gambar dibawah ditandai dengan
warna merah, pastikan presisi pemotongan gambar sama..
simpan (save for web) ketiga gambar yang telah dipotong dengan ekstensi PNG pada folder images.
- Potongan #1 simpan dengan nama bgheader.png
- Potongan #2 simpan dengan nama bgcontent.png
- Potongan #3 simpan dengan nama bgfooter.png
saya tidak memberi patokan ukuran masing-masing potongan, maka dari itu
buka semua potongan yang tadi telah disimpan klik kanan pada bagian
title kemudian pilih image size untuk mengetahui ukuran pixel potongan
anda dan ingat baik-baik ukuran pixel gambar2 tersebut.
Selanjutnya pada style css dibawah body tambahkan kode sebagai berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<style media="screen">
.header{
width: 646px;
height: 170px;
margin: 0;
background:url(images/bgheader.png) bottom right no-repeat;
}
.content{
width: 646px;
margin: 0 auto;
height:500px;
background:url(images/bgcontent.png);
}
.container{
padding : 10px;
}
.footer{
width: 646px;
height: 30px;
margin: 0 auto;
background:url(images/bgfooter.png) top right no-repeat;
}
</style>
|
Ukuran width dan height pada property css diatas tergantung dari
hasil potongan gambar anda, oleh karena itu untuk width dan height-nya
jangan mengacu pada kode diatas silahkan mengacu pada gambar anda.
tambahkan juga tag HTML berikut pada body
1
2
3
4
5
|
<div class="header"></div>
<div class="content">
<div class="container"> </div>
</div>
<div class="footer"></div>
|
Dengan demikian maka tag HTML sekarang menjadi sebagai berikut
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Welcome | Websiteku</title>
<style media="screen">
.header{
width: 646px;
height: 170px;
margin: 0;
background:url(images/bgheader.png) bottom right no-repeat;
}
.content{
width: 646px;
margin: 0 auto;
height:500px;
background:url(images/bgcontent.png);
}
.container{
padding : 10px;
}
.footer{
width: 646px;
height: 30px;
margin: 0 auto;
background:url(images/bgfooter.png) top right no-repeat;
}
</style>
<div class="header"></div>
<div class="content">
<div class="container"> </div>
</div>
<div class="footer"></div>
</body>
</html>
|
Tag HTML diatas sementara akan menghasilkan dokumen website seperti
gambar dibawah. Apabila tidak tampil seperti gambar dibawah berarti ada
yang salah dengan presisi width dan height pada property CSS, trus
utak-atik ukuran width dan heightnya hingga mempunyai presisi yang
benar.
Div dengan atribut class content akan mengikuti isi karena tidak
dipatok dengan ukuran height. sedangkan isi content sendiri kita masukan
didalam container. bila kita menambahkan beberapa heading (h1) dan
paragraph (p) pada content maka kita akan mendapatkan tampilan sebagai
berikut click untuk memperbesar
Ok tutorial membuat website table less dengan photoshop dan
dreamweaver bagian pertama hanya sampai disini.. dibagian kedua nanti
kita akan belajar membuat menu navigasi dan mengisi kolom content kita
sehigga content kita tidak hanya paragraph saja, he.... Bila anda ingin
mengetahui dan suka dengan artikel saya ini silahkan subscribe RSS nya.
Terimakasih untuk kunjungannya