Catatan : Resolusi Monitorku 1024 x 768 pixel
Dulu sempat berpikir, bagaimana caranya membuat tampilan website, aku lihat di internet, tampilannya pada yahud-yahud semua,
banyak vareasi warna, serta animasinya.
Lama juga cari-cari tutorial di internet soal ini, nah ini sedikit cluenya :
1. Familiar dengan program design, banyak programnya, misal : Macromedia Fireworks atau adobe photoshop
2. Di program design tersebut terdapat tool untuk mengolah menjadi website, misal dengan photoshop, antara lain :
a. Ada slice, gunanya untuk memotong-motong gambar, sebenarnya gambar yang ukuran besar dibagi menjadi beberapa potongan
fungsinya, supaya gambar dapat diload/ditampilkan oleh yang punya koneksi terbatas dengan lebih cepat.
b. Ada convert images for web, fungsi ini digunakan untuk mengoptimalisasi gambar yang kita olah, kemudian kita atur tipe
gambarnya untuk memperoleh kualitas terbaik dan ukuran file yang optimal, tahu kan, klo ukuran gambar besar
sangat berpengaruh banget dengan cepat/tidaknya gambar ditampilkan oleh browser
c. Ada ImageReady, nah disini kamu gak harus tahu HTML untuk bisa melihatnya di browser, karena sudah ada fasilitas yang
memudahkannya, memang hasilnya tidak terlalu bagus, tapi cukuplah untuk anda yang sedang belajar/pemula.
wah, jadi promosi Photoshop, ekekekke … gpp’lah .. dikit …
Ini gambar designnya di Photoshop dan sudah di convert ke ImageReady

Kemudian, klik File – Save Optimezed As – pilih HTML and Images (*.html)

Nah, ntar jadinya file html, double klik dan lihat hasilnya neh :

Hasilnya tidak sesuai dengan yang kita harapkan memang, posisinya condong ke kiri
Ya ginilah, untuk dapat hasil yang bagus, memang tidak ada jalan yang instan, jadi memang kita kudu harus extra kerja keras,
tapi klo kamu sudah puas, ya gpp, tapi masak seh sudah puas, eta mah belum puas, hehehehe…..
Klo yang masih ingin kerja keras dan dapat hasil yang bagus, ikuti langkah-langkah berikut, PERHATIAN : TULISAN INI DAPAT MENYEBABKAN RASA KANTUK, LAPAR, HAUS, KEBELET PIPIS, MARAH, NAFSU, DLL, jadi bukan salah ane, wkwkwkwkw….. canda..50x..
Nah ini tahapannya :
1. Saya asumsikan, kamu sudah bisa mendesain tampilan web di photoshop (lha klo belum ya susah lah, untuk yang belum bisa
sabar saja, kapan-kapan aku buatke tutorialnya, aku baek hati kan, ekekekek….), pastinya sudah ada ” guide linenya ” kan
nah dengan berpatokan pada guide line kita akan memotongnya menjadi bagian-bagian kecil, untuk posisi serta jumlah guide
line terserah kamu, patokannya adalah : semakin banyak potongan dalam web kamu, maka koneksi yang dibutuhkan untuk membuka website kamu semakin mudah/gampang. Lihat gambar berikut :

2. Aktifkan ” Slice tool ” fungsinya untuk memotong-motong gambar, caranya : tempatkan pada salah satu sudut antara guide line
kemudian tarik sampai membentuk kotak gambar yang dikehendaki, lihat gambar berikut :

Lihat gambar di atas, ada perbedaan antara kotak yang telah kita slice dengan yang tidak, yang telah kita potong akan berwarna
biru, untuk kotak yang memiliki nomor seperti slice, jangan kuatir, itu hanya pemberian otomatis oleh photoshop. Nah, untuk
kotak-kotak yang lain, silakan anda potong-potong juga. Tapi perlu diingat tidak semua bagian dalam web perlu kita potong
karena memiliki kesamaan, misal :
a. Lihat background yang berwarna campuran coklat dan putih, pada posisi kanan dan kiri sama, cukuplah kita potong satu
sisi saja, dan tidak perlu sebesar itu, cukup kecil saja, karena di Dreamweaver nanti bisa kita gunakan perulangan
untuk backgroundya, lihat gambar berikut :

b. Nah, untuk background di dalam yang warnanya putih, kita tidak perlu potong, karena warna tersebut bisa kita gantikan
dengan warna biasa di Dreamweaver, cuman, kita harus samakan warnanya, putih = putih.
3. Langkah akhir, kita perlu mengoptimized gambar yang telah kita slice, langkah ini sangat penting banget, karena akan
menentukan cepat/tidaknya web tampil secara sempurna. Perlu sedikit perhatian, JANGAN PERNAH MENAMPILKAN FILE GAMBAR YANG BERTIPE .BMP, jenis file ini akan membuat ukuran gambar semakin besar, anda bisa pilih tipe .jpg, .png, .gif atau yang lain. Langsung saja, tanda slice di gambar masih ada, trus klik menu File – Save for Web, akan tampil gambar berikut :

Lihat pada gambar di atas, ada 2 jendela, sebelah kiri adalah preview gambar yang asli/original kemudian di sebelah kanan
adalah preview gambar yang akan di optimized. Kemdian di dalam kotak warna merah, terdapat jenis-jenis tipe file gambar
yang bisa anda gunakan, beberapa hal yang bisa anda pertimbangkan adalah :
a. Pilihlah jenis tipe file yang tidak membuat ukuran gambar malah tambah besar, kemudian lihatlah dibagian bawah jendela
optimized, terdapat 3 hal, yaitu :

1. Tipe file
2. Ukuran file setelah anda optimized
3. Kecepatan akses, maksudnya untuk menampilkan gambar tersebut pengguna membutuhkan beberapa detik dengan kecepatan
rata-rata sekitar 28 kbps, klo misal ukuran anda besar, dan kemudian kecepatan akses internet pengguna dibawah 28kbps
bayangkan, berapa lama pengguna harus menunggu supaya gambar tersebut tampil sempurna, bisa-bisa malah tidak terbuka
sama sekali.
b. Ada tipe file yang tidak bisa diedit ulang, misal : .gif, jadi saran saya hati-hati menggunakan tipe ini, solanya setelah
anda convert, file yang sudah jadi .gif tidak akan bisa diedit ulang.
Lakukan langkah ini untuk masing-masing potongan gambar, apabila semua potongan hendak diconvert ke tipe yang sama, langkah
tercepat anda bisa gunakan tombol “ Ctrl + A “.
Setelah terconvert semua, klik tombol ” Save “, kemudian tentukan nama filenya.
CATATAN :
- Setelah anda simpan, maka potongan-potongan tersebut akan secara otomatis berada di folder Images
- Gambar yang tidak kita slice otomatis akan terpotong juga, tidak masalah lah, kita bisa hapus yang tidak kita inginkan

———— BERALIH KE DREAMWEAVER ————-

4. Aktifkan program Dreamweaver, disini aku gunakan yang versi 8, untuk versi lain paling sama, hanya beda tampilan saja. Gak
masalah lah. Nah, pilihlah ” Create New HTML “, kemudian akan tampil halaman utama, lihat gambar berikut :

- Pada title isikan judul website anda, bisa dimasukkan sembarang karakter text, angkat, karakter-karakter khusus
- Pilihlah mode ” design “, ini untuk memudahkan anda yang masih pemula, klo sudah mahir bisa beralih ke ” mode code “
- Simpanlah pekerjaan anda dengan nama “ index.html ” di lokasi yang sama dengan folder images sebelumnya.
5. Untuk lihat previewnya di browser, bisa klik File – Preview in browser – pilih IE/Firefox. Belum ada apa-apa kecuali judul
website anda yang telah tentukan dari awal.
6. Kembali lagi ke Dreamweaver, pada panel sebelah kanan terdapat panel CSS, nah untuk tahu apa itu CSS, fungsi dan bagaimana
menggunakannya, bisa kamu cari lewat paman google. Selanjutnya kita akan menggunakan CSS, why/kenapa? CSS = Cascading Style Sheet, kode bahasa (script) untuk mengatur tampilan setiap elemen dalam dokumen HTML, agar terlihat lebih cantik, rapi dan efisien, bla… bla… bla… (malah ngelantur, wkwkwkkwwkw …..)

===== AYO SEMANGAT … SEMANGAT … SEMANGAT =======

7. Masih di panel CSS, lihat tanda ” plus ” , fungsinya untuk memasukkan komponen CSS di web kita
akan ditampilkan jendela CSS, seperti berikut ini :

- Pada Selector type, pilihlah Tag
- Pada Tag, pilihlah body, karena kita akan mengatur background terlebih dulu
- Pada Devine in, pilihlah this document only, supaya pemberian CSS langsung dimasukkan pada web yang sedang kita kerjakan, dan tidak terpisah menjadi file tersendiri
8. Kemudian klik tombol OK, akan ditampilkan jendela ” CSS rule definition for body “, pada Category pilih Background dan
pada panel sebelah kanan pilih background images, kemudian klik tombol browse dan carilah potongan gambar di folder images
yang merupakan warna background (gambar kecil tapi panjang, warna coklat), ketemu kan, klo sudah klik Apply – OK, kemudian simpan ulang website kita/tekan Ctrl + S trus coba lihat di browser, walah … kurang lebih kayak gini

Siiiiip kan, bernafas dulu, ma seteguk jahe panas, wuaaahhhhh, manteb tenan ….
9. Dilanjut aaahhhh ….. Lagi, klik tanda plus CSS untuk menambahkan pengaturan untuk isi web’nya. Kali ini pada CSS Rule :
- Pada Selector Type, pilihlah Advanced
- Pada Selector, ketiklah ” #logo ” ini tidak ada di list, kudu dibuat secara manual, untuk mengatur bagian header/atas web
- Pada Devine in, pilihlah this document only
Pada CSS rule definition for #logo, pilihlah categori – Position, lihat gambar berikut :

- Pada Type, aku pilih relative, supaya ketika ukuran browser dikecilkan, maka tampilan web juga akan mengikuti, klo pilih yang
absolute, maka ketika ukuran browser diperkecil, posisi web tidak akan mengikuti ukuran dari browser
- Pada width = 700, ini aku dapat dari pembuatan ukuran website yang 800×600 pixel, trus disebelah kanan dan
kiri aku kasih ruang sebesar 50 pixel, jadi sisa ruang yang ditengah-tengah sebesar 700 pixel (moga-moga mudeng….)
- Untuk height = 135 pixel, aku dapat dari ukuran slice yang aku lakukan, untuk lebih yakin, cobalah buka gambar yang telah
anda slice, kemudian coba cursor mouse anda tempatkan ditengah-tengah gambar, akan ada jendela informasi kecil tentang
ukuran tersebut, width, height, tipe file, ukuran, dll (ini aku pakai OS Windows XP, jadi bisa muncul ini)
- Untuk Top = 0, supaya tidak ada jarak antara tepi logo dengan browser bagian atas, jadi seolah-olah menempel di atas.
- Untuk Left = 150, adalah jarak antara tepi browser sampai letak pinggir logo, mungkin kamu sedikit bingung (sama waktu
aku dulu, wkwkwkwk…..), koq bisa 150? clue, ukuran kerja di photoshop 800×600 pixel, resolusi monitor yang aku pakai
1024×768 pixel, jadi klo pakai resolusi 800×600 kudu 50, tapi karena 1024×768 aku pakai 150, pahe kan, alhamdullilah ….
10. Masih pada CSS rule definition for #logo, pilihlah categori – Box, untuk pengaturan lihat gambar berikut :

11. Masih pada CSS rule definition for #logo, pilihlah categori – Border, untuk pengaturan lihat gambar berikut :

12. Siiip lah, nak berikutnya klik ” Apply ” – trus klik ” OK “. Wooolaaa … koq tidak ada apa-apa, wah ngapusi kie ….
tenang… tenang … heheehe… ada fungsi lagi neh, namanya ” DIV “.
Apa itu ” DIV “, DIV = Division, merupakan istilah lain dari layer/lapisan dalam bahasa script HTML, jadi jangan heran
klo di Photoshop ada layer, sehingga layer atas yang paling terlihat daripada di bawahnya, nah, DIV di script HTMLpun
juga sama fungsinya, jadi jangan bingung ya. Syarat pemakaiannya, anda kudu menentukan Class/ID layer tersebut.
13. Lanjut, Klik “ insert Div Tag “, kemudian akan ditampilkan jendela berikut :

Nah setelah anda klik akan tampil jendela insert div tag seperti berikut

- Pada Insert : pilih at insertion point
- Pada Class : kita kosongkan
- Pada ID : pilih logo
Klik OK, akan tampil gambar berikut :

Jangan heran klo posisinya tidak ditengah-tengah, itu karena ukuran saja, tapi nanti juga ditengah klo di browser.
14. Next, hapus saja pesan ” Content for id logo goes here “, kemudian kita menambahkan tabel didalam Div Tag tersebut, caranya klik tanda pada gambar berikut :
kemudian masukkan 2 baris dan 5 kolom, tabel width = 700
kenapa begitu ?
- 2 baris : baris 1 untuk logo, baris 2 untuk tombol
- 5 kolom : 4 kolom untuk tombol dan 1 kolom untuk logo
15. Nah pelan-pelan saja :
- Pada baris pertama, kita perlu menggabungkan 2 baris menjadi satu, blok baris 1 dan 2 pada kolom 1, klik kanan, pilih
Table – merge cells, setelah menjadi satu, kita masukkan potongan gambar logo yang pertama, caranya klik gambar berikut

pilih – Images, kemudian tentukan lokasi penyimpanan potongan gambar logonya, hasilnya kurang lebih kayak gini :

- lanjut, apabila garis baris pada kolom kedua bergeser ke kanan, jangan kuatir, tinggal tarik saja pakai cursor dan dekatkan
ke tepi gambar logo yang telah tampil, lakukan langkah yang sama untuk potongan gambar yang lain hingga nantinya, kurang
lebih kayak ini :

- Trus coba kita lihat lewat browser ” Firefox ” ini hasilnya :

Nah, gampang banget kan ….. ya iyalah, apa kata dunia? hayah ….
16. Itu baru header lho, nah untuk bagian Isi/tengah, dan juga footer/bawah, caranya sama saja, anda tinggal membuat CSS baru
dengan pilihan :
- Selector type = Advanced (bla… bla…)
- Selector = buat ID baru, contoh untuk isi tengah = #isi, klo untuk footer misal : #footer (bebas namanya), asal jangan
nama minem, mince, ijah, yuni, dll, wkwkwkkw … ntar malah gak jadi2 ….
- Define in = this document only
Trus, pada waktu klik insert Div Tag, pada Insert pilih yang after tag, karena ID yang baru untuk layer di atas dari
sebelumnya, atau bisa juga anda coba-coba untuk mengetahui perbedaannya.
 terima kasih,semoga bermanfaat