1
dari situs web tertentu. Diibaratkan halaman web ini seperti
halaman khusus dari buku.
2
1.1. TIPS MEMBUAT WEBSITE PROFESIONAL
3
dengan keberadaan situs Anda yang tidak jelas produk yang
ditawarkan.
4
Hindari adanya iklan pop up yang akan membuat pengunjung
menjadi bosan.
5
- Adobe Photoshop (http://www.adobe.com) : software ini
sangat populer dan dapat diandalkan untuk membuat dan
mengedit grafik maupun gambar fotografi.
6
membuat animasi dalam bentuk grafik (animated graphic).
Jika Anda memilih format file GIF : simpan sedikit warna jika perlu,
simpanlah sebagai interlaced .gif, buatlah latar belakang transparan
berwarna.
Jika Anda memilih format file JPG : pilih kualitas yang paling kecil
jika perlu, simpan sebagai progresive.
7
BAB 2
KONSEP PEMBUATAN WEB
8
Agar web yang dibuat nampak profesional perlu memahami beberapa
konsep dasar dalam mengolah web, mulai dari tool yang digunakan,
format gambar yang sesuai, hingga pemilihan warna teks dan latar
belakang sebuah halaman web.
NAVIGASI (NAVIGATION)
Navigasi juga menjadi hal yang sangat penting dalam sebuah website
yang berfungsi untuk membantu pengguna (user) dalam menjelajah
website kita untuk mencari informasi yang diinginkan secara mudah.
Navigasi yang bagus mencerminkan struktur website yang sangat
baik.
- Link
o Jika teks memiliki hyperlink sebaiknya diberi garis
bawah (underlined).
o Pengunjung mestinya tidak harus disajikan dalam
bentuk mouse over atau hover pada sebuah link untuk
menyadarkan pengunjung bahwa teks tersebut adalah
sebuah link buatlah link yang nyata.
10
o Sediakanlah lebih banyak teks link (textual link) dalam
sebuah website untuk mengijinkan pengunjung ke
informasi referensi secara silang.
o Usahakan menyediakan daftar susunan link secara
nyata dibandingkan hidden (adanya hal yang
tersembunyi) dalam sebuah teks. Adanya link dalam
sebuah teks mengakibatkan proses membaca sedikit
lambat, namun hal ini mungkin saja menjadi hal yang
bagus dengan tujuan menandai (highlight) kata-kata
yang khusus.
o Buatlah perbedaan antara internal link (link dalam satu
website) dengan external link (link dengan website lain).
o Jika link tersebut masih dalam satu website (internal
link) buatlah link menggunakan teks yang simple. Jika
link tersebut mengarah ke website lain (external link)
usahakan memasukkan alamat lengkap website
tersebut dalam teks (misal: http://www.websitelain.com).
Hal itu akan memberikan informasi kepada pengunjung
tentang website yang berbeda sebelum mengklik link
tersebut.
11
dalam tanda kurung untuk memberikan informasi
kepada pengunjung tentang ukuran file tersebut
sebelum mendownloadnya.
o Buatlah kepastian pengunjung untuk mengetahui
tentang link yang sudah dikunjungi (diklik) dengan cara
memberi warna yang berbeda. Misalkan dari warna biru
ke merah (artinya: warna biru memberi arti link tersebut
belum dibuka sedangkan warna merah menandakan
link tersebut telah dikunjungi/dibuka).
Gambar Judul
12
Gambar Site Map
13
Gambar Grafik sebagai navigasi atau link
14
- Buatlah panjang halamannya lebih pendek hindari terlalu
banyak menggulung layar (vertical scroll).
- Gunakan link untuk menyorot (highlight) dan mengambil
pengguna untuk informasi lebih lanjut.
- Hindari penggunaan ungkapan yang tidak deskriptiv, seperti klik
di sini - coba dan gunakan kata deskriptiv untuk link.
- Hindari penggunaan tag <hr> (Horizontal Rule), untuk
memisahkan badan teks: gunakan banyak judul, subheading,
dan ruang putih sebagai gantinya (hal ini akan nampak lebih
bagus dan mudah dibaca, tag <hr> juga banyak yang tidak
menyukai.
- Hindari perataan teks di tengah-tengah (center) tidak nyaman
untuk dibaca.
- Jangan menggunakan semua huruf kapital tidak nyaman untuk
dibaca juga.
- Hindari teks miring (italic) secara berlebihan hal ini juga tidak
nyaman untuk dibaca.
- Pertahankan isi (content) dari style gunakan style sheet dan
masukakan file lain yang mendukung.
KESEDERHANAAN (SIMPLICITY)
17
GRAFIK (GRAPHIC)
18
Berikut ini terdapat beberapa bahan pertimbangan tentang teknologi
yang digunakan ketika merancang sebuah website, yaitu:
- Hindari penggunaan teknologi yang sudah lebih dari dua tahun.
- Hindari pembuatan website yang memaksa pengguna/
pengunjung harus mendownload software tertentu terlebih dulu.
- Jika Anda memiliki teknologi baru dalam sebuah situs, buatlah
alamat situs mirror-nya dengan cara memberi pilihan kepada
para pengguna sebelum memasuki situs Anda jangan
menggunakan sebuah plug-in browser yang terdeteksi adanya
pengalihan jalur link.
- Gunakan perencanaan pada situs Anda untuk melihat jika para
pengguna menyukai html atau menggunakan teknologi baru yang
terpasang dalam situs tinggalkan teknologi baru jika tidak
populer.
- Jika Anda membuat website menggunakan teknologi baru, cari
tahu tentang usabilitas (kemudahan penggunaan) dari semua
jenis website yang ada.
- Periksa statistik website Anda untuk melihat berapa banyak
pengguna memiliki plug-in terakhir sebelum Anda merancang
website.
19
BAB 3
MERANCANG WEB
Web yang sering dikunjungi orang merupakan nilai plus bagi seorang
web designer. Banyaknya pengunjung yang datang dapat dijadikan
tolok ukur keberhasilan seseorang dalam merancang dan
mengembangkan sebuah website profesional.
Saat ini website sudah menjadi salah satu bagian dari identitas
sebuah institusi, sama pentingnya dengan alamat perusahaan.
Website dapat dijadikan guide bagi pelanggan untuk mengetahui
lebih jauh tentang profil sebuah institusi secara online. Ada beberapa
kelebihan dan manfaat website sehingga banyak orang
membutuhkan kehadirannya, diantaranya:
20
selebritis IT hanya karena tulisan yang ada di situs
pribadinya.
- Menjadi cermin pribadi maupun citra perusahaan apabila fitur
yang disediakan cukup interaktif dan dinamis.
Semua manfaat itu tidak akan terwujud jika bentuk dan fitur website
amburadul. Itu semua sangat bergantung pada sang web
developer dalam memvisualisasikan profil perusahaan ke dalam
website. Meskipun demikian, sebagai pemilik situs juga harus ikut
terllibat dalam pembentukan dan pengembangan website yang
interaktif dan dinamis agar sesuai dengan sasaran dan tujuan yang
ingin dicapai. Hal inilah yang jarang disadari oleh para pemilik situs.
Umumnya para pemilik situs mempercayakan seluruh
pengembangannya kepada sang web developer
Berikut ini ada beberapa tips untuk calon pemilik situs dalam
memberikan masukan kepada pengembang web agar pembuatan
situs .dapat berjalan dengan lancar sehingga tidak melenceng dari
sasaran dan tujuan.
21
pada bagian yang lain. Usahakan membuat pula halaman
lain jika masing-masing halaman terdapat perbedaan bentuk.
- Susunlah kata kunci (keyword) yang digunakan sebagai
acuan pencarian. Pikirkanlah secara seksama tentang isi
situs Anda untuk menentukan kata kunci yang tepat agar
pengguna dapat menemukan situs Anda secara cepat
berdasarkan kata kunci yang dimasukkan. Jika memiliki
beberapa kata kunci, urutkan kata kunci tersebut
berdasarkan prioritas. (misal: datakom, lintas, buana, penebit,
buku, bermutu).
- Periksa kembali data-data dalam situs sebelum di-launching.
Hal ini untuk memudahkan dalam perbaikan situs sebelum
diletakkan secara on-line.
22
Meskipun belum ada situs resmi yang membuat kategori tentang
sebuah website, berikut ini terdapat informasi yang sedikit membantu
dalam mengelompokkan website berdasarkan kategori.
23
SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, Portal
Berita, Radio, Surat Kabar, Tabloid, Televisi, dan lain-lain.
24
SITUS HIBURAN : Film, Games (Permainan), Humor, Musik,
Ringtones, Selebritis, dan lain-lain
25
SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi,
Mahasiswa, Teman dan Keluarga, Tentang Remaja, Tips dan Trik,
dan lain-lain.
26
SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, Informasi
Kota, Gaya Hidup, Jual Beli, Sains dan Teknologi, dan lain-lain.
27
SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis,
Hacking, Internet dan Web, Jaringan, Multimedia, Pemrograman,
Perangkat Keras, Perangkat Lunak, Tutorial, dan lain-lain.
28
SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan,
Sains dan Teknologi, Sosial, dan lain-lain.
29
SITUS OLAH RAGA : Olah Raga Air, Baseball, Bela Diri, Basket,
Bola Voli, Bowling, Bulu Tangkis, Catur, Golf, Otomotif, Sepak Bola,
Skateboard, Tenis, Tinju, dan lain-lain.
30
SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, Pengobatan
Alternatif, Rumah Sakit, dan lain-lain.
31
SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, Kedutaan
Asing, Kedutaan Indonesia, Politik, Kementerian, Militer, Organisasi,
Perwakilan Kota, dan lain-lain
32
SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah,
Edukasi, Bahasa, Komputer, Kursus dan Pelatihan, Perguruan Tinggi,
Sekolah Menengah, dan lain-lain
33
SITUS REFERENSI : Ensiklopedi, Kamus, Perpustakaan, Sejarah,
Museum, Peta, dan Lain-lain
34
SITUS REGIONAL : Aceh, Bali, DKI Jakarta, Jawa, Kalimantan,
Sulawesi, Sumatera, dan lain-lain
35
SITUS REKREASI : Candi, Danau, Gunung, Kolam Renang, Laut,
Bioskop, Games, dan lain-lain
36
SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, Teknologi
Terpadu, Teknologi Tepat Guna, dan lain-lain
37
SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur dan
Tradisi, Museum dan Galeri, Sastra, Seni Peran (Acting), Seni Visual,
Seni Desain, dan lain-lain
38
SITUS SOSIAL DAN BUDAYA : Agama, Anak-anak, Hobi, Keluarga,
Komunitas, Lingkungan, dan lain-lain
39
SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips,
Jasa Transportasi, Restoran, Petunjuk Wisata, dan lain-lain
40
3.2. DASAR-DASAR PEMILIHAN WARNA
Seperti telah dijelaskan di awal, pemilihan warna yang tepat sangat
mempengaruhi respon pengunjung terhadap situs kita. Pilihlah warna
sesuai dengan tema dalam situs tersebut. Sebagai contoh, jika situs
berisi informasi tentang wisata pilihlah warna yang modern. Misalnya
warna merah, biru, orange, dan lain sebagainya. Intinya pilihlah
warna yang eye cacthing bagi pengguna agar menimbulkan rasa
ingin tahu tentang informasi penting dalam situs tersebut.
41
Hijau
- Positif: berhubungan dengan uang, pertumbuhan, kesuburan,
kesegaran, (penyembuhan/pengobatan), healing, keteduhan
- Negatif: iri hati, kecemburuan, kesalahan, kekacauan
Ungu
Ungu adalah kombinasi biru dan merah, oleh sebab itu ditemukan
baik kategori-kategori hangat maupun sejuk
- Positif: raja, kaum ningrat, spirituality, kemewahan, ambition
- Negatif: misteri, kemasgulan
Pirus
- Positif: rohani, sembuh, perlindungan, canggih
(sophisticated)
- Negatif: cemburu, kewanitaan
Perak
- Positif: glamor, tinggi, anggun, halus dan rapi (sleek)
- Negatif: pengkhayal, tidak tulus
Merah muda
- Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka
melucu
- Negatif: kelemahan, kewanitaan, ketidak dewasaan
42
Kuning
- Positif: terang/cerdas, energi, matahari, kreativitas, akal,
bahagia
- Negatif: penakut, tidak bertanggungjawab, tidak stabil
Orange
- Positif: keberanian, kepercayaan, kehangatan/keramahan,
keakraban, sukses
- Negatif: ketidak-tahuan, melempem, keunggulan
Ungu
Warna ungu ditemukan di dalam kedua-duanya warna dingin dan
hangat
- Positif: royalti, kebangsawanan, kerohanian, kemewahan,
ambisi
- Negatif: kegaiban, kemurungan
Emas
- positif: kekayaan, kemakmuran, berharga, tradisional
- negatif: ketamakan, pemimpi
Hitam
- Positif: perlindungan, dramatis, serius, bergaya/anggun,
formalitas
- Negatif: kerahasiaan, kematian, kejahatan/ malapetaka,
kegaiban
Abu-abu
- Positif: keamanan, keandalan, kecerdasan/inteligen, padat,
konservatif
43
- Negatif: muram, sedih, konservatif
Coklat
- Positif: ramah, bumi, keluar rumah, umur panjang,
konservatif
- Negatif: dogmatis, konservatif
Gading
- Positif: ketenangan, kenyamanan, kebersihan/kesucian,
hangat
- Negatif: lemah, tidak stabil
Putih
- Positif: kebaikan, keadaan tak bersalah, kesucian, segar,
gampang, bersih,
- Negatif: musim dingin, dingin, jauh
44
menunjukkan bahwa kelas pekerja menyukai warna seperti biru,
merah, hijau, dan lain lain. Sedangkan mereka yang lebih terdidik
cenderung menyukai yang lebih mengaburkan warna seperti taupe,
warna biru langit, celadon, ikan salem, dll.
45
Ketika merancang tata letak (layout) halaman web bisa dapat
menggunakan beberapa teknik, salah satunya adalah dengan cara
membuat sketsa pada kertas gambar menggunakan pensil. Atau
dapat juga membuat sketsa menggunakan program pengolah vektor
seperti CorelDraw, Adobe Illustrator, maupun Macromedia Freehand.
46
Gambar 3.2.2. Bentuk Layout Situs Bisnis dan Ekonomi
47
Gambar 3.2.4. Bentuk Layout Situs Bisnis
48
BAB 4
PROSES PENGEMBANGAN
Pada bagian ini kita akan membahas tentang teknik pengembangan
situs sesuai dengan sketsa yang telah dibuat sebelumnya. Proses
pengembangan diawali dengan pembuatan layout halaman
menggunakan Adobe Photoshop, kemudian diolah dalam
Macromedia Dreamweaver untuk menambahkan isi (content) dan
sedikit tambahan menu pop up (pull down) menggunakan Javascript.
Untuk studi kasus, pertama kali kita akan mencoba membuat situs
pribadi. Dalam hal pemilihan warna, terserah para pembaca. Saya
sebagai penulis hanya memberikan teknik membuat bentuk layout
halaman website profesional.
49
Dengan melihat bentuk layout tersebut di atas, akan lebih mudah
proses pengembangannya dalam Adobe Photoshop. Sebelum
membuat dokumen baru, kita harus mengetahui bahwa tidak semua
resolusi monitor pengguna sama dengan yang kita miliki. Sebagai
contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel
sedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel.
Apabila Anda membuat ukuran dokumen 900 x 600 pixel maka
menimbulkan ketidaknyamanan pengunjung karena harus sering
menggulung halaman website akibat ukuran dokumen terlalu lebar.
Sebaiknya lebar tidak melebihi 800 pixel.
50
Gambar 4.1.1.2. Sketsa yang telah dibuka dengan Photoshop
3. Klik Set Foreground color untuk memilih warna sebagai latar
belakang.
51
5. Tekan tombol Alt+Backspace secara bersama-sama untuk
memberi warna pada layer Background.
52
Alt+Backspace secara bersama-sama untuk memberi warna
putih pada layer Up. Tekan Ctrl+D untuk membuang seleksi.
53
Gambar 4.1.2.2. Menu Option Pen tool.
3. Klik Set Foreground Color untuk memilih warna.
54
Gambar 4.1.2.5. Bentuk Shape yang diinginkan.
7. Aktifkan Convert Point tool untuk membuat efek lengkung.
55
10. Jika telah selesai maka akan terbentuk sebuah asesoris
modern seperti nampak pada gambar berikut.
56
atau dapat juga menekan tombol Enter. (Lihat gambar
4.1.2.11.).
57
15. Aktifkan Direct Selection tool.
58
menggunakan Convert Point tool sehingga akan membentuk
sebuah latar belakang yang modern. Ubahlah opacity-nya
menjadi 20%.
59
21. Sehingga akan didapatkan sebuah bentuk interface yang
modern.
60
23. Terakhir, aktifkan Rectangle tool .
61
2. Buatlah sebuah tombol berbentuk kotak.
62
Gambar 4.1.3.5. Memilih style Drop Shadow
63
Gambar 4.1.3.7. Bentuk tombol yang sudah jadi
8. Buatlah tiga buah tombol lagi dengan cara yang sama seperti
sebelumnya. Anda dapat menduplikasi tombol yang sudah ada
atau membuat tombol baru lagi. Jika Anda telah membuat tiga
buah tombol, kira-kira bentuknya seperti gambar berikut ini.
64
Kita akan mencoba memberi efek khusus pada bentuk interface
terlebih dulu.
1. Pertama kali aktifkan layer yang bentuk objeknya seperti
nampak pada gambar berikut.
65
Gambar 4.1.4.4. Membuat efek khusus
5. Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select >
Inverse untuk membalikkan posisi seleksi. Tekan huruf X
untuk memilih warna Foreground menjadi Hitam.
6. Arsirlah secara perlahan-lahan pada bagian yang lengkung
menggunakan Brush tool sehingga akan memiliki efek bersinar
dan muncul bayangan.
66
1. Untuk membuat sebuah heading, pertama kali aktifkan
Horizontal Type tool.
67
5. Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe
Linier ( ). Aturlah warna Foreground (#ea5765), dan
Background (#ffffff).
6. Letakkan pointer di atas dan tarik ke bawah untuk membuat
warna gradasi. Tekan Ctrl+D untuk membuang seleksi.
Oleh karena yang akan kita buat adalah situs pribadi, tidak ada
salahnya menempatkan gambar (foto) pribadi seseorang dalam
halaman utama. Baiklah, langsung saja kita akan mencoba
melakukannya.
68
Gambar 4.1.6.1. Gambar sebagai ilustrasi utama
69
Gambar 4.1.6.4. Mengubah ukuran gambar
5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata
sebagai identitas situs tersebut.
70
kita akan mencoba menambahkan teks pada beberapa tombol yang
telah dibuat agar dapat berfungsi sebagai menu.
Menu tersebut dapat berupa mouse over maupun menu pull down.
Jadi sebaiknya Anda memikirkan sejak awal sebelum memutuskan
untuk memilih bentuk yang diinginkan. Apabila Anda mengikuti
petunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menu
pull down.
71
4.1.8. Memotong Gambar (Slice)
Adobe Photoshop memang dapat diandalkan dalam segala hal,
terbukti beberapa bidang sangat memerlukan software yang satu ini
diantaranya untuk keperluan fotografi, percetakan, animasi,
periklanan, maupun untuk membuat website.
72
2. Buatlah beberapa garis bantu untuk menandai bagian yang
akan dipotong. Apabila mengikuti pentunjuk dalam buku ini,
kurang lebih seperti gambar berikut.
73
Kita harus memilih bagian mana saja yang perlu dipisahkan,
dan umumnya semua tombol harus dipisahkan karena memiliki
fungsi yang berbeda. Sedangkan untuk bagian yang akan
digunakan sebagai latar belakang, sebaiknya tidak perlu
dipisahkan. Untuk memotong bagian tersebut, pertama kali
aktifkan Slice tool. Perlu diingat, setelah mengaktifkan Slice
tool secara otomatis akan muncul angka 1 di sudut kiri atas. Hal
itu memiliki arti gambar tersebut telah siap dipotong.
74
8. Letakkan pointer di atas angka 2, klik dan tahan sambil
menyeret ke kanan untuk memotong gambar.
75
12. Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu
dipisah/dipotong.
Gambar 4.1.8.14.
15. Berikutnya, memotong gambar yang bukan berfungsi sebagai
tombol.
76
16. Untuk gambar yang akan dijadikan latar belakang, irislah
menjadi dua bagian saja seperti nampak pada gambar berikut.
77
19. Dan untuk langkah selanjutnya adalah menyimpan dokumen
tersebut menjadi web (Save for web). Pilih menu File > Save
for Web.
78
21. Maka akan muncul kotak dialog Save Optimized As. Tentukan
folder untuk menyimpan file kemudian beri nama file tersebut,
misal index lalu pilih HTML and images untuk Save as type,
Seting=Default Setting, dan Slice=All Slices. Setelah selesai
klik tombol Save untuk menyimpan.
79
23. Tahap selanjutnya adalah mengeditnya menggunakan
Macromedia Dreamweaver untuk menambahkan teks dan
membuat menu pull down agar tampilan situs lebih menarik dan
lebih profesional. Teknik pembuatannya akan dibahas pada
bab selanjutnya dalam buku ini.
80
4.2.1. Membuat Dokumen Baru
Pada pembahasan sebelumnya kita telah membuat sebuah situs
pribadi dengan ukuran 800x600 pixel. Kini kita akan mencoba
membuat sebuah situs Bisnis dengan ukuran 780x890 pixel.
81
4.2.2. Membuat Interface
Bentuk interface sangat mempengaruhi feed back pengguna
terhadap situs kita. Apabila bentuk interface menarik dan ditambah
dengan artikel yang menarik, maka pengunjung akan merasa betah
menikmati artikel yang disuguhkan. Bentuk interface situs komersial
berbeda dengan situs pribadi. Umumnya, situs komersial/bisnis
mengedepankan jasa ataupun produk yang dimiliki.
Pada bagian berikut ini, kita akan mencoba membuat bentuk interface
situs bisnis/komersial dengan cara mencontoh dari sketsa yang telah
dibuat.
82
5. Langkah selanjutnya, buatlah layer baru dan beri nama menjadi
navigasi atas. Kemudian aktifkan Rectangle Marquee tool,
buatlah seleksi memanjang dari kiri ke kanan seperti nampak
pada gambar berikut.
83
8. Untuk mempersingkat pekerjaan Anda, buatlah duplikasi layer
tersebut dengan cara mengaktifkan layer tersebut, lalu klik
tombol mouse kanan. Pilih Duplicate Layer, setelah muncul
kotak dialog gantilah nama layer hasil duplikasi.
84
Gambar 4.2.2.8 Membuat interface untuk navigasi kiri
85
13. Aturlah warna Foreground #cccccc dan Background #ffffff.
Selanjutnya aktifkan Gradient tool, pilih tipe Linier.
86
Gambar 4.2.2.13. Membuat warna gradasi
17. Sekarang kita akan mencoba membuat asesoris untuk navigasi
kiri. Pertama kali, aktifkan Pen tool kemudian pilih Shape Layer
pada option bar di bagian atas.
87
Gambar 4.2.2.15. Membuat bentuk Shape untuk asesoris
19. Ubahlah bentuknya menggunakan Convert Point tool,
sehingga akan berbentuk seperti gambar berikut.
88
4.2.3. Menambahkan Efek pada Interface
Efek yang ditambahkan pada sebuah objek sangat mempengaruhi
sudut pandang dan efek natural yang ditimbulkan. Sebagai contoh,
objek yang diberi efek shadow akan lebih Nampak realistis
dibandingkan yang tidak diberi efek sama sekali.
Pada bagian ini kita akan mencoba membahas tentang penambahan
efek pada interface yang baru saja dibuat.
89
3. Setelah muncuk kotak dialog Layer Style, klik Blending mode
Drop Shadow dan aturlah beberapa spesifikasi seperti nampak
pada gambar berikut. Setelah selesai klik OK.
90
5. Aktifkan layer yang akan diberi efek (misal: navigasi atas copy),
klik tombol mouse kanan kemudian pilih Paste Layer Style.
91
7. Sekarang aktifkan layer Shape 2, kemudian klik tombol mouse
kanan. Pilih Blending Options.
92
4.2.4. Membuat Tombol
Setelah selesai membuat interface dengan penambahan beberapa
efek, langkah selanjutnya adalah membuat tombol (button) pada
navigasi yang telah dibuat sebelumnya.
Tentukan terlebih dulu tombol apa saja yang akan ditampilkan di
halaman muka. Anda bisa melihat beberapa situs di Internet sebagai
referensi. Ada beberapa menu yang umumny ditampilkan di halaman
muka yaitu: Home, About, Us, Support, Contact Us, dan Service.
Apabila Anda mengikuti petunjuk buku ini, kita akan mencoba
membuat tombol menu tersebut.
93
3. Pada option bar di bagian atas, tentukan 1 pixel untuk
ketebalan garis (Weight). Aturlah warna Foreground #858d8f.
Buatlah garis vertikal dengan posisi tepat pada garis bantu yang
telah dibuat sebelumnya.
94
6. Sekarang kita akan mencoba membuat teks menu: Home,
About Us, Service, Support, Client, dan Contact Us. Pertama
kali, aktifkan Horizontal Text tool, kemudian pada Option bar
pilihlah jenis huruf (font) yang disukai. Jangan lupa menentukan
ukuran font. Apabila mengikuti petunjuk buku ini, gunakan jenis
font Verdana, Regular 14 point. Warna #515759.
95
4.2.5. Membuat Heading
Setiap situs, baik yang bersifat komersial maupun sosial pasti
memiliki ciri khas tersendiri. Profil dan jasa sebuah perusahaan
misalnya, akan teraktualisasi melalui gambar yang ada di situs dan
letaknya di bagian atas yang disebut dengan heading.
Sebuah image dapat pula dijadikan image branding suatu
perusahaan, maka kita harus benar-benar membuat gambar yang
dijadikan heading memiliki kualitas yang sempurna.
Gambar yang dijadikan sebagai heading juga harus sesuai dengan
profil perusahaan itu sendiri. Sebagai contoh, perusahaan elektronik
akan sangat sangat janggal situsnya bila gambarnya didominasi oleh
bunga atau sebaliknya.
Pada bagian ini kita akan mencoba membuat sebuah image yang
berfungsi sebagai heading. Apabila Anda mengikuti petunjuk buku ini,
silakan gunakan beberapa gambar yang berhubungan dengan
computer. Misalnya: notebook, mouse, keyboard, printer, kartu
memori, monitor, dan lain-lain.
96
2. Masukkan gambar-gambar tersebut ke dokumen website Anda
dengan cara mengaktifkan layer Background (gambar sumber)
lalu klik dan seret (click and drag) ke tempat tujuan.
97
Gambar 4.2.5.4. Tiga buah gambar telah dimasukkan ke dokumen
5. Sekarang aktifkan Eraser tool, dan aturlah beberapa
spesifikasi pada Option bar.
98
Gambar 4.2.5.7. Hasil perpaduan gambar dengan teknik montage
8. Seleksi gambar-gambar tersebut dengan cara menekan tombol
Shift sambil mengklik layer gambar tersebut. Klik menu option
Layer, pilih Merge Layers atau tekan Ctrl+E.
99
4.2.6. Teknik Slice
Setelah terbentuk sebuah halaman web yang siap ditampilkan,
langkah selanjutnya adalah memotong (slice) dokumen tersebut agar
dapat diedit dengan Macromedia Dreamweaver maupun software
yang sejenis.
100
2. Setelah semua gambar terbagi oleh garis bantu menjadi
beberapa bagian, langkah selanjutnya adalah memotong
gambar sesuai dengan garis bantu yang telah dibuat. Aktifkan
Slice tool, klik dan seret membentuk kotak sesuai besarnya
gambar. Secara otomatis akan muncul nomor di sudut kiri atas
sebagai tanda urutan gambar yang telah dipotong. Apabila
tidak tepat dalam memotong bagian sebelumnya, maka secara
otomatis akan dibuat nomor berikutnya. Oleh karena itu,
usahakan meletakkan irisan tepat pada irisan sebelumnya.
Pertama kali, potonglah bagian atas terlebih dulu.
101
5. Sebagai langkah akhir, kita akan menyimpan dokumen tersebut
dalam format html sehingga dapat diedit melalui Macromedia
Dreamweaver. Mula-mula, pilih menu File > Save for Web.
102
Gambar 4.2.6.7. Spesifikasi untuk nama file dan ekstensi
8. Setelah tersimpan, secara otomatis seluruh gambar (image)
akan tersimpan dalam folder images.
103
BAB 5
PROSES EDITING
Ada sebagian web designer dalam membuat situs professional tidak
memanfaatkan Adobe Photoshop dalam merancang web, padahal
dengan software tersebut kita akan lebih mudah dan lebih praktis
dibandingkan harus membuat kode html.
104
5.1.1. Mengubah Objek menjadi Background
Tidak semua gambar (image) yang pada web yang telah kita buat
diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda
dapat menambahkan menu pull down agar tampilan website lebih
menarik. Anda juga dapat membuat tombol dalam bentuk mouse over,
dan lain sebagainya.
105
Gambar 5.1.1.2. Memilih objek yang akan dihapus
3. Pada bagian Properties, tertulis Src = images/index_26.gif hal
itu berarti kita tidak dapat memasukan teks di atas gambar
tersebut karena objek tersebut adalah image, bukan
merupakan background. Tekan Del untuk menghapusnya.
106
4. Klik pada Background URL of cell untuk memilih gambar yang
akan dijadikan latar belakang (background). Oleh karena nama
file yang baru saja dihapus adalah index_26.gif maka gunakan
file tersebut sebagai latar belakang.
107
5.1.2. Memasukkan Objek
Objek yang dimaksud dapat berupa animasi, gambar, maupun teks.
Dalam Macromedia Dreamweaver proses memasukkan objek sangat
mudah karena sudah disediakan tool yang sangat lengkap. Anda
tinggal memilih objek apa yang akan dimasukkan.
108
Gambar 5.1.2.3. Memasukkan teks pada dokumen
4. Anda bisa memasukkan image di antara teks tersebut. Untuk
melakukan hal itu, pertama kali letakkan kursor di awal paragraf
kemudian pilih menu Insert > Image.
109
6. Apabila berhasil memasukkan gambar, maka akan terlihat
objek tersebut berada di depan paragraf. Namun posisinya
masih kurang sempurna karena susunan teks terdorong oleh
gambar tersebut.
110
5.2. MEMBUAT LINK DAN NAVIGASI
Menu yang mudah digunakan (user friendly) dapat membantu
pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya
menggunakan tombol menu yang umum, seperti: Home, Product,
Service, dan Contact Us.
111
2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu
dengan cara memilih menu Window > Behaviors.
112
Gambar 5.2.1.5. Kotak dialog Show Pop-up Menu
6. Pada Tab Contents, masukkan nama menu pada kolom Text
(misal: Acer).
113
Gambar 5.2.1.9. Membuat beberapa menu baru
10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks
dan latar belakang pop up menu. Tentukan jenis dan ukuran
font yang digunakan. Lalu tentukan pula warna teks dan warna
cell ketika mouse berada di atas teks.
114
12. Klik Tab Position untuk menentukan posisi pop up menu.
115
5.2.2. Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat
Pop up Menu juga menyediakan tool untuk membuat Rollover Image
sebagai tombol. Yang harus Anda lakukan pertama kali adalah
menyediakan dua buah gambar yang ukurannya sama tapi warnanya
berbeda.
1. Buatlah duplikasi gambar tombol yang telah ada.
116
Gambar 5.2.2.3. Kotak dialog Hue/Saturation
4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar
About Us.
117
gambar asli pada kolom Original Image. Untuk mempermudah
pencarian file, klik tombol Browse. Tentukan pula file untuk
gambar rollover pada kolom Rollover Image.
118