BAB 2KONSEP PEMBUATAN WEBSebelum membuat web secara profesional, tugas penting sebagaiseorang pengembang web adalah member...
Agar web yang dibuat nampak profesional perlu memahami beberapakonsep dasar dalam mengolah web, mulai dari tool yang digun...
Gambar Papan Navigasi-   Tombol Home (Home Button) :       o Tombol ini sangat familiar di kalangan pengembang web.       ...
o   Sediakanlah lebih banyak teks link (textual link) dalam    sebuah website untuk mengijinkan pengunjung ke    informasi...
dalam tanda kurung untuk memberikan informasi            kepada pengunjung tentang ukuran file tersebut            sebelum...
Gambar Site Map-   Fasilitas Pencarian (Search Facility)         o Beberapa pengunjung/pengguna lebih memilih fasilitas   ...
Gambar Grafik sebagai navigasi atau link        o    Usahakan dan sediakan link teks (textual link) untuk             info...
-   Buatlah panjang halamannya lebih pendek – hindari terlalu    banyak menggulung layar (vertical scroll).-   Gunakan lin...
-   Hindari penggunaan warna yang terlalu banyak, terutama    kombinasi yang tajam bagi mereka yang buta warna dalam    me...
-   Periksa penggunaan warna yang kurang bagus dengan berbagai    format kebutaan warna (color blindness): jika ragu-ragu ...
GRAFIK (GRAPHIC)Unsur grafik sangat diperlukan dalam sebuah website, karenamemiiki beberapa fungsi. Namun jika terlalu ban...
Berikut ini terdapat beberapa bahan pertimbangan tentang teknologiyang digunakan ketika merancang sebuah website, yaitu:- ...
BAB 3MERANCANG WEBWeb yang sering dikunjungi orang merupakan nilai plus bagi seorangweb designer. Banyaknya pengunjung yan...
“selebritis IT” hanya karena tulisan yang ada di situs        pribadinya.    -   Menjadi cermin pribadi maupun citra perus...
pada bagian yang lain. Usahakan membuat pula halaman        lain jika masing-masing halaman terdapat perbedaan bentuk.    ...
Meskipun belum ada situs resmi yang membuat kategori tentangsebuah website, berikut ini terdapat informasi yang sedikit me...
SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, PortalBerita, Radio, Surat Kabar, Tabloid, Televisi, dan lain-lain. ...
SITUS HIBURAN : Film, Games (Permainan), Humor, Musik,Ringtones, Selebritis, dan lain-lain            Gambar 3.1.3. Contoh...
SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi,Mahasiswa, Teman dan Keluarga, Tentang Remaja, Tips dan Trik,d...
SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, InformasiKota, Gaya Hidup, Jual Beli, Sains dan Teknologi, dan lain...
SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis,Hacking, Internet dan Web, Jaringan, Multimedia, Pemrograman,Perangk...
SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan,Sains dan Teknologi, Sosial, dan lain-lain.             Gam...
SITUS OLAH RAGA : Olah Raga Air, Baseball, Bela Diri, Basket,Bola Voli, Bowling, Bulu Tangkis, Catur, Golf, Otomotif, Sepa...
SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, PengobatanAlternatif, Rumah Sakit, dan lain-lain.             Gambar 3....
SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, KedutaanAsing, Kedutaan Indonesia, Politik, Kementerian, Militer, Organisasi...
SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah,Edukasi, Bahasa, Komputer, Kursus dan Pelatihan, Perguruan Tinggi...
SITUS REFERENSI : Ensiklopedi, Kamus, Perpustakaan, Sejarah,Museum, Peta, dan Lain-lain            Gambar 3.1.12. Contoh s...
SITUS REGIONAL : Aceh, Bali, DKI Jakarta, Jawa, Kalimantan,Sulawesi, Sumatera, dan lain-lain             Gambar 3.1.13. Co...
SITUS REKREASI : Candi, Danau, Gunung, Kolam Renang, Laut,Bioskop, Games, dan lain-lain             Gambar 3.1.14. Contoh ...
SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, TeknologiTerpadu, Teknologi Tepat Guna, dan lain-lain       Gambar 3.1.15. ...
SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur danTradisi, Museum dan Galeri, Sastra, Seni Peran (Acting), Sen...
SITUS SOSIAL DAN BUDAYA : Agama, Anak-anak, Hobi, Keluarga,Komunitas, Lingkungan, dan lain-lain        Gambar 3.1.17. Cont...
SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips,Jasa Transportasi, Restoran, Petunjuk Wisata, dan lain-la...
3.2. DASAR-DASAR PEMILIHAN WARNASeperti telah dijelaskan di awal, pemilihan warna yang tepat sangatmempengaruhi respon pen...
Hijau    -   Positif: berhubungan dengan uang, pertumbuhan, kesuburan,        kesegaran, (penyembuhan/pengobatan), healing...
Kuning   - Positif: terang/cerdas, energi, matahari, kreativitas, akal,       bahagia   - Negatif: penakut, tidak bertangg...
-   Negatif: muram, sedih, konservatifCoklat   - Positif: ramah, bumi, keluar            rumah,   umur   panjang,       ko...
menunjukkan bahwa kelas pekerja menyukai warna seperti biru,merah, hijau, dan lain lain. Sedangkan mereka yang lebih terdi...
Ketika merancang tata letak (layout) halaman web bisa dapatmenggunakan beberapa teknik, salah satunya adalah dengan carame...
Gambar 3.2.2. Bentuk Layout Situs Bisnis dan Ekonomi      Gambar 3.2.3. Bentuk Layout Situs Pribadi                       ...
Gambar 3.2.4. Bentuk Layout Situs BisnisSetelah membuat beberapa bentuk layout, langkah selanjutnyaadalah mengembangkan sk...
BAB 4PROSES PENGEMBANGANPada bagian ini kita akan membahas tentang teknik pengembangansitus sesuai dengan sketsa yang tela...
Dengan melihat bentuk layout tersebut di atas, akan lebih mudahproses pengembangannya dalam Adobe Photoshop. Sebelummembua...
Gambar 4.1.1.2. Sketsa yang telah dibuka dengan Photoshop3.     Klik Set Foreground color untuk memilih warna sebagai lata...
5.   Tekan tombol Alt+Backspace secara bersama-sama untuk     memberi warna pada layer Background.     Gambar 4.1.1.5. Lay...
Alt+Backspace secara bersama-sama untuk memberi warna       putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi.   ...
Gambar 4.1.2.2. Menu Option Pen tool.3.      Klik Set Foreground Color untuk memilih warna.     Gambar 4.1.2.3. Kotak dial...
Gambar 4.1.2.5. Bentuk Shape yang diinginkan.7.   Aktifkan Convert Point tool untuk membuat efek lengkung.        Gambar 4...
10.   Jika telah selesai maka akan terbentuk sebuah asesoris      modern seperti nampak pada gambar berikut.             G...
atau dapat juga menekan tombol Enter. (Lihat gambar      4.1.2.11.).           Gambar 4.1.2.10. Duplikat layer telah muncu...
15.   Aktifkan Direct Selection tool.         Gambar 4.1.2.13. Mengaktifkan Direct Selection tol16.   Buatlah seleksi untu...
menggunakan Convert Point tool sehingga akan membentuk      sebuah latar belakang yang modern. Ubahlah opacity-nya      me...
21.   Sehingga akan didapatkan sebuah bentuk interface yang      modern.      Gambar 4.1.2.19 Bentuk sederhana layout Situ...
23.   Terakhir, aktifkan Rectangle tool .              Gambar 4.1.2.21. Memilih Rectangle tool24.   Kemudian buatlah Shape...
2.   Buatlah sebuah tombol berbentuk kotak.               Gambar 4.1.3.2. Bentuk shape baru3.   Aktifkan Direct Selection ...
Gambar 4.1.3.5. Memilih style Drop Shadow        Gambar 4.1.3.6. Setting untuk efek Drop Shadow7.   Langkah selanjutnya ad...
Gambar 4.1.3.7. Bentuk tombol yang sudah jadi8.   Buatlah tiga buah tombol lagi dengan cara yang sama seperti     sebelumn...
Kita akan mencoba memberi efek khusus pada bentuk interfaceterlebih dulu.1.   Pertama kali aktifkan layer yang bentuk obje...
Gambar 4.1.4.4. Membuat efek khusus5.   Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select >     Inverse untuk memb...
1.   Untuk membuat sebuah heading, pertama kali aktifkan     Horizontal Type tool.       Gambar 4.1.5.1. Mengaktifkan Hori...
5.   Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe     Linier (   ). Aturlah warna Foreground (#ea5765), ...
Gambar 4.1.6.1. Gambar sebagai ilustrasi utama         Gambar 4.1.6.2. Mengatur jendela dokumenGambar 4.1.6.3. Memasukkan ...
Gambar 4.1.6.4. Mengubah ukuran gambar5.    Aktifkan Horizontal Type tool, dan ketikkan beberapa kata      sebagai identit...
kita akan mencoba menambahkan teks pada beberapa tombol yangtelah dibuat agar dapat berfungsi sebagai menu.Menu tersebut d...
4.1.8. Memotong Gambar (Slice)Adobe Photoshop memang dapat diandalkan dalam segala hal,terbukti beberapa bidang sangat mem...
2.      Buatlah beberapa garis bantu untuk menandai bagian yang        akan dipotong. Apabila mengikuti pentunjuk dalam bu...
Kita harus memilih bagian mana saja yang perlu dipisahkan,     dan umumnya semua tombol harus dipisahkan karena memiliki  ...
8.      Letakkan pointer di atas angka 2, klik dan tahan sambil        menyeret ke kanan untuk memotong gambar.           ...
12.    Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu       dipisah/dipotong.       Gambar 4.1.8.12. Mengab...
16.    Untuk gambar yang akan dijadikan latar belakang, irislah       menjadi dua bagian saja seperti nampak pada gambar b...
19.   Dan untuk langkah selanjutnya adalah menyimpan dokumen      tersebut menjadi web (Save for web). Pilih menu File > S...
21.   Maka akan muncul kotak dialog Save Optimized As. Tentukan      folder untuk menyimpan file kemudian beri nama file t...
23.   Tahap selanjutnya adalah mengeditnya menggunakan      Macromedia Dreamweaver untuk menambahkan teks dan      membuat...
4.2.1. Membuat Dokumen BaruPada pembahasan sebelumnya kita telah membuat sebuah situspribadi dengan ukuran 800x600 pixel. ...
4.2.2. Membuat InterfaceBentuk interface sangat mempengaruhi “feed back” penggunaterhadap situs kita. Apabila bentuk inter...
5.   Langkah selanjutnya, buatlah layer baru dan beri nama menjadi     navigasi atas. Kemudian aktifkan Rectangle Marquee ...
8.    Untuk mempersingkat pekerjaan Anda, buatlah duplikasi layer      tersebut dengan cara mengaktifkan layer tersebut, l...
Gambar 4.2.2.8 Membuat interface untuk navigasi kiri            Gambar 4.2.2.9.. Membuat navigasi bawah12.   Buatlah layer...
13.   Aturlah warna Foreground #cccccc dan Background #ffffff.      Selanjutnya aktifkan Gradient tool, pilih tipe Linier....
Gambar 4.2.2.13. Membuat warna gradasi17.   Sekarang kita akan mencoba membuat asesoris untuk navigasi      kiri. Pertama ...
Gambar 4.2.2.15. Membuat bentuk Shape untuk asesoris19.   Ubahlah bentuknya menggunakan        Convert Point tool,      se...
4.2.3. Menambahkan Efek pada InterfaceEfek yang ditambahkan pada sebuah objek sangat mempengaruhisudut pandang dan efek na...
3.   Setelah muncuk kotak dialog Layer Style, klik Blending mode     Drop Shadow dan aturlah beberapa spesifikasi seperti ...
5.    Aktifkan layer yang akan diberi efek (misal: navigasi atas copy),      klik tombol mouse kanan kemudian pilih Paste ...
7.   Sekarang aktifkan layer Shape 2, kemudian klik tombol mouse     kanan. Pilih Blending Options.       Gambar 4.2.3.7. ...
4.2.4. Membuat TombolSetelah selesai membuat interface dengan penambahan beberapaefek, langkah selanjutnya adalah membuat ...
3.   Pada option bar di bagian atas, tentukan 1 pixel untuk     ketebalan garis (Weight). Aturlah warna Foreground #858d8f...
6.   Sekarang kita akan mencoba membuat teks menu: Home,     About Us, Service, Support, Client, dan Contact Us. Pertama  ...
4.2.5. Membuat HeadingSetiap situs, baik yang bersifat komersial maupun sosial pastimemiliki ciri khas tersendiri. Profil ...
2.   Masukkan gambar-gambar tersebut ke dokumen website Anda     dengan cara mengaktifkan layer Background (gambar sumber)...
Gambar 4.2.5.4. Tiga buah gambar telah dimasukkan ke dokumen5.     Sekarang aktifkan Eraser       tool, dan aturlah bebera...
Gambar 4.2.5.7. Hasil perpaduan gambar dengan teknik montage8.   Seleksi gambar-gambar tersebut dengan cara menekan tombol...
4.2.6. Teknik SliceSetelah terbentuk sebuah halaman web yang siap ditampilkan,langkah selanjutnya adalah memotong (slice) ...
2.   Setelah semua gambar terbagi oleh garis bantu menjadi     beberapa bagian, langkah selanjutnya adalah memotong     ga...
5.   Sebagai langkah akhir, kita akan menyimpan dokumen tersebut     dalam format html sehingga dapat diedit melalui Macro...
Gambar 4.2.6.7. Spesifikasi untuk nama file dan ekstensi8.   Setelah tersimpan, secara otomatis seluruh gambar (image)    ...
BAB 5PROSES EDITINGAda sebagian web designer dalam membuat situs professional tidakmemanfaatkan Adobe Photoshop dalam mera...
5.1.1. Mengubah Objek menjadi BackgroundTidak semua gambar (image) yang pada web yang telah kita buatdiganti. Jika image t...
Gambar 5.1.1.2. Memilih objek yang akan dihapus3.   Pada bagian Properties, tertulis Src = images/index_26.gif hal     itu...
4.     Klik pada Background URL of cell untuk memilih gambar yang       akan dijadikan latar belakang (background). Oleh k...
5.1.2. Memasukkan ObjekObjek yang dimaksud dapat berupa animasi, gambar, maupun teks.Dalam Macromedia Dreamweaver proses m...
Gambar 5.1.2.3. Memasukkan teks pada dokumen4.   Anda bisa memasukkan image di antara teks tersebut. Untuk     melakukan h...
6.   Apabila berhasil memasukkan gambar, maka akan terlihat     objek tersebut berada di depan paragraf. Namun posisinya  ...
5.2. MEMBUAT LINK DAN NAVIGASIMenu yang mudah digunakan (user friendly) dapat membantupengguna ketika mencari informasi ya...
2.   Jika panel Behaviors belum muncul, aktifkan terlebih dulu     dengan cara memilih menu Window > Behaviors.         Ga...
Gambar 5.2.1.5. Kotak dialog Show Pop-up Menu6.   Pada Tab Contents, masukkan nama menu pada kolom Text     (misal: Acer)....
Gambar 5.2.1.9. Membuat beberapa menu baru10.   Selanjutnya, klik Tab Appearance untuk mengatur warna teks      dan latar ...
12.   Klik Tab Position untuk menentukan posisi pop up menu.         Gambar 5.2.1.12. Menentukan posisi pop-up menu13.   S...
5.2.2. Membuat Rollover ImageMacromedia Dreamweaver selain menyediakan tool untuk membuatPop up Menu juga menyediakan tool...
Gambar 5.2.2.3. Kotak dialog Hue/Saturation4.   Sekarang kembali ke Macromedia Dreamweaver. Klik gambar     About Us.     ...
gambar asli pada kolom Original Image. Untuk mempermudah       pencarian file, klik tombol Browse. Tentukan pula file untu...
Upcoming SlideShare
Loading in …5
×

Tutorial web design

15,508 views

Published on

Published in: Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,508
On SlideShare
0
From Embeds
0
Number of Embeds
423
Actions
Shares
0
Downloads
1,568
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Tutorial web design

  1. 1. BAB 2KONSEP PEMBUATAN WEBSebelum membuat web secara profesional, tugas penting sebagaiseorang pengembang web adalah memberikan ide dan gagasantentang point apa saja yang akan ditampilkan dalam sebuah halamanweb. Dengan demikian, seorang pengembang web juga perluberkonsultasi dengan pemilik web itu sendiri agar segala sesuatuyang menjadi tujuan pemilik web dapat terpenuhi.Lain halnya dengan seorang pengembang web (web developer) yangdiberikan kebebasan dalam membuat sebuah web. Pemiliki webumumnya mempercayakan sepenuhnya kepada pengembang web(web developer). Nah, jika demikian maka sebagai seorangpengembang web harus benar-benar membuktikan keterampilannyadalam membuat web secara profesional agar para pemiliki web tidakkecewa dengan karya yang telah dibuat.Untuk menjadi seorang pengembang web profesional tidaklah mudahkarena harus memadukan antara bahasa pemrograman web dengannilai seni yang terdapat dalam setiap halaman web. Keduanya harusdimiliiki, jika salah satu saja maka belum bisa disebut sebagaiseorang pengembang web profesional. Meskipun pintar bahasa phpdalam membuat web, tapi jika tidak didukung oleh jiwa seni makahasilnya kurang maksimal. Begitu pula sebaliknya, jika hanya pandaimembuat tampilan halaman web tapi tidak didukung olehpengetahuan tentang bahasa pemrograman web maka hal itu akansia-sia saja.Sebagai seorang pengembang web pemula, tidak perlu berkecil hatijika ingin menjadi seorang pengembang web profesional. Yangterpenting adalah adanya kemauan untuk terus belajar dan belajarlagi agar wawasan tentang pengembangan web terus bertambah.Ada beberapa hal yang perlu diketahui oleh para pengembang webpemula ketika pertama kali ingin membangun sebuah web dari awal. 8
  2. 2. Agar web yang dibuat nampak profesional perlu memahami beberapakonsep dasar dalam mengolah web, mulai dari tool yang digunakan,format gambar yang sesuai, hingga pemilihan warna teks dan latarbelakang sebuah halaman web.Berikut ini terdapat beberapa aspek yang perlu diperhatikan dalammembuat sebuah website.DAPAT DIGUNAKAN (USABILITY)Usabilitas merupakan hal yang sangat penting dalam merancang web(web design). Memang sangat baik jika memiliki sebuah websitedinamis yang nampak profesional dan bagus , namun jika perlu waktuyang sangat lama untuk mendownload sebuah artikal ataupenggunaan navigasinya sangat rumit maka tidak heran jikapengguna akan “hengkang” dari website Anda dan tidak akan kembalilagi. Perlu diketahui, umumnya pengguna (user) ingin mendapatkaninformasi secara cepat meskipun tampilan website-nya biasa saja.Jika terlalu lama saat mencari informasi maka para pengguna akanlangsung menutup halaman web tersebut. Ingat, janganmengorbankan aspek usabilitas dalam mendesain website.NAVIGASI (NAVIGATION)Navigasi juga menjadi hal yang sangat penting dalam sebuah websiteyang berfungsi untuk membantu pengguna (user) dalam menjelajahwebsite kita untuk mencari informasi yang diinginkan secara mudah.Navigasi yang bagus mencerminkan struktur website yang sangatbaik.Kadangkala ditemukan beberapa format navigasi, diantaranya:- Papan Navigasi (Navigation Panel) o Bisanya dalam bentuk menu-menu yang tersusun rapi. o Sebaiknya diatur link pada bagian kiri (dari tangan Anda) atau di bagian atas dari sebuah halaman web. o Dapat berupa teks maupun grafik. o Harus mengambil ruang yang tidak terlalu banyak. o Posisi navigasi sebaiknya konsisten pada setiap halamannya. Jika terpaksa menggunakan warna yang berbeda, pastikan bagian tersebut masih merupakan satu kesatuan. 9
  3. 3. Gambar Papan Navigasi- Tombol Home (Home Button) : o Tombol ini sangat familiar di kalangan pengembang web. Fungsi utama tombol ini adalah untuk kembali ke halaman utama (homepage). o Tombol home dapat ditempatkan pada setiap halaman web kecuali halaman utama (homepage). o Tombol home maupun logo perusahaan dapat berfungsi sebagai navigasi dan sebaiknya diletakkan di bagian kiri atas (dari tangan Anda). o Pastikan tombol home maupun logo ada pada setiap halaman (kecuali halaman utama) agar pengunjung (visitor) lebih familiar dengan navigasi tersebut. Gambar Tombol Home- 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
  4. 4. 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. Gambar External linko Apabila menyertakan link eksternal dalam website Anda, jangan membuat link dengan cara membuka jendela baru (new window) menggunakan target “_blank”. Ini dapat mengakibatkan pengunjung merasa terganggu.o Hindari tombol kembali (back button) – yang merupakan perintah umum untuk kembali ke halaman sebelumnya.o Jika memiliki link dalam bentuk file berukuran besar seperti .avi atau .pdf, sediakan ukuran dalam bentuk KB 11
  5. 5. 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).- Judul html (HTML Title) o Umumnya berada pada tag html header. o Judul html (sebagai header) masih relevan dengan halaman sekarang. o Ditampilkan di bagian atas (top title bar) pada sebuah browser. o Judul html sangat berguna bagi yang membutuhkan sebagai bookmark situs Anda. Gambar Judul- Peta situs (Site Map) o Site map merupakan salah satu bagian dari halaman website yang memberikan informasi tentang peta situs. o Site map merupakan struktur yang hirarkis dari sebuah situs dengan link untuk seluruh halaman yang relevan. o Memiliki link yang menyolok ke peta situs dari setiap halaman. 12
  6. 6. Gambar Site Map- Fasilitas Pencarian (Search Facility) o Beberapa pengunjung/pengguna lebih memilih fasilitas pencarian sebelum menggunakan navigasi lain yang disediakan. o Ada juga beberapa pengguna menggunakan fasilitas pencarian sebagai fasilitas terakhir yang akan digunakan. o Pastikan situs Anda memiliki sebuah fasilitas pencarian (search facility). o Letakkan kotak pencarian dalam posisi yang menyolok pada setiap halamannya. Gambar Fasilitas Pencarian- Grafik sebagai Navigasi dan/atau Link (Graphic as Navigation and/or Link) o Sebagian pengembang web menggunakan grafik/ gambar sebagai link maupun navigasi. Berhati-hatilah jika melakukan hal tersebut. o Jika garis tepi (border=”0”) pada tag grafik, hal itu mungkin menjadi jalan yang tidak jelas bagi pengunjung ketika memberitahukan bahwa gambar tersebut merupakan sebuah link. o Jika grafik/gambar tersebut bukan dalam mouseover, pengunjung mungkin tidak akan melihat kursor berubah menjadi sebuah tangan. 13
  7. 7. Gambar Grafik sebagai navigasi atau link o Usahakan dan sediakan link teks (textual link) untuk informasi yang sama sebagai grafik. Gambar Textual link o Jika nilai estetika lebih penting, berilah garis tepi (border=”1”) pada grafik/gambar sebagai link.KONSEP PENULISAN (WRITING CONCEPT)Teknik penulisan dalam web berbeda dengan penulisan untukpublikasi (cetak). Waktu merupakan hal sangat penting bagi merekayang menggunakan Internet, sehingga para pengguna Internet tidakakan membuang waktunya hanya untuk membaca teks yang sangatbanyak sekali. Riset membuktikan bahwa para pengguna cenderungmeneliti teks dalam layar monitor. Selain itu, lebih cepat membaca dilayar monitor dibandingkan membaca di atas kertas.Terdapat beberapa konsep penulisan dalam sebuah web, yaitu:- Sedikit itu lebih baik – pertahankan konsistensi: buatlah struktur kalimat sesederhana mungkin, atau buatlah kalimat yang pendek.- Seringlah menyorot (highlight) kata atau ungkapan yang penting.- Buatlah bullet atau nomor jika perlu. 14
  8. 8. - 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)Kesederhanaan merupakan hal penting dalam membuat sebuah webprofesional. Sederhana di sini bukan dalam arti tampilan sebuah situs,namun lebih mengarah ke teknik penulisannya.Ada beberapa hal yang perlu diperhatikan agar konsepkesederhanaan tetap dipertahankan, yaitu:- Gunakan Heading dan Sub Heading untuk memisahkan bagian teks.- Gunakan ruang kosong dengan warna putih secara bijaksana.- Pastikan Anda memiliki tidak lebih 12 kata dalam setiap barisnya.- Tulislah isi secara singkat – bukan sebuah karangan.- Sorot (highlight) kata-kata yang penting.- Gunakan warna latar belakang pucat (terang) jika menggunakan teks utama dengan warna gelap.- Gunakan warna latar belakang gelap jika teks utama berwarna terang. 15
  9. 9. - Hindari penggunaan warna yang terlalu banyak, terutama kombinasi yang tajam bagi mereka yang buta warna dalam membaca teks.MUDAH DIAKSES (ACCESSIBILITY)Suatu hal yang mudah diakses ke semua orang denganmengabaikan browser, paltform, sistem operasi, tersambung atauputus merupakan hal yang sangat utama untuk mempertimbangkanketika merancang sebuah website. Anda tidak perlu menghalangiseorang pengguna web keluar, siapa saja bisa menjadi potensimenjadi pengunjung/ pelanggan. Setelah sebuah website mudahdiakses, membuat penggunaan website Anda akan banyak diaksesoleh pengguna/pengunjung. Mudah digunakan = Pengunjung akankembali. Sulit digunakan = Pengunjung akan “kapok”.“Kekuatan Web adalah disukainya web tersebut oleh pengguna diseluruh dunia (Universality). Akses oleh semua orang denganmengabakan kekurangannya adalah aspek yang sangat penting”.(Tim Berners – Lee, Direktur W3C dan pembuat World Wide Web).Aspek kemudahan dalam mengakses sebuah website perlumempertimbangkan beberapa hal sebelum merancang web, diantaranya:- Pastikan website Anda mudah digunakan oleh browser utama yang sering digunakan banyak orang maupun web browser lainnya.- Pastikan website Anda mudah digunakan tanpa harus mendownload sebuah plug-in tertentu.- Ujilah website Anda pada tahap pengembangan untuk memeriksa kinerja pada berbagai sistem operasi dengan versi browser berbeda.- Gunakan style sheet untuk memisahkan style dan content.- Gunakan etika tag html untuk menampilkan teks yang dimaksud sehingga memungkinkan pengguna yang masih awam dapat membaca teks secara jelas dengan cara: menggunakan tag <em> atau <strong> pada Heading, usahakan selalu menetapkan teks alternatif untuk grafik (<img src=”gambar.gif” width=”25” height=”35” alt=”keterangan gambar”>) 16
  10. 10. - Periksa penggunaan warna yang kurang bagus dengan berbagai format kebutaan warna (color blindness): jika ragu-ragu – desaturate (buatlah hitam dan putih) rancangan untuk melihatnya apabila masih perlu pertimbangan, jangan menggunakan warna sebagai indikasi adanya perubahan (misal: bagian baru), selalu menggarisbawahi suatu teks berupa link.KEBUTAAN WARNA (COLOR BLINDNESS)Sekitar satu dari sebelas orang mungkin tidak mampu menggunakanwebsite Anda berkaitan dengan beberapa format kebutaan warna(color blindness). Yang terbaik, website Anda tidak akan nampakpada orang yang buta warna seperti yang telah Anda rancang.Sialnya lagi, hal ini bisa jadi teks tidak terbaca, navigasi yang sulitdigunakan dan elemen lain yang tersembunyi.Ada beberapa pertimbangan dalam pemilihan warna agar websiteAnda dapat digunakan oleh mereka yang buta warna, yaitu:- Kebanyakan orang yang buta warna tidak bisa membedakan antara warna merah dengan hijau.- Warna yang teduh akan nampak terang jika dilihat oleh orang yang buta warna.- Format kebutaan warna yang umum adalah: Protanopia tidak mampu menerima warna merah dan Deuteranopia tidak mampu menerima warna hijau, sedangkan Tritanopia tidak mampu warna biru.Bagaimana cara menetralkan kondisi tersebut?- Jangan menggunakan warna sebagai satu-satunya kunci rahasia, oleh karena itu gunakan selalu garis bawah (underline) jika merupakan sebuah llink, sediakan pula arti lain untuk membedakan antar bagian.- Hindari penggunaan warna merah atau hijau saja secara monoton pada website Anda.- Pertahankan tingkat kontras antara teks dan latar belakang.- Gunakan selalu “alt” (teks alternatif) pada setiap grafik. 17
  11. 11. GRAFIK (GRAPHIC)Unsur grafik sangat diperlukan dalam sebuah website, karenamemiiki beberapa fungsi. Namun jika terlalu banyak menggunakangrafik, bisa jadi website kita akan menimbulkan berbagai masalah.Untuk mengatasi berbagai hal yang tidak diinginkan ketikamendesain web, perlu mempertimbangkan berbagai sudut pandangdalam penggunaan grafik, diantaranya:- Tambahkan grafik seperlunya karena bisa menambah waktu ketika pengguna mendownload artikel yang diinginkan.- Ambillah yang terkecil dalam hal ukuran fisik dan file jika memungkinkan.- Jangan menggunakan navigasi dalam bentuk grafik jika ingin dijadikan beberapa bahasa – hal ini memerlukan pemeliharaan ekstra.- Usahakan selalu mencantumkan spesifikasi tinggi dan lebar dalam tag <img src>.- Usahakan selalu mencantumkan nilai border=”1” dalam tag <img src> atau beberapa browser akan menampilkan warna biru di sekitar tepi gambar jika grafik tersebut merupakan sebuah link.- Usahakan selalu menetapkan teks alternatif dalam tag <img src=”gambar.gif” alt=”keterangan”>. Sebagian orang akan mematikan grafik agar proses koneksi lebih cepat. Jika grafik dimatikan, dan tidak memasukkan teks alternatif maka pengguna tidak mengetahui gambar tersebut.TEKNOLOGI BARU (NEW TECHNOLOGY)Perkembangan internet yang begitu pesat membuat beberapadeveloper menambahkan teknologi baru dapat menampilkan aplikasiyang dibutuhkan.Sebagai seorang web developer, tentu saja harus selalu mengikutiperkembangan di dunia maya agar ketika merancang web tidaktimbul masalah akibat dari pengguaan teknologi yang sudahkadaluwarsa. 18
  12. 12. Berikut ini terdapat beberapa bahan pertimbangan tentang teknologiyang 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
  13. 13. BAB 3MERANCANG WEBWeb yang sering dikunjungi orang merupakan nilai plus bagi seorangweb designer. Banyaknya pengunjung yang datang dapat dijadikantolok ukur keberhasilan seseorang dalam merancang danmengembangkan sebuah website profesional.Ada beberapa unsur yang mempengaruhi keberhasilan tersebut,diantaranya: mudah digunakan, proses koneksi cepat, tampilanmenarik, perpaduan warna sangat tepat, navigasi mudah dipahamidan digunakan, isi artikel sangat berguna, dan masih banyak lagiunsur lain. Semua itu bergantung pada respon pengunjung/pengguna terhadap website yang kita buat.Saat ini website sudah menjadi salah satu bagian dari identitassebuah institusi, sama pentingnya dengan alamat perusahaan.Website dapat dijadikan “guide” bagi pelanggan untuk mengetahuilebih jauh tentang profil sebuah institusi secara online. Ada beberapakelebihan dan manfaat website sehingga banyak orangmembutuhkan kehadirannya, diantaranya: - Memiliki alamat secara online - Jangkauan tanpa batas sehingga dapat diakses oleh pengguna di seluruh dunia dalam waktu yang tak terbatas (24 jam sehari tanpa henti). - Dapat berfungsi sebagai identitas pribadi/perusahaan tentang profil diri agar dapat diketahui oleh para customer dalam menjalankan bisnis sehingga komunikasi dapat berjalan dengan mulus. - Situs personal dapat berfungsi sebagai juru bicara untuk menuangkan ide, gagasan, kritik, saran, berbagi ilmu, dan suara hati lainnya yang ingin dituangkan ke dalam situs melalui tulisan. Pada akhirnya menjadi “image branding” terhadap orang yang bersangkutan. Hal ini sudah dilakukan oleh banyak orang, dan ini terbukti banyaknya orang 20
  14. 14. “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 “webdeveloper” dalam memvisualisasikan profil perusahaan ke dalamwebsite. Meskipun demikian, sebagai pemilik situs juga harus ikutterllibat dalam pembentukan dan pengembangan website yanginteraktif dan dinamis agar sesuai dengan sasaran dan tujuan yangingin dicapai. Hal inilah yang jarang disadari oleh para pemilik situs.Umumnya para pemilik situs mempercayakan seluruhpengembangannya kepada sang “web developer”Berikut ini ada beberapa tips untuk calon pemilik situs dalammemberikan masukan kepada pengembang web agar pembuatansitus .dapat berjalan dengan lancar sehingga tidak melenceng darisasaran dan tujuan. - Melakukan survei dengan mesin pencari (search engine) tentang contoh situs yang sudah ada dan situs pesaing bisnis yang sudah muncul. Pelajarilah dengan seksama terhadap situs tersebut, jika perlu tulislah poin-poin penting yang menjadi andalan situs tersebut. Hal ini akan sangat membantu dalam menentukan isi situs yang akan ditampilkan. - Dari hasil survei tersebut, tulislah keinginan Anda tentang isi situs yang akan dibuat secara detail. Catatan tersebut menjadi acuan untuk memilah-milah bagian yang penting dan yang tidak penting. Jika memiliki anggaran yang terbatas, maka poin-poin yang penting dapat didahulukan untuk ditampilkan. - Buatlah sketsa tata letak halaman (coretan di atas kertas menggunakan pensil untuk membuat kotak-kotak yang dinamai). Bayangkan tentang tata letak (layout) web yang akan dibuat, Susunlah bagian yang akan ditonjolkan (eye-catching) pada atas terlebih dulu dan yang tidak penting 21
  15. 15. 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.3.1. KATEGORI WEBWebsite yang dibuat oleh seorang pengembang web (web developer)harus benar-benar mencerminkan identitas suatu institusi, jangansampai bertolak belakang antara isi (content) dengan bentuk dan tataletak situs itu sendiri. Ada beberapa point yang barus diperhatikan,salah satunya adalah tentang kategori situs itu sendiri. Sebagaicontoh, jika seorang pengembang web diberi tugas untuk membuatsebuah situs anak-anak maka dia harus mengetahui hal-hal yangberhubungan dengan dunia anak-anak. Menyangkut masalahpemilihan jenis huruf (font), kombinasi warna, penggunaan gambar,animasi, dan unsur lain yang mendukung.Pemilihan warna dan jenis font yang digunakan sangatmempengaruhi kesan yang melekat di benak para pengguna/pengunjung. Sebagai contoh, jika Anda membuat situs anak-anaksebaiknya menggunakan warna yang cerah dan disukai anak-anak,sisipkan pula gambar dan animasi yang dapat membangkitkankeinginan sang pengguna untuk lebih lama lagi membaca informasiyang disajikan.Sebaliknya, jangan terlalu banyak menyisipkan animasi maupungambar pada situs dalam kategori referensi, misal: kamus,perpustakaan, dan lain-lain. 22
  16. 16. Meskipun belum ada situs resmi yang membuat kategori tentangsebuah website, berikut ini terdapat informasi yang sedikit membantudalam mengelompokkan website berdasarkan kategori.SITUS BISNIS DAN EKONOMI: Asosiasi & Organisasi, E-commercedan Jasa, Finansial & Investasi, Bussines Center, dan lain-lain. Gambar 3.1.1. Contoh situs Bisnis dan Ekonomi 23
  17. 17. SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, PortalBerita, Radio, Surat Kabar, Tabloid, Televisi, dan lain-lain. Gambar 3.1.2. Contoh situs Berita dan Media 24
  18. 18. SITUS HIBURAN : Film, Games (Permainan), Humor, Musik,Ringtones, Selebritis, dan lain-lain Gambar 3.1.3. Contoh situs Hiburan 25
  19. 19. SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi,Mahasiswa, Teman dan Keluarga, Tentang Remaja, Tips dan Trik,dan lain-lain. Gambar 3.1.4. Contoh situs Pribadi 26
  20. 20. SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, InformasiKota, Gaya Hidup, Jual Beli, Sains dan Teknologi, dan lain-lain. Gambar 3.1.5. Contoh situs Informasi 27
  21. 21. SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis,Hacking, Internet dan Web, Jaringan, Multimedia, Pemrograman,Perangkat Keras, Perangkat Lunak, Tutorial, dan lain-lain. Gambar 3.1.6. Contoh situs Komputer dan Internet 28
  22. 22. SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan,Sains dan Teknologi, Sosial, dan lain-lain. Gambar 3.1.7. Contoh situs Organisasi 29
  23. 23. 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. Gambar 3.1.8. Contoh situs Olah Raga 30
  24. 24. SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, PengobatanAlternatif, Rumah Sakit, dan lain-lain. Gambar 3.1.9. Contoh situs Kesehatan 31
  25. 25. SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, KedutaanAsing, Kedutaan Indonesia, Politik, Kementerian, Militer, Organisasi,Perwakilan Kota, dan lain-lain Gambar 3.1.10. Contoh situs Pemerintah 32
  26. 26. SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah,Edukasi, Bahasa, Komputer, Kursus dan Pelatihan, Perguruan Tinggi,Sekolah Menengah, dan lain-lain Gambar 3.1.11. Contoh situs Pendidikan 33
  27. 27. SITUS REFERENSI : Ensiklopedi, Kamus, Perpustakaan, Sejarah,Museum, Peta, dan Lain-lain Gambar 3.1.12. Contoh situs Referensi 34
  28. 28. SITUS REGIONAL : Aceh, Bali, DKI Jakarta, Jawa, Kalimantan,Sulawesi, Sumatera, dan lain-lain Gambar 3.1.13. Contoh situs Regional 35
  29. 29. SITUS REKREASI : Candi, Danau, Gunung, Kolam Renang, Laut,Bioskop, Games, dan lain-lain Gambar 3.1.14. Contoh situs Rekrasi 36
  30. 30. SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, TeknologiTerpadu, Teknologi Tepat Guna, dan lain-lain Gambar 3.1.15. Contoh Situs Sains dan Teknologi 37
  31. 31. SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur danTradisi, Museum dan Galeri, Sastra, Seni Peran (Acting), Seni Visual,Seni Desain, dan lain-lain Gambar 3.1.16. Contoh Situs Seni dan Kerajinan 38
  32. 32. SITUS SOSIAL DAN BUDAYA : Agama, Anak-anak, Hobi, Keluarga,Komunitas, Lingkungan, dan lain-lain Gambar 3.1.17. Contoh Situs Sosial dan Budaya 39
  33. 33. SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips,Jasa Transportasi, Restoran, Petunjuk Wisata, dan lain-lain Gambar 3.1.18. Contoh Situs Wisata 40
  34. 34. 3.2. DASAR-DASAR PEMILIHAN WARNASeperti telah dijelaskan di awal, pemilihan warna yang tepat sangatmempengaruhi respon pengunjung terhadap situs kita. Pilihlah warnasesuai dengan tema dalam situs tersebut. Sebagai contoh, jika situsberisi informasi tentang wisata pilihlah warna yang modern. Misalnyawarna merah, biru, orange, dan lain sebagainya. Intinya pilihlahwarna yang “eye cacthing” bagi pengguna agar menimbulkan rasaingin tahu tentang informasi penting dalam situs tersebut.Memang, pemilihan warna sebuah situs bergantung pada warna yangdisukai oleh “si pembuat” itu sendiri dan selera pemilih situs. Parapengembang web harus mengikuti kemauan para pemesan, yangnotabene pemilik situs. Pengembang web perlu meminta referensikepada calon pemesan tentang warna yang disukai agar ketikasampai proses pengembangan tidak terjadi perubahan warna yangsangat drastis. Pengembang juga tidak boleh memaksakan diri untukmemilih warna sesuai seleranya.Warna sebuah situs memiliki makna tersendiri, dan hanya pemiliksitus saja yang tahu tentang makna tersebut. Berikut ini terdapatulasan mengenai makna warna yang dapat diterapkan ketikamembangun sebuah situs yang profesional. Warna-warna tersebutmemiliki makna yang positif dan negatif karena warna tersebut sangatmempengaruhi emosional pengunjung untuk menentukan langkahselanjutnya. Warna dapat dikelompokkan menjadi tiga bagian yaitu:warna sejuk, warna hangat, dan warna netral.WARNA-WARNA SEJUK : Biru, Hijau, Ungu, Pirus dan Perak.Warna-warna sejuk cenderung berpengaruh memberikan perasaantenang bagi yang melihatnya. Meskipun digunakan sendiri,warna-warna ini bisa mempunyai rasa dingin atau impersonal,Berikut ini makna dari warna dalam kategori sejuk:Biru - Positif: keheningan, mencintai, kesetiaan, rasa aman, percaya, intelligence, berhubungan dengan ilmu pengetahuan (sciences) - Negatif: kedinginan, ketakutan, kejantanan 41
  35. 35. Hijau - Positif: berhubungan dengan uang, pertumbuhan, kesuburan, kesegaran, (penyembuhan/pengobatan), healing, keteduhan - Negatif: iri hati, kecemburuan, kesalahan, kekacauanUnguUngu adalah kombinasi biru dan merah, oleh sebab itu ditemukanbaik kategori-kategori hangat maupun sejuk - Positif: raja, kaum ningrat, spirituality, kemewahan, ambition - Negatif: misteri, kemasgulanPirus - Positif: rohani, sembuh, perlindungan, canggih (sophisticated) - Negatif: cemburu, kewanitaanPerak - Positif: glamor, tinggi, anggun, halus dan rapi (sleek) - Negatif: pengkhayal, tidak tulusWARNA-WARNA HANGAT : Merah, merah muda, kuning, orange,ungu, dan emas. Warna hangat cenderung mempunyai suatu efekkegairahan bagi yang melihatnya. Oleh karena itu ketika warna inidigunakan sendiri dapat menstimulasi, membangitkan emosikekerasan/kehebatan dan kemarahan.Berikut ini makna dari warna dalam kategori sejuk:Merah - Positif: cinta, energi, kuasa, kekuatan, penderitaan, panas - Negatif: kemarahan, bahaya, peringatan, ketidaksabaranMerah muda - Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka melucu - Negatif: kelemahan, kewanitaan, ketidak dewasaan 42
  36. 36. Kuning - Positif: terang/cerdas, energi, matahari, kreativitas, akal, bahagia - Negatif: penakut, tidak bertanggungjawab, tidak stabilOrange - Positif: keberanian, kepercayaan, kehangatan/keramahan, keakraban, sukses - Negatif: ketidak-tahuan, melempem, keunggulanUnguWarna ungu ditemukan di dalam kedua-duanya warna dingin danhangat - Positif: royalti, kebangsawanan, kerohanian, kemewahan, ambisi - Negatif: kegaiban, kemurunganEmas - positif: kekayaan, kemakmuran, berharga, tradisional - negatif: ketamakan, pemimpiWARNA-WARNA NETRAL : Coklat, berwarna coklat, gading, kelabu,putih dan hitam. Warna netral adalah suatu pemilihan agung untukbergaul dengan suatu palet (lukis) hangat atau dingin. warna-warnanetral sangat baik untuk latar belakang dalam suatu situs.Tambahkan warna hitam untuk menciptakan suatu yang lebih gelap ”dan keteduhan” tentang suatu warna utama.Berikut beberapa makna dari beberapa warna netral:Hitam - Positif: perlindungan, dramatis, serius, bergaya/anggun, formalitas - Negatif: kerahasiaan, kematian, kejahatan/ malapetaka, kegaibanAbu-abu - Positif: keamanan, keandalan, kecerdasan/inteligen, padat, konservatif 43
  37. 37. - Negatif: muram, sedih, konservatifCoklat - Positif: ramah, bumi, keluar rumah, umur panjang, konservatif - Negatif: dogmatis, konservatifTan ( wol halus yang masih putih) - Positif: ketergantungan, fleksibel, keriting, konservatif - Negatif: tumpul, membosankan, konservatifGading - Positif: ketenangan, kenyamanan, kebersihan/kesucian, hangat - Negatif: lemah, tidak stabilPutih - Positif: kebaikan, keadaan tak bersalah, kesucian, segar, gampang, bersih, - Negatif: musim dingin, dingin, jauhSelagi tidak ada kemutlakan “pembenaran” untuk mewarnai sebuahwebsite, Anda perlu mengetahui sasaran audience, danmempertimbangkan respon mereka tentang warna yang digunakan.Faktor mendasar yang perlu dipertimbangkan untuk targetpengguna/pengunjung adalah perbedaan umur/zaman, perbedaantingkatan/kelas, perbedaan jenis kelamin dan keseluruhankecenderungan warna.Perbedaan umur/zaman merupakan faktor pokok yang tidak bolehdiabaikan. Jika yang menjadi target adalah anak remaja (ABG) dananak-anak, maka mereka menyukai warna terang, warna dasar,warna primer merah, biru, kuning dan hijau. Berbeda dengan orangdewasa, yang umurnya lebih tua, mereka akan menyukai warna yanglebih gelap, sama dengan warna dari kelompok warna-warna netral.Perbedaan kelas adalah faktor pokok lain yang memiliki pengaruhdalam memilih warna. Sebuah riset di Amerika Serikat telah 44
  38. 38. menunjukkan bahwa kelas pekerja menyukai warna seperti biru,merah, hijau, dan lain lain. Sedangkan mereka yang lebih terdidikcenderung menyukai yang lebih mengaburkan warna seperti taupe,warna biru langit, celadon, ikan salem, dll.Perbedaan jenis kelamin merupakan salah satu faktor nyata dalammemilih warna. Pria cenderung menyukai warna dingin (coo) sepertihijau dan biru, sedangkan wanita menyukai warna lebih hangat, yaitumerah dan orange. Jika kita memiliki audience (pendengar/pemerhati) keduanya (laki-laki dan perempuan), yang sebaiknyamempertimbangkan pencampuran beberapa warna dari warna cooldan hangat.Dengan mengetahui target audience dan efek yang berbeda dariwarna yang ditimbulkan, kita memperoleh suatu kemampuan lebihbesar untuk menentukan warna apa yang terbaik untuk menarikpengunjung baik pria maupun wanita.Satu hal lagi yang perlu diperhatikan, pengunjung web biasanyamenggunakan monitor berbeda, browsers berbeda, dan sistemoperasi berbeda. Itu hampir mustahil untuk memastikan bahwa warnayang kita buat akan sama pada tiap-tiap komputer seperti halnyadicetak. Jangan hanya terkait dengan perbedaan pada komputeryang berlainan, tetapi bagaimana kita mencoba menjadikanpenggunaan warna menjadi konsisten. Bagaimana kita menciptakansuatu palet warna untuk perusahaan, identitas merek, atau warnaproduk, konsistensi adalah kunci. Gunakanlah warna yang samapada seluruh usaha pemasaran untuk menciptakan keakrabandengan produk atau perusahaan. Konsistensi akan membantumenarik pengunjung. Warna yang ditampilkan di website harus samadengan warna dalam bentuk pulikasi (booklet, flyer, pamflet, danlain-lain yang sejenis).3.3. MENGATUR LAYOUTDengan melihat beberapa perbandingan situs di atas tersebut, kitadapat menentukan tampilan layout (halaman utama) sebuah website.Sebagai pengembang web tentunya sudah bisa membedakan bentukyang cocok untuk yang akan dibuat menurut kategorinya. 45
  39. 39. Ketika merancang tata letak (layout) halaman web bisa dapatmenggunakan beberapa teknik, salah satunya adalah dengan caramembuat sketsa pada kertas gambar menggunakan pensil. Ataudapat juga membuat sketsa menggunakan program pengolah vektorseperti CorelDraw, Adobe Illustrator, maupun Macromedia Freehand.Pada contoh berikut ini, penulis memanfaatkan CorelDraw untukmembuat sketsa layout halaman web. Sebagai bahan praktek untukmembuat website, berikut ini merupakan bentuk sketsa layouthalaman web sebagai panduan untuk membuat navigasi maupun fiturlain yang diperlukan. Gambar 3.2.1. Bentuk Layout Situs Berita dan Media 46
  40. 40. Gambar 3.2.2. Bentuk Layout Situs Bisnis dan Ekonomi Gambar 3.2.3. Bentuk Layout Situs Pribadi 47
  41. 41. Gambar 3.2.4. Bentuk Layout Situs BisnisSetelah membuat beberapa bentuk layout, langkah selanjutnyaadalah mengembangkan sketsa tersebut menjadi sebuah tampilanweb yang inovatif menggunakan beberapa tool yaitu: AdobePhotoshop sebagai desain tampilan, Macromedia sebagai pengaturteks dan menu pop up, dan Macromedia Flash sebagai animasi. 48
  42. 42. BAB 4PROSES PENGEMBANGANPada bagian ini kita akan membahas tentang teknik pengembangansitus sesuai dengan sketsa yang telah dibuat sebelumnya. Prosespengembangan diawali dengan pembuatan layout halamanmenggunakan Adobe Photoshop, kemudian diolah dalamMacromedia Dreamweaver untuk menambahkan isi (content) dansedikit tambahan menu pop up (pull down) menggunakan Javascript.Untuk studi kasus, pertama kali kita akan mencoba membuat situspribadi. Dalam hal pemilihan warna, terserah para pembaca. Sayasebagai penulis hanya memberikan teknik membuat bentuk layouthalaman website profesional.4.1. SITUS PRIBADI Gambar 4.1.1. Bentuk Layout yang akan disempurnakan 49
  43. 43. Dengan melihat bentuk layout tersebut di atas, akan lebih mudahproses pengembangannya dalam Adobe Photoshop. Sebelummembuat dokumen baru, kita harus mengetahui bahwa tidak semuaresolusi monitor pengguna sama dengan yang kita miliki. Sebagaicontoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixelsedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel.Apabila Anda membuat ukuran dokumen 900 x 600 pixel makamenimbulkan ketidaknyamanan pengunjung karena harus seringmenggulung halaman website akibat ukuran dokumen terlalu lebar.Sebaiknya lebar tidak melebihi 800 pixel.4.1.1. Membuat Dokumen BaruDiasumsikan Anda menggunakan Adobe Photoshop CS maupunCS2. Jalankan program Adobe Photoshop kemudian ikuti beberapapetunjuk berikut ini.1. Buatlah dokumen baru dengan ukuran 800 x 600 pixel. Mode warna RGB, resolusinya 72 pixel, mode warna RGB 8 bit dan latar belakang white. Beri nama dokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik OK. Gambar 4.1.1.1. Kotak dialog dokumen baru2. Untuk mempermudah proses pembuatan interface situs, ada baiknya memasukkan gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat menduplikasi (copy dan paste) ke dalam dokumen tersebut. 50
  44. 44. Gambar 4.1.1.2. Sketsa yang telah dibuka dengan Photoshop3. Klik Set Foreground color untuk memilih warna sebagai latar belakang. Gambar 4.1.1.3. Set Foreground color4. Setelah kotak dialog Color Picker muncul, masukkan kode warna # 0066cc pada kotak kode. Gambar 4.1.1.4. Kotak dialog Color Picker 51
  45. 45. 5. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada layer Background. Gambar 4.1.1.5. Layer Background yang telah diberi warna6. Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marquee tool dan buatlah seleksi seperti nampak pada gambar berikut. Gambar 4.1.1.6. Membuat seleksi berbentuk kotak.7. Tekan huruf D pada keyboard untuk mengubah warna default Foreground dan Background (Hitam dan Putih) kemudian tekan huruf X untuk membalik warna tersebut. Tekan tombol 52
  46. 46. Alt+Backspace secara bersama-sama untuk memberi warna putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi. Gambar 4.1.1.7. Memberi warna putih sebagai tempat navigasi.4.1.2. Membuat InterfaceBentuk interface yang bagus dapat membangkitkan “gairah” parapengguna untuk tetap menikmati berbagai berita dan informasi yangdisajikan. Keunikan bentuk interface memiliki nilai tersendiri karenatidak semua orang memiliki kemampuan untuk menciptakan bentuktersebut. Berikut ini akan membahas salah bentuk interface yangmodern.1. Pertama kali, aktifkan tool Pen. Gambar 4.1.2.1. Pen tool.2. Pada menu option di bagian atas, pilih Shape Layers. 53
  47. 47. Gambar 4.1.2.2. Menu Option Pen tool.3. Klik Set Foreground Color untuk memilih warna. Gambar 4.1.2.3. Kotak dialog Color Picker untuk memilih warna.4. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ff5d6c pada kotak yang disediakan. Gambar 4.1.2.4. Kotak dialog Color Picker5. Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar 4.1.2.5.6. Aktifkan Convert Point tool untuk membuat efek lengkung. (Lihat gambar 4.1.2.6.). 54
  48. 48. Gambar 4.1.2.5. Bentuk Shape yang diinginkan.7. Aktifkan Convert Point tool untuk membuat efek lengkung. Gambar 4.1.2.6. Mengaktifkan Convert Point tool8. Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambil menggeser salah satu convert point ke kanan secara perlahan agar membentuk lengkungan yang diinginkan. Gambar 4.1.2.6. Membuat bentuk lengkung9. Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeret pointer ke kanan secara perlahan agar membentuk objek yang diinginkan. Gambar 4.1.2.7.Membuat bentuk lengkung 55
  49. 49. 10. Jika telah selesai maka akan terbentuk sebuah asesoris modern seperti nampak pada gambar berikut. Gambar 4.1.2.8. Bentuk asesoris modern11. Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan tahan sambil menggerakkan ke ikon Create New Layer. Gambar 4.1.2.9. Membuat duplikat layer12. Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan nama Shape 1 copy. (Lihat gambar 4.1.2.10.).13. Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit pada option bar 56
  50. 50. atau dapat juga menekan tombol Enter. (Lihat gambar 4.1.2.11.). Gambar 4.1.2.10. Duplikat layer telah muncul Gambar 4.1.2.11. Mentransformasikan objek14. Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider pada menjadi 50%. Gambar 4.1.2.12. Mengurangi tingkat kepekatan (opacity) 57
  51. 51. 15. Aktifkan Direct Selection tool. Gambar 4.1.2.13. Mengaktifkan Direct Selection tol16. Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama. Gambar 4.1.2.14. Membuat seleksi menggunakan Direct Selection tool17. Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut. Gambar 4.1.2.15. Memindahkan posisi segmen18. Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan. Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create New Layer. Kemudian modifikasi bentuknya 58
  52. 52. menggunakan Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern. Ubahlah opacity-nya menjadi 20%. Gambar 4.1.2.16. Bentuk shape sebagai latar belakang19. Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar berikut. Gambar 4.1.2.17. Membuat Shape lain20. Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung. Gambar 4.1.2.18. Mengatur lengkungan dengan Convert Point 59
  53. 53. 21. Sehingga akan didapatkan sebuah bentuk interface yang modern. Gambar 4.1.2.19 Bentuk sederhana layout Situs Pribadi22. Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer. Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert Point tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut. Gambar 4.1.2.20. Bentuk layout setelah dimodifikasi 60
  54. 54. 23. Terakhir, aktifkan Rectangle tool . Gambar 4.1.2.21. Memilih Rectangle tool24. Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape tersebut dengan kode warna #ea1c30. Gambar 4.1.2.22. Membuat shape baru4.1.3. Membuat TombolSetelah sebelumnya membuat bentuk interface untuk halaman situs,langkah selanjutnya adalah membuat tombol yang eksklusif.1. Pertama kali, aktifkan Rectangle Rounded tool. Gambar 4.1.3.1 Memilih Rounded Rectangle tool 61
  55. 55. 2. Buatlah sebuah tombol berbentuk kotak. Gambar 4.1.3.2. Bentuk shape baru3. Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen di bagian bawah. Gambar 4.1.3.3. Memilih beberapa segmen4. Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan. Gambar 4.1.3.4. Memindahkan segmen5. Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian bawah Palet Layers. (Lihat Gambar 4.1.3.5.).6. Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar 4.1.3.6. Setelah selesai klik OK. 62
  56. 56. Gambar 4.1.3.5. Memilih style Drop Shadow Gambar 4.1.3.6. Setting untuk efek Drop Shadow7. Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara menggesernya ke ikon Create New Layer. 63
  57. 57. Gambar 4.1.3.7. Bentuk tombol yang sudah jadi8. 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. Gambar 4.1.3.8. Tampilan layout halaman muka sudah terbentuk4.1.4. Menambahkan Efek KhususInterface tersebut mungkin masih sangat sederhana, kita perlumemberi efek khusus agar terlihat menarik. Ada beberapa teknikketika membuat efek khusus pada tombol (button) yaitu memberiwarna putih agar kelihatan seperti “button gel” atau hanyamemberikan efek shadow saja. 64
  58. 58. Kita akan mencoba memberi efek khusus pada bentuk interfaceterlebih dulu.1. Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambar berikut. Gambar 4.1.4.1. Mengaktifkan salah satu shape2. Menuju ke palet Path, ubahlah path tersebut menjadi seleksi dengan cara mengklik tombol ikon Load path as selection di bagian bawah palet Path. Gambar 4.1.4.2. Mengubah path menjadi seleksi3. Buatlah layer baru dengan nama “Light”. Kemudian aktifkan Brush tool, pilihlah ukurannya 9 pixel. Pada option bar, kurangi opacity menjadi sekitar 6% saja. Tekan huruf “D” lalu huruf “X”. Gambar 4.1.4.3. Menu Option bar4. Goreskan pada bagian yang lengkung secara perlahan-lahan sehingga akan terbentuk warna seperti nampak pada gambar berikut. 65
  59. 59. Gambar 4.1.4.4. Membuat efek khusus5. 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. Gambar 4.1.4.5. Hasil akhir penambahan efek4.1.5. Membuat HeadingUmumnya judul utama sebuah situs pribadi maupun perusahaanberada di bagian atas. Nama Domain dapat dijadikan sebagai judulheading dengan tujuan untuk lebih mengingatkan kepadapengunjung tentang alamat situs. Sebagai contoh, nama domainAnda : cantikclara.com. Ambillah nama domain tersebut sebagai judulheading. 66
  60. 60. 1. Untuk membuat sebuah heading, pertama kali aktifkan Horizontal Type tool. Gambar 4.1.5.1. Mengaktifkan Horizontal Type Tool2. Kemudian, klik ikon Foreground Color untuk menentukan warna teks. Setelah kotak dialog Color Picker muncul, masukkan kode warna # ea1c30. Gambar 4.1.5.2. Icon Foreground and Background3. Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidak berkait (Sans Sherif). Gambar 4.1.5.3. Membuat judul heading4. Buatlah layer baru dengan nama “Color-head”, kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool. Gambar 4.1.5.4. Membuat seleksi dengan Rectangle Marquee tool 67
  61. 61. 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. Gambar 4.1.5.5. Membuat efek gradasi4.1.6. Menambahkan Image/GambarGambar yang ditampilkan dalam sebuah situs dapat berupa fotomaupun clipart. Pada umumnya, ilustrasi yang digunakan dalambentuk fotografi karena memiliki beberapa kelebihan diantaranya,warna realistis, bentuknya sesuai dengan objek sesungguhnya, lebihalami, dan masih banyak lagi kelebihannya.Oleh karena yang akan kita buat adalah situs pribadi, tidak adasalahnya menempatkan gambar (foto) pribadi seseorang dalamhalaman utama. Baiklah, langsung saja kita akan mencobamelakukannya.1. Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs (lihat gambar 4.1.6.1).2. Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah dokumen (lihat gambar 4.1.6.2).3. Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layer tersebut ke dokumen Situs Pribadi (lihat gambar 4.1.6.3).4. Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombol Ctrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan (lihat gambar 4.1.6.4). 68
  62. 62. Gambar 4.1.6.1. Gambar sebagai ilustrasi utama Gambar 4.1.6.2. Mengatur jendela dokumenGambar 4.1.6.3. Memasukkan gambar dengan cara click and drag 69
  63. 63. Gambar 4.1.6.4. Mengubah ukuran gambar5. Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs tersebut. Gambar 4.1.6.5. Menambahkan teks sebagai identitas situs4.1.7. Menambahkan Teks untuk MenuTombol-tombol yang telah dibuat tersebut belum dapat berfungsisebagai menu karena tidak ada teksnya. Nah, pada bagian berikut ini 70
  64. 64. kita akan mencoba menambahkan teks pada beberapa tombol yangtelah dibuat agar dapat berfungsi sebagai menu.Menu tersebut dapat berupa mouse over maupun menu pull down.Jadi sebaiknya Anda memikirkan sejak awal sebelum memutuskanuntuk memilih bentuk yang diinginkan. Apabila Anda mengikutipetunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menupull down.1. Langkah yang pertama, aktifkan Horizontal Type tool kemudian buatlah area teks dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke bagian lain membentuk kotak teks. Gambar 4.1.7.1. Membuat area teks2. Buatlah teks sebagai menu (misal: Home, Profile, Gallery, News, dan Contact). Anda bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad Pro 10 point. Gunakan warna putih untuk teks tersebut. Gambar 4.1.7.2. Membuat teks sebagai menu3. Lakukan hal yang sama untuk membuat menu di bagian lain. Gambar 4.1.7.3. Menambahkan teks untuk menu di bagian lain 71
  65. 65. 4.1.8. Memotong Gambar (Slice)Adobe Photoshop memang dapat diandalkan dalam segala hal,terbukti beberapa bidang sangat memerlukan software yang satu inidiantaranya untuk keperluan fotografi, percetakan, animasi,periklanan, maupun untuk membuat website.Salah satu keunggulan Adobe Photoshop dalam membuat sebuahhalaman web adalah adanya teknik Slice. Dengan fasilitas tersebut,gambar akan secara otomatis terpotong sesuai dengan garis Slice.Anda tidak perlu memotong secara manual kemudian menyimpanpotongan gambar tersebut satu per satu.Hal yang perlu diperhatikan ketika memotong gambar adalahmembaginya sesuai keperluan saja. Artinya, jika gambar tersebutakan digunakan sebagai tombol menu maka sebaiknya dipotongsesuai masing-masing judul menu tersebut. Misal menu Home harusterpisah dari menu Profile. Jangan memotong gambar yang memilikidua menu karena akan mengalami masalah ketika mengeditnyadalam Macromedia Dreamweaver.1. Sebelum memotong gambar menggunakan Slice tool, kita memerlukan beberapa garis bantu untuk menandai bagian mana saja yang akan dipotong. Letakkan pointer pada ruler guide di sebelah kiri tangan Anda, klik dan tahan sambil menyeret ke kanan. Gambar 4.1.8.1. Cara membuat garis bantu 72
  66. 66. 2. Buatlah beberapa garis bantu untuk menandai bagian yang akan dipotong. Apabila mengikuti pentunjuk dalam buku ini, kurang lebih seperti gambar berikut. Gambar 4.1.8.2. Beberapa garis bantu vertical yang telah dibuat3. Sekarang buatlah garis bantu secara horisontal dengan cara mengambilnya dari ruler guide di atas (horizontal ruler), sehingga hasilnya akan nampak seperti gambar berikut ini. Gambar 4.1.8.3 Membuat garis Bantu horisontal4. Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong gambar tersebut menggunakan Slice tool. 73
  67. 67. 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. Gambar 4.1.8.4. Kode penggunaan Slice tool5. Letakkan pointer di sudut kiri atas. Gambar 4.1.8.5. Meletakkan pointer Slice tool di atas6. Kemudian klik dan tahan sambil menyeret ke sebelah kanan sesuai luas yang diinginkan. Gambar 4.1.8.6. Posisi akhir pointer Slice tool7. Setelah memotong gambar tersebut secara otomatis akan muncul angka 2. Gambar 4.1.8.7. Penomoran image secara otomatis 74
  68. 68. 8. Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk memotong gambar. Gambar 4.1.8.8. Memotong dengan Slice tool9. Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4. Hal ini dikarenakan Adobe Photoshop secara otomatis memotong pada bagian lain agar bentuknya tetap utuh. Anda dapat memotong gambar pada area yang telah ditandai angka tersebut. Gambar 4.1.8.9. Memotong image sesuai luas area yang telah ditentukan10. Langkah selanjutnya adalah memotong tombol-tombol yang ada secara terpisah. Letakkan pointer pada angka 3, klik dan tahan sambil menyeret ke bagian lain yang telah ditandai dengan garis bantu. Gambar 4.1.8.10 Posisi awal dan akhir pointer Slice tool11. Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan terbentuk seperti gambar berikut. Gambar 4.1.8.11. Area yang sudah ditandai dengan Slice tool 75
  69. 69. 12. Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu dipisah/dipotong. Gambar 4.1.8.12. Mengabaikan bagian yang tidak dipotong13. Perlu diperhatikan, ketika memotong pada bagian lain usahakan irisannya tepat pada irisan sebelumnya agar tidak muncul irisan lain yang tidak diinginkan. Jika hal itu terjadi, hasilnya tidak akan maksimal dan tidak sesuai seperti yang kita harapkan. Anda dapat memotong gambar yang terlalu besar menjadi beberapa bagian agar proses koneksi lebih cepat ketika menampilkan gambar. Gambar 4.1.8.13. Irisan harus tepat pada bagian sebelumnya14. Langkah selanjutnya, irislah tombol-tombol pada bagian kanan. Gambar 4.1.8.14.15. Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol. Gambar 4.1.8.15. Beberapa bagian yang telah dipotong 76
  70. 70. 16. Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian saja seperti nampak pada gambar berikut. Gambar 4.1.8.16. Memotong bagian sebagai latar belakang17. Begitu pula pada bagian lain, irislah gambar sesuai keperluan. Gambar 4.1.8.17. Memotong pada bagian lain18. Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti gambar berikut. Gambar 4.1.8.18. Hasil akhir pemotongan dengan Slice tool 77
  71. 71. 19. Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadi web (Save for web). Pilih menu File > Save for Web. Gambar 4.1.8.19. Memilih menu Save for Web20. Maka akan muncul kotak dialog Save for Web. Klik tombol Save. Gambar 4.1.8.20. Kotak dialog Save for web 78
  72. 72. 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. Gambar 4.1.8.21. Kotak dialog Save Optimized As22. Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder images yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool. Gambar 4.1.8.22. Beberapa potongan gambar terkumpul jadi satu folder 79
  73. 73. 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.4.2. SITUS BISNIS Gambar 4.2.1. Bentuk Layout yang akan disempurnakanSketsa seperti gambar di atas hanyalah salah satu contoh bentuksitus untuk bisnis, Anda dapat membuat yang lebih bagus lagi.Tampilan tersebut hanyalah sekadar contoh saja untukmempermudah dalam mengembangkan web. Pembahasan dalambuku ini hanyalah sekadar memandu teknik pembuatannya, masalahdesain dan penambahan script dapat Anda kembangkan sendiri. 80
  74. 74. 4.2.1. Membuat Dokumen BaruPada pembahasan sebelumnya kita telah membuat sebuah situspribadi dengan ukuran 800x600 pixel. Kini kita akan mencobamembuat sebuah situs Bisnis dengan ukuran 780x890 pixel.1. Pertama kali buatlah dokumen baru dengan cara memilih menu File > New atau dapat pula menekan tombol Ctrl+N. Gambar 4.2.1.1. Membuat dokumen baru2. Masukkan gambar sketsa dari CorelDraw ke dalam dokumen Adobe Photoshop dengan cara meng-copy dan paste. Gambar 4.2.1.2. Memasukkan sketsa ke dokumen Photoshop 81
  75. 75. 4.2.2. Membuat InterfaceBentuk interface sangat mempengaruhi “feed back” penggunaterhadap situs kita. Apabila bentuk interface menarik dan ditambahdengan artikel yang menarik, maka pengunjung akan merasa betahmenikmati artikel yang disuguhkan. Bentuk interface situs komersialberbeda dengan situs pribadi. Umumnya, situs komersial/bisnismengedepankan jasa ataupun produk yang dimiliki.Pada bagian berikut ini, kita akan mencoba membuat bentuk interfacesitus bisnis/komersial dengan cara mencontoh dari sketsa yang telahdibuat.1. Pertama kali tentukan warna yang akan digunakan sebagai latar belakang (background) situs kita dengan cara mengklik ikon Set Foreground and Background. Diasumsikan, Anda memilih warna #02bfe5. Gambar 4.2.2.1. Icon Foreground and Background2. Buatlah layer baru dengan cara mengklik ikon New Layer pada bagian bawah palet Layers, kemudian gantilah namanya menjadi warna dasar. Gambar 4.2.2.2. Membuat layer baru3. Tekan Alt+Backspace untuk mengisi warna tersebut.4. Agar sketsa tidak menutupi rancangan website yang akan dibuat, sebaiknya tingkat kepekatan (opacity) Layer 1 (gambar sketsa) dikurangi hingga 25% saja. 82
  76. 76. 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. Gambar 4.2.2.3. Membuat seleksi dengan Rectangle Marquee tol6. Aturlah warna Foreground #eeeeee dan Background #acacac, kemudian aktifkan Gradient tool lalu pilih tipe Linier. Gambar 4.2.2.4. Mengaktifkan Gradient tool7. Letakkan pointer di atas, lalu seret ke arah bawah secara tegak lurus agar menghasilkan warna gradasi yang diinginkan. Gambar 4.2.2.5. Posisi awal dan akhir pointer Gradient tool 83
  77. 77. 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. Gambar 4.2.2.6. Membuat duplikat layer9. Pindahkan layer hasil duplikasi ke bawah, kemudian perkecil ukurannya dengan cara menekan tombol Ctrl+T. Seret handle bagian bawah ke atas. Setelah selesai tekan Enter. Gambar 4.2.2.7. Mengubah ukuran objek10. Buatlah layer baru dan gantilah namanya menjadi navigasi kiri, kemudian aktifkan Rectangle Marquee tool dan buatlah seleksi di bagian kiri. Tentukan warna Foreground #246494 dan tekan Alt+Backspace untuk mengisi seleksi tersebut. Setelah selesai tekan Ctr+D untuk membuang seleksi (Gambar 4.2.2.8.)11. Buatlah duplikasi navigasi atas sekali lagi, kemudian letakkan pada bagian bawah seperti nampak pada Gambar 4.2.2.9. 84
  78. 78. Gambar 4.2.2.8 Membuat interface untuk navigasi kiri Gambar 4.2.2.9.. Membuat navigasi bawah12. Buatlah layer baru dengan nama badan teks kemudian buatlah seleksi menggunakan Rectangle Marquee tool. Gambar 4.2.2.10. Membuat seleksi 85
  79. 79. 13. Aturlah warna Foreground #cccccc dan Background #ffffff. Selanjutnya aktifkan Gradient tool, pilih tipe Linier. Gambar 4.2.2.11.Mengaktifkan Gradient tool14. Buatlah warna gradasi pada seleksi tersebut dengan cara meletakkan pointer di bagian atas kemudian klik dan seret pointer ke bawah. Setelah selesai tekan Ctrl+D. Gambar 4.2.2.12. Membuat warna gradasi15. Langkah selanjutnya adalah membuat papan navigasi di tengah-tengah badan teks. Pertama kali buatlah layer baru dengan nama navigasi tengah, kemudian buatlah seleksi menggunakan Rectangle Marquee tool. Aturlah warna Foreground # bcbaba dan Background #dad5d5.16. Aktifkan Gradient tool, pilih tipe Linier. Buatlah efek gradasi dari atas ke bawah. Setelah selesai tekan Ctrl+D untuk menghilangkan seleksi. 86
  80. 80. Gambar 4.2.2.13. Membuat warna gradasi17. Sekarang kita akan mencoba membuat asesoris untuk navigasi kiri. Pertama kali, aktifkan Pen tool kemudian pilih Shape Layer pada option bar di bagian atas. Gambar 4.2.2.14. Mengaktifkan Shape Layer18. Aturlah Foreground dengan warna #02bfe5. Selanjutnya klik pointer di sebelah kiri kemudian klik di tempat lain sehingga membentuk sebuah Shape tertutup seperti nampak pada gambar berikut. 87
  81. 81. Gambar 4.2.2.15. Membuat bentuk Shape untuk asesoris19. Ubahlah bentuknya menggunakan Convert Point tool, sehingga akan berbentuk seperti gambar berikut. Gambar 4.2.2.16. Mengaktifkan Convert Point tool20. Buatlah bentuk lain untuk di bagian bawah. Gambar 4.2.2.17. Bentuk asesoris di bagian lain 88
  82. 82. 4.2.3. Menambahkan Efek pada InterfaceEfek yang ditambahkan pada sebuah objek sangat mempengaruhisudut pandang dan efek natural yang ditimbulkan. Sebagai contoh,objek yang diberi efek shadow akan lebih Nampak realistisdibandingkan yang tidak diberi efek sama sekali.Pada bagian ini kita akan mencoba membahas tentang penambahanefek pada interface yang baru saja dibuat.1. Aktifkan layer Navigasi Atas Gambar 4.2.3.1. Mengaktifkan layer navigasi atas2. Pilih menu Layer Style di bagian bawah palet Layers (seperti huruf f). Gambar 4.2.3.2. Menu Layer Style 89
  83. 83. 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. Gambar 4.2.3.3. Kotak dialog Layer Style4. Anda bisa menduplikasi efek layer style ke Layer yang lain. Aktifkan layer yang sudah memiliki efek (misal: navigasi atas), klik tombol mouse kanan kemudian pilih Copy Layer Style. Gambar 4.2.3.4. Memilih menu Copy Layer Style 90
  84. 84. 5. Aktifkan layer yang akan diberi efek (misal: navigasi atas copy), klik tombol mouse kanan kemudian pilih Paste Layer Style. Gambar 4.2.3.5. Memilih menu Paste Layer Style6. Beri efek layer style ke seluruh navigasi yang ada sehingga akan nampak seperti gambar berikut. Gambar 4.2.3.6. Hasil penambahan efek dengan layer style 91
  85. 85. 7. Sekarang aktifkan layer Shape 2, kemudian klik tombol mouse kanan. Pilih Blending Options. Gambar 4.2.3.7. Menambahkan efek blending mode8. Setelah muncul kotak dialog Layer Style, pilih Drop Shadow kemudian aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Setelah selesai klik OK. Gambar 4.2.3.8. Kotak dialog Layer Style 92
  86. 86. 4.2.4. Membuat TombolSetelah selesai membuat interface dengan penambahan beberapaefek, langkah selanjutnya adalah membuat tombol (button) padanavigasi yang telah dibuat sebelumnya.Tentukan terlebih dulu tombol apa saja yang akan ditampilkan dihalaman muka. Anda bisa melihat beberapa situs di Internet sebagaireferensi. Ada beberapa menu yang umumny ditampilkan di halamanmuka yaitu: Home, About, Us, Support, Contact Us, dan Service.Apabila Anda mengikuti petunjuk buku ini, kita akan mencobamembuat tombol menu tersebut.1. Pertama kali, buatlah garis bantu menggunakan Vertical Ruler Guide dengan cara mengklik garis bantu (Ruler) kemudian seret ke tempat yang diinginkan. Buatlah menjadi enam bagian sebagai tempat tombol menu. Gambar 4.2.4.1. Membuat garis Bantu secara vertikal2. Sekarang aktifkan Line tool untuk membuat garis tipis. Gambar 4.2.4.2. Mengaktifkan Line tool 93
  87. 87. 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. Gambar 4.2.4.3. Membuat garis tipis4. Aktifkan Layer Style, pada Blending Options pilih Drop Shadow kemudian aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Setelah selesai klik OK. Gambar 4.2.4.4. Kotak dialog Layer Style5. Buatlah beberapa duplikasi garis tersebut dan pindahkan sesuai posisi garis bantu sehingga akan terbentuk tombol seperti nampak pada gambar berikut. Gambar 4.2.4.5. Beberapa duplikasi garis tipis 94
  88. 88. 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. Gambar 4.2.4.6. Mengaktifkan Horizontal Type tool7. Buatlah duplikasi teks Home tersebut kemudian gantilah teksnya sesuai dengan menu yang akan dibuat. Gambar 4.2.4.7. Teks untuk tombol sudah terbentuk8. Buat pula teks menu pada bagian lain dengan cara menduplikasi layer teks Home. Gambar 4.2.4.7. Teks untuk keterangan produk 95
  89. 89. 4.2.5. Membuat HeadingSetiap situs, baik yang bersifat komersial maupun sosial pastimemiliki ciri khas tersendiri. Profil dan jasa sebuah perusahaanmisalnya, akan teraktualisasi melalui gambar yang ada di situs danletaknya di bagian atas yang disebut dengan heading.Sebuah image dapat pula dijadikan “image branding” suatuperusahaan, maka kita harus benar-benar membuat gambar yangdijadikan heading memiliki kualitas yang sempurna.Gambar yang dijadikan sebagai heading juga harus sesuai denganprofil perusahaan itu sendiri. Sebagai contoh, perusahaan elektronikakan sangat sangat janggal situsnya bila gambarnya didominasi olehbunga atau sebaliknya.Pada bagian ini kita akan mencoba membuat sebuah image yangberfungsi sebagai heading. Apabila Anda mengikuti petunjuk buku ini,silakan gunakan beberapa gambar yang berhubungan dengancomputer. Misalnya: notebook, mouse, keyboard, printer, kartumemori, monitor, dan lain-lain.1. Pertama kali, bukalah beberapa gambar yang akan dijadikan sebagai heading. Gambar 4.2.5.1. Beberapa gambar yang akan digabungkan 96
  90. 90. 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. Gambar 4.2.5.2. Memasukkan sebuah gambar ke dokumen3. Apabila ukurannya terlalu besar, perkecil dengan cara menekan Ctrl+T, kemudian seret salah satu handle. Setelah selesai tekan Enter atau klik tombol Commit yang berada di Option bar. Gambar 4.2.5.3. Mengubah ukuran gambar4. Lakukan dengan hal yang sama untuk gambar lain. Apabila semua gambar telah berada pada dokumen website, gabungkan gambar-gambar tersebut dengan teknik montage. 97
  91. 91. Gambar 4.2.5.4. Tiga buah gambar telah dimasukkan ke dokumen5. Sekarang aktifkan Eraser tool, dan aturlah beberapa spesifikasi pada Option bar. Gambar 4.2.5.5. Pengaturan untuk Brush tool pada Option bar6. Aktifkan salah satu layer gambar kemudian klik ikon Add Layer Mask di bagian bawah palet Layers. Gambar 4.2.5.6. Membuat Layer Mask7. Arsirlah secara perlahan-lahan pada bagian tepi setiap gambar menggunakan Eraser tool seperti nampak pada gambar berikut. 98
  92. 92. Gambar 4.2.5.7. Hasil perpaduan gambar dengan teknik montage8. 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. Gambar 4.2.5.8. Menggabungkan beberapa layer9. Anda bisa juga menambahkan efek lain pada heading sehingga akan nampak seperti gambar berikut. Gambar 4.2.5.9. Hasil akhir gambar sebagai heading 99
  93. 93. 4.2.6. Teknik SliceSetelah terbentuk sebuah halaman web yang siap ditampilkan,langkah selanjutnya adalah memotong (slice) dokumen tersebut agardapat diedit dengan Macromedia Dreamweaver maupun softwareyang sejenis.Anda tidak dapat menyimpan begitu saja website tersebut dalamsebuah image. Anda harus menyimpan menjadi beberapa gambaragar dapat memasukkan teks pada saat diedit menggunakanMacromedia Dreamweaver. Sedangkan untuk menyimpan menjadibeberapa bagian, Adobe Photoshop menyediakan Slice tool untukmemotong gambar sesuai keinginan.Pada bagian ini, kita akan mencoba membahas tentang teknikmemotong dokumen menjadi halaman website yang siap diedit.1. Buatlah garis bantu untuk membagi gambar tersebut dengan cara mengklik dan menyeret Ruler dari tepi kiri dan atas.Gambar 4.2.6.1. Membuat garis Bantu secara vertical dan horisontal 100
  94. 94. 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. Gambar 4.2.6.2. Gambar siap dipotong3. Kemudian potonglah pada gambar yang berisi tombol menu Home, About Us, Service dan seterusnya. Gambar 4.2.6.3. Memotong bagian atas untuk membuat top menu4. Jangan lupa, pada bagian menu sebelah kiri juga di-Slice sesuai luas tombol yang ada. Gambar 4.2.6.4. Membuat tombol untuk menu kiri 101
  95. 95. 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. Gambar 4.2.6.5. Menyimpan dalam bentuk web6. Setelah muncul kotak dialog Save for Web, aturlah beberapa spesifikasi. Gambar 4.2.6.6. Pengaturan untuk menyimpan dalam format web7. Klik tombol Save, kemudian akan muncul kotak dialog untuk menentukan nama file, nama folder, tipe penyimpanan, setting, dan slice. Aturlah spesifikasi seperti nampak pada gambar berikut. 102
  96. 96. Gambar 4.2.6.7. Spesifikasi untuk nama file dan ekstensi8. Setelah tersimpan, secara otomatis seluruh gambar (image) akan tersimpan dalam folder images.Gambar 4.2.6.8. Beberapa gambar hasil pemotongan dengan Slice toolSedangkan untuk mengedit file index.html, kita dapat memanfaatkanMacromedia Dreamweaver. Dengan software tersebut, kita dapatmemasukkan beberapa teks maupun animasi. Teknik mengeditmelalui Macromedia Dreamweaver akan dibahas pada babselanjutnya. 103
  97. 97. BAB 5PROSES EDITINGAda sebagian web designer dalam membuat situs professional tidakmemanfaatkan Adobe Photoshop dalam merancang web, padahaldengan software tersebut kita akan lebih mudah dan lebih praktisdibandingkan harus membuat kode html.Ketika dokumen Adobe Photoshop tersimpan dalam bentuk webmaka secara otomatis akan membuat tag html sendiri sehingga tidakperlu bersusah payah mengetik kode html. Anda dapat membuktikansendiri seperti nampak pada gambar berikut.5.1. EDITING AWALSitus yang telah dibuat, tidak secara otomatis dapat diisi dengankomponen (baik teks maupun grafik/gambar). Hal ini dikarenakankode html masih dalam bentuk gambar <img src> bukan latarbelakang <background>. Apabila kode html masih dalam statusobjek gambar maka Anda tidak dapat memasukkan teks maupungrafik. 104
  98. 98. 5.1.1. Mengubah Objek menjadi BackgroundTidak semua gambar (image) yang pada web yang telah kita buatdiganti. Jika image tersebut berfungsi sebagai tombol, maka Andadapat menambahkan menu pull down agar tampilan website lebihmenarik. Anda juga dapat membuat tombol dalam bentuk mouse over,dan lain sebagainya.Pada bagian ini, kita akan mencoba membahas tentang teknikpenggantian objek gambar menjadi latar belakang (backgrdound)agar kita dapat memasukkan beberapa komponen di dalamnya (teksmaupun grafik).1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.Gambar 5.1.1.1. Membuka dokumen di Macromedia Dreamweaver2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product. 105
  99. 99. Gambar 5.1.1.2. Memilih objek yang akan dihapus3. 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. Gambar 5.1.1.3. Objek telah terhapus 106
  100. 100. 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. Gambar 5.1.1.3. Menentukan file gambar sebagai background5. Ketikkan images/index_26.gif pada kolom Bg. Gambar 5.1.1.4. Memasukkan nama file untuk background6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar. 107
  101. 101. 5.1.2. Memasukkan ObjekObjek yang dimaksud dapat berupa animasi, gambar, maupun teks.Dalam Macromedia Dreamweaver proses memasukkan objek sangatmudah karena sudah disediakan tool yang sangat lengkap. Andatinggal memilih objek apa yang akan dimasukkan.Berikut ini akan membahas masalah teknik memasukkan objekberupa teks.1. Letakkan kursor pada tempat yang akan ditambahkan teks. Gambar 5.1.2.1 Menempatkan kursor pada area teks2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Gambar 5.1.2.2. Panel Properties3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut. 108
  102. 102. Gambar 5.1.2.3. Memasukkan teks pada dokumen4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image. Gambar 5.1.2.4. Memilih menu Insert5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut. Gambar 5.1.2.5. Menentukan file sumber 109
  103. 103. 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. Gambar 5.1.2.5. Mengklik objek gambar7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align. Gambar 5.1.2.6. Mengatur alignment untuk objek gambar 110
  104. 104. 5.2. MEMBUAT LINK DAN NAVIGASIMenu yang mudah digunakan (user friendly) dapat membantupengguna ketika mencari informasi yang dibutuhkan. Sebaiknyamenggunakan tombol menu yang umum, seperti: Home, Product,Service, dan Contact Us.Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, danJumping Menu secara mudah. Anda tidak bersusah payahmenuliskan script yang panjang dalam bahasa Javascript karenatelah disediakan tool yang sangat mudah dan fleksibel.5.2.1. Membuat Pop-up MenuKeunggulan software Macromedia Dreamweaver dibandingkandengan aplikasi lain yang sejenis adalah adanya tool untuk membuatmenu pop-up yang dibuat dengan bahasa Java. Bagi mereka yangmasih awan dengan bahasa Java, tidak perlu bingung karenadisediakan panel Behavior untuk mempermudah dalam pembuatanmenu pop-up.Sebelum membuat pop-up menu terlebih dulu harus menyiapkannama file sebagai link. Sebagai contoh: ketika user memilih menu PCmaka yang akan muncul adalah pilihan nama computer seperti Acer,HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satuopsi (missal: Acer) maka akan terhubung ke file tersebut.Dengan demikian, Anda harus membuat beberapa file dengan bentukinterface yang sama seperti halaman utama, yaitu menyimpandengan nama lain (contoh: Save As > acer.html). Diasumsikan, Andatelah memiliki beberapa file sebagai link yang dimaksud.1. Pertama kali, klik menu PC. Gambar 5.2.1.1. Mengaktifkan salah satu objek gambar 111
  105. 105. 2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors. Gambar 5.2.1.2. Mengaktifkan panel Behaviors3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu Gambar 5.2.1.3. Membuka menu Behaviors4. Selanjutnya pilih Show Pop up Menu. Gambar 5.2.1.4. Mengaktifkan menu Show Pop-up Menu5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong. 112
  106. 106. Gambar 5.2.1.5. Kotak dialog Show Pop-up Menu6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer). Gambar 5.2.1.6. Memasukkan judul untuk menu7. Kemudian masukkan alamat URL pada kolom Link. Gambar 5.2.1.7. Menentukan alamat Link8. Selanjutnya pada kolom Target, pilih _parent. Gambar 5.2.1.8. Menentukan target9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6. 113
  107. 107. Gambar 5.2.1.9. Membuat beberapa menu baru10. 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. Gambar 5.2.1.10. Mengatur spesifikasi untuk teks menu11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu. Gambar 5.2.1.11. Mengatur spesifikasi kotak menu 114
  108. 108. 12. Klik Tab Position untuk menentukan posisi pop up menu. Gambar 5.2.1.12. Menentukan posisi pop-up menu13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12. Gambar 5.2.1.13. Hasil akhir pembuatan pop-up menu14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain. 115
  109. 109. 5.2.2. Membuat Rollover ImageMacromedia Dreamweaver selain menyediakan tool untuk membuatPop up Menu juga menyediakan tool untuk membuat Rollover Imagesebagai tombol. Yang harus Anda lakukan pertama kali adalahmenyediakan dua buah gambar yang ukurannya sama tapi warnanyaberbeda.1. Buatlah duplikasi gambar tombol yang telah ada. Gambar 5.2.2.1. Menyiapkan dua buah gambar2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation. Gambar 5.2.2.2 Memilih menu Hue/Saturation3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S. 116
  110. 110. Gambar 5.2.2.3. Kotak dialog Hue/Saturation4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us. Gambar 5.2.2.4. Mengaktifkan salah satu objek5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image. Gambar 5.2.2.5. Mengaktifkan menu Rollover Image6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan 117
  111. 111. gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image. Gambar 5.2.2.6. Menentukan gambar asli dan gambar rollover7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik. Gambar 5.2.2.7. Menentukan alternat dan alamat URL8. Untuk melihat hasilnya, tekan tombol F12. Gambar 5.2.2.8. Hasil akhir pembuatan rollover image menu 118

×