Desain Web

DESAIN WEB Menggunakan Macromedia: DreamWeaver 4 & Flash 5

Disusun Oleh: Irfan Subakti

PIKTI –ITS PROGRAM PENDIDIKAN INFORMATIKA DAN KOMPUTER TERAPAN

Jl. Raya ITS – Gedung Teknik Informatika ITS Lt. 2 Surabaya – Telp. (031) 593 9214, 592 2948 Fax. (031) 592 2948

Desain Web – Irfan Subakti ii

KATA PENGANTAR

Mata kuliah Desain Web di PIKTI-ITS diselenggarakan untuk

memberikan pengenalan, pemahaman, dan pengimplementasian ketrampilan

pendesainan web pada mahasiswa. Perangkat lunak yang digunakan disini

adalah Macromedia DreamWeaver versi 4 sebagai mata kuliah utama, dan

Macromedia Flash 5 sebagai penunjangnya.

Porsi DreamWeaver diberikan lebih banyak, karena perangkat lunak ini

lebih mudah dipelajari dan lebih mudah diintegrasikan dengan pemrograman

web yang lebih lanjut juga diberikan sebagai salah satu mata kuliah di PIKTI-ITS.

Walaupun demikian, pengenalan mengenai Flash juga diberikan, dengan

harapan agar kita tidak tertinggal oleh gegasnya laju teknologi, serta kita dapat

menampilkan web kita lebih indah dari web konvensional.

Kuliah Desain Web dengan buku ini dirancang dalam 2 bagian,

Macromedia DreamWeaver 4 dan Macromedia Flash 5, lalu disajikan bab demi

bab, yang umumnya selesai dalam satu pertemuan tiap bab. Tapi tak menutup

kemungkinan untuk menyelesaikan beberapa bab dalam satu pertemuan, atau

bisa juga melompati beberapa bab. Semua itu terserah kepada Pengajar dan

Mahasiswa yang bersangkutan, bagaimana baiknya.

Tak ada gading yang tak retak, demikian jugalah dalam pembahasan

buku mata kuliah Desain Web ini. Kami mohon maaf bila ada kekurangan.

Semoga Tuhan Yang Maha Pengasih memberikan segala kurnia-Nya kepada kita

dalam segenap langkah-langkah kita ini. Amiin.

Penyusun

[email protected]

Desain Web – Irfan Subakti iii

DAFTAR ISI Halaman

KATA PENGANTAR........................................................................................... ii DAFTAR ISI......................................................................................................... iii TUJUAN INSTRUKSIONAL UMUM............................................................... xi BAB 1 PENGANTAR....................................................................................... 1

1.1. Tujuan Instruksional Khusus........................................................................ 1 1.2. Pengantar...................................................................................................... 1 1.3. Mendesain Struktur File. .............................................................................. 2 1.3.1. Mengorganisasi Website dengan Folder. .................................................. 2 1.4. Mendesain Navigasi Website. ...................................................................... 3 1.5. Mengenal Local Site. ................................................................................... 4 1.5.1. Mengkonfigurasi Local Site. ..................................................................... 5 1.6. Mengenal Remote Site. ................................................................................ 7 1.6.1. Mengkonfigurasi Remote Site. ................................................................. 7 1.7. File Transfer Protocol (FTP). ....................................................................... 9 1.8. TELNET dan PUTTY. ............................................................................... 10

BAB 2 MENGENAL MACROMEDIA DREAMWEAVER ...................... 12 2.1. Tujuan Instruksional Khusus...................................................................... 12 2.2. Pengantar.................................................................................................... 12 2.3. Bekerja dengan Work Area. ....................................................................... 13

BAB 3 MEMULAI DOKUMEN BARU ....................................................... 17 3.1. Tujuan Instruksional Khusus...................................................................... 17 3.2. Pengantar.................................................................................................... 17 3.3. Membuat Site Baru. ................................................................................... 17 3.3.1. Membuat Folder. ..................................................................................... 17 3.3.2. Membuat Root Folder. ............................................................................ 18 3.3.3. Membuka Site. ........................................................................................ 20 3.4. Mengatur Site. ............................................................................................ 21 3.4.1. Menghapus Site. ...................................................................................... 21 3.4.2. Mengedit Site. ......................................................................................... 22 3.4.3. Menduplikasi Site. .................................................................................. 23 3.5. Menggunakan Site Windows. .................................................................... 23 3.5.1. Membuat Subfolder Baru. ....................................................................... 23 3.5.2. Menciptakan File HTML Baru. .............................................................. 24 3.5.3. Menghapus File dan Subfolder. .............................................................. 25 3.5.4. Mengganti Nama File dan Subfolder. ..................................................... 26 3.6. Menciptakan Dokumen Baru. .................................................................... 27 3.7. Membuka Dokumen Web. ......................................................................... 29 3.8. Memberi Nama Dokumen Web. ................................................................ 29

BAB 4 MENGGUNAKAN TEKS ................................................................. 32 4.1. Tujuan Instruksional Khusus...................................................................... 32 4.2. Memulai Teks............................................................................................. 32 4.3. Baris dan Paragraf Baru. ............................................................................ 33 4.3.1. Menciptakan Baris Baru.......................................................................... 33

Desain Web – Irfan Subakti iv

4.3.2. Menciptakan Paragraf Baru. .................................................................... 34 4.4. Menggunakan Perataan Alinea. .................................................................. 34 4.4.1. Rata Tengah (Center)............................................................................... 34 4.4.2. Rata Kiri (Align Left). ............................................................................. 36 4.4.3. Rata Kanan (Align Right)........................................................................ 37 4.5. Menggunakan Indent dan Outdent. ............................................................ 38 4.5.1. Meletakkan Indent. .................................................................................. 39 4.5.2. Menggunakan Outdent. ........................................................................... 41 4.6. Memformat Paragraf................................................................................... 41 4.7. Menggunakan List. ..................................................................................... 44 4.7.1. Unordered List. ........................................................................................ 45 4.7.2. Ordered List. ............................................................................................ 46 4.7.3. Definition List. ........................................................................................ 48 4.7.4. Menggunakan List Properties. ................................................................. 49 4.8. Menggunakan Font. .................................................................................... 51 4.8.1. Memilih Font. .......................................................................................... 51 4.8.2. Mengganti Font. ...................................................................................... 52 4.8.3. Default Font dalam Browser. .................................................................. 53 4.8.4. Menambah Koleksi Font. ........................................................................ 56 4.8.5. Mengurangi Koleksi Font. ....................................................................... 57 4.9. Mengatur Ukuran Font. .............................................................................. 58 4.9.1. Memilih Ukuran Font. ............................................................................. 59 4.9.2. Mengatur Ukuran Relatif......................................................................... 60 4.10. Mengganti Warna Font. ............................................................................ 62 4.10.1. Memilih Warna dengan Menggunakan Pipet. ....................................... 63 4.10.2. Memilih Warna yang Diinginkan. ......................................................... 64 4.10.3. Mengatur Warna Font Default............................................................... 66 4.11. Mengatur Gaya Font. ................................................................................ 67 4.11.1. Mengatur Gaya Font. ............................................................................. 68 4.12. Menulis Karakter Khusus. ........................................................................ 69 4.12.1. Menyisipkan Karakter Lain. .................................................................. 71 4.13. Menggunakan HTML Style...................................................................... 72 4.13.1. Menciptakan HTML Style Sendiri. ....................................................... 74 4.13.2. Menghapus Style. .................................................................................. 77 4.14. Menyimpan Dokumen Baru. .................................................................... 78

BAB 5 MELETAKKAN GAMBAR .............................................................. 80 5.1. Tujuan Instruksional Khusus. ..................................................................... 80 5.2. Pengantar. ................................................................................................... 80 5.3. Mengelola File Gambar. ............................................................................. 81 5.4. Meletakkan Gambar. .................................................................................. 81 5.4.1. Memilih Gambar Lewat Site Window. ................................................... 85 5.4.2. Mengganti Gambar. ................................................................................. 85 5.5. Mengatur Besar Kecil Gambar. .................................................................. 86 5.4.1. Mengembalikan Ukuran Gambar. ........................................................... 88 5.6. Mengedit Gambar. ...................................................................................... 89 5.6.1. Memilih Software Editor Grafis. ............................................................. 90

Desain Web – Irfan Subakti v

5.7. Memberi Border. ........................................................................................ 94 5.8. Mengatur Peletakan Gambar...................................................................... 94 5.8.1. Meletakkan Gambar di Kiri. ................................................................... 95 5.8.2. Meletakkan Gambar di Tengah. .............................................................. 96 5.8.3. Meletakkan Gambar di Kanan. ............................................................... 96 5.9. Mengatur Letak Teks terhadap Gambar..................................................... 97 5.9.1. Browser Default. ..................................................................................... 98 5.9.2. Baseline dan Bottom. .............................................................................. 98 5.9.3. Top. ......................................................................................................... 99 5.9.4. Middle. .................................................................................................. 100 5.9.5. Text Top. ............................................................................................... 100 5.9.6. Absolute Middle.................................................................................... 101 5.9.7. Absolute Bottom. .................................................................................. 101 5.9.8. Left. ....................................................................................................... 102 5.9.9. Right. ..................................................................................................... 102 5.10. Mengatur Jarak Vertikal dan Horizontal................................................ 103 5.10.1. Mengatur Jarak Vertikal...................................................................... 103 5.10.2. Mengatur Jarak Horizontal.................................................................. 104 5.11. Mengatur Gambar Latar Belakang......................................................... 105 5.12. Konsep Nama Alternatif. ....................................................................... 108 5.13. Menggunakan Low Source Image. ........................................................ 108

BAB 6 MEMBUAT TABEL ........................................................................ 110 6.1. Tujuan Instruksional Khusus.................................................................... 110 6.2. Pengantar.................................................................................................. 110 6.3. Anatomi Sebuah Tabel. ............................................................................ 111 6.4. Menciptakan Tabel Baru. ......................................................................... 112 6.5. Menciptakan Kolom dan Baris Baru........................................................ 114 6.5.1. Menciptakan Kolom dan Baris Baru Lewat Property Inspector Table. 115 6.5.2. Menciptakan Kolom dan Baris Baru Lewat Property Inspector Cell. .. 116 6.6. Menggabung Sel. ..................................................................................... 118 6.7. Menghapus Kolom dan Baris................................................................... 120 6.8. Mengatur Ketebalan Border. .................................................................... 122 6.9. Mengganti Warna Border......................................................................... 124 6.9.1. Mengganti Warna Border dalam Sel..................................................... 124 6.10. Mengganti Warna Latar Belakang. ........................................................ 125 6.11. Memberi Gambar Latar Belakang.......................................................... 126 6.11.1. Memberi Latar Belakang pada Tabel. ................................................. 126 6.11.2. Meletakkan Gambar Latar Belakang pada Sel.................................... 127 6.12. Menulis Teks dan Meletakkan Gambar pada Tabel............................... 128 6.12.1. Menulis dan Meletakkan Gambar pada Sel. ....................................... 128 6.13. Mengatur Posisi Horizontal dan Vertikal Data. ..................................... 130 6.14. Menciptakan Header. ............................................................................. 131 6.15. Mengatur Besar Kecil Tabel. ................................................................. 132 6.15.1. Mengubah Besar Kecil Tabel.............................................................. 133 6.15.2. Mengubah Ukuran dari Pixel ke Persen dan Sebaliknya. ................... 135 6.15.3. Menggunakan Clear Row Height dan Clear Column Width. ............. 135

Desain Web – Irfan Subakti vi

6.16. Mengurutkan Data pada Tabel. .............................................................. 137 6.17. Menumpuk Tabel.................................................................................... 139

BAB 7 MEMBUAT LAYER ........................................................................ 141 7.1. Tujuan Instruksional Khusus. ................................................................... 141 7.2. Pengantar. ................................................................................................. 141 7.3. Layer dalam Website. ............................................................................... 142 7.4. Menciptakan Layer Baru. ......................................................................... 143 7.5. Menggeser Layer. ..................................................................................... 145 7.6. Mengatur Besar Kecil Layer. ................................................................... 146 7.6.1. Mengatur Ukuran Satu Layer. ............................................................... 147 7.6.2. Mengatur Ukuran pada Beberapa Layer................................................ 148 7.7. Menggunakan Grid. .................................................................................. 150 7.7.1. Snapping Grid ke Layer......................................................................... 151 7.7.2. Mengatur Grid. ...................................................................................... 152 7.8. Menumpuk Layer. .................................................................................... 153 7.9. Meletakkan Gambar Latar Belakang. ....................................................... 154 7.10. Mewarnai Layer...................................................................................... 155 7.11. Mengganti Tag Layer. ............................................................................ 156 7.12. Meletakkan Obyek pada Layer............................................................... 157 7.13. Mengenal Stacking Order. ...................................................................... 157 7.13.1. Mengganti Nomor Urut Layer. ............................................................ 158 7.14. Menggunakan Overflow. ........................................................................ 160 7.15. Menggunakan Clip. ................................................................................ 162 7.16. Menyembunyikan Layer......................................................................... 164

BAB 8 MENCIPTAKAN FRAME .............................................................. 166 8.1. Tujuan Instruksional Khusus. ................................................................... 166 8.2. Pengantar. ................................................................................................. 166 8.3. Macam-macam Anatomi Frame dalam Website. ..................................... 167 8.4. Mengenal Frame dan Frameset. ............................................................... 169 8.5. Membuat Frame........................................................................................ 169 8.6. Menghapus Frame. ................................................................................... 171 8.7. Mengatur Luas Sempit Frame. ................................................................. 174 8.7.1. Mengatur Luas Kolom Frame................................................................ 175 8.7.2. Mengatur Ukuran Baris Frame. ............................................................. 177 8.7.3. Mengatur Luas Kolom dan Baris Frame. .............................................. 177 8.8. Memunculkan Scroll Bar.......................................................................... 179 8.9. Menggunakan NoResize........................................................................... 180 8.10. Memberi Border. .................................................................................... 181 8.10.1. Border pada Seluruh Frame. ................................................................ 182 8.11. Mengatur Margin. ................................................................................... 183 8.12. Menyimpan Dokumen dan Frame. ......................................................... 184 8.12.1. Menyimpan Dokumen yang Mengandung Frame. .............................. 184 8.12.2. Menyimpan Frame-Frame. .................................................................. 185 8.13. Mengambil Dokumen. ............................................................................ 186

Desain Web – Irfan Subakti vii

BAB 9 MEMBUAT LINK............................................................................ 187 9.1. Tujuan Instruksional Khusus.................................................................... 187 9.2. Pengantar.................................................................................................. 187 9.3. Mengenal Macam-macam Path................................................................ 187 9.3.1. Absolute Path. ....................................................................................... 188 9.3.2. Document-relative Path......................................................................... 188 9.3.3. Root-relative Path.................................................................................. 190 9.4. Membuat Link. ......................................................................................... 190 9.4.1. Membuat Link pada Teks. .................................................................... 191 9.4.2. Membuat Link pada Gambar. ............................................................... 193 9.5. Menciptakan Link Lewat Point-to-File. ................................................... 195 9.6. Memodifikasi Link................................................................................... 197 9.7. Menghilangkan Link. ............................................................................... 197 9.8. Image Maps. ............................................................................................. 198 9.8.1. Menciptakan Image Maps. .................................................................... 199 9.8.2. Memodifikasi Daerah Link. .................................................................. 201 9.8.3. Menghapus Image Maps. ...................................................................... 202 9.9. Menentukan Target. ................................................................................. 202 9.10. Link pada Frame. ................................................................................... 203 9.11. Menciptakan Anchor. ............................................................................. 205 9.11.1. Anchor pada Dokumen Lain. .............................................................. 208 9.12. Link pada Alamat E-Mail....................................................................... 209 9.13. Mengatur Warna Link. ........................................................................... 210 9.14. Melihat Struktur Link............................................................................. 211

BAB 10 MEMBUAT FORM.......................................................................... 213 10.1. Tujuan Instruksional Khusus.................................................................. 213 10.2. Pengantar................................................................................................ 213 10.3. Cara Kerja Form..................................................................................... 214 10.3.1. Script Pengolah Informasi Form. ........................................................ 215 10.4. Membuat Form....................................................................................... 215 10.4.1. Meletakkan Form. ............................................................................... 216 10.4.2. Meletakkan Form. ............................................................................... 217 10.4.3. Memilih Method. ................................................................................ 217 10.5. Membuat Text-Box. ............................................................................... 218 10.5.1. Mengatur Single Line-Multi Line. ...................................................... 219 10.5.2. Mengatur Panjang dan Lebar Text Box. ............................................. 220 10.5.3. Menggunakan Wrap. ........................................................................... 221 10.5.4. Membuat Password Field. ................................................................... 222 10.5.5. Memasukkan Init Val. ......................................................................... 223 10.5.6. Menggunakan Max Char..................................................................... 224 10.6. Membuat Check Box.............................................................................. 224 10.6.1. Mengatur Initial State.......................................................................... 226 10.6.2. Memasukkan Value............................................................................. 227 10.7. Membuat Radio Button. ......................................................................... 227 10.8. Membuat List/Menu............................................................................... 229 10.8.1. Memasukkan Pilihan-pilihan. ............................................................. 230

Desain Web – Irfan Subakti viii

10.8.2. Mengubah Menu Menjadi List. ........................................................... 231 10.8.3. Mengatur Jumlah Pilihan..................................................................... 233 10.9. Membuat Hidden Field. .......................................................................... 233 10.10. Memasukkan Button............................................................................. 234 10.10.1. Tombol Submit dan Reset. ................................................................ 235 10.10.2. Mengubah Tulisan pada Tombol. ...................................................... 236 10.11. Hubungan Form dengan Pemrograman................................................ 237 10.11.1. JavaScript dalam HTML. .................................................................. 238

BAB 11 MEMASUKKAN OBYEK LAIN DAN MEDIA............................ 242 11.1. Tujuan Instruksional Khusus. ................................................................. 242 11.2. Pengantar. ............................................................................................... 242 11.3. Memasukkan Tanggal............................................................................. 242 11.4. Memasukkan Horizontal Rule. ............................................................... 244 11.4.1. Mengatur Panjang dan Lebar Horizontal Rule. ................................... 245 11.4.2. Mengatur Shading. .............................................................................. 246 11.5. Memasukkan Shockwave Movie............................................................ 247 11.6. Memasukkan Flash. ................................................................................ 249

BAB 12 MENGENAL MACROMEDIA FLASH 5 ..................................... 251 12.1. Tujuan Instruksional Khusus. ................................................................. 251 12.2. Pengantar. ............................................................................................... 251 12.3. Image Vector dan Bitmap....................................................................... 252 12.4. Istilah di Lingkungan Flash. ................................................................... 252 12.5. Menggunakan Context Menu. ................................................................ 255 12.6. Memanfaatkan Grid, Guide dan Ruler. .................................................. 256 12.7. Membuat Guideline. ............................................................................... 257 12.8. Setting Awal Movie................................................................................ 257

BAB 13 MENGGUNAKAN TOOLS............................................................. 260 13.1. Tujuan Instruksional Khusus. ................................................................. 260 13.2. Pengantar. ............................................................................................... 260 13.3. Mengenal Obyek Gambar....................................................................... 260 13.4. Dasar Suatu Shape. ................................................................................. 261 13.5. Mengenal Komponen-komponen dalam Tools. ..................................... 262 13.5.1. Menggambar Garis Lurus, Segi Empat dan Oval................................ 262 13.5.2. Membuat Rounded Rectangle. ............................................................ 264 13.5.3. Memanfaatkan Pen Tool...................................................................... 264 13.5.4. Menata Preference dari Pen Tool. ....................................................... 265 13.5.5. Pencil Tool........................................................................................... 266 13.5.6. Brush Tool. .......................................................................................... 266 13.5.6.1. Meletakkan Goresan Brush Tool. ..................................................... 267 13.5.7. Eraser Tool. ........................................................................................ 267

BAB 14 MENGOLAH OBYEK..................................................................... 269 14.1. Tujuan Instruksional Khusus. ................................................................. 269 14.2. Pengantar. ............................................................................................... 269 14.3. Memilih Obyek....................................................................................... 269 14.3.1. Arrow Tool. ......................................................................................... 269 14.3.2. Subselection Tool. ............................................................................... 270

Desain Web – Irfan Subakti ix

14.3.3. Lasso Tool. ......................................................................................... 270 14.4. Memindahkan Obyek. ............................................................................ 272 14.5. Menghapus Obyek. ................................................................................ 273 14.6. Mengatur Tumpukan Obyek. ................................................................. 273 14.7. Meluruskan atau Melenturkan Garis. ..................................................... 274 14.8. Mengubah Ukuran suatu Obyek. ........................................................... 274 14.9. Bentuk Group dan Un-Group................................................................. 275 14.9.1. Mengubah Bentuk Group setelah di-Group. ....................................... 275 14.10. Memecah Obyek. ................................................................................. 276 14.11. Memutar Obyek dengan Rotate Tool. .................................................. 277 14.12. Memodifikasi Bentuk........................................................................... 277 14.13. Membalik Obyek.................................................................................. 278 14.14. Memiringkan Obyek. ........................................................................... 278 14.15. Mengembalikan Obyek yang Telah Ditransformasi. ........................... 279 14.16. Perataan Posisi Obyek dengan Aligning. ............................................. 279

BAB 15 MEWARNAI OBYEK ..................................................................... 281 15.1. Tujuan Instruksional Khusus.................................................................. 281 15.2. Pengantar................................................................................................ 281 15.3. Menentukan Atribut Stroke dan Fill. ..................................................... 282 15.3.1. Menggunakan Ink Bottle Tool. .......................................................... 282 15.3.2. Menggunakan Paint Bucket Tool. ...................................................... 283 15.3.3. Menggunakan Eyedropper Tool. ........................................................ 285 15.3.4. Menggunakan Kontrol Stroke dan Fill dalam Toolbox. ..................... 286 15.3.5. Menentukan Warna, Style, dan Ketebalan Stroke dlm Panel Stroke.. 287 15.3.6. Bekerja dg Warna Polos Fill, Warna Gradasi, & Bitmap pd Pnl Fill. 288 15.3.7. Mengunci Gradien atau Bitmap untuk Mengisi Stage. ....................... 289 15.3.8. Membuat dan Mengedit Warna Polos dengan Panel Mixer................ 290 15.4. Memodifikasi Palette Warna.................................................................. 290 15.4.1. Menggunakan Default Palette dan Palette Web-Safe. ........................ 291 15.4.2. Mengurutkan Palette. .......................................................................... 292 15.4.3. Mengimpor dan Mengekspor Palette Warna....................................... 292

BAB 16 MENGIMPOR OBYEK BITMAP ................................................. 293 16.1. Tujuan Instruksional Khusus.................................................................. 293 16.2. Pengantar................................................................................................ 293 16.3. Menempatkan Artwork ke dalam Flash. ................................................ 293 16.4. Mengimpor Format File yang Berbeda. ................................................. 295 16.4.1. Mengimpor File FireWorks PNG. ...................................................... 296 16.4.2. Mengimpor File FreeHand.................................................................. 297 16.4.3. Mengimpor File Adobe Illustrator. ..................................................... 299 16.4.4. Mengimpor Gambar Bitmap. .............................................................. 299 16.5. Menggunakan QuickTime Movies......................................................... 300 16.6. Mengubah Bitmap Menjadi Vektor Grafis. ........................................... 301 16.7. Memecah Image Bitmap. ....................................................................... 302 16.8. Mengedit Bitmap.................................................................................... 303 16.9. Setting Bitmap Properties. ..................................................................... 304

Desain Web – Irfan Subakti x

BAB 17 MEMBUAT TEKS............................................................................ 306 17.1. Tujuan Instruksional Khusus. ................................................................. 306 17.2. Pengantar. ............................................................................................... 306 17.3. Mengetikkan Teks. ................................................................................. 306 17.4. Menata Set Atribut Teks......................................................................... 307 17.5. Mentransformasikan Teks. ..................................................................... 307

BAB 18 BEKERJA DENGAN LAYER ........................................................ 308 18.1. Tujuan Instruksional Khusus. ................................................................. 308 18.2. Pengantar. ............................................................................................... 308 18.3. Membuat Layer....................................................................................... 308 18.4. Menampilkan Layer................................................................................ 308

BAB 19 SIMBOL, INSTANCE DAN TOMBOL ......................................... 313 19.1. Tujuan Instruksional Khusus. ................................................................. 313 19.2. Tipe-tipe Item pada Flash 5. ................................................................... 313 19.3. Simbol..................................................................................................... 314 19.4. Instance. .................................................................................................. 317 19.5. Tombol. .................................................................................................. 318

BAB 20 ANIMASI........................................................................................... 321 20.1. Tujuan Instruksional Khusus. ................................................................. 321

BAB 21 MATERI PENGAYAAN.................................................................. 334 21.1. Tujuan Instruksional Khusus. ................................................................. 334

DAFTAR PUSTAKA ........................................................................................ 335 TENTANG PENULIS ....................................................................................... 336

Desain Web – Irfan Subakti xi

TUJUAN INSTRUKSIONAL UMUM

Tujuan yang ingin dicapai setelah mahasiswa menyelesaikan Mata Kuliah

Desain Web ini, adalah sebagai berikut:

��Mampu memahami desain dalam web/internet.

��Mampu mengusai perangkat lunak Macromedia DreamWeaver.

��Mampu mengusai perangkat lunak Macromedia Flash.

��Mampu mengimplementasikan desain dalam dunia web/internet.

��Mampu memahami pemrograman web/internet yang berhubungan dengan

desain dalam skala kecil.

��Mampu mengintegrasikan dan mengimplementasikan desain grafis, desain

web, dan pemrograman web skala kecil dalam suatu aplikasi.

Pengantar

Desain Web – Irfan Subakti 1

BAB 1 PENGANTAR

1.1. Tujuan Instruksional Khusus.

��Mampu memahami dan mengimplementasikan Manajemen Website.

��Mampu memulai dan memahami pengoperasian awal Macromedia

DreamWeaver.

��Mampu memahami FTP (File Transfer Protocol) dan aplikasinya.

1.2. Pengantar.

Walaupun bukan merupakan keharusan, diharapkan anda memiliki

pemahaman yang cukup terhadap desain grafis menggunakan pelbagai software

pengolah grafis yang ada. Sebab dengan kemampuan mendesain grafis ini, kita

memasuki sisi penting dalam kehidupan sekarang yaitu dunia yang

berhubungan dengan advertensi/advertising dan entertainment/hiburan, yang

begitu banyak membutuhkan sentuhan seni dan teknologi utamanya dalam hal

penampilan grafis baik untuk interior maupun eksterior, baik untuk media cetak

maupun media visual. Kemudian lebih jauh dari itu, untuk teknologi yang

begitu mendunia saat ini, yaitu internet, maka desain grafis tadi akan

memberikan peran yang berarti dalam hal mempercantik tampilan website di

samping informasi lain yang berupa teks. Tentu saja kemampuan desain grafis

biasa tadi tidak cukup dalam hal penanganan desain lanjutan dari desain grafis

ini, yaitu desain web. Untuk itu maka sekarang kita akan mempelajari software

yang digunakan untuk mendesain web yang dirasakan sebagai software yang

bagus dan baik untuk saat ini, ialah Macromedia DreamWeaver 4.

Sebelum melangkah lebih jauh, terlebih dahulu kita akan membahas

sedikit mengenai Manajemen Website, karena hal ini dirasakan penting bagi

kelancaran kita dalam mendesain web untuk kuliah-kuliah selanjutnya.

Dalam mendesain website diperlukan manajemen website, yaitu

bagaimana mengatur dokumen-dokumen website dalam sebuah website.

Pengantar


Website adalah istilah lain untuk homepage yaitu halaman-halaman yang tampil

di internet. Website dibangun di atas dokumen-dokumen HTML, gambar-

gambar, script pemrograman, dan komponen-komponen lainnya.

1.3. Mendesain Struktur File.

Manajemen dokumen-dokumen di website tercermin lewat pengaturan

peletakan file-file secara keseluruhan dalam sebuah harddisk. Harddisk adalah

cerminan dari server. Sebelum ditampilkan di internet, dokumen website

disimpan lebih dahulu di harddisk. Jika sudah siap dipublikasikan, maka isi

harddisk tempat website tersimpan dipindahkan ke server dalam wujud yang

identik, misalnya: jumlah file, nama file, nama folder, dan sebagainya.

1.3.1. Mengorganisasi Website dengan Folder.

Harddisk terdiri dari folder, dimana setiap folder bisa terdiri dari

subfolder. Fungsi folder untuk mengorganisasi file-file menurut kategorinya.

Misal data-data gambar .BMP anda disimpan dalam folder DataBMP.

Bila anda ingin membuat website baru, ciptakan juga folder baru dan

folder itu hanya untuk menyimpan dokumen-dokumen website. Folder ini akan

menjadi root folder bagi website anda. Di dalamnya tentu saja bisa diciptakan

subfolder sehingga data lebih terkategori.

Gambar 1.1. Folder dan subfolder untuk mengorganisasi website Pada gambar di atas terlihat adanya root folder yang di dalamnya juga

memiliki subfolder-subfolder. Subfolder grafis untuk menyimpan file-file

gambar, subfolder produk untuk menyimpan file yang memiliki hubungan

dengan produk yang dijual, dan seterusnya.

File yang tersimpan dalam root folder biasanya adalah file-file utama,

seperti halaman utama (index.htm), halaman About Us, halaman kontak, dan

lain-lain.

Pengantar


Dengan adanya struktur folder dan file yang rapi seperti di atas, maka

anda dengan mudah mendeteksi bilamana ada file yang cacat, belum terbuat,

atau tak tertulis dengan benar.

1.4. Mendesain Navigasi Website.

Website yang utuh terdiri atas serangkaian halaman. Masing-masing

halaman dihubungkan dengan sebuah link. Semakin banyak link yang ada pada

satu halaman, semakin kompleks pula jaringan yang ada. Membuat link memang

mudah, baik dengan HTML atau dengan software yang lain seperti

DreamWeaver atau FrontPage. Tetapi menciptakan navigasi yang bagus

membutuhkan ketelitian yang lebih.

Link dapat dibagi menjadi 5 jenis berdasarkan menuju ke mana atau

siapa link ini, yaitu:

��Link yang menghubungkan satu halaman dengan halaman yang lain dalam

website. Link ini sering disebut dengan link internal.

��Link yang menghubungkan satu halaman website dengan alamat website

yang lainnya. Link ini bisa disebut dengan link eksternal.

��Link yang berfungsi untuk menjalankan E-Mail Client ketika ingin

mengirimkan e-mail. Link ini mengandung alamat e-mail di dalamnya.

��Link yang dipakai untuk melompat dari satu tempat ke tempat yang lainnya

secara cepat dalam satu halaman yang sama atau halaman yang lain. Ini

disebut dengan Anchor.

��Link yang difungsikan untuk menjalankan software khusus yang akan

menangani sebuah file di internet. Link ini mengandung file yang

membutuhkan software khusus untuk menjalankannya.

Begitu link diciptakan, maka anda harus mendesain navigasi website. Fungsinya

adalah untuk menjaga agar tak ditemui missing link. Dengan adanya navigasi

website, anda bisa melacak alur sebuah link. Misalnya, link index.htm bercabang

sampai kemana saja.

Bentuk navigasi website jika diperhatikan akan mirip dengan diagram

pohon, seperti contoh di bawah ini.

Pengantar


Gambar 1.2. Jaringan link sebuah website Terlihat pada gambar di atas, jaringan-jaringan halaman pada website.

Jaringan-jaringan itu tercipta berkat link yang telah kita buat.

Meskipun navigasi semacam itu bisa dibuat belakangan secara otomatis

oleh DreamWeaver, dan software ini juga memiliki fasilitas khusus untuk

menscan adanya missing link, pembuatan navigasi sebelum membangun website

dirasa sangat penting dan memegang peran strategis dalam manajemen website.

1.5. Mengenal Local Site.

Tahap awal mendesain website, kita menggunakan harddisk untuk

menyimpan dokumen-dokumen web itu, seperti yang telah kita bahas di depan.

Mengingat dokumen website mungkin membutuhkan banyak ruang

penyimpanan, sangat tidak disarankan untuk menggunakan disket sebagai

media penyimpanan sebab akan mengacaukan organisasi file-file website secara

keseluruhan, seperti sering terjadinya missing link.

Harddisk, yang berfungsi sebagai tempat penyimpanan dokumen

website sementara sebelum web itu dipublikasikan di internet, disebut dengan

Local Site. Local site ini memiliki folder-folder tempat file-file anda terorganisir.

Sebelum mulai menciptakan satu halaman website, anda harus membuat folder

baru di local site ini dimana fungsinya khusus hanya dipakai untuk menyimpan

file-file website. Berilah folder itu nama sesuai nama website anda.

Setelah folder ini jadi dan siap menampung file-file website, folder ini

telah berubah fungsi dan memiliki sebutan khusus, yaitu local root folder.

Pengantar


1.5.1. Mengkonfigurasi Local Site.

Marilah sekarang kita mencoba mengkonfigurasi local site dan memilih

salah satu folder yang telah anda ciptakan untuk menjadi root folder. Kita akan

coba langkah demi langkah dengan bantuan Macromedia DreamWeaver.

Langkah-langkah mengkonfigurasi local site dan memilih root folder:

1. Pilihlah menu Site Macromedia DreamWeaver.

2. Kemudian kliklah New Site…

Gambar 1.3. Memilih New Site untuk menciptakan site baru 3. Anda akan masuk ke menu Site Definition. Di bagian kiri terdapat kategori di

mana Local Info telah terpilih.

Gambar 1.4. Tampilan kotak dialog Site Definition 4. Di bagian kanan terdapat text box yang wajib anda isi dengan data-data yang

tepat. Pada text box Site Name masukkan nama web yang akan anda ciptakan

dengan nama apa saja seperti yang diinginkan.

Pengantar


5. Di bagian local root folder pilihlah folder yang akan anda pakai untuk

menyimpan dokumen-dokumen serta file-file website yang bersangkutan.

Kliklah ikon folder untuk memilih folder dengan cara browse.

6. Di bawahnya, terdapat option Refresh Local File List Automatically dimana di

samping kirinya terdapat sebuah check box yang bisa anda pilih atau tidak.

Jika anda memilihnya dengan cara mencek check box itu, maka setiap ada file

baru masuk dan menjadi salah satu dokumen website, DreamWeaver akan

me-refresh daftar file yang tersimpan di folder agar file baru itu tampak di

Local Panel bagian Site Window. Namun jika tidak, setiap ada file yang baru

masuk DreamWeaver tidak menampilkannya secara otomatis di dalam

folder, kecuali jika anda melakukannya secara manual.

7. Di bagian HTTP Address masukkan alamat website yang nanti akan anda

pakai. Menuliskan alamat website di sini penting untuk melakukan verifikasi

link dan mencegah terjadinya missing link. Tuliskan alamat web yang

lengkap, seperti: http://www.pikti.com, atau lainnya.

Gambar 1.5. Tampilan jendela Site Map 8. Di bagian Cache, anda bisa tentukan apakah DreamWeaver ingin agar ia

menciptakan cache file untuk mempercepat manajemen link dan site atau

tidak. Kliklah check box yang ada disitu untuk memilih atau tidak memilih

option ini.

9. Jika telah terisi seluruhnya, kliklah tombol OK.

Pengantar


Setelah semua proses di atas telah dilakukan dengan benar, DreamWeaver akan

menciptakan satu jendela baru yang bernama Site Window. Fungsi Site Window

ini untuk menampilkan seluruh file dan dokumen webisite anda yang ada di

root folder. Secara lebih luas Site Window ini juga berfungsi untuk menciptakan

dokumen baru, memindah file ke folder lain, meng-copy, dan menghapus file.

1.6. Mengenal Remote Site.

Setelah kita mengetahui kegunaan dari local site, selanjutnya akan

dipelajari mengenai remote site. Sebenarnya kegunaan dari remote site ini, tak

berbeda jauh dari local site kita. Hanya saja kalau dalam local site, semua file

yang terlibat disitu masih berada dalam harddisk lokal kita, maka kalau dalam

remote site, segala file yang terlibat sudah benar-benar terletak di server web kita

(web server). Server disini, tentu saja merupakan server real/nyata dimana

nantinya memang dari situlah situs kita disimpan.

Jelas untuk dapat mengakses server ini, kita akan memerlukan

kewenangan berupa login dan password yang nantinya akan kita masukkan.

Server dalam web, biasanya merupakan suatu komputer yang menyala terus

menerus 24 jam sehari. Bagi kebanyakan orang/perusahaan yang tak memiliki

sendiri server ini, bisa menyewanya dari pihak lain. Banyak juga di internet kita

jumpai pelbagai server yang disediakan gratis, hanya saja nantinya situs kita di

server itu akan dibebani dengan pelbagai iklan, untuk menunjang hidup

penyedia server gratisan tadi.

Dalam kesempatan ini, sedikit akan dibahas juga mengenai FTP (File

Transfer Protocol), karena biasanya memang melalui cara inilah transfer file dari

dan ke server dilakukan.

1.6.1. Mengkonfigurasi Remote Site.

Marilah sekarang kita mencoba mengkonfigurasi local site dan memilih

salah satu folder yang telah anda ciptakan untuk menjadi root folder. Kita akan

coba langkah demi langkah dengan bantuan Macromedia DreamWeaver.

Pengantar


Langkah-langkah mengkonfigurasi local site dan memilih root folder:

1. Pilihlah menu Site Macromedia DreamWeaver.

2. Kemudian kliklah Define Site…

Gambar 1.6. Memilih Define Sites untuk mengkonfigurasi remote site 3. Anda akan masuk ke menu Define Sites. Pilihlah menu Edit di situ. Nanti di

bagian kiri akan dijumpai kategori di mana anda dapat memilih Remote Info.

Gambar 1.7. Tampilan kotak dialog Define Sites 4. Di bagian kanan terdapat text box yang wajib anda isi dengan data-data yang

tepat. Pada text box Acces, pilihlah FTP. Lalu untuk text box FTP Host, anda

bisa mengisikan ke server anda. Disini anda bisa mengisikan dengan alamat

situs dimana server anda berada, atau langsung anda tuliskan IP Address-

nya. Dalam kesempatan kali ini, untuk latihan kita akan menggunakan server

di PIKTI sendiri, yaitu server dengan nama Arjuna (72.126.16.2) atau Anoman

(72.126.16.3) yang diikuti dengan tanda slash (/) dan nama home directory

anda. Pada Host Directory anda ketikkan public_html sebagai folder induk

anda di server yang sama juga fungsinya dengan root folder anda di local site.

Untuk nama user-nya/login dapat anda sesuaikan dengan nama login anda

sendiri-sendiri, demikian juga password-nya.

Pengantar


Gambar 1.8. Tampilan kotak dialog Site Definition 5. Jika telah terisi seluruhnya, kliklah tombol OK.

6. Pada kategori yang lain, seperti Design Notes, Site Map Layout, File View

Columns; untuk sementara ini tak akan dibahas lebih jauh, karena yang paling

penting disini adalah Local Info dan Remote Info.

1.7. File Transfer Protocol (FTP).

FTP adalah cara terbaik untuk men-transfer file (terutama yang

berukuran besar) dari satu komputer ke komputer yang lainnya. Untuk

melakukan FTP dengan mudah disarankan untuk menggunakan program FTP

seperti WS_FTP, dll.

Untuk operasi sederhana pada file dengan FTP saja sebenarnya sudah cukup.

Anda bisa langsung mengimplementasikan FTP sederhana menggunakan

command prompt FTP, seperti contoh di bawah ini.

Pengantar


Gambar 1.9. Tampilan Command Prompt untuk FTP Penjelasan mengenai FTP selengkapnya tak diberikan disini, cukup

sebagai pengetahuan saja bagi kita, karena dengan DreamWeaver pada remote

site yang telah kita bahas sudah mengimplementasikan FTP di dalamnya. Anda

dapat bertanya lebih lanjut ke Dosen atau Asisten.

1.8. TELNET dan PUTTY.

Telnet adalah emulasi terminal untuk jaringan TCP/IP seperti Internet.

Program Telnet berjalan pada komputer anda dan menghubungkan komputer

anda dengan suatu server pada jaringan TCP/IP. Anda dapat memasukkan

perintah-perintah melalui program Telnet dan perintah-perintah tersebut akan

dieksekusi pada server. Hal ini memungkinkan pengontrolan terhadap server.

Untuk program yang lebih baik, dapat juga kita menggunakan program PUTTY

yang serupa dengan TELNET, hanya lebih familiar lagi.

Kedua program ini sebagai tambahan juga bagi kita, untuk

mengaplikasikan pelbagai fungsi remote pada server. Ini berhubungan dengan

kuliah kita, karena barangkali anda ingin juga mengorganisasi server anda dari

suatu terminal tertentu.

Pengantar


Gambar 1.10. Tampilan TELNET

Gambar 1.11. Tampilan PUTTY

Latihan.

1. Jelaskan mengenai manajemen website itu?

2. Implementasikan manajemen website seperti contoh di atas.

3. Cobalah mengimplementasi pendahuluan dari website pribadi anda dengan

manajemen website yang sudah dijelaskan.

4. Cobalah menjalankan program FTP, TELNET/PUTTY. Minta penjelasan

Dosen/Asisten bila anda kurang mengerti.

Mengenal Macromedia DreamWeaver


BAB 2 MENGENAL MACROMEDIA DREAMWEAVER


��Mampu memahami lebih lanjut pengoperasian Macromedia DreamWeaver.

��Mampu memahami dan mempraktekkan komponen DreamWeaver,

utamanya work area.

2.2. Pengantar.

Macromedia DreamWeaver adalah sebuah software web design (desain

web) yang menawarkan cara mendesain website dengan dua langkah sekaligus

dalam satu waktu, yaitu mendesain dan memprogram. DreamWeaver memiliki

satu jendela mini yang disebut HTML Source tempat kode-kode HTML tertulis.

Setiap kali kita mendesain website seperti menulis kata-kata, meletakkan

gambar, membuat tabel, dan proses lainnya, tag-tag HTML akan tertulis secara

langsung mengiringi proses pengaturan website. Artinya, kita memiliki

kesempatan untuk mendesain website sekaligus mengenal tag-tag HTML yang

membangun website tadi. Di lain kesempatan, kita juga dapat mendesain

website hanya lewat menulis tag-tag dan teks lain di jendela HTML Source dan

hasilnya bisa langsung dilihat di layar.

Gambar 2.1. HTML Source akan menulis tag-tag HTML pada waktu yang bersamaan saat kita mendesain website



Namun jendela ini hanyalah salah satu kelebihan DreamWeaver. Selain

kelebihan ini, ia mampu mengenali tag-tag lain di luar HTML seperti ColdFusion

dan ASP, serta mendukung script-script Dynamic HTML dan CSS Style.

2.3. Bekerja dengan Work Area.

Work area adalah lokasi tempat kita mendesain sebuah website. Seperti

software-software pada umumnya, work area ini dilengkapi dengan jendela-

jendela kecil tempat teknologi-teknologi yang akan membantu pekerjaan kita,

sekaligus berfungsi untuk memaksimalkan hasil desain website.

Jendela ini sangat fleksibel karena bisa digeser ke sana ke mari atau ditampilkan

serta disembunyikan sesuai kebutuhan.

Pada dasarnya, tampilan work area tadi adalah seperti gambar di bawah

ini:

Gambar 2.2. Work area Macromedia DreamWeaver Penjelasan singkat dari work area DreamWeaver di atas adalah sebagai berikut:

��Document Window: tempat untuk mendesain website.

��Object Pallete: terdiri dari tombol-tombol yang akan anda pakai untuk

mendesain website, seperti membuat tabel, meletakkan gambar, menulis

teks, menggambar layer, dan lainnya. Object pallete ini masih terdiri dari

enam bagian lagi, yaitu Common, Characters, Forms, Frames, Head, Invisibles

dan Special.



Gambar 2.3. Bermacam-macam Object Pallete, dari kiri ke kanan: Common, Characters, Forms, Frames, Head, Invisibles dan Special

��Property Inspector: bagian ini dapat anda pakai untuk menseting property

sebuah obyek yang anda pilih. Fungsi utamanya untuk memodifikasi obyek

yang anda maksud, seperti mengatur lebar dan warna tabel, dan sebagainya.

Bentuk property inspector ini akan berubah wujud sesuai obyek yang anda

pilih. Coba anda lihat beberapa contoh di antaranya berikut ini:

Gambar 2.4. Property Inspector untuk Text

Gambar 2.5. Property Inspector untuk Layer

Gambar 2.6. Property Inspector untuk Horizontal Rule ��Launcher: tempat anda membuka atau menutup inspector, palletes, dan

jendela lain yang paling sering anda gunakan nanti. Launcher ini juga

terdapat di bagian kanan bawah work area.

��Document Info: berisi informasi tentang dokumen web yang sedang kita

rancang. Pada bagian window size anda bisa mengukur berapa lebar dan

tinggi dokumen window. Di samping kanannya, anda bisa mengecek

kecepatan dokumen ditampilan serta ukuran dokumen tersebut.

Dari bab ini, anda dapat berlatih dengan memahami semua komponen

yang ada di DreamWeaver, seperti terlihat pada gambar 2.2, dengan bimbingan

dosen/asisten. Lalu untuk memahami pelbagai Object Pallete, yang ada pada

gambar 2.3, anda bisa langsung mencoba satu persatu menempatkan setiap

obyek yang ada di setiap Object Pallete. Misalnya seperti gambar berikut ini:



Gambar 2.7. Contoh penempatan obyek tanda ® dari Object Pallete Characters, Image dari Common, Button dari Forms, Anchor dari Invisibles, dan ActiveX dari Special

Gambar 2.8. Property Inspector untuk Button Submit gambar 2.7 di atas

Latihan.

5. Pahamilah benar-benar semua komponen DreamWeaver, kliklah semua yang

ingin anda klik, tanyakan kepada Dosen/Asisten bila ada yang belum

dimengerti.

6. Teruskan ide anda dalam hal pendesainan website pribadi anda.

Memulai Dokumen Baru


BAB 3 MEMULAI DOKUMEN BARU


��Mampu menjalankan lebih lanjut operasi-operasi di DreamWeaver.

��Mampu memahami dan mempraktekkan pengolahan dokumen pada

DreamWeaver.

3.2. Pengantar.

Sekarang saatnya untuk mencoba menciptakan satu website baru. Tema

dan tujuan web yang akan anda rancang sederhana saja, yaitu tentang satu

website profil PIKTI-ITS, tempat kita kuliah sehari-hari. Bayangkan anda

diserahi tugas menciptakan website/situs berisi informasi seputar PIKTI-ITS,

yang nantinya beralamatkan di http://www.pikti.com.

Pada bagian ini kita akan mengulas sedikit teknik menciptakan local site

seperti yang pernah kita ulas pada bab 1. Selanjutnya, kita akan mengenal cara-

cara membuat dokumen baru dan memilih local site yang tepat.

3.3. Membuat Site Baru.

Anda telah mengenal apa itu local site dan root folder. Sekarang kita akan

belajar selangkah demi selangkah untuk menciptakan site baru agar website ini

termanajemen dengan baik.

3.3.1. Membuat Folder.

Langkah-langkah yang bisa anda ikuti untuk membuat site baru adalah sebagai

berikut:

1. Tampilkan Windows Explorer. Maksud kita menjalankan Windows Explorer

adalah untuk membuat folder baru yang akan kita jadikan root folder.

2. Masuklah ke drive F:\ harddisk anda.



3. Pilihlah menu File > New > Folder.

Gambar 3.1. Menciptakan folder baru lewat Windows Explorer 4. Kemudian namailah folder ini dengan nama pikti.com sehingga anda

memiliki folder baru yang berlokasi di F:\pikti.com. Di bawah folder ini

data-data anda akan tersimpan.

Sekarang, marilah kita mendefinisikan folder ini agar menjadi root folder

– disebut juga local root folder. Untuk itu, pastikan anda telah menyiapkan

Macromedia Weaver 4.

3.3.2. Membuat Root Folder.

Ada beberapa langkah yang harus anda perbuat untuk menciptakan root

folder dengan Macromedia DreamWeaver 4. Cobalah langkah-langkah berikut

ini:

1. Jalankan Macromedia DreamWeaver 4 anda.

2. Pilihlah menu Site dan pilihlah New Site.

3. Anda akan berada di kotak dialog Site Definition.



Gambar 3.2. Site Definition tempat menciptakan site baru 4. Pada kotak Site Name masukkan kata “PIKTI-ITS”.

5. Pada bagian Local Root Folder, pilihlah directory pikti.com dengan menulis

“F:\pikti.com”. Atau anda juga bisa memilihnya dengan cara mencari

(browse) lewat tombol bergambar folder di samping text box Local Root

Folder.

6. Aktifkan pilihan Refresh Local File Automatically dengan cara mengklik check

box yang ada di sana sehingga dalam kondisi cek.

7. Di bagian HTTP Address, masukkan alamat website dengan menulis

http://www.pikti.com.

8. Klik di pilihan Cache sehingga tanda cek muncul.

9. Tekan tombol OK.

Segera setelah anda menjalani proses ini, sebuah Site Windows akan terbuka dan

telah memilih folder F:\pikti.com sebagai Local Root Folder. Di sinilah anda

akan menyimpan dokumen-dokumen website anda.

Gambar 3.4. Site Windows menampilkan file-file yang ada di direktory F:\pikti.com



3.3.3. Membuka Site.

Site Windows baru akan terbuka secara otomatis setelah anda selesai

menciptakan site baru. Namun terkadang Macromedia DreamWeaver tidak

menampilkannya langsung. Agar terbuka site windows baru yang telah

menampilkan folder F:\pikti.com sebagai local root folder, matikan

DreamWeaver dan jalankan lagi beberapa saat kemudian (re-launch). Atau

langsung tekan Alt-F8 (shortcut untuk menampilkan Site Map).

Kini muncul persoalan baru. Asumsikan anda memiliki beberapa local

root folder, yang artinya saat itu anda sedang mengerjakan beberapa proyek

website dan situs PIKTI-ITS merupakan salah satunya. Lalu bagaimana caranya

berpindah dari satu local root folder ke local root folder yang lainnya?

Jika anda ingin berpindah dari satu proyek website ke proyek website

yang lain, anda harus mengganti local root folder agar dokumen milik website A

tak bercampur aduk dengan dokumen milik website B. Caranya, anda harus

membuka site yang tepat.

Di bawah ini disajikan langkah-langkah untuk memilih dan membuka

site yang baru:

1. Pada Macromedia DreamWeaver 4, kliklah menu Site.

2. Lalu pilihlah option Open Site.

Gambar 3.5. Pilihan Open Site untuk membuka site/situs 3. Tahan kursor di sana, maka muncullah tempat site-site dari beberapa situs

yang sedang anda kerjakan tercantum, dan nama PIKTI-ITS ada di salah satu

daftar itu. Banyaknya nama site yang tertulis di situ tergantung pada

banyaknya proyek yang saat itu sedang anda kerjakan.



Gambar 3.6. Daftar site yang sedang anda buat 4. Pilihlah salah satu. Jika anda ingin mengerjakan proyek website PIKTI-ITS,

pilihlah PIKTI-ITS dan seterusnya.

5. Setelah anda memilih salah satu diantaranya, Site Windows akan terbuka

dan di dalamnya local root folder yang bersangkutan telah terpilih.

3.4. Mengatur Site.

Sampai saat ini anda telah mengenal site dan teknik menciptakan site

baru. Suatu hari anda memutuskan untuk mengedit sebuah site, misalnya untuk

tujuan memindah local root folder dari satu tempat ke tempat lain, mengganti

nama site, atau menghapus sebuah site. Pada bagian ini anda akan menguasai

teknik-teknik menghapus, memodifikasi, dan menduplikasi sebuah site.

3.4.1. Menghapus Site.

Menghapus sebuah site mungkin akan anda jalankan bila sebuah proyek

pengerjaan website gagal di tengah jalan atau sudah berakhir. Jika sebuah site

terhapus maka Macromedia DreamWeaver 4 hanya menghilangkan nama site

yang dimaksud tapi dokumen-dokumen website yang tersimpan dalam local

root folder masih tetap ada.

Untuk menghapus sebuah site, langkahnya adalah sebagai berikut:

1. Masuklah ke menu Site dan kliklah Define Site…

Gambar 3.7. Define Site untuk mengatur site



2. Anda akan menemui kotak dialog baru dalam beberapa detik seperti terlihat

pada Gambar 3.8.

3. Pilihlah site yang akan anda hapus.

Gambar 3.8. Kotak dialog Define Sites 4. Bila sudah, tekanlah tombol Remove.

5. Sebuah peringatan akan muncul untuk memastikan bahwa anda benar-benar

ingin melenyapkan site yang anda maksud, sebab proses ini tak bisa di-undo.

Jika sudah yakin dan pasti kliklah Yes.

Gambar 3.9. Kotak peringatan untuk memastikan anda benar-benar serius menghapus site

3.4.2. Mengedit Site.

Mengedit site akan anda lakukan jika anda memutuskan untuk

mengubah beberapa hal, diantaranya memindah local root folder dari satu

wilayah ke tempat lain, mengubah alamat website, atau mengganti nama website

yang sedang anda buat ini.

Untuk melakukan proses pengeditan site, inilah langkah-langkahnya:

1. Pilihlah menu Site dan kemudian kliklah Define Site…

2. Kotak dialog yang sama seperti saat kita ingin menghapus site muncul

kembali.

3. Pilihlah site yang ingin anda edit.

4. Tekanlah tombol Edit.

5. Anda akan menjumpai kotak dialog yang sama seperti sat anda menciptakan

site baru. Ubahlah data-data yang ada di situ sesuai keinginan anda.



Sesudah anda selesai melakukan pengeditan sebuah site, Site Windows akan

menyesuaikan diri dengan data-data yang baru.

3.4.3. Menduplikasi Site.

Jika anda ingin menduplikasi sebuah site sehingga anda memiliki dua

site yang identik, ikutilah langkah-langkah berikut ini:

1. Sama seperti langkah di atas, pilihlah Site dan Define Site…

2. Pilihlah site yang ingin anda duplikasi.

3. Tekanlah tombol Duplicate.

4. Selesai sudah, anda akan mendapatkan satu buah site yang sama persis

dengan asalnya.

Nama site hasil duplikasi akan disertai dengan kata copy di belakangnya yang

menunjukkan bahwa site itu adalah hasil duplikasi. Untuk mengganti namanya,

lakukan langkah-langkah yang sama seperti kita mengedit sebuah site. Lalu

untuk menghapusnya, ulangi lagi dengan cara yang sama seperti saat

menghapus suatu site.

3.5. Menggunakan Site Windows.

Site window bukanlah sekadar sebuah jendela yang menampilkan daftar

dokumen-dokumen yang membangun sebuah website. Lebih dari itu, ia

memiliki pelbagai fasilitas tambahan untuk manajemen website. Sebagai contoh,

membuat subfolder baru bisa kita lakukan disini tanpa perlu menjalankan

Windows Explorer, menciptakan sebuah nama dokumen .html juga bisa

dikerjakan di sini, dan sebagainya termasuk mengecek bilamana ada sebuah

broken link.

3.5.1. Membuat Subfolder Baru.

Di bagian depan (bab 1) dijelaskan bahwa dalam satu local root folder

terdapat beberapa subfolder di mana banyak sedikitnya sesuai kebutuhan.

Fungsi subfolder semata-mata untuk mengelompokkan jenis-jenis file yang sama



ke dalam satu lokasi yang sama pula. Sebagai contoh, dokumen-dokumen

gambar tersimpan dalam satu subfolder khusus yang diberi nama “grafis”.

Membuat subfolder baru di bawah local root folder bisa kita lakukan

dengan satu diantara dua alternatif di bawah ini:

��Menggunakan Windows Explorer

��Menggunakan Site Window

Bila anda memutuskan untuk membuatnya lewat Site Windows, lakukan

langkah-langkah berikut ini:

1. Masuklah ke Site Window.

2. Pilihlah menu File.

3. Klik New Folder.

Gambar 3.10. Pilihan New Folder untuk membuat folder baru 4. Beri nama pada subfolder yang baru tercipta ini sesuai keinginan anda.

Sebagai contoh, berilah nama “grafis”.

5. Terciptalah satu buah subfolder baru, dan subfolder itu telah terdaftar di

dalam Site Window.

Di dalam subfolder “grafis” inilah kita simpan file-file jenis grafis (gambar) yang

terlibat dalam proses pengerjaan website.

3.5.2. Menciptakan File HTML Baru.

Ada dua cara untuk memulai mengerjakan sebuah dokumen baru.

Pertama, anda buat satu dokumen website dengan Macromedia DreamWeaver



dan kemudian menyimpannya dalam format HTML. Kedua, ciptakan dulu satu

buah file HTML dan setelah itu membukanya untuk diedit dengan Macromedia

DreamWeaver.

Cara kedua ini akan kita lakukan dengan Site Window. Disini kita akan

menciptakan sebuah file HTML baru dan lewat DreamWeaver kita membukanya

untuk melakukan pendesainan.

Kita akan menciptakan file “index.htm” yang merupakan halaman

pertama dan utama situs PIKTI-ITS. Langkah-langkah untuk ini adalah sebagai

berikut:

1. Pastikan bahwa local root folder F:\pikti.com dalam keadaan terpilih

(terblok) agar file index.htm yang akan kita ciptakan sebentar lagi tersimpan

di bawah local foot folder ini.

2. Pilih menu File.

3. Klik New File.

4. Berilah nama “index.htm” dan tekan Enter.

Sekarang anda memiliki file index.htm yang tersimpan dalam local root folder

F:\pikti.com. Nanti kita akan mengedit file ini dengan DreamWeaver.

Gambar 3.11. File index.htm tercipta dan telah terdaftar di dalam Site Window

3.5.3. Menghapus File dan Subfolder.

Hal ini akan kita lakukan jika ditemui sebuah file atau subfolder yang

dulu diciptakan namun perkembangannya, file atau subfolder ini tak digunakan

lagi. Menghapus file dan subfolder bisa dilakukan dengan salah satu dari tiga

cara di bawah ini.

��Menghapus dengan menggunakan Windows Explorer.



��Menghapus lewat Site Window dengan langsung menekan tombol Del atau

Delete.

��Menghapus dengan Site Window lewat langkah-langkah khusus.

Jika anda memilih langkah pertama, lakukan lewat prosedur penghapusan file

dan subfolder yang tepat dengan menggunakan Windows Explorer. Namun

sesudah anda melakukannya, jangan lupa menekan tombol Refresh yang ada di

Site Window agar jendela ini tak lagi menampilkan file atau subfolder yang telah

terhapus tadi – dengan catatan bahwa sewaktu membuat site baru anda tak

mengklik pilihan Refresh Local File Automatically.

Bila anda memilih cara kedua, pilihlah file atau subfolder yang ada di Site

Window, dan tekanlah tombol Del atau Delete yang ada di keyboard anda.

Sedangkan bila anda memutuskan untuk menggunakan cara ketiga,

pilihlah file atau subfolder yang diinginkan, tekanlah menu File lalu pilihlah

Delete.

Gambar 3.12. Menu Delete untuk menghapus file atau subfolder

3.5.4. Mengganti Nama File dan Subfolder.

Mengganti nama file atau subfolder bisa anda lakukan dengan mudah

lewat salah satu dari tiga cara berikut ini:

��Menggunakan Windows Explorer.

��Mengklik file dan subfolder yang dimaksud dan memperbarui namanya

lewat Site Window.



��Menggunakan menu Site Window.

Jika anda menggunakan cara pertama, lakukan prosedur penggantian nama file

yang telah disediakan Windows Explorer.

Jika anda memilih cara kedua, masuklah ke Site Window dan klik satu

kali pada file atau subfolder yang dimaksud sehingga kita bisa mengganti

namanya. Perbarui namanya dengan nama yang baru.

Cara ketiga dapat anda tempuh dengan memilih menu File dan kemudian

pilihlah Rename. Setelah itu, perbaruilah nama file dan subfolder yang anda

inginkan.

Gambar 3.13. Menu Rename untuk mengganti nama file atau subfolder 3.6. Menciptakan Dokumen Baru.

Saat anda masuk untuk pertama kalinya ke DreamWeaver, sebuah

lembaran dokumen baru telah disiapkan buat anda. Anda bisa langsung

mendesain web di atas dokumen itu.



Gambar 3.14. Dokumen baru telah disiapkan begitu anda memanggil DreamWeaver Namun jika anda telah mengerjakan sebuah halaman web dan ingin mulai

membuat dokumen web yang lain dari awal lagi, pilihlah menu File dan

kemudian New.

Gambar 3.15. Menu New untuk menciptakan dokumen web baru

Setiap kali anda menekan File > New untuk menciptakan dokumen baru, maka

jendela Macromedia DreamWeaver akan bertambah satu. Dengan begitu jika

sebelumnya anda mendesain sebuah halaman website, jendela tempat halaman

itu diedit tidak akan hilang. Anda bisa berpindah dari satu dokumen ke

dokumen lainnya dengan cara mengklik jendela-jendela Macromedia

DreamWeaver yang ada di taskbar.



3.7. Membuka Dokumen Web.

Anda mungkin telah mendesain sebuah halaman web dan suatu hari

ingin membukanya kembali untuk melakukan pengeditan ulang atau hanya

sekedar untuk mengamati obyek-obyek yang ada di sana.

Untuk membuka dokumen web, klik menu File dan kemudian pilihlah

Open. Setelah itu, carilah file yang dimaksud lewat kotak dialog Open File.

Gambar 3.16. Menu Open untuk membuka dokumen web

Gambar 3.17. Memilih dokumen yang akan dibuka Dokumen web yang anda buka akan ditampilkan pada satu jendela baru

DreamWeaver.

3.8. Memberi Nama Dokumen Web.

Setiap dokumen web haruslah diberi nama sesuai materi yang tersimpan

di dalamnya. Misalnya, web yang mengandung materi tentang produk-produk

akan dijual haruslah diberi nama “Produk”, atau yang lainnya. Nama-nama



setiap dokumen web akan tampil baik pada bagian atas jendela Macromedia

DreamWeaver maupun pada bagian atas jendela Browser.

Untuk memasukkan nama pada tiap-tiap dokumen web, lakukanlah cara-

cara berikut ini:

1. Pada menu Modify klik Page Properties.

Gambar 3.18. Menu Page Properties untuk mengatur dokumen web termasuk memberinya nama 2. Anda akan masuk ke kotak dialog Page Properties segera sesudahnya.

3. Pada bagian Title masuklah judul dokumen web sesuai keinginan anda.

4. Setelah selesai, tekan tombol OK.

Gambar 3.19. Masukkan nama dokumen pada bagian Title Dapat terlihat bahwa pada jendela DreamWeaver bagian atas, nama dokumen

anda tertera di situ. Selain itu, HTML Source akan mencetak tag baru pada

dokumen kita, yaitu <title>nama dokumen</title>.



Latihan.

1. Implementasikan contoh-contoh yang diberikan di atas.

2. Dosen/asisten diharapkan berimprovisasi memberikan contoh yang lebih

jelas lagi supaya mahasiswa semakin paham dengan materi bab ini.

3. Ide anda untuk membuat website pribadi anda bisa terus dilanjutkan

berdasarkan pengetahuan mengenai pendesainan website yang sudah

didapat.

Menggunakan Teks


BAB 4 MENGGUNAKAN TEKS


��Mampu memahami dan mempraktekkan pengolahan teks pada

DreamWeaver.

4.2. Memulai Teks.

Menulis teks di atas sebuah website tidaklah jauh berbeda dengan

menulis teks di atas software pengolah kata seperti halnya Microsoft Word.

Memang pemrograman website tidak menunjang beberapa kemampuan yang

bisa dilakukan Microsoft Word seperti penulisan rata kiri sekaligus rata kanan

(justify). Namun jika anda terampil saat mendesain sebuah website, masalah

seperti ini tidak begitu berpengaruh.

Begitu anda memanggil Macromedia DreamWeaver, saat itulah anda

sudah diperbolehkan untuk menuliskan teks di work area yang tersedia. Cobalah

anda menekan huruf-huruf yang ada di keyboard, maka sebaris tulisan akan

muncul di work area di monitor anda.

Gambar 4.1. Teks akan ditampilkan begitu kita menekan huruf-huruf pada keyboard Kita sadari bahwa tulisan yang muncul tadi terasa kurang indah, seperti

ditulis apa adanya. Ya memang begitu kita menuliskan sesuatu di work area,

maka akan dituliskan secara default. Untuk itu kita akan memperindahnya

sehingga tulisan itu menjadi lebih menyenangkan untuk dilihat.

Selama menggunakan teks untuk menulis kalimat di atas sebuah halaman

website, anda akan ditemani oleh Property Inspector Text. Di atas property

inspector inilah anda temukan fasilitas-fasilitas penulisan teks untuk website.

Menggunakan Teks


Gambar 4.2. Property Inspector Text

4.3. Baris dan Paragraf Baru.

Saat kita mengetik teks dan ingin memulai baris baru yang terletak di

bawah teks pertama, ada dua hal yang perlu diperhatikan. Pertama, teks diketik

sebagai baris baru dan yang kedua, teks diketik sebagai paragraf baru.

Jika teks diketik sebagai baris baru maka teks pada baris kedua dan

selanjutnya masih memiliki keterkaitan dengan baris pertama dan sebelumnya.

Dengan begitu, jika misalnya kita memberi indent atau menggunakan fasilitas

perataan alinea, semua baris yang masih saling berkaitan itu akan menyesuaikan

diri.

Namun jika teks diketik sebagai paragraf baru, maka teks pada baris

kedua dan seterusnya tidak memiliki keterkaitan dengan baris pertama dan

sebelumnya.

4.3.1. Menciptakan Baris Baru.

Jika anda ingin menciptakan baris baru, tulislah sebuah teks dan

sesudahnya tekanlah tombol Shift-Enter. Maka kursor akan berada di bawah

baris pertama dengan jarak spasi yang sangat dekat. Baris kedua ini memiliki

keterkaitan dengan baris pertama.

Gambar 4.3. Menciptakan baris baru pada teks Pada HTML Source, amatilah bahwa tercipta sebuah tag untuk menandai baris

baru ini, yaitu <br>.

Menggunakan Teks


4.3.2. Menciptakan Paragraf Baru.

Apabila anda ingin menciptakan paragraf baru, tulislah sebuah teks dan

sesudahnya tekanlah tombol Enter. Maka kursor akan berada di bawah baris

pertama dengan jarak spasi yang lebih lebar. Baris kedua ini tak memiliki

keterkaitan dengan baris pertama.

Gambar 4.4. Membuat paragraf baru pada teks Pada HTML Source, amatilah bahwa tercipta sebuah tag untuk menandai

munculnya paragraf baru ini, yaitu <p>.

4.4. Menggunakan Perataan Alinea.

Dalam Microsoft Word atau software pengolah kata lainnya terdapat

paling tidak empat fasilitas perataan alinea, yaitu: rata kiri (align left), rata kanan

(align right), rata tengah (center), dan rata kiri-kanan (justify).

Namun dalam seluruh software untuk merancang website (jadi tidak

hanya DreamWeaver tapi juga Microsoft FrontPage, ColdFusion Studio,

Netscape Composer, dan lain-lain) maka fasilitas rata kiri-kanan ini tidak akan

dijumpai. Ini dikarenakan HTML tidak mendukung format rata kiri-kanan. Ia

hanya mendukung tiga perataan alinea lainnya.

4.4.1. Rata Tengah (Center).

Begitu jenis perataan ini dipilih, maka kursor akan menempatkan diri di

tengah-tengah halaman website. Jika kemudian kita mengetik kata-kata, maka

kursor itu akan bergeser ke kanan dan karakter yang kita ketik akan bergeser ke

kiri sehingga keseluruhan teks akan nampak di bagian tengah layar.

Menggunakan Teks


Gambar 4.5. Perataan tengah Untuk melakukan pengetikan rata tengah, lakukan salah satu dari 3 cara di

bawah ini:

��Arahkan kursor mouse ke Property Inspector Text, dan temukan ikon ,

kemudian tekanlah sehingga dalam keadaan aktif . Jika sudah, mulailah

mengetik teks.

��Bukalah menu Text dan pilihlah Alignment. Sesaat kemudian muncullah

beberapa pilihan lagi. Klik Center.

Gambar 4.6. Menu Alignment Center untuk membuat perataan tengah pada teks ��Tekanlah shortcut Center yang memiliki tombol keyboard Ctrl+Alt+Shift+C.

Sesaat setelah kita memberikan perintah kepada DreamWeaver untuk meratakan

teks ke tengah, tag HTML <p align=”center”> tercipta di jendela HTML

Source.

Gambar 4.7. HTML Source mencetak tag align=”center” untuk menengahkan teks Kapan kita menggunakan rata tengah? Biasanya rata tengah dipakai untuk

menulis judul, alamat kantor atau rumah yang bisa dihubungi, nomor telepon,

alamat e-mail, tulisan hak cipta, dan lain sebagainya.

Menggunakan Teks


Sebagai latihan dalam membangun website PIKTI-ITS, tuliskan teks di

bawah ini yang memiliki format alinea rata tengah:

PIKTI-ITS Pendidikan Informatika dan Komputer Terapan ITS

Lt. 2 Gedung T. Informatika FTIF-ITS e-mail: [email protected]

Gambar 4.8. Teks di tengah biasa digunakan untuk menulis nama dan alamat

4.4.2. Rata Kiri (Align Left).

Bilamana kita memilih rata kiri dalam pengaturan alinea, maka kursor

akan berada di kiri dan terus bergeser ke kanan setiap kali kita menulis

rangkaian kalimat. Rata kiri ini adalah pilihan default perataan alinea hampir di

semua software desain website dan pengolah kata.

Untuk memilih perataan alinea rata kiri, lakukan salah satu dari tiga cara

di bawah ini:

��Arahkan kursor mouse ke Property Inspector Text dan pilihlah ikon a

sehingga dalam keadaan terpilih , dan mulailah mengetik kata-kata.

��Bukalah menu Text, pilihlah Alignment, dan carilah option Left.

Gambar 4.9. Pilihan Left untuk membuat perataan kiri ��Tekanlah shortcut Ctrl+Alt+Shift+L yang merupakan jalan pintas mengatur

rata kiri.

Setelah kita melakukan perataan alinea ke kiri, maka tag HTML pada HTML

Source akan bertambah dengan tag <p align=”left”>.

Menggunakan Teks


Kapan kita menggunakan rata kiri? Rata kiri biasanya digunakan untuk

menulis isi pesan utama dalam keseluruhan tulisan. Sebagai latihan, anda bisa

menulis tulisan semacam ini:

Selamat datang di situs kami. PIKTI-ITS merupakan pendidikan informatika terapan yang terdepan dalam kualitas pengajaran, kurikulum yang mengikuti perkembangan teknologi, laboratorium yang canggih dan terhubung dengan internet 24 jam.

Gambar 4.10. Rata kiri dipakai untuk menulis isi pesan

4.4.3. Rata Kanan (Align Right).

Jika anda memilih rata kanan, maka kursor akan berpindah ke bagian

paling kanan halaman website dan setiap kali kita menulis teks, maka kursor

akan tetap berada di kanan dan karakter yang tertulis akan bergeser ke kiri

sehingga memberi kesan teks ada di bagian kanan.

Untuk memilih perataan alinea rata kanan, pilihlah salah satu dari tiga

cara berikut ini:

��Aktifkan Property Inspector Text dan pilihlah ikon sehingga dalam

keadaan terpilih , dan mulailah menulis teks.

��Bukalah menu Text kemudian arahkan kursor mouse ke Alignment sehingga

memunculkan beberapa pilihan perataan alinea. Pilihlah Right.

Gambar 4.11. Pilihan Right untuk mengatur rata kanan ��Gunakan tombol shortcut Ctrl+Alt+Shift+R untuk melakukan perataan

kanan.

Menggunakan Teks


Selesai melakukan perataan kanan maka di HTML Source akan muncul tag

HTML baru yaitu <p align=”right”>.

Kapan kita menggunakan perataan kanan? Rata kanan memang tidak

lazim digunakan baik untuk mendesain website maupun menulis dokumen

biasa. Namun tidak ada salahnya jika kita menulis beberapa patah kata dengan

perataan kanan ini. Sebagai latihan, tulislah teks ini:

“PIKTI-ITS produce qualified people”

Gambar 4.12. Rata kanan memang kurang lazim untuk menulis dokumen

4.5. Menggunakan Indent dan Outdent.

Indent merupakan salah satu fasilitas yang berfungsi untuk mengatur

alinea. Fasilitas ini akan membuat satu bagian alinea menjorok lebih ke dalam

dibandingkan alinea-alinea lain yang tak diberi indent ini.

Sebagai contoh, lihatlah kedua contoh di bawah ini:

-tanpa indent- Selamat datang di situs kami. PIKTI-ITS merupakan pendidikan informatika terapan yang terdepan dalam kualitas pengajaran, kurikulum yang mengikuti perkembangan teknologi, laboratorium yang canggih dan terhubung dengan internet 24 jam.

-dengan indent- Selamat datang di situs kami. PIKTI-ITS merupakan pendidikan informatika terapan yang terdepan dalam kualitas pengajaran, kurikulum yang mengikuti perkembangan teknologi, laboratorium yang canggih dan terhubung dengan internet 24 jam.

Dari kedua contoh di atas, kita bisa buktikan sendiri bahwa indent akan

membuat satu alinea menjorok masuk ke dalam. Ketika bekerja dengan software

Menggunakan Teks


pengolah kata, dalam tidaknya sebuah indent dapat diukur lewat pengaturan

paragraf yang biasanya menggunakan satuan hitung seperti centimeter. Namun,

jika kita bekerja dengan website, dalam-dangkalnya sebuah indent diatur lewat

banyak sedikitnya kita memberi indent pada sebuah alinea. Misalnya jika kita

beri indent sebanyak tujuh kali maka alinea akan lebih menjorok ke dalam

dibandingkan satu kali.

4.5.1. Meletakkan Indent.

Ada dua cara untuk meletakkan indent dimana penggunaannya

tergantung pada keadaan. Pertama, sebelum mengetik sebuah alinea anda beri

indent terlebih dahulu di depan alinea itu sehingga tulisan yang kita ketik nanti

sudah dalam keadaan menjorok ke dalam. Kedua, anda sudah mengetik sebuah

alinea dan baru memberi indent.

Jika cara pertama yang ingin anda proses, maka ikuti langkah-langkah

berikut:

1. Pilih menu Text dan pilih Indent. Anda juga bisa menggunakan shortcut

Ctrl+Alt+] untuk memilih indent. Atau gunakan Property Inspector untuk

teks dan klik ikon .

Gambar 4.13. Menu Indent untuk memberi indent 2. Selanjutnya mulailah menulis alinea.

Sebaliknya, jika cara kedua yang anda inginkan, maka mulailah dengan langkah-

langkah ini:

1. Pilihlah alinea yang ingin anda beri indent dengan cara membloknya. Atau

letakkan saja kursor pada huruf pertama awal alinea.

Menggunakan Teks


Gambar 4.14. Memilih teks yang akan diberi indent 2. Pilih menu Text dan kemudian pilih Indent. Bisa juga menggunakan shortcut

Ctrl+Alt+] untuk memberi indent secara cepat. Atau pilih icon yang ada

di Property Inspector Text.

Gambar 4.15. Teks yang sudah diberi indent Cobalah untuk bereksperimen dengan mengatur alinea lebih masuk ke dalam

dengan cara memberi banyak indent.

Gambar 4.16. Teks lebih menjorok ke dalam setelah diberi banyak indent

Menggunakan Teks


Setelah anda memberi indent di atas sebuah alinea, tag HTML baru terbentuk

pada jendela HTML Source, yaitu <blockquote>. Banyaknya tag ini tergantung

pada banyaknya anda memberi indent pada sebuah alinea.

4.5.2. Menggunakan Outdent.

Outdent ini berfungsi sebagai penawar indent. Dengan kata lain, outdent

ini akan mengembalikan posisi alinea yang sudah menjorok masuk ke dalam

akibat indent ke posisi semula. Jika sebuah alinea sudah menjorok ke dalam dan

kita ingin menariknya keluar, maka gunakan outdent ini.

Langkah-langkahnya adalah sebagai berikut:

1. Pilih teks yang telah diberi indent dengan cara membloknya, atau letakkan

saja kursor pada huruf pertama sebuah alinea yang ingin di-outdent.

2. Pilih menu Text lalu klik Outdent. Anda juga bisa menggunakan shortcut

Ctrl+Alt+[. Atau gunakan ikon yang ada di Property Inspector Text.

Dalam dunia HTML, tak ada tag khusus untuk memberi outdent pada sebuah

alinea. Yang terjadi adalah tag <blockquote>, yang merupakan tag pembentuk

indent, dihapus dari script HTML sehingga alinea berada di posisi semula.

4.6. Memformat Paragraf.

Ada pelbagai macam format paragraf yang dapat menghasilkan efek

yang saling berlainan saat kita menulis sebuah teks di atas website. Beberapa

diantaranya mungkin telah kita kenal dengan baik, seperti heading 1-6 dan

preformatted text. Macromedia DreamWeaver memiliki beberapa koleksi format

paragraf, yaitu None, Paragraph, Heading 1, Heading 2, Heading 3, Heading 4,

Heading 5, Heading 6, dan Preformatted Text.

Secara default Macromedia DreamWeaver telah memilih format paragraf

jenis Paragraph. Namun bila anda tak ingin menggunakan salah satu atau semua

format paragraf yang telah disediakan, pilihlah None. Perbedaan antara Heading 1

dengan Heading 6 terletak pada ukuran font yang nanti terbentuk. Heading di

bawahnya memiliki ukuran yang lebih kecil, dan Heading 6 adalah yang

Menggunakan Teks


termungil dibanding yang lain. Sedangkan bila Preformatted Text yang anda pilih,

maka DreamWeaver akan memilih fixed-font (courier) dalam penulisan teks di

layar monitor.

Gambar 4.17. Tampilan bermacam-macam format paragraf Untuk melakukan pemformatan paragraf seperti di atas, lakukan salah satu dari

tiga cara berikut:

��Pada Property Inspector Text pilihlah format paragraf pada menu drop-down

a yang telah disediakan di sana, dengan cara mengklik tombol

berbentuk anak panah yang ada di samping kanannya.

��Pada menu Text pilihlah Paragraph Format sehingga muncul pilihan-pilihan

paragraf yang bisa anda ambil salah satunya.

Gambar 4.18. Menu untuk memilih pemformatan paragraf

Menggunakan Teks


��Gunakan kombinasi tombol keyboard untuk meluncurkan shortcut setiap

format paragraf: Ctrl+0 (None), Ctrl+Shift+P (Paragraph), Ctrl+1 (Heading 1),

dan seterusnya seperti terlihat pada gambar di atas.

Setiap kali kita menggunakan format paragraf mulai dari paragraph

heading 1-6 dan preformatted text, maka akan muncul HTML seperti di bawah

ini pada HTML Sources:

<p>Paragraph</p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <pre>Preformatted Text</pre>

Kapan kita menggunakan salah satu atau beberapa format paragraf di

atas? Sebagian besar penggunaannya ditentukan oleh kebutuhan. Paragraph atau

None sering dipakai untuk menulis isi pesan utama. Heading 1 dipakai untuk

menulis Subjudul (Subbab), Heading 2 dipakai untuk menulis Subsubjudul

(Subsubbab), dan Heading 3-6 untuk menulis isi pesan dengan beragam variasi

ukuran font. Preformatted Text biasa dimanfaatkan untuk menulis alamat,

tulisan hak cipta, dan sebagainya. Sebagai latihan, tulislah isi pesan di bawah ini

yang masih merupakan kelanjutan dari halaman pembuka PIKTI-ITS.

Fasilitas Pendukung:<ditulis dengan Heading 1> <ditulis dengan Heading 4> Di bawah ini adalah fasilitas pendukung yang dapat anda jumpai di PIKTI-ITS.

Sedangkan pada bagian alamat dan alamat e-mail, gantilah dengan Preformatted

Text dan tetap posisikan kedua teks ini di tengah-tengah halaman website.

Menggunakan Teks


Gambar 4.19. Tampilan web PIKTI-ITS setelah menggunakan beragam format paragraf

4.7. Menggunakan List.

List berarti daftar. List ini akan sering kita pakai jika kita bermaksud

mendata hal-hal yang harus ditulis dengan memakai model poin-poin atau tahap

demi tahap. List antara lain dipakai untuk mengerjakan model tulisan seperti

teks yang berisi langkah-langkah melakukan sesuatu, daftar produk, daftar

fasilitas, dan sebagainya. Langkah-langkah atau poin-poin yang terbentuk oleh

list ditandai dengan suatu karakter khusus seperti deretan angka, tanda bulatan,

dan sebagainya.

Sebagai contoh, di bawah ini adalah salah satu model list dengan angka

sebagai penandanya.

Algoritma mengganti ban mobil yang bocor:

1. Membuka baut ban.

2. Melepaskan ban yang bocor.

3. Mengganti dengan ban yang baik (tidak bocor).

4. Menutup baut ban kembali.

Sedangkan di bawah ini adalah model list lain dengan tanda bulatan sebagai

penandanya:

Teman-teman Shincan adalah:

�� Nene

Menggunakan Teks


�� Kazao �� Masao �� Bochan

Macromedia DreamWeaver 4 menyediakan tiga bentuk list yang masing-masing

memiliki kegunaan tersendiri. Ketiganya adalah Unordered List, Ordered List, dan

Definition List.

4.7.1. Unordered List.

Unordered List dipakai untuk menulis deretan kata-kata di mana antara

satu data dengan data lainnya tak memiliki hubungan langsung. Atau

keberadaan yang satu tidak mempengaruhi keberadaan data yang lain.

Antara data satu dengan data lainnya akan ditandai oleh poin-poin yang

dibentuk dari beberapa karakter khusus. Macromedia DreamWeaver 4 dengan

dukungan tag HTML telah menyediakan 2 bentuk karakter, yaitu bullet dan

square.

Di bawah ini adalah data-data yang tertulis dalam poin-poin berbentuk

bullet:

�� Tinky Winky �� Laa Laa �� Dipsy �� Po Di bawah ini adalah data-data yang tertulis dalam poin-poin berbentuk square:

��Tinky Winky

��Laa Laa ��Dipsy ��Po Bagaimana cara kita menciptakan list jenis Unordered List ini? Anda bisa pilih

salah satu dari dua cara di bawah ini:

��Akses menu Text di Property Inspector dan pilih ikon sehingga dalam

keadaan terpilih. Kemudian mulailah menulis data-datanya.

��Pilihlah menu Text dan pilih List. Dari situ akan muncul beberapa pilihan

lagi, dan klik Unordered List.

Menggunakan Teks


Gambar 4.20. Menu List untuk menciptakan Unordered List Setelah anda memilih Unordered List, akan muncul tag HTML baru di HTML

Source, yaitu <ul> dan <li>. Sebagai latihan tuliskan teks di bawah ini sebagai

kelanjutan dari halaman pembuka PIKTI-ITS.

�� Laboratorium Pemrograman dan Jaringan Komputer berspesifikasi Pentium !!! 933 MHz.

�� Satu komputer untuk satu orang. �� Ruang perkuliahan ber AC. �� Modul Kuliah yang lengkap dan perpustakaan dengan koleksi

terbaru. �� Area parkir yang aman dan dijaga 24 jam. �� Asuransi Kecelakaan.

Gambar 4.21. Unordered List pada situs PIKTI-ITS

4.7.2. Ordered List.

Ordered List dipakai untuk menulis daftar kata-kata yang memiliki

keterkaitan antara satu data dengan data yang lainnya. Data-data yang tertulis

bersifat berurutan sehingga bila satu data hilang maka urutannya menjadi tidak

Menggunakan Teks


lengkap. Ordered List ini sering dipakai untuk menulis langkah-langkah

mengerjakan sesuatu atau poin-poin lainnya yang saling berurutan. Oleh karena

sifatnya berurutan maka poin-poin ini ditandai oleh angka, baik angka Romawi

maupun angka Arab/angka biasa.

Contoh dari Ordered List ini telah disajikan pada algoritma mengganti ban mobil

yang bocor yang telah dituliskan di depan.

Untuk menggunakan Ordered List ini, pakailah salah satu cara dari dua cara

berikut ini:

��Pada Property Inspector bagian Teks pilih ikon sehingga dalam keadaan

terpilih .

�� Pilihlah menu Text dan kemudian arahkan kursor mouse ke List dan pilih

Ordered List.

Gambar 4.22. Memilih Ordered List lewat menu Setelah selesai menggunakan Ordered List, pada HTML Source akan muncul tag

baru, yaitu <ol> dan <li>. Sebagai latihan, tuliskan ordered list di bawah ini

pada halaman awal PIKTI-ITS.

Syarat Pendaftaran:

1. Fotocopy ijazah SMU/sederajat = 1 lembar. 2. Pas foto 4 x 6 = 1 lembar, 3 x 4 = 2 lembar berwarna. 3. Lulus tes seleksi (psychotest). 4. Membayar uang pendaftaran sebesar Rp. 80.000,-.

Gambar 4.23. Ordered List pada Web PIKTI-ITS

Menggunakan Teks


4.7.3. Definition List.

Definition List adalah sebuah list yang mungkin akan kita pakai bila kita

ingin mendefinisikan atau mengartikan sebuah kata dan istilah-istilah lainnya.

Terkadang kita ingin memiliki sebuah istilah atau kosakata baru dimana anda

merasa bahwa banyak orang belum begitu mengenal dan mengerti arti istilah

atau kosakata itu. Dan anda ingin menerangkannya kepada user. HTML telah

menyediakan tag khusus yang mampu membuat sebuah list yang sesuai dengan

masalah ini, yaitu Definition List.

Anatomi definition list adalah seperti berikut:

Kosakata atau istilah Penjelasannya

Sebagai contoh, kita ingin menjelaskan apa itu HTML kepada orang lain yang

mungkin belum mengenalnya. Anatominya jadi seperti ini:

HTML Adalah kependekan dari Hypertext Markup Language, sebuah script yang dipakai untuk membangun website/situs.

Untuk membuat definition list ini pada halaman website anda, lakukan langkah-

langkah berikut:

1. Pada menu Text arahkan kursor mouse ke arah List dan pilihlah Definition

List.

Gambar 4.24. Pilihan Definition List pada menu 2. Selanjutnya, tulislah kosakata atau istilah yang anda inginkan untuk

dijabarkan artinya.

3. Tuliskan arti dari kosakata atau istilah tersebut.

Segera setelah anda selesai menciptakan Definition List, tercipta sebuah tag

HTML baru yaitu <dl>, <dd>, <dt>. Sebagai referensi anda, tulislah definition

list di bawah ini dan letakkan pada halaman awal PIKTI-ITS.

Menggunakan Teks


PIKTI-ITS Adalah program pendidikan satu tahun, operator & programmer komputer.

Gambar 4.25. Definition List pada Web PIKTI-ITS

4.7.4. Menggunakan List Properties.

List Properties dipakai untuk mengatur penampakan sebuah list. Telah

disinggung di atas bahwa Unordered List memiliki poin-poin yang berbentuk

circle, bullet dan square, serta Ordered List mempunyai urutan yang ditandai

oleh angka Arab/biasa, Romawi, dan juga Abjad. Bagaimana kita mengatur agar

unordered list menggunakan square dan bukannya bullet? Atau, bagaimana

caranya agar ordered list menggunakan angka Romawi daripada angka biasa?

Lewat List Property kita akan mengatur model-model poin dan urutan angka

sesuai keinginan kita.

Sebelum anda melakukan perubahan model list dari satu bentuk ke

bentuk lainnya, akan lebih baik jika anda telah membuat sebuah list terlebih

dahulu. Baru sesudah itu kita masuk List Properties untuk melakukan

modifikasi. List yang bisa dimodifikasi lewat List Properties hanyalah Ordered

List dan Unordered List.

Ada dua cara untuk masuk ke List Properties dan anda bisa memilih

salah satunya yang anda anggap lebih praktis:

1. Lewat List Properties Text.

2. Lewat menu Text.

Menggunakan Teks


Jika anda memutuskan untuk mengambil pilihan pertama, ikutilah langkah-

langkah berikut ini:

1. Arahkan kursor dan letakkan pada list yang ingin anda modifikasi.

2. Pada Property Inspector, klik tombol . Sebagai catatan, jika

tombol ini tak anda temukan, kliklah anak panah kecil yang ada di bagian

kanan-pojok Property Inspector , sehingga Property Inspector menjadi

lebih besar ukurannya.

Gambar 4.26. Property Inspector dalam ukuran lebih besar 3. Anda akan menjumpai kotak dialog List Properties (lihat Gambar 4.27)

tempat memodifikasi list. Jika anda ingin melakukan modifikasi, pilihlah

bentuk-bentuk list yang anda inginkan. Di bagian Start Count anda bisa men-

seting mulainya urutan angka pada Ordered List.

4. Kemudian tekanlah tombol OK.

Gambar 4.27. Kotak dialog List Properties untuk mengatur penampakan list Jika anda menggunakan cara kedua, lakukan langkah-langkah berikut ini:

1. Arahkan kursor dan letakkanlah pada list yang ingin anda modifikasi.

2. Selanjutnya pada menu Text arahkan kursor ke List dan pilihlah Properties.

Gambar 4.28. Mengatur list lewat menu 3. Anda akan menjumpai kotak dialog List Properties yang sama dengan yang

pernah kita jumpai pada cara pertama. Lakukanlah modifikasi di sana.

Menggunakan Teks


4.8. Menggunakan Font.

Font adalah salah satu elemen yang menentukan indah tidaknya

tampilan sebuah dokumen, tidak hanya website saja, tapi karya tulis pada

umumnya. Font sendiri adalah Bahasa Inggris untuk menyebut huruf. Font di

Microsoft Wird hampir tak terbatas jumlahnya karena setiap saat kita bisa

menginstall font baru dari bentuk yang sangat formal sampai yang funky.

Banyaknya font di dalam sistem komputer memberi peluang yang sangat

longgar bagi para desainer untuk mengatur tipografi sebuah website sekreatif

mungkin. Pada bagian ini kita akan mengenal font-font yang biasa dipakai untuk

mendesain website dan bagaimana cara mendayagunakan font-font itu lebih

jauh.

4.8.1. Memilih Font.

Variasi font pada website sangat luas mengingat banyaknya font yang

ada di sistem komputer, tapi hanya beberapa saja di antaranya yang paling

sering dipakai. Koleksi-koleksi font yang paling banyak digunakan antara lain:

Arial, Verdana, Times New Roman, dan Courier.

Macromedia DreamWeaver telah menyediakan beberapa kumpulan

koleksi font yang diletakkan pada sistem mereka, yaitu kelompok Arial, Helvetica,

Sans-Serif, kelompok Times New Roman, Times, Serif, kelompok Courier New,

Courier, Mono, kelompok Georgia, Times New Roman, Times, Sans Serif, kelompok

Verdana, Arial, Helvertica, Sans Serif, dan kelompok Geneva, Arial, Helvetica, Sans

Serif. Pengelompokan ini mungkin didasarkan pada kemiripan antarfont yang

ada dalam setiap kelompok.

Satu lagi jenis font yang ada di dalam koleksi Macromedia DreamWeaver

4 yaitu Default Font. Jika anda memilih font ini untuk menulis kata-kata pada

website anda, maka web anda akan ditampilkan di browser berdasarkan jenis

huruf yang ada di Browser Preferences.

Cara meletakkan font di atas website ada 2 macam, yaitu:

Menggunakan Teks


��Pada Property Inspector Text pilihlah font yang diinginkan dengan mengklik

drop-down menu font . Kemudian pilih salah satu koleksi

yang ada, dan sesudahnya tuliskan kata-kata anda.

��Pada menu Text arahkan kursor mouse di atas Font agar muncul pilihan-

pilihan font. Klik koleksi font yang anda inginkan. Dan sesudah itu, tuliskan

kata-kata anda.

Gambar 4.29. Memilih font lewat menu Segera setelah anda selesai memilih salah satu font di HTML Source, terbentuk

tag HTML baru, yaitu <font face=”namafont”>.

4.8.2. Mengganti Font.

Jika cara di atas kita lakukan pemilihan font terlebih dahulu dan

kemudian menulis kata-kata yang ada di dalam pikiran kita, maka pada bagian

ini kita melakukan teknik yang berlawanan. Di sini kita akan menulis kata-kata

dengan salah satu jenis font dan bermaksud menggantinya dengan font lain.

Langkah-langkah untuk mengganti font sebuah kata atau kalimat dengan

font lain adalah sebagai berikut:

1. Pilihlah kata atau kalimat yang ingin diganti jenis hurufnya dengan cara

membloknya.

2. Gantilah font itu dengan yang baru dengan cara memilih font pengganti.

Caranya bisa anda lihat saat kita memilih font di atas, yaitu lewat Property

Inspector Text atau Menu Text.

Menggunakan Teks


Sebagai latihan, gantilah kata “PIKTI-ITS” yang ada di Definition List dari

Defaulf Font menjadi font yang termasuk koleksi Geneva.

Gambar 4.30. Teks dipilih dengan cara diblok

Gambar 4.31. Teks yang dipilih telah berganti font

4.8.3. Default Font dalam Browser.

Seperti telah kita singgung sedikit, bila kita memilih default font maka font

yang terpakai pada sebuah website akan disesuaikan dengan font yang ada di

Browser Preferences. Hal ini patut anda pahami agar tidak terjadi distorsi jenis

font saat anda mendesain website dengan pada saat website itu dipublikasikan

ke browser. Misalkan anda memilih default font dan merasa bahwa font yang

tertulis saat mendesain website berjenis mirip Times New Roman, namun saat

ditampilkan di jendela browser bentuknya mirip Arial. Hal ini bisa terjadi karena

browser memilih Arial sebagai default font mereka.

Menggunakan Teks


Sebagai contoh, lihatlah gambar di bawah ini yang menggambarkan

perbedaan jenis font saat website didesain dan saat ditampilkan di jendela

browser.

Gambar 4.32. Jenis font saat web didesain dan dimunculkan dalam browser bisa berbeda Pada gambar di atas, font menggunakan default font yang lebih mirip Times

New Roman. Namun setelah ditampilkan di jendela browser (gambar bawah),

font itu berubah wujud menjadi font jenis Comic Sans MS. Hal ini terjadi karena

default font yang dipakai browser adalah Comic Sans MS. Kesimpulannya, bila

anda memilih default font untuk merancang website maka anda telah

memutuskan untuk menggunakan default font yang dipakai oleh browser di

mana font itu telah diseting lewat Browser Preferences.

Cara mengecek jenis font yang digunakan browser adalah sebagai berikut:

1. Jankan browser anda. Sebagai contoh anda memakai Netscape Navigator.

2. Pilih menu Edit > Preferences.

Gambar 4.33. Menu Preferences pada browser 3. Pilih kategori Appearance > Fonts.

Menggunakan Teks


Gambar 4.34. Kotak dialog Preference bagian Font untuk mengatur default font 4. Di bagian kanan pada kotak dialog Preference anda bisa memilih jenis font

untuk masing-masing kebutuhan, yaitu:

��For the Encoding: font yang dipakai untuk meng-encoding data.

��Variable Width Font: font yang dipakai sebagai default font untuk browser.

��Fixed Width Font: font yang dipakai untuk hal-hal tertentu seperti mengisi

form.

Jika anda ingin men-seting jenis font yang nantinya akan dipakai sebagai default

font bagi browser, pilihlah font yang anda inginkan pada Variable Width Font.

Kemudian muncul kasus lain lagi, sebuah kasus yang sebenarnya jarang

terjadi namun cukup mengganggu. Saya telah memilih salah satu jenis font,

seperti Arial, tapi browser tetap menggunakan default font mereka. Bagaimana

mengatasinya?

Cobalah kembali lagi ke Browser Preferences, dan cobalah lihat ketiga

option yang mereka sediakan di bawah ini:

��Use my default fonts, overriding document-specified fonts.

��Use document specified fonts, but disable Dynamic Fonts.

��Use document specified fonts, including Dynamic Fonts.

Menggunakan Teks


Gambar 4.35. Option lain untuk mengatur default font Bila pilihan jatuh pada option pertama, maka browser akan tetap menggunakan

default font meskipun pada saat mendesain website kita gunakan font pilihan

sendiri. Untuk mengatasinya maka pilihlah option ketiga.

4.8.4. Menambah Koleksi Font.

Macromedia DreamWeaver telah menyediakan enam koleksi font pada

sistem mereka. Namun kita bisa menambahi sendiri koleksi font tadi. Untuk

menambah font sendiri ke dalam koleksi DreamWeaver, lakukan salah satu dari

2 langkah berikut ini:

��Pada Property Inspector bagian Text, klik menu drop down Font

dan kemudian pilihlah Edit Font List.

��Pada menu Text arahkan kursor mouse ke Font dan kemudian pilih Edit Font

List.

Gambar 4.36. Menambah font lewat menu Baik langkah pertama maupun langkah kedua jika dijalankan akan

membawa kita masuk ke kotak dialog baru, yaitu kotak Edit Font List. Lanjutkan

dengan langkah-langkah berikut ini:

Menggunakan Teks


Gambar 4.37. Menambah dan mengurangi font pada kotak dialog Edit Font List 1. Pada bagian Available Fonts, anda bisa lihat daftar font yang ada di dalam

sistem Microsoft Windows anda.

Gambar 4.38. Daftar font dalam sistem Microsoft Windows 2. Carilah dan pilihlah font yang ingin dimasukkan ke dalam koleksi font

DreamWeaver dengan cara mengkliknya sampai terblok.

3. Jika sudah terblok maka tombol sudah dalam keadaan aktif dan

tekanlah tombol ini untuk memindah font yang anda pilih ke kotak Chosen

Fonts.

Gambar 4.39. Font yang terpilih dan sudah berada pada bagian Chosen Font 4. Segera sesudah anda memindah sebuah font ke kotak Chosen Fonts, huruf

yang anda maksud itu sudah masuk ke dalam koleksi font DreamWeaver.

Lihatlah kotak Font List untuk membuktikannya. Setelah itu klik tombol OK.

Gambar 4.40. Font yang ada pada Chosen Font telah masuk ke koleksi font DreamWeaver

4.8.5. Mengurangi Koleksi Font.

Font yang dihilangkan dari koleksi font di DreamWeaver, bukan berarti

file font itu terhapus. File itu tetap ada namun tak dipakai DreamWeaver. Untuk

Menggunakan Teks


memakainya lagi, anda harus menambahnya ke dalam koleksi font yang caranya

baru saja diulas tadi.

Untuk mengurangi koleksi font dengan cara mengeluarkan salah satu

font dari sana, ikuti langkah-langkah di atas agar kita masuk lagi ke kotak dialgo

Edit Font List.

Jika sudah masuk lagi, ikuti langkah-langkah berikut ini:

1. Dalam kotak Font List pilihlah nama font yang ingin dikeluarkan dari koleksi

font dengan cara mengkliknya.

2. Font yang anda pilih telah masuk ke kotak Chose Font.

3. Pilihlah font yang ada di Chosen Font dengan cara mengklik sehingga

tombol dalam keadaan aktif. Kliklah tombol ini sehingga font yang anda

pilih itu kembali ke kotak Available Fonts.

4. Maka font itu kemudian keluar dari koleksi font DreamWeaver.

5. Tekan OK untuk mengakhirinya.

4.9. Mengatur Ukuran Font.

HTML menyediakan atribut yang berfungsi untuk mengatur ukuran font

yang dipilih. Dengan DreamWeaver kita tak perlu mencari atribut HTML yang

dimaksud sebab mengganti ukuran font sangatlah mudah. Ukuran font dalam

dunia pemrograman website memiliki 7 tingkat ukuran. Tingkat pertama akan

membuat font yang bersangkutan sangat kecil, sedangkan tingkat ketujuh akan

membuatnya sangat besar.

Secara default DreamWeaver menggunakan ukuran tingkat ke-3 untuk

setiap kata yang diketik. Coba lihat gambar di bawah ini untuk mengamati

perbandingan tiap-tiap ukuran font dari masing-masing tingkatan:

Menggunakan Teks


Gambar 4.41. Beragam ukuran font pada website Selain tujuh tingkatan di atas, ukuran font juga bisa diatur berdasarkan ukuran

relatifnya. Kita akan mempelajari keduanya.

4.9.1. Memilih Ukuran Font.

Pertama kali kita akan mencoba untuk mengatur besar kecilnya font

lewat ukuran font yang telah disediakan, baik oleh tag HTML maupun oleh

DreamWeaver.

Untuk mengganti ukuran font, pilihlah salah satu dari dua cara berikut

ini:

��Pada Property Inspector Text, pilihlah menu drop-down Size dan

pilihlah ukuran font yang anda maksud.

��Pada menu Text arahkan kursor mouse ke Size dan pilihlah ukuran font yang

anda inginkan.

Menggunakan Teks


Gambar 4.42. Memilih ukuran font lewat menu Sebagai catatan, bila dipilih Default maka font akan diset dalam ukuran 3.

Sesudah anda memilih salah satu ukuran font, maka pada HTML Source

akan muncul tag HTML baru, yaitu <font size=”ukuran”>.

4.9.2. Mengatur Ukuran Relatif.

Selama bisa mengatur ukuran font lewat cara-cara di atas, yaitu memilih

salah satu tingkatan ukuran font, kita bisa mengatur ukuran font berdasarkan

ukuran relatif font.

Seperti pernah disinggung, ukuran default yang digunakan

DreamWeaver adalah ukuran font tingkat 3. Ukuran pada tingkat ini dianggap

sebagai Base Font. Dari sini muncul variasi lain untuk mengatur ukuran huruf

berdasarkan basefont ini.

Ukuran relatif adalah ukuran yang ditambahkan pada basefont ini.

Cobalah lihat pada Property Inspector Text bagian menu drop down Size. Di

sana ada ukuran font dari +1 s/d +7 dan –1 s/d –7. Ukuran ini disebut ukuran

relatif yang berbeda dengan ukuran biasa yang tidak disertai tanda plus dan

minus di depannya. Jika kita memilih salah satu dari ukuran relatif ini, maka

ukuran ini akan ditambahkan pada basefont. Lihatlah hitungan berikut ini:

Base Font Ukuran Font Relatif Ukuran Font Akhir 3 +1 4

3 +2 5

3 +3 6

Menggunakan Teks


3 +4 7

3 +5 7

3 +6 7

3 +7 7

3 -1 2

3 -2 1

3 -3 1

3 -4 1

3 -5 1

3 -6 1

3 -7 1

Tabel 4.1. Ukuran relatif sebuah font Di kotak paling kanan, bagian Ukuran Font Akhir, adalah ukuran font

yang anda dapatkan dari ukuran font relatif. Berhubung ukuran font maksimal

berada pada tingkat 7, maka di atas ukuran relatif +4 ukuran yang akan anda

dapatkan tetap 7. Dan berhubung ukuran font minimal adalah 1, maka di atas

ukuran relatif –2 anda akan tetap mendapat ukuran font akhir 1.

Untuk menggunakan ukuran font relatif ini, pilihlah salah satu dari 3 cara

berikut ini:

��Pada Property Inspector Text, pilihlah ukuran relatif font mulai dari +1

sampai –7.

��Pada menu Text arahkan kursor mouse pada Size Change bila anda ingin

menggunakan ukuran relatif dari +1 s/d +7. Pilihlah ukuran relatif yang

anda kehendaki.

Gambar 4.43. Menu Size Change (positif) menyediakan ukuran font relatif +1 s/d +7

Menggunakan Teks


��Pada menu Text arahkan kursor mouse pada Size Change bila anda ingin

menggunakan ukuran relatif dari –1 s/d –7. Pilihlah ukuran relatif yang

sesuai dengan kebutuhan anda.

Gambar 4.44. Menu Size Change (negatif) menyediakan ukuran font relatif -1 s/d -7

4.10. Mengganti Warna Font.

Warna font merupakan salah satu elemen yang tak kalah pentingnya di

samping elemen-elemen yang lainnya dalam menentukan baik tidaknya desain

sebuah website. Mengingat kartu grafis komputer mengalami perkembangan

yang sangat pesat, kombinasi warna yang bisa kita dapat semakin bertambah

banyak, bahkan terkesan tak terbatas.

Kita akan membuktikan sendiri bahwa warna yang telah disediakan

DreamWeaver seolah-olah tanpa batas sebab bisa mencapai ribuan kombinasi

warna. DreamWeaver sendiri telah menyediakan koleksi warna-warna di mana

kita bisa langsung memilih salah satu diantaranya. Namun DreamWeaver juga

memberi kebebasan bagi kita untuk mencampur warna-warna sendiri sampai

mendapatkan kombinasi warna yang sesuai dengan suasana hati kita.

Untuk memilih warna font, lakukan salah satu cara berikut ini:

��Pada Property Inspector Text, pilihlah ikon text color sampai ia

menampilkan jendela baru yang berisi daftar warna yang lumayan

banyaknya. Pilihlah salah satu warna yang ada di sana.

Menggunakan Teks


��Pada menu Text pilihlah dan kliklah tombol kanan mouse di atas Color…

Segera sesudahnya, anda akan masuk ke kotak dialog Color tempat anda

memilih warna-warna yang tersimpan di situ.

Gambar 4.45. Memilih warna lewat sebuah menu

Gambar 4.46. Kotak dialog Color tempat berkumpulnya ribuan warna

4.10.1. Memilih Warna dengan Menggunakan Pipet.

Pipet adalah alat yang biasa dipakai oleh para kimiawan untuk menyedot

sedikit cairan masuk ke dalamnya. Pipet ini di dalam dunia software komputer

sudah sangat dikenal dan dimanfaatkan secara luas pada software grafis. Kini

DreamWeaver pun memiliki pipet ini.

Pipet dalam dunia software grafis berfungsi untuk mengambil warna

yang ada di sekitar layar komputer. Sebagai contoh, kita tertarik oleh sebuah

Menggunakan Teks


warna yang ada di salah satu tampilan pada layar monitor tetapi kita tak tahu

kombinasi warna apa yang membentuknya. Untuk mengatasi permasalahan ini,

gunakanlah pipet untuk mengambil informasi warna itu sehingga software

secara otomatis meletakkan warna itu ke dalamnya.

Untuk memakai pipet ini, kliklah ikon dan setelah itu muncullah

jendela baru yang berisi banyak warna. Kursor mouse secara otomatis akan

berubah menjadi pipet secara default. Sekarang arahkan pipet ini kemanapun

yang anda suka – ke daerah yang memiliki warna yang menarik perhatian anda.

Jika sudah, klik tombol kiri mouse dan informasi warna ini tersimpan dalam

koleksi warna DreamWeaver. Setiap kali pipet melintas ke daerah yang memiliki

warna tertentu, warna yang ada pada DreamWeaver juga berubah-ubah.

4.10.2. Memilih Warna yang Diinginkan.

Warna yang telah disediakan DreamWeaver seperti gambar di atas

memang banyak jumlahnya. Namun terkadang bagi sebagian orang koleksi

warna di atas belumlah cukup. Jika demikian yang terjadi maka orang-orang itu

harus meramu warna sendiri. Meramu warna berarti mengkombinasikan unsur-

unsur warna sehingga membentuk satu warna baru.

Seperti telah kita ketahui, banyaknya warna di layar monitor

dilatarbelakangi oleh bercampurnya tiga unsur warna yaitu RGB (Red Green

Blue). Setiap unsur warna memiliki 256 tingkatan. Jika kita mengkombinasikan

tingkatan ini antarketiga unsur warna itu, maka akan dihasilkan warna-warna

solid yang banyak jumlahnya (65.536 warna).

Untuk meramu warna sendiri, lakukan satu dari dua cara berikut ini:

Informasi warna di daerah ini akan selalu berubah-ubah sesuai dengan daerah yang dilalui pipet

Menggunakan Teks


��Pada Property Inspector Text, klik ikon Text Color dan setelah itu,

pilihlah ikon yang ada di bagian kanan atas jendela warna.

��Pada menu Text kliklah Color…

Baik dengan cara pertama maupun kedua, anda akan masuk ke kotak dialog

Color seperti terlihat pada gambar di bawah ini:

Gambar 4.47. Kotak dialog Color tempat meramu warna Jika sudah ada di kotak dialog Color seperti gambar di atas, lanjutkan dengan:

1. Di bagian kanan terdapat kotak warna yang sangat besar. Disitulah anda

memilih warna yang ingin anda dapatkan dengan cara menggeser ikon yang

berbentuk cross (tanda silang).

Gambar 4.48. Pilihlah warna pada kotak besar ini 2. Di sebelah kanannya lagi, tempat warna berada di kotak yang tegak lurus ke

atas, anda bisa atur terang gelapnya warna yang telah anda pilih pada kotak

pertama. Aturlah terang gelapnya dengan cara menggeser slider ke atas dan

ke bawah.

Gambar 4.49. Kotak tempat menentukan terang gelapnya sebuah warna

Menggunakan Teks


3. Selain bisa memilih kombinasi warna lewat kedua cara di atas anda juga bisa

langsung memasukkan kombinasi angka pada kotak RGB yang ada di bagian

bawah atau pada kotak Hue, Sat, Lum yang ada di samping kirinya.

4. Jika sudah menemukan kombinasi warna yang tepat, tekanlah tombol ini

a dan warna masuk ke salah satu kotak warna di

bagian Custom Color.

5. Setelah anda menekan tombol OK, maka warna hasil ramuan sendiri itu akan

dipakai untuk mewarnai teks anda.

Sebagai tip, selain dengan cara memilih warna secara langsung seperti

telah diuraikan tadi, anda juga bisa menulis nama warna itu lewat sebutannya

atau kombinasi angka heksadesimalnya di sebuah kotak di samping kanan ikon

Text Color.

Setelah anda memberi warna pada teks, maka HTML Source akan

ketambahan tag HTML baru, yaitu <font color=”warna”>.

4.10.3. Mengatur Warna Font Default.

Teks yang pertama kali tertulis dalam halaman web sudah dalam

keadaan berwarna. Dan warna yang dipilih biasanya hitam. Warna hitam ini

telah menjadi warna default untuk teks yang kita ketik. Warna ini akan berubah

jika kita mengganti warna dengan cara-cara yang baru saja kita pelajari.

Untuk mengganti warna teks pada dokumen kita secara default, dan

warna ini akan terus dipakai jika teks tidak kita poles dengan warna lain, ikutilah


1. Pada menu Modify kliklah Page Properties.

2. Anda akan masuk ke kotak dialog Page Properties segera sesudahnya.

3. Pada bagian Text kliklah ikon warna yang ada di situ dan

pilihlah warna favorit anda.

4. Setelah selesai kliklah OK.

Kini mulailah mengetik teks dan amatilah bahwa teks telah berubah

warna secara otomatis. Warna ini akan dijadikan warna default, yaitu warna

yang akan terus dipakai jika anda tidak menggantinya dengan warna lain.

Menggunakan Teks


4.11. Mengatur Gaya Font.

Seperti pengolah kata pada umumnya, teks yang ada di atas website bisa

kita atur gayanya. Dengan beragam gaya yang telah disediakan DreamWeaver,

kita bisa membuat teks menjadi lebih tebal, miring, bergaris bawah, dan banyak

lagi yang lain. Penggunaannya bisa untuk mempercantik tampilan, mempertegas

kata-kata yang di dalam website, atau untuk beragam keperluan lainnya.

DreamWeaver telah menyediakan banyak gaya yang bisa kita pakai,

yaitu: Bold, Italic, Underline, Strikethrough, Teletype, Emphasis, Strong, Code,

Variable, Sample, Keyboard, Citation, dan Definition.

Untuk melihat hasil akhir gaya-gaya font tersebut atas sebuah kalimat,

perhatikan gambar 4.50 di bawah.

Gaya-gaya tersebut bisa dikombinasikan satu dengan yang lainnya,

seperti Bold-Italic, Strikethrough-Undeline, dan banyak lagi. Untuk setiap gaya

font, HTML Source menciptakan tag-tag HTML baru, yaitu:

Gambar 4.50. Beragam gaya font pada website

Menggunakan Teks


Gaya Font Tag HTML Bold <b>

Italic <i>

Underline <u>

Strikethrough <s>

Teletype <tt>

Emphasis <em>

Strong <strong>

Code <code>

Variable <var>

Sample <samp>

Keyboard <kbd>

Citation <cite>

Definition <dfn>

Tabel 4.2. Gaya-gaya font dan tag yang membentuknya

4.11.1. Mengatur Gaya Font.

Sekarang saatnya memberi gaya pada font. Untuk memberi gaya pada

font supaya teks yang kita tulis memberi kesan tersendiri, pilihlah salah satu cara

dari dua cara berikut ini:

��Pada Property Inspector Text, pilihlah ikon Bold untuk menebalkan teks

atau ikon Italic untuk memiringkan teks. Sayangnya Property Inspector

tidak menyediakan ikon untuk gaya-gaya yang lain.

��Pada menu Text arahkan kursor pada bagian Style sehingga muncul menu

baru tempat anda bisa memilih salah satu gaya yang ada di sana. Koleksi

gaya yang tertulis disini lebih lengkap daripada yang ada di Property

Inspector Text.

Menggunakan Teks


Gambar 4.51. Koleksi gaya font lebih lengkap jika kita mencarinya lewat menu

4.12. Menulis Karakter Khusus.

Karakter khusus adalah karakter yang tak akan anda jumpai pada

keyboard. Keyboard dari dulu sampai sekarang memiliki kombinasi karakter

hampir sama sepanjang tahun. Dan ini menyulitkan kita untuk menulis karakter-

karakter khusus, seperti lambang copyright ©, trade mark ™, registered ®, dan

lain-lain. Karakter-karakter semacam itu tak bisa dijumpai pada keyboard anda

apapun merknya dan siapapun produsennya.

Jika pengolah kata mampu melakukannya, maka DreamWeaver pun tak

mau kalah. Ia menyimpan beragam karakter khusus yang mereka letakkan di

Objects Pallete bagian Character.

Untuk menemukannya, ikuti langkah berikut ini:

1. Temukan Objects Pallete di working area DreamWeaver.

Gambar 4.52. Objects Pallete Common Panel

Menggunakan Teks


2. Jika anda tak menemukannya, cobalah membuatnya tampak dengan

menekan kombinasi tombol Ctrl+F2 atau masuk ke menu Window dan pilih

Objects.

3. Di bagian atas pojok kanan terdapat tanda segi tiga kecil yang di samping

kirinya tertulis nama objects pallete yang bersangkutan . Klik

tanda segi tiga tersebut sehingga muncul jendela baru.

4. Pilihlah Character sehingga Objects Pallete berubah menjadi Objects Pallete

Character seperti gambar di bawah ini.

Gambar 4.53. Objects Pallete Character Panel Di dalamnya terdapat karakter-karakter khusus yang diwakili tiap-tiap

ikon berturut-turut dari kiri ke kanan dan seterusnya sampai ke bawah, yaitu:

��Line Break

��Non-breaking Space

��Copyright

��TradeMark

��Registered

��Poundsterling

��Yen

��Euro

��Em-Dash

��Left Quote

��Right Quote

Menggunakan Teks


�� Insert Other Character

Setiap kali anda menekan ikon-ikon yang ada di sana, maka di halaman

website akan tertulis karakter-karakter khusus. Setelah anda memasukkannya,

pada HTML Source akan terbentuk tag HTML baru, yaitu:

Karakter Tag HTML Line Break <br>

Non-breaking Space &nbsp

Copyright &copy

TradeMark &reg

Registered &#153

Poundsterling &pound

Yen &yen

Euro &euro

Em-Dash &#151

Left Quote &#147

Right Quote &#148

Insert Other Character & …….

Tabel 4.3. Karakter khusus dengan tag HTML pembentuknya

4.12.1. Menyisipkan Karakter Lain.

Karakter-karakter khusus yang tersimpan dalam Objects Pallete hanyalah

sebagian dari seluruh karakter yang ada di DreamWeaver. Jika anda ingin

menyisipkan karakter lain yang belum tercantum di dalam Objects Pallete, klik

ikon .

Setelah itu anda akan masuk ke kotak dialog Insert Other Character.

Pilihlah salah satu karakter yang ada disana.

Menggunakan Teks


Gambar 4.54. Memilih karakter khusus yang belum terdapat di Objects Pallete

4.13. Menggunakan HTML Style.

Di akhir bab ini, kita akan menggunakan salah satu fasilitas penulisan

teks yang telah disediakan DreamWeaver, yaitu yang disebut dengan HTML

Style. HTML Style adalah semacam kumpulan shortcut yang akan menciptakan

satu baris tag HTML secara otomatis begitu kita memilih salah satu shortcut

yanga ada di sana.

Mungkin saat ini anda sedang mendesain website dengan cara menulis

tag-tag HTML di jendela HTML Source. Tidak menutup kemungkinan bahwa

selama anda berproses mendesain itu, anda menulis tag HTML yang sama

berulang kali setiap saat. Akibatnya, anda menjadi bosan, lelah, dan waktu

terbuang percuma.

HTML Style dihadirkan oleh DreamWeaver untuk menjawab keluhan ini.

HTML Style berisi kumpulan shortcut di mana bila kita memilihnya, maka

DreamWeaver akan menulis tag yang dimaksud secara otomatis buat kita. Jika

tag itu harus ditulis berulang kali, kita tak perlu menulisnya lagi; cukup

menekan shortcut itu berulang-ulang sesuai kebutuhan dan tag HTML akan

tertulis langsung di HTML Source.

Untuk menggunakan HTML Style, pilihlah ikon ini yang terletak di

bagian Launcher. Perhatikan gambar di bawah ini:

Menggunakan Teks


Gambar 4.55. Tampilan Launcher

Gambar 4.56. Tampilan jendela HTML Style Sebagai latihan, pada halaman muka PIKTI-ITS lakukan langkah-langkah

berikut ini:

1. Pada HTML Style pilihlah shortcut Copyright.

Gambar 4.57. Memilih Copyright yang ada di dalam HTML Source 2. Kemudian tulislah: PIKTI Design.

Sekarang cobalah amati di jendela HTML Source. Begitu kita memilih

shortcut Copyright, DreamWeaver akan secara otomatis menciptakan tag di

bawah ini buat anda:

<p align="center"><i><font face="Georgia, Times New Roman, Times, serif" size="1">PIKTI Design </font></i></p>

Dan hasilnya, tulisan PIKTI Design tercetak di tengah halaman website

dengan font dan tampilan lainnya yang khas. Cobalah dengan shortcut lainnya,

dan tag-tag HTML yang berbeda-beda akan tercipta secara otomatis juga.

Menggunakan Teks


Gambar 4.58 Tulisan Copyright seperti di atas muncul berkat HTML Style

4.13.1. Menciptakan HTML Style Sendiri.

Jika shortcut yang telah disediakan tak ada yang sanggup menciptakan

deretan tag seperti yang anda perlukan, maka ciptakanlah shortcut sendiri.

HTML Style menawarkan kemudian bagi Anda jika mau merancang shortcut

HTML sendiri termasuk tag-tag apa saja yang akan tercetak secara otomatis

begitu shortcut ini diklik.

Untuk menciptakan HTML Style baru karangan anda sendiri, ikuti

caranya berikut ini:

1. Pada HTML Style, kliklah ikon yang ada di kanan bawah atau ikon a

yang ada di kanan atas, lalu pilihlah New.

2. Anda akan masuk ke kotak dialog Define HTML Style.

Menggunakan Teks


Gambar 4.59. Kotak dialog Define HTML Style 3. Pada bagian Name masukkan nama HTML Style ciptakan anda.

4. Pada bagian Apply To tentukan apakah HTML Style ini hanya dikhususkan

untuk teks atau keseluruhan paragraf. Jika hanya untuk teks tertentu,

pilihlah option Selection. Namun bila berlaku untuk keseluruhan paragraf,

pilihlah Paragraph.

5. Pada bagian When Applying, putuskanlah apakah HTML Style akan

menghapus tag sebelumnya yang telah ada atau membiarkan tag itu tetap

eksis dan kemudian menambahi style ini di samping kanan tag itu. Jika anda

memutuskan untuk menghapus tag sebelumnya, pilihlah Clear Existing Style

dan jika sebaliknya, pilihlah Add to Existing Style.

6. Di bagian Font Attributes tentukan atribut-atribut yang menempel pada tag

font.

7. Di bagian Paragraph Attributes tentukan atribut-atribut yang menempel pada

tag paragraph. Bagian ini akan aktif jika pada langkah keempat anda memilih

Paragraph.

8. Jika sudah selesai, tekan tombol OK.

Mungkin anda masih merasa ganjil dengan langkah-langkah di atas. Maka agar

dalam menerangkannya secara lebih detil dan mantap, akan diberikan latihan

dan contoh-contoh konkrit.

Di bagian Apply to anda menjumpai dua pilihan ini:

�� Selection

Menggunakan Teks


��Paragraph

Jika anda memilih option Selection, maka tag yang anda buat nanti hanya

berpengaruh pada sebuah teks saja. Sebagai contoh pilihlah HTML Style a+Bold

atau belum ada buatlah dengan cara seperti di atas.

Selanjutnya mulailah mengetik teks. Cobalah perhatikan bahwa teks berubah

menjadi tebal. Kini amati di HTML Source, dan anda akan temukan tag bold

yang berbentuk <b> dan </b> di antara teks yang anda tulis tadi.

Namun bila anda memilih option Paragraph, maka tag yang anda buat akan

berpengaruh pada keseluruhan paragraf. Sebagai contoh, pilihlah HTML Style

Copyright, dan mulailah mengetik teks. Cobalah perhatikan bahwa teks berada

di tengah. Kini amati jendela HTML Souce, dan anda akan temukan tag paragraf

yang berbentuk <p> dan </p> di antara teks yang anda tulis tadi. Paragraf

tersebut akan menset tulisan selalu berada di tengah karena ada atribut align=

“center”. Setiap teks yang anda tulis akan terletak di antara tag paragraf ini

yang menyebabkan teks anda akan selalu berada di tengah.

Kesimpulan yang bisa anda tarik, jika anda memilih option Paragraph maka

anda membiarkan DreamWeaver menciptakan tag paragraf <p> sehingga setiap

teks yang tertulis di dalamnya akan mengikuti perataan paragraf itu. Sedangkan

bila anda memilih Selection, maka teks tidak terpengaruh pada perataan

paragraf.

Sekarang di bagian When Applying anda akan temukan dua pilihan semacam ini:

��Add to Existing Style

��Clear Existing Style

Menggunakan Teks


Jika anda memilih yang kedua, maka tag yang semula anda ciptakan akan

ditutup dengan tag penutup </…>. Namun jika pilihan pertama yang anda

putuskan, maka tag itu tidak akan ditutup sehingga tag yang baru masih

terpengaruh oleh tag sebelumnya. Jika anda memilih option pertama, maka

HTML Style akan menambah tanda (+). Sedangkan bila option kedua yang anda

inginkan, maka tidak diberi tanda apapun.

Sebagai contoh, pilihlah HTML Style a+Red, dan mulailah mengetik teks di atas

website anda. Maka tulisan berwarna merah. Sekarang, pilihlah HTML Style

a+Bold dan teruskan mengetik teks, maka teks akan berwarna merah dan tebal.

Merahnya warna teks itu karena HTML Style a+Red menggunakan pilihan Add

to Existing Style sehingga pengaruhnya masih terasa pada style yang lain.

Saat anda memilih a+Red, pada jendela HTML Source tercetak: <font color="#FF0000">Teks berwarna merah</font>

Saat anda memilih a+Bold dan menulis teks kembali, kombinasi tag yang terjadi

adalah:

<font color="#FF0000">Teks berwarna merah <b>Teks tebal masih tetap berwarna merah</b></font>

Dan bukannya seperti ini:

<font color="#FF0000">Teks berwarna merah </font> <b>Teks tebal tidak lagi berwarna merah</b>

Oleh karena itu huruf masih tetap berwarna merah karena masih berada diantara

tag <font> dan </font>. Hasil semacam ini baru akan terjadi jika anda memilih

Clear Existing Style.

4.13.2. Menghapus Style.

Untuk menghapus salah satu style yang ada di sana, ikuti langkah-langkah

berikut ini:

1. Pilihlah salah satu HTML Style yang ingin anda hapus.

2. Klik kanan mouse sehingga muncul shortcut menu.

Menggunakan Teks


Gambar 4.60. Menu untuk menghapus salah satu HTML Style 3. Kemudian pilih Delete.

4.14. Menyimpan Dokumen Baru.

Kini telah selesai mengetik dokumen di atas halaman muka website

PIKTI-ITS yang rencananya kita bangun bersama-sama dalam buku ini. Sekarang

tak ada langkah lain yang lebih melegakan kecuali menyimpan halaman web

yang telah banyak menghabiskan banyak waktu saat membuatnya.

Untuk menyimpan dokumen website baru, ikuti langkah-langkah berikut ini:

1. Tekanlah menu File.

Gambar 4.61. Menu untuk menyimpan file dokumen 2. Pilihlah Save As.

Gambar 4.62. Memasukkan nama file

Menggunakan Teks


3. Di kotak File Name masukkan nama file “index” dan tekanlah tombol Save.

Namun sebelumnya pastikan dulu agar file ini tersimpan di bawah folder

F:\pikti.com.

Maka secara otomatis dokumen itu akan tersimpan dalam format .htm sehingga

nama lengkapnya adalah index.htm. Cobalah lihat di Site Window. File ini pun

sudah ada di sana secara otomatis.

Gambar 4.63. Nama file yang baru saja kita simpan sudah terdaftar dalam site window

Latihan.

1. Implementasikan contoh-contoh yang diberikan di atas.

2. Lanjutkan ide anda dalam membuat website pribadi, dari pengetahuan yang

ada ditambah dengan hasil belajar anda sendiri.

Meletakkan Gambar


BAB 5 MELETAKKAN GAMBAR


��Mampu memahami dan mempraktekkan pengolahan gambar pada

DreamWeaver.

5.2. Pengantar.

Image (gambar) adalah unsur paling berpengaruh dalam menentukan

bagus tidaknya sebuah desain. Gambar lebih menarik perhatian daripada unsur-

unser desain yang lain. Seperti halnya buku yang kelihatan lebih menarik bila

terdapat gambar-gambar yang indah disitu, demikian juga dengan website.

Website kelihatan lebih hidup dan cantik bila pelbagai gambar menghiasi

permukaannya.

Orang bilang satu gambar mewakili sejuta makna. Walaupun tidak tepat

seperti itu pengertiannya namun dalam dunia website memang bahwa gambar

sering dipakai untuk mewakili teks. Munculnya banyak ikon di dunia website

membuktikan bahwa teks sedikit tergeser perannya. Begitu juga link yang dulu

didominasi oleh teks kini dapat diambil perannya oleh gambar.

Gambar di dunia internet biasanya disimpan dalam dua format grafis

yang paling lazim dipakai orang, yaitu JPEG (.JPG) dan GIF. Mengingat

keduanya dapat menyimpan gambar sampai ukuran terkecil namun kualitas

masih tetap terjaga, banyak desainer suka menggunakannya dibanding format

lain seperti BMP, misalnya. Dan kedua format gambar ini sepertinya telah

menjadi format penyimpanan standar dalam dunia grafis. JPEG mampu

menyimpan gambar berwarna true color (32 bit) dalam ukuran yang sangat kecil.

Ia sering dipakai untuk menyimpan gambar-gambar yang memiliki kualitas

warna dan ukuran yang sangat tinggi seperti foto atau gambar tiga dimensi.

Sedangkan GIF hanya dapat menyimpan gambar dengan jumlah warna

maksimal 256 buah saja. Namun, ada beberapa kelebihan yang dimiliki format

Meletakkan Gambar


GIF dibanding JPEG. GIF dapat menyimpan banyak citra gambar dalam satu file

sehingga ia sering dipakai untuk membuat animasi. GIF dapat membuat

beberapa warna menjadi transparan, dan lainnya.

Saat bekerja dengan sebuah gambar bersama DreamWeaver, anda akan

sering menggunakan Property Inspector Graphics. Amatilah baik-baik gambar

Property Inspector di bawah ini karena kita akan sering menggunakannya.

Gambar 5.1. Tampilan Property Inspector Graphics Property Inspector di atas akan ditampilkan jika anda sudah bekerja dengan

sebuah gambar dan anda sedang memilih gambar itu.

5.3. Mengelola File Gambar.

Di dalam folder F:\pikti.com kita bisa membuat subfolder yang bernama

grafis, yang fungsinya hanya untuk menyimpan file-file gambar yang nanti akan

ditempelkan di atas halaman website.

Agar organisasi dokumen-dokumen website tetap rapi dan terjaga, setiap

saat anda menyimpan file gambar untuk keperluan desain, letakkanlah ia ke

dalam subfolder grafis. Dengan begitu, saat website anda dipublikasikan,

gambar yang dimaksud akan tetap ada dan tidak terjadi apa yang disebut

missing file.

Gambar 5.2. Subfolder grafis tempat menyimpan gambar

5.4. Meletakkan Gambar.

Sekarang kita coba untuk meletakkan sebuah gambar di atas halaman

website. Untuk keperluan ini, diasumsikan bahwa anda sudah memiliki gambar

Meletakkan Gambar


yang rencananya akan diletakkan di atas halaman website ini. Dan gambar itu

harus sudah berada di bawah subfolder grafis.

Untuk meletakkan gambar di atas halaman website, lakukanlah salah

satu dari beberapa alternatif berikut ini:

��Posisikan kursor di tempat anda ingin meletakkan gambar. Kemudian

pilihlah menu Insert dan klik Image.

Gambar 5.3. Menu untuk memasukkan gambar ��Posisikan kursor pada lokasi di mana anda ingin meletakkan gambar yang

dimaksud. Kemudian, pada Objects Pallete ikon Insert Image .

��Klik ikon Insert Image , dan pastikan tombol kiri mouse masih dalam

keadaan diklik, kemudian drag-lah ke atas wilayah halaman website tempat

anda ingin gambar itu diletakkan.

Sebagai catatan, bila anda tak menemukan ikon Insert Image di atas, pastikan

bahwa Objects Pallete sedang dalam posisi menampilkan ikon-ikon milik

Common panel.

Gambar 5.4. Objects Pallete Common Panel

Meletakkan Gambar


Jika belum, kliklah tanda segi tiga kecil yang ada di atas Objects Pallete,

dan kemudian pilihlah Common.

Gambar 5.5. Submenu Objects Pallete untuk memilih Common Panel Kesemua cara di atas bila dilakukan dengan benar akan menghantar anda ke

kotak dialog Select Image Source. Pilihlah gambar yang anda maksud.

Gambar 5.6. Kotak dialog Select Image Source Di bagian kanan, anda bisa mem-preview gambar yang ingin ditempelkan pada

website. Jika gambar tak ter-preview, pastikan bahwa option Preview Images yang

ada di bagian bawah dalam kondisi terpilih dengan cara mencek check box

tersebut.

Jika anda sudah menemukan gambar yang dimaksud, tekanlah tombol

Kemudian anda akan mendapati kotak dialog baru seperti gambar di bawah ini:

Gambar 5.7. Kotak peringatan tentang Document-Relative Path Apa arti tulisan To make a document-relative path, your document should be saved first

yang ada di kotak dialog itu? Jawabannya adalah DreamWeaver akan

menggunakan path file untuk menunjuk lokasi file gambar itu, dan bukannya

Meletakkan Gambar


document-relative path. Masalah di atas terjadi karena anda belum menyimpan

halaman website ini terlebih dulu, atau anda sedang tidak bekerja pada sebuah

dokumen yang belum pernah anda simpan sebelumnya.

Jika ingin mengetahui lebih lanjut tentang path yang dipakai DreamWeaver

untuk menunjuk lokasi file gambar anda, cobalah amati tag HTML berikut yang

bisa ditemukan pada jendela HTML Source:

<img src="file:///F|/pikti.com/grafis/studio_dwfw.gif" width="176" height="110">

Path di atas bukanlah document-relative path. Sekarang setelah

meletakkan sebuah gambar di atas web, simpanlah dokumen web ini dengan

cara memilih menu File dan kemudian kliklah Save As.

Gambar 5.8. Menyimpan dokumen yang berisi gambar Dan sekarang kembalikan pandangan anda ke jendela HTML Source dan amati

tag HTML <img src> yang ada di sana. Dan hasilnya kira-kira seperti ini: <img src="grafis/studio_dwfw.gif" width="176" height="110">

Bandingkan dengan path sebelumnya dan anda akan temukan

perbedaannya. Setelah dokumen website disimpan, path itu akan berubah

menjadi document-relative path. Dan document-relative path di atas akan

muncul pada text-box Src yang ada di Property Inspector Graphics.

Gambar 5.9. Document-Relative Path pada Kotak Src Property Inspector Graphic Apa jadinya jika tetap masih menggunakan path file dan bukanya document-

relative path? Akibatnya, saat web itu dipublikasikan di internet akan terjadi

Meletakkan Gambar


missing file-file yang dimaksud. Sebenarnya ada tapi path-nya keliru sehingga

server tak bisa menemukan gambar yang dituju.

5.4.1. Memilih Gambar Lewat Site Window.

Cara lain untuk meletakkan gambar di halaman website adalah dengan

menunjuk file yang dimaksud lewat Site Window dan melakukan klik dan drag

dari Site Window ke halaman website.

Langkah-langkah untuk melakukan hal ini adalah sebagai berikut:

1. Pastikan jendela DreamWeaver tempat anda mengedit halaman web dan Site

Window dalam keadaan terbuka.

2. Beralihlah ke Site Window. Pilihlah salah satu file gambar dengan cara

mengkliknya satu kali lewat tombol kiri mouse, dan drag-lah.

3. Drag file itu ke atas halaman website dan lepaskan tombol kiri mouse.

4. Sekarang gambar sudah masuk ke halaman website.

Gambar 5.10. Memasukkan gambar dengan cara klik dan drag

5.4.2. Mengganti Gambar.

Jika gambar yang baru saja anda letakkan berkualitas jelek atau salah dan

anda ingin menggantinya dengan yang lain, maka anda bisa memilih salah satu

cara dari tiga alternatif berikut ini:

Meletakkan Gambar


��Hapuslah gambar pertama, dan ulangi teknik-teknik meletakkan gambar di

atas halaman website.

��Lewat Property Inspector Graphics lakukanlah Point to File.

��Lewat Property Inspector Graphics, pilihlah ikon Browse for File yang ada di

samping kanan kotak Src.

Jika cara kedua yang anda pilih, lanjutkan dengan langkah-langkah berikut ini:

1. Pastikan jendela dokumen DreamWeaver dan Site Window dalam keadaan

terbuka.

2. Pilihlah gambar yang akan diganti dengan cara mengklik mouse ke atasnya

sehingga gambar itu dikelilingi garis hitam.

3. Pada Property Inspector Graphics, klik ikon Point to File dengan tombol kiri

mouse dan jangan lepas tombol mouse tersebut. Ikon ini ada di samping

kanan kotak Src

4. Seret ke arah Site Window dan tunjukkan ia pada file gambar yang baru.

Gambar 5.11. Mengganti gambar dengan cara Point to File 5. Gambar yang lama kini berubah menjadi gambar yang baru.

Jika anda memilih cara ketiga, kliklah ikon bergambar folder yang terletak di

samping kanan kotak Src pada Property Inspector Graphics. Setelah anda

mengkliknya pilihlah gambar pengganti yang anda inginkan.

5.5. Mengatur Besar Kecil Gambar.

Saat anda meletakkan sebuah gambar di atas halaman website, gambar

itu akan menempel di sana dalam ukuran yang sebenarnya, tidak dibesarkan

Meletakkan Gambar


atau tidak diperkecil oleh DreamWeaver. Untuk mengetahui berapa ukuran

panjang x lebar sebuah gambar, cobalah melihat pada Property Inspector

Graphics di bagian W dan H (Width dan Hight) seperti tampak pada gambar di

bawah ini:

Gambar 5.12. Kotak W dan H tempat ukuran gambar ditentukan Di atas tertulis ukuran sesungguhnya sebuah gambar. Jika kita mengubah angka

yang ada di dalamnya, maka ukuran gambar yang dimaksud pun akan

menyesuaikan dengan ukuran yang baru.

Untuk mengubah ukuran besar-kecil suatu gambar, pilih gambar yang dimaksud

sehingga gambar dikelilingi garis hitam. Lalu, lakukan salah satu cara ini:

��Pada bagian W dan H seperti gambar di atas, ubahlah ukurannya dengan

memasukkan angka yang diinginkan. Setelah itu, gambar akan

menyesuaikan diri dengan ukuran yang baru saja anda masukkan.

��Dalam keadaan gambar terpilih, arahkan kursor mouse pada salah satu kotak

kecil (handle) yang tertempel pada garis hitam yang mengelilingi gambar

sehingga wujud kursor mouse berubah dari anak panah menjadi kursor

Resize. Tekan tombol kiri mouse dan seret (klik dan drag) ke kanan-kiri-atas-

bawah-serong atas-serong bawah untuk mengatur ukuran yang baru.

Gambar 5.13. Gambar diperbesar ke kanan

Gambar 5.14. Gambar diperbesar ke bawah Saat anda sedang melakukan proses pembesaran atau pengecilan ukuran

gambar, angka-angka yang ada di bagian W dan H akan ikut berubah.

Namun, ada satu hal yang perlu diperhatikan saat mengulur gambar sehingga

memiliki ukuran lebih besar daripada ukuran sesungguhnya. Bila resolusi

Meletakkan Gambar


gambar berkualitas rendah, gambar itu akan terlihat pecah-pecah setelah

diperbesar.

5.4.1. Mengembalikan Ukuran Gambar.

Setelah anda bisa dengan leluasa mengutak-atik ukuran gambar, kini

saatnya untuk mengembalikan ukuran itu ke ukuran semula. Mungkin anda

merasa bahwa gambar yang telah diperbesar atau diperkecil justru tampak jelek

dibandingkan ukuran semula. Dan di bagian ini anda akan tahu bagaimana

caranya mengembalikan ukuran gambar.

Untuk mengembalikan ukuran gambar ke ukuran semula, anda bisa pilih

salah satu dari tiga cara berikut ini. Sebagai referensi, cara pertama lebih tidak

praktis dibanding cara kedua dan ketiga:

��Masukkan ukuran height dan width semula pada panel W dan H untuk

mendapat ukuran semula.

��Klik pada gambar sehingga gambar dalam keadaan terpilih. Kemudian, tekan

tombol kanan mouse sehingga muncul shortcut menu, lalu pilih Reset Size.

Gambar 5.15. Menu Reset Size untuk mengembalikan ukuran gambar ��Pada Property Inspector Graphics, tekanlah tombol Reset Size .

Meletakkan Gambar


5.6. Mengedit Gambar.

Gambar yang telah anda letakkan di atas halaman website adakalanya

perlu dibenahi di sana-sini agar tampak lebih cantik. Untuk melakukan ini anda

perlu mengedit gambar itu dengan program pengolah grafis yang banyak

beredar di pasaran, seperti Macromedia FreeHand, Adobe Photoshop, Corel

Photo-Paint, dan sebagainya.

Tentu kita bisa menjalankan program grafis itu lewat Microsoft Windows,

tapi cara ini tidak praktis. Akan lebih praktis jika program itu langsung

diluncurkan lewat DreamWeaver.

Untuk mengedit gambar yang kita maksud dengan cara menjalankan

software grafis langsung lewat DreamWeaver, lakukanlah salah satu dari

beberapa cara di bawah ini. Tentunya setelah anda memilih gambar yang

dimaksud sampai gambar itu dikelilingi garis hitam:

��Tekanlah tombol Edit yang ada di Property Inspector Graphics.

��Tekanlah tombol Ctrl dan kliklah tombol kiri mouse di atas gambar yang

dimaksud sebanyak dua kali.

��Arahkan kursor mouse di atas gambar yang ingin diedit dan kliklah tombol

kanan mouse sehingga muncul shortcut menu, kemudian pilihlah Edit.

Gambar 5.16. Menu untuk mengedit gambar dengan software grafis

Meletakkan Gambar


��Masuklah ke Site Window dan pilihlah file gambar yang ingin diedit. Setelah

itu, klik ganda file tersebut.

Gambar 5.17. Memilih gambar yang akan diedit Dari semua cara di atas, DreamWeaver akan menjalankan software grafis yang

telah dipilih oleh DreamWeaver sendiri. Artinya, software yang anda pakai

untuk mengedit bisa berbeda-beda. Bagaimana cara memilih software editor

gambar sesuai keinginan kita sendiri, dapat dilihat pada subbab berikut ini.

Gambar 5.18. Gambar ditampilkan dan diedit dengan IrfanView

5.6.1. Memilih Software Editor Grafis.

DreamWeaver menyediakan prosedur untuk memilih software grafis

pilihan anda sendiri. Pilihlah software editor grafis yang anda suka, apakah

Macromedia FreeHand, Corel PhotoPaint, Photo Draw, ACD See, IrfanView atau

yang lainnya.

Di samping menyediakan prosedur untuk memilih software editor grafis

sendiri, DreamWeaver menyediakan juga fasilitas yang memungkinkan software

grafis meluncur secara otomatis berdasarkan ekstensi file sebuah gambar. Kita

bisa atur jika gambar berekstensi GIF maka akan diedit oleh software A, JPEG

oleh software B, dan seterusnya.

Meletakkan Gambar


Untuk memilih software editor grafis yang pada saatnya nanti akan

meluncur secara otomatis begitu kita ingin mengutak-atik sebuah gambar,

lakukanlah langkah-langkah berikut:

1. Pada menu Edit pilihlah Preferences…

Gambar 5.19. Masuk ke bagian Preferences 2. Setelah anda masuk ke kotak dialog Preferences pilihlah File Types / Editors.

Lihat gambar 5.20.

3. Di bagian kanan bawah, di dalam kotak Extensions, tercatat deretan ekstensi,

baik ekstensi file gambar, suara, maupun animasi. Jika ekstensi yang anda

maksud tidak ada, atau anda ingin menambah ekstensi baru, tekanlah

tombol di situ dan tulislah ekstensi yang ingin anda tambahkan. Lihat

gambar 5.21.

Meletakkan Gambar


Gambar 5.20. Bagian File Types / Editors dalam Preferences

Gambar 5.21. Daftar Extensions 4. Sedangkan di samping kanannya, bagian Editors, tercatat software editor

untuk masing-masing ekstensi file.

Gambar 5.22. Daftar software editor masing-masing ekstensi 5. Untuk mendefinisikan software editor grafis berdasarkan ekstensinya,

pilihlah salah satu ekstensi yang ada di kotak Extensions terlebih dahulu.

6. Setelah itu, tentukan software grafis yang akan dipakai untuk mengedit

ekstensi itu dengan cara mengklik tombol .

7. Kemudian, anda diwajibkan untuk mencari executable file (.exe) software

grafis yang anda maksud. Carilah salah satu file .exe software tersebut.

Meletakkan Gambar


Gambar 5.23. Memilih executable file sebuah software editor Setelah ketemu, kliklah tombol Open .

8. Software telah dipilih dan ia bertanggungjawab untuk mengedit file

berdasarkan ekstensi yang telah anda tentukan pada langkah ke-7.

9. Anda bisa memilih lebih dari dua software grafis untuk satu ekstensi. Anda

juga bisa tentukan dari banyak software itu mana yang diprioritaskan

pertama kali untuk mengedit gambar yang dimaksud. Caranya, tunjuk salah

satu software di kotak Editor, dan setelah itu tekanlah tombol Make Primary

.

10. Tombol minus yang ada di atas kotak Extensions maupun Editor berfungsi

untuk menghapus ekstensi dan software editor yang ada di bawahnya.

Selain lewat prosedur-prosedur di atas, ada satu jalan pintas di mana kita bisa

langsung menentukan software grafis untuk mengedit gambar yang terpilih.

Namun cara ini tidak permanen dibanding langkah-langkah di atas sebab

software ini hanya jalan setiap kali kita memilihnya lagi.

Caranya, pilihlah sebuah gambar dan letakkan kursor mouse di atasnya, lalu

tekan tombol kanan. Pilihlah Edit With dan tekanlah menu Browse.

Gambar 5.24. Memilih software editor secara langsung

Meletakkan Gambar


Langkah terakhir, lakukan seperti pada langkah ketujuh di atas, maka

meluncurlah software yang dimaksud.

5.7. Memberi Border.

Border adalah semacam batas yang mengelilingi gambar dalam wujud

kotak. Tidak hanya tabel, gambar juga bisa diberi border agar seolah-olah ia

dikelilingi kotak hitam. Tebal tipisnya garis-garis yang membentuk border itu

bisa kita atur sesuka hati.

Untuk memberi border pada gambar, lakukan langkah-langkah berikut ini:

1. Pilihlah gambar yang ingin diberi border.

2. Pada Property Inspector Graphics, masukkan tebalnya border ini dalam

wujud angka pada kotak Border .

3. Kini gambar telah dikotaki oleh border.

Semakin besar angka yang anda masukkan ke dalam kotak Border, semakin tebal

pulalah kotak yang mengelilingi gambar tersebut.

Gambar 5.25. Tampilan gambar setelah diberi border dengan ukuran yang berlainan Setelah anda selesai memberi border pada gambar di atas, HTML Source akan

mencetak atribut baru pada tag <img>, yaitu <border=”angka”>.

5.8. Mengatur Peletakan Gambar.

Seperti halnya teks, gambar bisa kita atur pada daerah mana ia akan

diletakkan. Daerah itu hanya mencakup tiga bagian saja, yaitu kiri, tengah, dan

kanan. Untuk mengatur peletakan gambar seperti ini kita manfaatkan teknik

yang sama seperti saat kita mengatur peletakan alinea pada sebuah teks.

DreamWeaver telah menyediakan tiga jenis peletakan gambar yaitu apakah

gambar ingin dipasang di kiri, tengah, atau kanan.

Meletakkan Gambar


5.8.1. Meletakkan Gambar di Kiri.

Sebenarnya, secara default gambar sudah terletak di bagian kiri. Tapi jika suatu

saat anda telah meletakkan gambar ini di bagian tengah atau kanan dan ingin

mengembalikannya lagi ke posisi semula yaitu kiri, maka anda harus membaca

subbab ini. Bila kita meletakkan lagi gambar kedua di samping gambar pertama,

maka gambar kedua akan berada di samping kanan gambar pertama sedangkan

posisi gambar pertama tidak berubah, tetap di kiri.

Untuk meletakkan gambar di bagian kiri halaman website, lakukan salah satu

dari tiga cara berikut ini:

��Pada menu Text, pilihlah Align, dan kemudian kliklah Left.

Gambar 5.26. Menu untuk meletakkan gambar di kiri ��Pada Property Inspector Graphics, kliklah tombol Align Left sehingga

dalam keadaan terpilih .

��Kliklah kombinasi tombol Ctrl+Alt+Shift+L untuk meminggirkan gambar ke

kiri.

Setelah anda memasang gambar di kiri, HTML Source akan mencetak tag HTML

baru, yaitu <p align=”left”>, yang merupakan tag khusus perataan alinea.

Jika anda memberi teks di bawah gambar itu, maka teks yang bersangkutan akan

mengikuti aturan rata kiri juga. Perataan alinea ini akan tetap di kiri sampai anda

memilih perataan alinea yang lain.

Gambar 5.27. Gambar terletak di bagian kiri dokumen

Meletakkan Gambar


5.8.2. Meletakkan Gambar di Tengah.

Perataan gambar kedua adalah perataan gambar di tengah. Dengan kata lain kita

mau meletakkan gambar yang dimaksud ke tengah-tengah halaman website. Bila

kita meletakkan gambar kedua di samping gambar pertama, maka gambar

pertama akan bergeser ke kiri untuk memberi ruang pada gambar kedua.

Sedangkan gambar kedua akan berada di tengah layar.

Untuk meletakkan gambar tepat di tengah halaman website, lakukanlah salah

satu dari tiga cara berikut ini:

��Pada menu Text pilihlah Align, dan kemudian kliklah Center.

Gambar 5.28. Menu untuk meletakkan gambar di tengah ��Pada Property Inspector Graphics, pilihlah ikon sehingga dalam keadaan

terpilih .

��Tekanlah shortcut Ctrl+Alt+Shift+C yang merupakan jalan pintas untuk

meratakan alinea ke tengah.

Setelah anda meletakkan gambar di tengah, HTML Source akan mencetak tag

HTML baru, yaitu <p align=”center”>. Semua teks, gambar, serta komponen

lainnya yang terdapat di atas halaman website akan mengalami perataan tengah

sampai anda menggantinya dengan perataan yang lain.

Gambar 5.29. Gambar diletakkan di tengah dokumen

5.8.3. Meletakkan Gambar di Kanan.

Jika anda ingin meletakkan gambar di kanan, maka gambar yang

dimaksud akan berada di pojok kanan halaman website. Jika anda meletakkan

gambar kedua di samping gambar pertama, maka gambar pertama akan

Meletakkan Gambar


bergeser ke kiri untuk memberi ruang gambar kedua, dan gambar kedua tetap

berada di pojok kanan.

Untuk meletakkan gambar di kanan halaman website, lakukanlah salah satu dari

tiga cara berkut:

�� Pada menu Text, pilihlah Align, dan klik Right.

Gambar 5.30. Menu untuk meletakkan gambar di kanan ��Pada Property Inspector Graphics, klik ikon sehingga dalam keadaan

terpilih

��Tekanlah tombol Ctrl+Alt+Shift+R yang merupakan shortcut untuk mengatur

alinea ke kanan.

Setelah anda meletakkan gambar di tepi kanan, tag HTML baru akan tercetak

pada jendela HTML Source, yaitu <p align=”right”>. Semua komponen

website yang akan tampak di layar monitor baik gambar, teks, atau lainnya akan

mengikuti perataan kanan ini sampai anda menggantinya dengan yang lain.

Gambar 5.31. Meletakkan gambar di bagian kanan dokumen

5.9. Mengatur Letak Teks terhadap Gambar.

Jika kita meletakkan sebuah gambar, maka akan sangat berpengaruh

terhadap bagaimana teks yang ada di sampingnya tertulis. DreamWeaver

menyediakan sejumlah kemampuan di mana kita dapat menulis teks di samping

gambar dengan beragam tata letak. Apakah teks akan tertulis di atas gambar, di

samping atas, di samping bagian tengah, di samping bagian bawah, atau di

daerah lain.

Meletakkan Gambar


Satu hal yang harus dipahami sebelumnya, teks yang akan tertulis di samping

gambar hanyalah terbatas teks pada baris pertama. Setelah menekan Enter untuk

memulai baris baru, teks akan secara otomatis tertulis di bawah gambar.

DreamWeaver telah menyediakan beragam tata letak teks terhadap

gambar, yaitu Browser Default, Baseline, Top, Middle, Bottom, Text Top,

Absolute Middle, Absolute Bottom, Left, dan Right.

Fasilitas-fasilitas di atas dapat anda pilih dengan cara mengarahkan

kursor mouse ke Property Inspector Graphics bagian Align.

Gambar 5.32. Fasilitas untuk mengatur letak teks terhadap gambar

Sebagai catatan, tidak semua pilihan di atas bisa bekerja pada beberapa browser

versi lama atau versi-versi tertentu.

5.9.1. Browser Default.

Jika anda memilih browser default, maka teks akan tertulis di samping

gambar sesuai dengan konfigurasi yang ada pada browser. Pilihan ini adalah

pilihan default dari DreamWeaver.

Gambar 5.33. Tampilan teks dengan tata letak browser default Setelah anda memilih Browser Default. HTML Source tidak akan mencetak

atribut apa-apa pada tag <img> sebab penataan teks diserahkan pada browser

secara langsung.

5.9.2. Baseline dan Bottom.

Baseline dan Bottom pada dasarnya memiliki fungsi yang sama. Ia akan

mencetak teks di bagian kanan bawah terhadap gambar. Teks yang akan tertulis

Meletakkan Gambar


benar-benar berada di bawah sehingga bagian descender pada teks berada di

bawah garis gambar.

Descender sendiri adalah bagian huruf yang berada di bawah garis seperti huruf

‘g’, ‘p’, ‘j’, ‘y’, dan lainnya. Huruf-huruf tersebut memiliki kaki yang terletak di

bawah garis.

Gambar 5.34. Tampilan teks dengan tata letak Baseline-Bottom Setelah anda memilih Baseline atau Bottom, tag <img> akan bertambah panjang

dengan munculnya atribut baru, yaitu <align=”baseline”> atau

<align=”bottom”>.

5.9.3. Top.

Bila anda memilih Top, maka teks yang tertulis di kanan gambar akan

berada di samping atas. Namun, bagian paling tinggi dari huruf akan

disejajarkan dengan bagian paling atas gambar.

Gambar 5.35. Tampilan teks dengan tata letak Top Setelah anda memilih Top, maka muncul atribut baru pada tag <img> yaitu

<align=”top”>.

Meletakkan Gambar


5.9.4. Middle.

Jika anda memilih Middle, maka teks akan terletak di tengah-tengah

gambar pada bagian kanannya. Namun yang khas disini, garis teks akan berada

tepat di tengah-tengah gambar sehingga teks akan tercetak persis diantara

bagian atas dan bawah gambar.

Setelah anda memilih Middle, maka muncul atribut baru pada tag <img>, yaitu

<align=”middle”>.

Gambar 5.36. Tampilan teks dengan tata letak Middle

5.9.5. Text Top.

Pilihan ini mirip dengan pilihan Top, hanya saja huruf yang paling tinggi

akan disejajarkan dengan bagian atas gambar.

Gambar 5.37. Tampilan teks dengan tata letak Text Top Setelah anda memilih Text Top, maka muncul atribut baru pada tag <img>, yaitu

<align=”texttop”>.

Meletakkan Gambar


5.9.6. Absolute Middle.

Pilihan ini berbeda dengan Middle. Teks akan diletakkan lebih ke bawah

daripada midlle. Jika anda perhatikan, bagian tengah gambar jika ditarik garis

lurus terhadap teks akan mengenai tepat di tengah huruf-huruf yang memiliki

ukuran panjang, seperti “I” misalnya.

Gambar 5.38. Tampilan teks dengan tata letak Absolute Middle Setelah anda memilih ini tag <img> akan ditambahi atribut baru, yaitu

<align=”absmiddle”>.

5.9.7. Absolute Bottom.

Pilihan ini berbeda dengan Bottom dan Baseline. Bagian descender teks

masih sejajar dengan garis gambar jika anda memilih Absolute Bottom. Dengan

begitu, teks tidak tertulis benar-benar di bawah.

Gambar 5.39. Tampilan teks dengan tata letak Absolute Bottom Setelah anda memilihnya, tag <img> akan bertambah dengan atribut baru, yaitu

<align=”absbottom”>.

Meletakkan Gambar


5.9.8. Left.

Pilihan ini akan menyebabkan teks tertulis di bagian kanan gambar,

sedangkan gambar itu sendiri akan tetap berada di kiri.

Gambar 5.40. Tampilan teks dengan tata letak Left Atribut yang akan tercetak pada tag <img> setelah anda memilih Left adalah

<align=”left”>.

5.9.9. Right.

Pilihan terakhir adalah Right dimana pilihan ini akan menggeser gambar

ke bagian kanan halaman web dan teks akan tercetak di bagian kirinya.

Gambar 5.41. Tampilan teks dengan tata letak Right Atribut yang akan tercetak pada tag <img> setelah anda memilih Right adalah

<align=”right”>.

Meletakkan Gambar


5.10. Mengatur Jarak Vertikal dan Horizontal.

Secara default gambar yang anda pasang akan terpampang di pojok kiri

halaman website. Setelah anda mengatur perataan alinea atau memberi teks di

kiri-atas-kanan-bawahnya, gambar itu pun akan berganti-ganti posisi.

DreamWeaver menyediakan satu fasilitas lagi yang bisa kita pakai untuk

mengatur peletakan gambar di atas halaman website. Namun teknik yang akan

kita pelajari saat ini sedikit berbeda dengan teknik-teknik yang selama ini kita

kenal. Kita akan mengatur peletakan gambar berdasarkan posisi kursor secara

horizontal dan vertikal. Untuk mengerjakan hal ini, anda akan bergelut dengan

kotak V Space dan H Space yang berada di Property Inspector Graphics.

Gambar 5.42. Kotak tempat mengatur jarak vertikal dan horizontal gambar

5.10.1. Mengatur Jarak Vertikal.

Saat kita mengatur jarak vertikal berarti kita mengukur jarak antara posisi

kursor yang ada di atas dengan gambar. Hasil yang akan terjadi bila kita

membubuhi nilai tertentu pada jarak vertikal ini adalah gambar akan turun ke

bawah dan memiliki jarak sebesar nilai yang kita masukkan terhadap bagian atas

halaman website.

Masukkan nilai yang anda inginkan ke kotak V Space dalam satuan pixel.

Semakin tinggi nilainya maka jarak gambar terhadap bagian atas halaman web

akan semakin lebar.

Gambar 5.43. Posisi gambar setelah memiliki jarak vertikal

Meletakkan Gambar


Gambar 5.44. Posisi gambar setelah mendapat jarak vertikal yang lebih besar lagi Telah disinggung di atas bahwa posisi gambar akan disesuaikan dengan posisi

kursor pada sumbu vertikal. Hal ini bisa dibuktikan bila anda menulis sebaris

teks di atas gambar itu. Dan amatilah apa yang terjadi. Posisi gambar akan

semakin menurun seiring dengan banyaknya baris teks yang tertulis di atasnya.

Gambar 5.45. Posisi gambar memiliki jarak vertikal terhadap posisi kursor terakhir, dalam hal ini teks

5.10.2. Mengatur Jarak Horizontal.

Jika kita mengatur jarak horizontal berarti kita memberi jarak antara

posisi kursor bagian kiri dengan gambar. Jika tak ada teks di bagian kiri gambar

maka posisi kursor berada pada jarak 0, alias berada di pinggir paling kiri

halaman website. Setelah anda memberi jarak maka gambar akan bergeser ke

kanan sebanyak nilai yang anda masukkan ke kotak H Space dalam satuan pixel.

Meletakkan Gambar


Gambar 5.46. Posisi gambar setelah memiliki jarak horizontal

Gambar 5.47. Posisi gambar setelah memiliki jarak horizontal lebih besar Jika anda memberi teks di bagian kiri gambar di atas, maka posisi gambar akan

semakin bergeser ke kanan. Hal ini disebabkan posisi kursor tidak lagi berada

pada jarak 0, yang sama saja berada tepat di bagian kiri halaman website, tapi

berada di sebelah kanan huruf terakhir pada teks.

Gambar 5.48. Posisi gambar terhadap kursor pada jarak horizontal

5.11. Mengatur Gambar Latar Belakang.

Sejauh yang kita pelajari sampai disini, gambar-gambar kita tempelkan

pada daerah latar depan. Sekarang kita akan mencoba untuk meletakkan gambar

ke daerah latar belakang. Ada perbedaan yang mendasar antara gambar latar

Meletakkan Gambar


depan dengan gambar latar belakang. Gambar latar depan secara default tak bisa

ditumpuk oleh teks atau gambar lain di atasnya; terkecuali jika kita

menggunakan layer yang akan kita bahas pada bab lain. Namun gambar latar

belakang bisa.

Untuk meletakkan gambar latar belakang ke atas halaman website,

lakukanlah langkah-langkah berikut ini:

1. Klik menu Modify lalu pilihlah Page Properties.

Gambar 5.49. Masuk ke Page Properties lewat menu Modify 2. Setelah itu anda akan masuk ke kotak dialog Page Properties.

Gambar 5.50. Tampilan Page Properties 3. Pada text-box Background Image, masukkan nama file yang akan anda jadikan

gambar latar belakang.

4. Jika anda kesulitan, tekanlah tombol Browse untuk mencari file yang

dimaksud.

Meletakkan Gambar


5. Jika sudah, tekanlah tombol OK. Maka gambar yang dimaksud telah menjadi

gambar latar belakang.

Gambar latar belakang pada website akan bersifat Tiled. Artinya gambar akan

dicetak berulang-ulang sampai memenuhi halaman website.

Gambar 5.51. Tampilan gambar latar belakang Setelah anda meletakkan gambar latar belakang, amatilah tag HTML pada

HTML Source. Pada tag <body> tercetak atribut baru yaitu

<background=”namafile”>.

Namun, jika anda hanya ingin mewarnai latar belakang dokumen tanpa

memberi gambar latar belakang, masuklah ke Page Properties kemudian ganti

warna pada bagian Background dengan warna

kesayangan anda.

Gambar 5.52. Web dengan hanya warna latar belakang saja

Meletakkan Gambar


5.12. Konsep Nama Alternatif.

Nama alternatif dipakai jika kita akan menghadapi permasalahan dimana

browser tidak menampilkan gambar-gambar secara otomatis. Hal ini mungkin

terjadi bila browser tidak mengaktifkan autoload image-nya. Akibatknya browser

tidak menampilkan gambar barang sedikit pun yang ada di atas halaman

website. Singkat kata, jika si pengakses tidak mengaktifkan autoload image pada

browser, gambar yang kita pasang akan tersembunyi. Nama alternatif dipakai

untuk mengganti peran gambar bilamana gambar tidak muncul.

Untuk memberi nama alternatif pada suatu gambar, arahkan kursor

mouse pada Property Inspector Graphics dan masukkan nama yang diinginkan

pada text box Alt .

Setelah anda memberi nama dan bila dalam satu kesempatan gambar tak

ditampilkan, tulisan yang ada pada Alt itulah yang akan muncul.

Kemudian bila anda telah memberi nama alternatif tadi, maka pada tag

<img> akan terbubuhi atribut baru, yaitu <alt=”namaalternatif”>.

5.13. Menggunakan Low Source Image.

Low source image dipakai untuk mengganti peran gambar sesungguhnya

secara singkat. Seperti telah kita maklumi bersama bahwa akses internet

demikian pelannya dan kelambatan ini akan sangat terasa jika kita mengakses

sebuah website yang menyimpan banyak gambar. Low source image berfungsi

untuk mengatasi masalah ini.

Low source image adalah gambar yang memiliki kualitas resolusi dan

ukuran rendah. Isi materinya sama dengan gambar sesungguhnya. Hanya saja

jika kita menggunakan low source image, browser akan menampilkan gambar

ini terlebih dahulu sebelum gambar dengan kualitas yang lebih baik muncul.

Dengan gambar kualitas rendah ini si pengakses dapat menangkap apa isi

gambar itu sebelum gambar yang asli muncul. Hal ini seolah-olah dapat

mereduksi biaya akses internet.

Meletakkan Gambar


Untuk menggunakannya, pilihlah gambar yang ingin anda jadikan low

source image dan masukkan path serta URL-nya di bagian Low Src

.

Jika anda kesulitan mencari file yang dimaksud, pakailah tombol untuk

mem-browsing file. Anda juga bisa menggunakan ikon Point to File untuk

memilih file dengan cara yang sama saat kita meletakkan gambar di atas

halaman website (lihat Subsubbab 5.2.2).

Latihan.

1. Contoh-contoh latihan yang diberikan di atas cobalah anda implementasikan.



3. Teruskan ide anda dalam membuat website pribadi, dari pengetahuan yang

cukup banyak dari bab ini, dan juga dengan hasil belajar mandiri anda.

Membuat Tabel


BAB 6 MEMBUAT TABEL


��Mampu memahami dan mempraktekkan penggunaan tabel pada

DreamWeaver.

6.2. Pengantar.

Tabel memiliki banyak kegunaan. Dalam akunting tabel dipakai untuk

mendeskripsikan kolom debet dan kredit. Misalnya hutang-hutang dimasukkan

pada kolom kiri sedangkan piutang diletakkan pada kolom sebelah kanan.

Namun tabel tidak harus dikaitkan dengan tema-tema berbau ekonomi seperti

uang dan hutang. Secara umum, tabel bisa dipakai untuk mendesain website.

Banyak webmaster memanfaatkan kelebihan tabel ini. Sebagai contoh,

webmaster merancang sebuah tabel yang terbentuk dari dua kolom; satu kolom

dipasangi gambar sedangkan kolom yang lain tempat menulis teks. Hasilnya,

gambar dan teks bisa tampil sejajar – hal yang sangat susah dilakukan jika

bekerja dengan software word prosesor tanpa bantuan tabel.

Gambar 6.1. Posisi gambar dan teks sejajar berkat tabel Tentu fungsi tabel tidak hanya terbatas pada meletakkan gambar sejajar

dengan teks. Lebih dari itu, tabel bisa mengerjakan tugas-tugas lainnya sesuai

kemampuan yang ia miliki. Di dalam bab ini kita akan membahas seluk beluk

Membuat Tabel


tabel, menemukan kelebihan-kelebihan yang ada padanya, dan mengatasi

pelbagai kelemahannya.

6.3. Anatomi Sebuah Tabel.

Sebelum melangkah lebih jauh, ada baiknya kita memahami terlebih

dahulu bagaimana anatomi sebuah tabel. Bila anda sudah memahami maka anda

akan temukan kemudahan-kemudahan saat mengikuti buku ini, terutama

tentang pengenalan istilah-istilah yang berkaitan langsung dengan tabel.

Tabel secara umum memiliki bentuk seperti tampak pada gambar di

bawah ini:

Gambar 6.2. Anatomi tabel Agar anda memiliki gambaran lebih tegas mengenai anatomi di atas, di

bawah ini akan dijelaskan satu per satu pada poin-poin berikut ini:

��Columns: adalah banyaknya kotak dalam tabel pada sumbu horizontal.

Disebut juga kolom.

��Rows: adalah banyaknya kotak dalam tabel pada sumbu vertikal. Disebut

juga baris.

��Cells: adalah kotak-kotak yang dibentuk secara otomatis dari kolom dan

baris. Di dalam sel ini kita letakkan data-data seperti teks, gambar, dan

sebagainya.

��Cell Padding: adalah besar-kecilnya ukuran sebuah sel.

��Cell Spacing: adalah longgar-sempitnya jarak antara satu sel dengan sel

lainnya.

Rows (Baris)

Column (Kolom)

Cells (Sel)

Cells Padding

Cell Spacing

Membuat Tabel


Selama kita berinteraksi dengan sebuah tabel, akan muncul Property

Inspector baru yang khusus menangani atribut-atribut tabel. Tidak seperti

Property Inspector lainnya, Property Inspector ini berjumlah dua buah, yaitu

Property Inspector Table dan Property Inspector Cell. Yang pertama bertugas

untuk mengatur atribut-atribut tabel secara keseluruhan, sedangkan yang

terakhir bertanggung jawab untuk mengatur atribut-atribut sel dalam tabel.

Amatilah bentuk Property Inspector Table dan Property Inspector Cell di

bawah ini sebab kita akan sering memakainya.

Gambar 6.3. Property Inspector Table

Gambar 6.4. Property Inspector Cell 6.4. Menciptakan Tabel Baru.

Kita akan mulai menciptakan tabel baru di atas sebuah halaman website

yang baru juga. Mengingat selama menjalani proses pengerjaan sebuah website

keberadaan tabel akan sangat membantu, maka bagian ini terasa amat penting

bagi anda. Di sini kita akan mengenal tahap-tahap meletakkan sebuah tabel di

atas selembar halaman website. Mungkin anda telah mengenal tag HTML yang

membangun sebuah tabel. Akan tetapi dalam buku ini kita akan menciptakan

tabel tidak lewat tag-tag tapi dengan fasilitas-fasilitas yang disediakan

DreamWeaver.

Untuk meletakkan tabel baru di atas halaman website, lakukanlah salah

satu dari tiga langkah berikut ini:

��Letakkan kursor di daerah halaman website tempat tabel ingin anda taruh

dan kemudian lewat menu Insert pilihlah option Table. Atau bisa juga lewat

kombinasi Ctrl+Alt+T yang merupakan shortcut Insert Table.

Membuat Tabel


Gambar 6.5. Membuat tabel lewat menu ��Pilihlah ikon Insert Table yang terletak di Common Panel Objects Pallete.

Sesudah kursor berada pada posisi di mana tabel ingin diletakkan, kliklah

ikon itu. Lihat Gambar 6.6.

��Klik ikon Insert Table yang terletak di Common Panel Objects Pallete dan

kemudian drag ia ke posisi tabel yang diinginkan.

Gambar 6.6. Objects Pallete tempat ikon Insert Table berada Semua cara di atas bila dikerjakan dengan tepat akan membawa anda ke

kotak dialog baru, yaitu Insert Table.

Gambar 6.7. Memasukkan nilai-nilai sebuah tabel Berdasarkan pemahaman anda tentang anatomi tabel di atas, isilah nilai-nilai

tabel tersebut. Sebagai pedoman, masukkan nilai rows sebanyak 2 buah, columns

sebanyak 2 buah, width 100 percent, border 1 dan sisanya biarkan kosong.

Membuat Tabel


Gambar 6.8. Tabel muncul di dokumen website Segera setelah anda menciptakan tabel baru seperti tampak pada

tampilan gambar di atas, HTML Source akan mencetak tag HTML baru, yaitu: <table width="100%" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Mungkin telah dipahami, tag <tr> adalah tag yang bertugas menciptakan rows,

sedangkan <td> adalah tag yang berfungsi menciptakan column.

Seperti disinggung di atas, Property Inspector yang akan menemani kita

kali ini berjumlah 2 buah, satu Property Inspector Table dan lainnya Property

Inspector Cell. Bagaimana cara menampilkan Property Inspector Table dan

Property Inspector Cell?

Letakkan kursor ke dalam salah satu sel dan Property Inspector Cell akan

muncul di layar monitor. Sebaliknya, pilihlah tabel sehingga tabel dikelilingi

kotak hitam dan Property Inspector Table akan kelihatan.

6.5. Menciptakan Kolom dan Baris Baru.

Jika anda memasukkan nilai-nilai ke dalam kotak dialog Insert Table

sama persis dengan apa yang telah diutarakan di atas, maka anda akan

memperoleh tabel dengan kolom sebanyak 2 buah dan baris sebanyak 2 buah

pula. Pada kesempatan kali ini, kita akan berusaha untuk menciptakan kolom

dan baris baru sehingga jumlah kolom dan baris menjadi lebih dari 2 kotak..

Untuk menciptakan kolom dan baris baru, bisa dilakukan salah satu dari

dua langkah yang disediakan oleh DreamWeaver, yaitu:

Membuat Tabel


��Menciptakan kolom dan baris baru lewat Property Inspector Table.

��Menciptakan kolom dan baris baru lewat Property Inspector Cell.

6.5.1. Menciptakan Kolom dan Baris Baru Lewat

Property Inspector Table.

Jika anda memasukkan Property Inspector Table untuk membentuk

kolom dan baris baru, pastikan terlebih dahulu bahwa tabel yang dimaksud

dalam keadaan terpilih sehingga Property Inspector Table muncul di layar

monitor.

Sekarang cobalah untuk mengalihkan pandangan ke hadapan Property

Inspector Table khususnya pada kotak Cols .

Masukkan jumlah kolom yang akan anda buat pada tabel ini. Sebagai

contoh masukkan angka 4. Dengan begitu, terciptalah 2 kolom baru pada tabel.

Gambar 6.9. Dua buah kolom ditambahkan pada tabel Hal yang sama bisa anda lakukan terhadap rows. Alihkan perhatian anda pada

Property Inspector Table bagian Rows .

Masukkan jumlah baris yang akan anda buat pada tabel ini. Sebagai

contoh masukkan angka 4. Dengan begitu, terciptalah 2 baris baru pada tabel.

Membuat Tabel


Gambar 6.10. Dua buah baris ditambahkan pada tabel Jika anda menciptakan satu buah baris lagi, maka HTML Source akan mencetak

pasangan tag <tr> dan </tr> baru. Sedangkan jika anda menciptakan satu buah

kolom baru, maka HTML Source akan mencetak pasangan <td> dan </td> baru.

6.5.2. Menciptakan Kolom dan Baris Baru Lewat

Property Inspector Cell.

Pada kesempatan ini kita akan menciptakan kolom dan baris baru lewat

Property Inspector Cell. Tidak seperti pengalaman kita di atas, menciptakan

kolom dan baris baru lewat Property Inspector Cell kali ini lebih sulit dari cara di

atas, mengingat pada kondisi tertentu cara di atas tidak bisa memenuhi harapan

kita dan hanya cara yang akan kita ulas kali ini saja yang bisa.

Sebagai langkah persiapan, letakkan kursor pada salah satu sel dimana

kolom dan baris baru akan diciptakan di situ. Setelah anda selesai meletakkan

kursor di tempat yang tepat, maka Property Inspector Cell akan muncul.

Langkah selanjutnya yang harus anda tindaklanjuti adalah, pilihlah ikon

Split Cell into Row and Column yang ada di Property Inspector Cell. Klik ikon

itu. Setelah itu anda akan masuk ke kotak dialog tempat anda bisa memecah satu

sel menjadi beberapa baris dan kolom.

Gambar 6.11. Memecah sel menjadi beberapa baris dan kolom Pada kotak dialog tersebut, ada dua pilihan yang ditawarkan kepada anda:

Membuat Tabel


��Split Cell Into Rows: bila anda memilih option ini maka sel akan dipecah

menjadi beberapa baris. Jika anda ingin menciptakan baris baru, pilihlah

option ini.

��Split Cell Into Columns: bila anda memilih option ini maka sel akan dipecah

menjadi beberapa kolom. Jika anda ingin menciptakan kolom baru, pilihlah

option ini.

��Number of …: masukkan jumlah kolom atau baris baru yang ingin dibuat.

Sebagai contoh, pilihlah Split Cell Into Rows dan isilah sebanyak 2 buah jumlah

baris yang ingin anda buat. Hasilnya akan tampak pada gambar di bawah ini.

Gambar 6.12. Memecah satu sel menjadi dua baris Pada gambar di atas terlihat bahwa satu buah sel dipecah sehingga

menjadi dua baris. Sebaliknya pilihlah Split Cell Into Column dan istilah dan

isilah sebanyak dua buah jumlah kolom yang ingin anda ciptakan. Hasilnya akan

tampak seperti pada gambar di bawah ini:

Gambar 6.13. Memecah satu sel menjadi dua kolom

Membuat Tabel


Pada gambar di atas tampak bahwa satu buah sel terpecah menjadi dua

kolom sesuai dengan jumlah yang kita inginkan.

Dari pengalaman di atas, kita bisa bedakan hasil akhir yang terjadi jika

kita memilih cara pertama, lewat Property Inspector Table, dan cara kedua yang

kita tempuh lewat Property Inspector Cell. Pada cara kedua, kolom dan baris

akan tercipta hanya terbatas pada satu wilayah sel saja sedangkan cara pertama

meliputi seluruh tabel.

Kemudian, saat anda memecah satu sel menjadi dua kolom maka HTML

Source akan mencetak tag <td> dan </td> baru serta tag <td colspan=”2”> di

bawahnya. Sedangkan jika anda memecah satu sel menjadi dua baris maka

HTML Source akan mencetak pasangan tag <tr> dan </tr> serta <td

rowspan=”2”>.

6.6. Menggabung Sel.

Bila tadi kita telah melakukan latihan dengan cara memecah satu sel

menjadi beberapa kolom dan baris, maka pada bagian ini kita akan melakukan

latihan yang sebaliknya. Kita akan mencoba bagaimana teknik menggabung

beberapa sel dalam kolom dan baris menjadi satu.

Untuk menggabung beberapa sel menjadi satu, pilihlah satu metode dari

dua cara berikut ini:

��Lakukan penggabungan lewat menu Modify > Table > Merge Cell. Atau

lakukanlah dengan menekan kombinasi tombol Ctrl+Alt+M.

Gambar 6.14. Menggabung sel lewat menu Merge

Membuat Tabel


��Lakukan penggabungan lewat Property Inspector Cell dengan cara memilih

ikon Merger Cell .

Namun sebelum anda melakukan satu di antara beberapa cara di atas, pastikan

terlebih dahulu bahwa anda telah memilih sel-sel yang akan digabung. Cara

memilih sel-sel yang akan disatukan cukup dengan memblok sel yang dimaksud.

Gambar 6.15. Memilih sel yang akan digabung dalam satu kolom

Gambar 6.16. Memilih sel yang akan digabung menjadi satu baris Setelah anda memilihnya lakukanlah penggabungan dengan cara-cara

yang ditawarkan di atas:

Gambar 6.17. Dua kolom digabung menjadi satu kolom

Membuat Tabel


Gambar 6.18. Dua baris digabung menjadi satu baris Setelah anda menggabung dua kolom menjadi satu, tag <td> akan

terhapus dan diganti dengan tag <td colspan=”2”>. Begitu juga jika dua baris

anda gabung menjadi satu, tag <td rowspan=”2”> akan tercipta.

6.7. Menghapus Kolom dan Baris.

Dalam proses berikutnya anda mungkin ingin menghapus kolom dan

baris. Namun satu hal yang patut anda perhatikan sebelum melenyapkannya,

kolom dan baris dihitung sebagai satu baris dan kolom yang utuh. Artinya, saat

anda menghapus satu kolom maka yang terhapus tidak hanya satu kolom saja

tapi satu deret kolom. Begitu juga pada baris dimana yang terhapus tidak

terbatas satu baris saja tapi satu deret baris. Mungkin ini salah satu kelemahan

tabel dimana kita tak bisa menghapus kolom dan baris per buah.

Untuk menghapus kolom dan baris, pilihlah satu dari beberapa cara yang

ditawarkan DreamWeaver berikut ini:

��Lewat menu Modify > Table.

��Lewat Property Inspector Table.

��Lewat tombol keyboard Del.

Jika cara pertama yang anda pilih, lanjutkan dengan langkah-langkah berikut ini:

1. Letakkan kursor di salah satu sel tempat kolom dan baris ingin dihapus.

2. Pilih menu Modify > Table.

3. Klik menu Delete Row (Ctrl+Shift+M) untuk menghapus baris atau Delete

Column (Ctrl+Shift+-) untuk menghapus kolom.

Membuat Tabel


4. Satu deret kolom atau satu deret baris telah terhapus.

Gambar 6.19. Menghapus tabel lewat menu Jika anda memilih cara kedua, klik tabel agar Property Inspector Table muncul di

layar monitor menggantikan Property Inspector yang lain. Kurangilah jumlah

kolom dan baris yang tertulis di kotak Rows dan Cols .

Sekarang, jumlah kolom dan baris akan menyesuaikan dengan jumlah baru yang

anda isi pada kedua kotak itu.

Sedangkan jika cara ketiga yang anda inginkan, maka bloklah satu deret

kolom atau satu deret baris secara utuh dari awal hingga akhir seperti tampak

pada gambar di bawah ini:

Gambar 6.20. Memilih kolom yang akan dihapus

Membuat Tabel


Gambar 6.21. Memilih baris yang akan dihapus Setelah anda memilihnya, tekanlah tombol Del, maka kolom atau baris yang

anda blok akan terhapus. HTML Source akan menghilangkan tag <td> sebanyak

kolom yang anda hapus dan <tr> sebanyak baris yang anda lenyapkan.

6.8. Mengatur Ketebalan Border.

Border, seperti yang mungkin telah kita kenal, adalah garis yang

mengelilingi tabel secara keseluruhan dan garis yang mengitari masing-masing

sel sehingga satu sel dengan sel lainnya memiliki batas yang jelas. Ketebalan

border dalam tabel bisa diatur lewat sebuah indikator, yaitu angka. Semakin

besar angka yang kita masukkan semakin tebal pulalah garis pada border

tersebut; dan sebaliknya. Namun sayangnya, ketebalan garis border yang bisa

dimodifikasi terbatas pada garis yang mengelilingi tabel saja sementara garis

yang mengitari masing-masing sel memiliki ketebalan yang tetap dan hanya bisa

berkurang.

Untuk mengatur tebal dan tipisnya border, beri perhatian anda pada

kotak Border yang terletak di Property Inspector Table. Masukkan

jumlah ketebalan pada kotak itu sesuai keinginan anda. Ingat, semakin besar

angkanya semakin tebal garisnya.

Membuat Tabel


Gambar 6.22. Tabel dengan border

Gambar 6.23. Tabel dengan ketebalan border bernilai 45 Cobalah anda masukkan nilai 0 dan border akan hilang, baik yang

mengelilingi tabel maupun masing-masing sel. Jika anda masukkan dengan

angka 0 maka border akan hilang sehingga tabel seolah-olah tak memiliki batas.

Ketika anda sedang mengedit tabel ini dengan DreamWeaver, border dengan

nilai 0 ini ditandai oleh garis putus-putus. Setelah ditampilkan oleh browser,

garis putus-putus ini tidak akan nampak.

Gambar 6.24. Tabel dengan ketebalan border nol

Membuat Tabel


Atribut <border> pada tag <table> akan diciptakan pada HTML Source

yang nilainya akan disesuaikan dengan nilai yang anda masukkan pada kotak

border di atas.

6.9. Mengganti Warna Border.

Setelah kita mengatur ketebalan garis border, kini kita akan coba

mengganti warna border sesuai kebutuhan kita. Sebelum anda mencoba secara

langsung bagaimana menangani warna pada sebuah border, cobalah pahami

dulu bagian mana yang disebut Light Border dan sisi mana yang disebut Dark

Border.

Border dalam tabel memang terdiri atas dua sisi, yaitu Light Border dan Dark

Border. Kehadiran dua sisi ini semata-mata hanya untuk menciptakan kesan tiga

dimensi pada tabel. Coba amati kedua sisi di atas pada tampilan berikut ini:

Gambar 6.25. Posisi Light Border dan Dark Border Light Border didapat dengan menambahkan tag <bordercolorlight=”warna”>

dan Dark Border diperoleh dengan menambahkan tag

<bordercolordark=”warna”> pada tag <table>.

6.9.1. Mengganti Warna Border dalam Sel.

Jika kita baru saja mengganti warna border yang mengelilingi

keseluruhan tabel termasuk sel, sekarang kita coba untuk mengganti warna

border yang hanya mengelilingi sel. Border yang hanya mengelilingi sel tidak

mengenal sisi Light Border dan sisi Dark Border. Oleh karenanya, saat anda

mengganti warna border pada satu sel, baik Light maupun Dark Border akan

terganti dengan warna yang sama sesuai pilihan anda.

Untuk mengganti warna border dalam sel, ikuti langkah berikut ini:

Light Border

Dark Border

Membuat Tabel


1. Letakkan kursor pada salah satu sel dimana border yang ada di dalamnya

ingin anda ganti.

2. Pada Property Inspector Cell, pilihlah ikon Brdr dan pilihlah

warna yang tersimpan di sana.

3. Kini Border Cell yang anda pilih telah berganti warna.

Setelah anda mengganti warna border pada salah satu sel, maka HTML Source

akan mencetak atribut baru pada tag <td> yang telah dipilih, yaitu

<bordercolor=”warna”>.

6.10. Mengganti Warna Latar Belakang.

Warna yang akan diganti sekarang adalah warna latar belakang. Yang

dimaksud dengan warna latar belakang disini adalah warna latar belakang pada

tabel yang mewarnai setiap sel. Warna latar belakang setiap sel bisa kita ganti

baik secara serentak maupun satu persatu. Jika serentak, semua sel yang ada

pada tabel akan berubah dan memiliki warna sejenis. Sementara jika satu

persatu, sel yang dipilih akan berubah warna sedangkan yang tidak akan tetap

menggunakan warna lama.

Jika anda ingin mengganti semua warna sel secara serentak, ikuti


1. Pilihlah tabel.

2. Pada Property Inspector Table, pilihlah ikon Bg Color dan

temukan warna yang akan mengganti warna lama pada sel.

Gambar 6.26. Tabel dengan warna latar belakang Namun jika anda hanya ingin mengganti warna latar belakang pada salah

satu sel saja, ikuti langkah-langkah berikut ini:

1. Letakkan kursor pada sel yang ingin anda ganti warna latar belakangnya.

Membuat Tabel


2. Pada Property Inspector Cell, pilihlah ikon dan temukan

warna yang ingin anda pakai.

Gambar 6.27. Sel dengan warna latar belakang Setelah anda memoles warna latar belakang pada keseluruhan tabel, tag <table>

pada HTML Source akan ditambahi atribut baru yaitu <bgcolor=”warna”>.

Namun atribut ini hanya akan menempel pada tag <td> jika anda mewarnai satu

sel saja.

6.11. Memberi Gambar Latar Belakang.

Untuk memberi kesan yang menarik, anda bisa meletakkan sebuah

gambar sebagai latar belakang pada tabel. Anda diizinkan untuk meletakkan

gambar pada tabel secara keseluruhan atau pada satu sel saja dimana masing-

masing menghasilkan kesan yang berlainan.

Gambar latar belakang yang akan tertempel pada tabel diletakkan secara

berulang kali sesuai lebar tabel tersebut.

6.11.1. Memberi Latar Belakang pada Tabel.

Pertama kali akan dicoba meletakkan sebuah gambar latar belakang yang

akan tampak pada keseluruhan tabel. Yang perlu anda lakukan pertama kali

adalah memilih tabel itu sampai Property Inspector Table muncul di layar

monitor anda.

Setelah itu, palingkan pandangan anda pada bagian Bg yang bertugas

mengatur nama file gambar latar belakang.

Gambar 6.28. Kotak tempat memasukkan gambar latar belakang

Membuat Tabel


Pilihlah gambar yang diinginkan sesuai dengan langkah-langkah seperti yang

telah diutarakan panjang lebar di bagian lalu tentang meletakkan gambar.

Gambar 6.29. Tabel dengan gambar latar belakang Pada tampilan di atas kita bisa lihat bahwa gambar akan tampak di

seluruh sel karena gambar tampil di keseluruhan tabel.

Usai anda menempelkan gambar latar belakang pada keseluruhan tabel,

atribut baru akan tercetak pada HTML Source bagian tag <table>, yaitu

<background=”namafile”>. Atribut ini akan menempel pada tag <td> jika anda

memutuskan hanya menaruh gambar latar belakang pada salah satu sel saja.

6.11.2. Meletakkan Gambar Latar Belakang pada

Sel.

Pada kesempatan kedua akan dicoba meletakkan gambar hanya pada

salah satu sel dalam tabel. Metode kali ini hanyalah menampakkan gambar latar

belakang pada sel yang dipilih dan pada sel-sel yang lain dibiarkan dalam

keadaan kosong.

Untuk meletakkan gambar latar belakang pada sel, letakkan kursor pada

sel yang anda pilih. Di sisi yang lain, anda bisa lihat bahwa Property Inspector

Cell telah muncul di layar monitor. Sekarang alihkan perhatian anda pada Bg

tempat mendefinisikan gambar yang akan dimanfaatkan sebagai background.

Pilihlah gambar yang dimaksud dan dalam sekejap gambar itu telah

melatarbelakangi sel pilihan kita.

Membuat Tabel


Gambar 6.30. Gambar latar belakang pada salah satu sel

6.12. Menulis Teks dan Meletakkan Gambar pada

Tabel.

Setelah belajar banyak hal tentang bagaimana memanipulasi tampilan

sebuah tabel, sekarang saatnya untuk mendayagunakan tabel-tabel itu dengan

cara memasukkan data ke dalamnya, baik teks maupun gambar. Pada bagian ini

tidak begitu banyak diulas materi yang akan dilakukan karena semua teknik

menulis teks dan meletakkan gambar telah dibahas dalam bab-bab sebelumnya

dan masih tetap berlaku dalam tabel. Pembahasaan pada bagian ini hanya

terbatas pada materi-materi yang belum pernah diulas sebelumnya.

6.12.1. Menulis dan Meletakkan Gambar pada Sel.

Seperti pernah kita pelajari, sebuah tabel memiliki banyak sel yang

terbentuk dari perpaduan kolom dan baris. Di dalam sel-sel itulah kita letakkan

teks dan gambar, dan mungkin materi-materi lain. Setiap sel lazimnya berisi teks

atau gambar yang saling berlainan sebab pada dasarnya hakikat sebuah tabel

adalah sebagai penyimpan banyak data dalam satu ruangan yang terbatas.

Sebelum meletakkan sebuah teks atau gambar di dalam sel, pastikan dulu

posisi kursor berada di dalam sel yang dimaksud. Setelah itu, tulislah teks atau

masukkan gambar dengan langkah-langkah seperti pernah diulas dalam bab-bab

awal buku ini.

Membuat Tabel


Gambar 6.31. Meletakkan gambar pada salah satu sel Pada gambar di atas, kita telah meletakkan sebuah gambar pada sel

pertama. Sekarang bagaimana caranya beralih ke sel kedua, ketiga, keempat, dan

seterusnya? Untuk beralih ke sel lain, pilihlah satu cara dari banyak cara yang


��Kliklah tombol Tab untuk melompat ke sel berikutnya.

��Arahkan kursor mouse ke atas sel yang akan dipilih dan kliklah tombol kiri

mouse. Maka, kursor berada pada sel yang baru.

��Untuk mundur ke sel berikutnya, kliklah tombol Shift + Tab.

Gambar 6.32. Meletakkan teks pada sel kedua

Sekarang apa jadinya jika posisi kursor berada di dalam sel yang terletak

di bagian bawah tabel, dalam gambar di atas berarti pada posisi kotak keempat,

dan kita menekan tombol Tab? Secara otomatis DreamWeaver akan menciptakan

baris dan kolom baru.

Membuat Tabel


Gambar 6.33. Satu baris akan terbentuk otomatis jika posisi kursor berada pada kolom keempat dan kita menekan Tab.

6.13. Mengatur Posisi Horizontal dan Vertikal Data.

Data pada tabel, baik teks maupun gambar, bisa diatur berdasarkan

posisi horizontal dan vertikalnya untuk mendapatkan letak yang tepat sesuai

kebutuhan. Posisi yang dimaksud adalah letak data pada masing-masing sel

apakah berada di tengah, atas, bawah, kanan, kiri, atau lainnya.

DreamWeaver menyediakan beragam posisi baik posisi horizontal maupun

vertikal, antara lain: Top, Middle, Bottom, Left, Center, Right, dan Baseline.

Posisi-posisi diatas diatur oleh kotak Horz dan Vert yang ada di Property

Inspector Cell. Dengan demikian untuk mengatur posisi data dalam sel,

letakkanlah kursor pada sel yang dimaksud.

Gambar 6.34. Kotak tempat mengatur posisi horizontal dan vertikal data Secara default DreamWeaver akan memilih perataan horizontal dan

vertikal default yang biasanya akan mengatur posisi teks dan gambar di tengah-

tengah dan kiri sel.

Kita tak akan mengulas masing-masing perataan karena anda bisa

mencobanya sendiri dengan mudah. Namun agar anda mendapat gambaran

yang tepat tentang bentuk-bentuk posisi horizontal dan vertikal yang ada di

DreamWeaver, akan diberikan gambar-gambar pada masing-masing posisi.

Membuat Tabel


Saat anda mengatur letak horizontal dan vertikal data pada sel, maka dua atribut

baru pada tag <td> akan tercetak, yaitu <align=”perataanhorizontal”> dan

<valign=”perataanvertikal”>. Anda bisa melihat kedua tag dan atribut ini

pada HTML Source.

6.14. Menciptakan Header.

Header adalah judul tabel. Mungkin untuk kasus-kasus tertentu kita

ingin agar tabel memiliki nama yang menerangkan data-data di bawahnya.

Untuk melakukan hal ini kita dapat menggunakan header.

Untuk menciptakan header pada tabel, letakkan kursor pada sel di mana

header itu ingin ditulis. Setelah itu, pada Property Inspector Cell bagian Headers,

kliklah check box yang ada disampingnya untuk mengaktifkan pilihan header

a . Setelah itu, ketiklah header pada sel yang telah anda pilih sebelumnya.

Membuat Tabel


Gambar 6.35. Header pada tabel Setelah anda menciptakan header, amatilah pada HTML Source dan disana

tercipta tag baru beserta atribut-atributnya, yaitu <th align=”center”

valign=”middle”>.

6.15. Mengatur Besar Kecil Tabel.

Pada awal buku ini telah diciptakan tabel dengan ukuran sebesar 100%.

Kita akan tahu banyak ukuran-ukuran tabel di dalam bab ini dan bagaimana cara

memodifikasi ukuran itu baik untuk tabel itu sendiri maupun tiap-tiap sel.

DreamWeaver menyediakan dua jenis ukuran yang masing-masing akan

menghasilkan besar kecil yang relatif berbeda. Pertama, ukuran tabel yang

didasarkan pada luas-sempitnya dalam satuan pixel. Dan yang kedua, ukuran

tabel didasarkan pada luas tabel terhadap dokumen. Pada model pertama kita

mengatur besar kecil tabel dengan memasukkan ukurannya dalam satuan pixel.

Semakin besar nilai pixel maka semakin luas dan lebar pulalah tabel yang akan

tercipta. Sedangkan pada model kedua, kita mengatur lebar kecil tabel

berdasarkan perbandingan lebar tabel terhadap dokumen dalam hitungan

persen. Lebar dokumen akan dihitung sebesar 100%. Dengan begitu, jika kita

mengatur tabel dengan ukuran lebar 100% juga, maka tabel itu akan

membentang sampai memenuhi lebar dokumen. Di sisi lain jika kita mengisi

lebar tabel hanya 75%, maka artinya lebar tabel yang akan tercipta hanya sebesar

75% dari lebar keseluruhan dokumen. Lebar dokumen yang 100% itu jika

dihitung dalam satuan pixel akan menghasilkan nilai relatif tergantung pada

ukuran dokumen yang sedang dipakai saat itu, apakah 640 pixel, 800 pixel, atau

1024 pixel. Artinya, jika anda membuat tabel dengan ukuran 75% pada dokumen

yang memiliki lebar 800 pixel, maka sebenarnya tabel itu berukuran 600 pixel.

Membuat Tabel


Cobalah amati tabel di bawah ini yang memiliki ukuran lebar sebesar

75%. Ukuran tabel akan berubah jika lebar dokumen kita ubah pula.

Gambar 6.36. Ukuran tabel dengan panjang 75% dari panjang dokumen

Gambar 6.37. Panjang tabel akan menyesuaikan diri terhadap panjang dokumen berdasarkan persen yang dipilih

Di lain pihak, buahlah tabel dengan lebar sebesar 300 pixel dan amatilah bahwa

ukuran tabel itu tidak akan berubah meskipun dokumen website kita atur

luasnya di lain kesempatan.

6.15.1. Mengubah Besar Kecil Tabel.

Sesudah kita menciptakan tabel dengan ukuran tertentu, besar kecil tabel

baik pada sumbu horizontal dan vertikal akan muncul di Property Inspector

Table bagian W dan H.

Gambar 6.38. Kotak tempat mengatur besar kecilnya tabel Ada dua cara yang disediakan DreamWeaver untuk mengatur besar kecil

tabel yang telah kita buat. Pilihlah salah satu cara diantara dua cara berikut yang

kira-kira paling praktis:

��Aturlah besar kecil tabel pada kotak W dan H seperti tampak pada gambar di

atas.

��Aturlah besar kecil tabel dengan cara memilih tabel dan menyeret handle ke

arah tertentu sampai tabel memiliki ukuran yang berbeda.

Bila cara pertama yang dipilih, maka anda tinggal mengisi ukuran yang baru

pada kotak H dan W di atas. Selain ukuran dalam persen yang bisa dimasukkan,

DreamWeaver juga menerima ukuran dalam satuan pixel.

Membuat Tabel


Namun bila cara kedua yang dipilih, klik tabel sehingga dalam keadaan terpilih

dan tabel dikelilingi garis hitam. Pada garis hitam itu tertempel 3 kotak kecil

yang disebut handle. Jika anda meletakkan kursor mouse di salah satu dari 3

handle tersebut maka kursor mouse anda akan berubah dari anak panah menjadi

kursor Resize. Klik dan drag ke arah kanan-kiri-atas-bawah dan juga serong

kanan untuk memberi nilai besar atau kecil yang berlainan.

Gambar 6.39. Mengatur panjang tabel dengan klik dan drag

Gambar 6.40. Mengatur lebar tabel dengan klik dan drag

Gambar 6.41. Mengatur panjang dan lebar tabel sekaligus Selama anda menyeret handle ke arah-arah tertentu, nilai yang tertulis pada

kotak H dan W akan ikut menyesuaikan diri.

Sedangkan untuk mengatur lebar kecilnya sebuah sel, letakkan kursor di atas

perbatasan satu sel dengan sel lainnya, baik secara horizontal maupun vertikal,

sampai kursor berubah bentuk menjadi kursor Resize. Setelah itu, drag-lah ia ke

kanan-kiri-atas-bawah untuk mendapatkan ukuran sel yang sesuai.

Membuat Tabel


Gambar 6.42. Mengubah ukuran kolom

Gambar 6.43. Mengubah ukuran baris 6.15.2. Mengubah Ukuran dari Pixel ke Persen dan

Sebaliknya.

Jika telah terlanjur mengisi ukuran tabel dengan pixel dan ingin

mengubahnya menjadi persen atau sebaliknya, pergunakanlah ikon Convert Table

Widths to Percent __ dan Convert Table Widths to Pixels yang ada di Property

Inspector Table bagian kiri bawah.

Sebagai contoh, anda telah memasukkan ukuran lebar tabel sebesar 75%

dan ingin mengubahnya menjadi satuan pixel. Untuk itu, segeralah mengklik

ikon Convert Table Widths to Pixels dan lihatlah pada kotak H dan W; ukuran

telah berubah. Anda bisa juga lakukan terhadap ukuran pixel yang bisa anda

ganti ke persen.

6.15.3. Menggunakan Clear Row Height dan Clear

Column Width.

Ada dua ikon lagi yang menempel di Property Inspector Table dimana

akan kita bahas pada kesempatan kali ini, yaitu Clear Row Heights dan Clear

Column Widths. Kedua ikon itu memiliki tampilan seperti di bawah ini:

Gambar 6.44. Ikon Clear Row Heights dan Clear Column Widths

Membuat Tabel


Fungsi kedua ikon tersebut jika diamati lewat namanya rasanya sudah jelas,

yaitu menghilangkan luas dan lebar tabel. Apa maksudnya? Selama ini kita telah

mengatur ukuran tabel saat kita akan menciptakannya, yang dalam buku ini

luasnya diatur 100%. Namun jika kita klik kedua ikon diatas, ukuran tabel akan

dianggap kosong atau nol sehingga tabel berukuran sangat kecil dan bahkan bisa

dibilang tidak berukuran. Kemudian pada perkembangan selanjutnya, ukuran

tabel dan sel-sel yang ada di dalamnya ditentukan oleh luas-lebarnya data yang

dimasukkan. Contohnya, jika anda meletakkan gambar berukuran 100x100 pixel

ke dalam sel, maka sel akan memekarkan ukurannya sampai ia bisa menampung

gambar itu secara utuh.

Lihatlah kedua gambar di bawah ini dimana pada gambar pertama tabel

tidak memiliki ukuran apapun, dan pada gambar kedua tabel dan sel yang ada

di dalamnya berukuran hampir sama besar dengan data yang ada di dalamnya.

Gambar 6.45. Tabel yang tidak memiliki ukuran

Gambar 6.46. Ukuran sel akan menyesuaikan diri terhadap besar data yang dimasukkan ke dalamnya

Semakin banyak dan besar data yang dimasukkan ke dalam sel tabel, semakin

besar pula sel dan tabel itu.

Teknik semacam ini akan anda pergunakan jika anda ingin agar besar tabel

hanya ditentukan oleh data yang tersimpan di dalam setiap sel untuk

menghindari terciptanya ruang kosong.

Membuat Tabel


Gambar 6.47. Banyaknya ruang kosong pada sebuah sel karena ukurannya lebih besar daripada data terkadang cukup mengganggu keindahan web

6.16. Mengurutkan Data pada Tabel.

Mungkin kita telah mengisi tabel dengan data-data tertentu. Pada

perkembangan selanjutnya, kita ingin mengurutkan data yang ada pada tabel itu

yang mungkin pada saat ini masih dalam keadaan acak tak terurut.

DreamWeaver menyediakan fasilitas khusus yang bisa dipakai untuk

mengurutkan data pada tabel, baik berdasarkan angka maupun huruf. Sebagai

referensi anda, fasilitas semacam ini merupakan salah satu kelebihan yang

dimiliki DreamWeaver.

Sebagai latihan, di bawah ini ada sederet data di mana urutannya masih

acak. Kita akan mengurutkan data di bawah ini berdasarkan nomor urut yang

ada di sel sebelah kiri.

Gambar 6.48. Data tabel dalam keadaan tak berurutan

Membuat Tabel


Untuk mengurutkan data, ikuti langkah-langkah berikut ini:

1. Pilihlah tabel sehingga tabel dilingkupi garis hitam.

2. Pilihlah menu Command dan kemudian klik Sort Table.

Gambar 6.49. Mengurutkan data tabel lewat menu 3. Selanjutnya anda akan masuk ke kotak dialog Sort Table.

Gambar 6.50. Mengatur pengurutan tabel 4. Pada bagian Sort By pilihlah kolom dimana semua data yang ada pada tabel

akan diurut berdasarkan kolom tersebut. Dalam hal ini, pilihlah Column 1

yang ada pada kasus diatas berisi angka sebab kita akan mengurutkannya

berdasarkan angka-angka tersebut.

5. Pada bagian Order tentukan apakah data akan diurutkan berdasarkan huruf

(alphabetically) atau angka (numerically). Dalam kasus ini kita pilih

numerically sebab kita ingin mengatur berdasarkan angka.

6. Disampingnya, pilihlah Ascending bila anda ingin data urut dari nilai terkecil

ke nilai terbesar (A-Z, 0-9) atau Descending bila data ingin diurutkan dari nilai

terbesar ke terkecil.

7. Jika anda ingin data urut tidak hanya berdasarkan satu kolom saja seperti

yang baru saja kita lakukan, pi1ihlah kolom lain yang akan dipakai untuk

Membuat Tabel


mengurutkan data pada Then By. Sesudahnya, isi pula bagian Order dan

Ascending-Descending seperti di atas. Namun jika tidak, kosongkan semuanya.

8. Klik check box Sort Includes First Row jika anda ingin baris pertama ikut

diurutkan.

9. Klik tombol OK untuk mengakhiri dan mulai mengurutkan data.

Gambar 6.51. Data tabel sudah diurutkan

6.17. Menumpuk Tabel.

Tabel yang telah kita buat tidak hanya bisa kita isi dengan data saja tapi

juga dengan tabel lain. Artinya, tabel kedua ada di dalam tabel pertama yang jika

diistilahkan akan bernama tabel yang bertumpuk (nested table).

Untuk membuat tabel di dalam tabel caranya sungguh mudah. Langkah

pertama yang harus anda jalani terlebih dulu yaitu menciptakan tabel induk.

Dan yang kedua, ciptakanlah tabel anak yang akan berada di dalam tabel induk.

Baik tabel induk maupun tabel anak bisa dibuat dengan langkah-langkah yang

sama persis dengan pada saat kita meletakkan tabel di atas.

Gambar 6.52. Tampilan tabel bertumpuk

Membuat Tabel


Latihan.

1. Pelbagai contoh latihan dalam bab ini cobalah anda implementasikan.



3. Ditambahi dengan belajar mandiri, lanjutkan penuangan ide untuk

mewujudkan website pribadi kebanggaan anda.

Membuat Layer


BAB 7 MEMBUAT LAYER


��Mampu memahami dan mempraktekkan penggunaan layer pada

DreamWeaver.

7.2. Pengantar.

Pada software Macromedia FreeHand dikenal adanya apa yang disebut

layer. Layer jika diterjemahkan secara bebas berarti lapisan tembus pandang

yang lebih mirip dengan plastik transparansi. Di dunia grafis, layer sangat

dikenal secara luas dan masih digunakan sampai sekarang karena ia memiliki

fungsi yang luar biasa. Para animator perusahaan Disneyland dan perusahaan

digital animasi lainnya menggunakan semacam layer yang disebut animation cell

untuk menggabung tokoh kartun yang bergerak-gerak dengan latar

belakangnya. Tokoh kartun akan dicetak pada kertas transparansi dan akan

ditumpuk di atas gambar latar belakang. Ketika kertas transparansi dan latar

belakang bertumpuk maka akan menimbulkan sensasi seolah-olah kedua

gambar itu bersatu.

Di samping Macromedia FreeHand, Adobe Photoshop juga

memanfaatkan teknologi layer ini. Fungsinya tetap sama, yaitu menciptakan satu

gambar utuh yang terdiri dari banyak lapisan. Dengan adanya banyak lapisan

ini, seorang desainer bisa mengedit satu lapisan tanpa perlu mengubah lapisan

lain atau gambar secara keseluruhan.

Sekarang, layer bukanlah semata milik dunia grafis. Ia mulai memperluas

fungsinya ke dalam dunia website. Pada bagian ini kita akan mengulas panjang

lebar tentang sebuah teknologi yang tersimpan dalam HTML dan DreamWeaver,

yaitu layer. Jika anda sensitif terhadap karya seni website maka anda bisa

temukan dan pergunakan kehebatan yang terkandung di dalam layer ini.

Membuat Layer


7.3. Layer dalam Website.

Layer dalam website memiliki kandungan fungsi yang hampir sama

dengan fungsi layer dalam dunia grafis. Fungsi layer dalam website terutama

untuk menciptakan satu halaman website dari banyak lapisan. Lapisan-lapisan

itu bisa diletakkan dimana saja asal masih dalam satu wilayah halaman website

dan bisa dibuat bertumpuk dengan lapisan lainnya.

Gambar 7.1. Dua buah layer menampung dua data yang berlainan, teks dan gambar Sekilas tampilan layer hampir mirip dengan tabel. Namun pada

kenyataannya layer dan tabel sangat berbeda. Layer lebih fleksibel karena bisa

dipindah kesana kemari, dan antara satu layer dengan layer lainnya tidak

memiliki keterkaitan. Selain itu, satu layer bisa bertumpuk (overlaps) dengan

layer lainnya. Dan yang lebih penting, garis hitam yang membatasi layer seperti

tampak pada gambar 7.1 dan 7.2 tak akan muncul pada Browser.

Layer dalam dunia HTML terbentuk dari salah satu diantara dua tag

berikut ini, DIV atau SPAN. Sebenarnya ada dua tag lain yang ikut

bertanggungjawab menciptakan layer, yaitu LAYER dan iLAYER. Namun

penggunaannya masih sangat jarang. Hanya browser yang berversi 4.0 ke atas

saja yang bisa mengolah layer secara maksimal. Jika browser yang anda pakai

berada di bawahnya, maka layer masih tetap bisa ditampilkan meskipun

diletakkan pada posisi yang keliru.

Membuat Layer


Gambar 7.2. Dua buah layer bisa saling bertumpuk Seperti obyek-obyek lainnya, layer memiliki Property Inspector yang

bertugas mengatur hal-hal yang berkaitan dengan penampakan layer di atas

halaman website. Namanya adalah Property Inspector Layer. Amatilah gambar

Property Inspector Layer di bawah ini sebab kita akan sering menggunakannya.

Gambar 7.3. Property Inspector Layer Property Inspector di atas akan muncul begitu anda memilih salah satu

layer yang ada pada halaman website.

7.4. Menciptakan Layer Baru.

Untuk mendapat gambaran yang jelas tentang apa itu layer, maka tak ada

cara lain yang lebih tepat dibanding mencoba menciptakan layer itu sendiri di

atas dokumen website. DreamWeaver menyodorkan banyak cara yang bisa anda

pakai salah satunya untuk menciptakan layer baru.

Pilihlah satu diantara cara-cara di bawah ini yang menurut anda paling

praktis dan sesuai dengan kebutuhan anda:

��Buatlah layer baru dengan memilih menu Insert > Layer. Sebuah layer baru

dengan ukuran tertentu tercipta di atas halaman website begitu anda

menyelesaikan langkah ini.

Membuat Layer


Gambar 7.4. Membuat layer lewat menu ��Pilihlah ikon Draw Layer yang ada di Objects Pallete Common Panel dan

arahkan kursor mouse di atas dokumen website. Setelah siap, klik dan drag

ia ke kiri-atas-kanan-bawah agar layer tergambar dengan ukuran tertentu.

�� Jika anda ingin menciptakan banyak layer dalam sekali langkah, pilihlah ikon

Draw Layer dan tekanlah tombol Shift yang ada di atas keyboard. Kliklah

tombol kiri mouse dengan tanpa melepas tombol Shift tadi dan mulailah

menggambar layer pertama. Jika sudah, lepaskan tombol mouse namun

tombol Shift masih tetap ditekan. Mulailah menggambar layer kedua dan

seterusnya. Jika sudah cukup, lepaskan tombol mouse diikuti tombol Shift.

��Cara terakhir, kliklah ikon Draw Layer dan drag ia ke atas halaman website.

Jika sudah, lepaskan tombol mouse.

Jika semua langkah di atas diterapkan dengan benar, maka

DreamWeaver akan menciptakan layer baru buat anda.

Gambar 7.5. Tampilan banyak layer di dalam satu halaman

Membuat Layer


Masing-masing layer ditandai oleh sebuah kotak. Warna garis akan berubah dari

abu-abu menjadi hitam saat anda memilih layer yang bersangkutan. Selain

kotak-kotak layer, di pojok kiri atas tercipta deretan ikon-ikon kecil. Jika anda

ingin memilih salah satu layer yang ada di sana, cukuplah mengklik kotak layer

atau mengklik salah satu ikon yang tepat yang ada di pojok kiri atas dokumen.

Segera setelah anda memilih layer, Property Inspector Layer akan muncul.

Amatilah segera HTML Source setelah anda menciptakan layer baru

sebab di sana tercetak tag, yaitu <div> dengan pelbagai atribut-atributnya.

7.5. Menggeser Layer.

Seperti pernah kita singgung sedikit, layer bisa kita geser ke segala arah

sesuai kebutuhan dan keinginan kita. Atas-bawah-kiri-kanan-diagonal adalah

arah yang bisa dilalui layer.

Untuk menggeser layer ke seluruh bagian dalam dokumen website, pilihlah

terlebih dahulu layer yang akan dipindahkan dengan cara mengkliknya sampai

layer itu dikelilingi garis hitam. Setelah itu, pergunakan salah satu yang


��Pada kotak L dan T masukkan angka koordinat tempat layer itu akan

memposisikan diri pada wilayah yang baru. Angka yang anda masukkan

berada pada satuan pixel.

Gambar 7.6. Kotak tempat memposisikan layer ��Pindahkan kursor mouse ke atas salah satu sisi layer yang telah terpilih

sampai kursor itu berubah menjadi bentuk kursor Move. Klik dan geserlah ke

arah yang anda inginkan.

Membuat Layer


Gambar 7.7. Memindah layer dengan cara klik dan drag

Gambar 7.8. Posisi layer yang baru sedang dicari �� Jika anda ingin menggeser layer satu pixel demi satu pixel, tekanlah tombol

anak panah di keyboard. Layer yang terpilih akan tergeser 1 pixel sesuai

tombol anak panah yang anda tekan.

Atribut yang akan berubah-ubah saat anda memindah layer dari satu sisi

ke sisi yang lain pada tag <div> adalah <left> dan <top>.

7.6. Mengatur Besar Kecil Layer.

Saat anda menciptakan layer lewat cara pertama dan keempat pada

pembahasan yang telah lalu, layer yang tercipta memiliki ukuran yang mungkin

tidak sesuai seperti ketika anda menciptakannya lewat cara kedua dan ketiga.

Dalam hal ini anda perlu mengatur besar kecilnya layer sampai berada pada

ukuran yang sesuai.

Membuat Layer


7.6.1. Mengatur Ukuran Satu Layer.

Untuk mengatur ukuran satu layer, pilihlah salah satu cara berikut ini

yang telah ditawarkan oleh DreamWeaver:

��Pilihlah layer yang akan diperbesar atau diperkecil. Alihkan pandangan anda

pada kotak W dan H. Kedua kotak itu bertanggung jawab untuk mengatur

ukuran layer. Masukkan tinggi pada kotak Height dan lebar pada kotak

Width dengan angka dalam satuan pixel.

Gambar 7.9. Kotak tempat mengatur besar kecil layer ��Pilihlah layer sehingga layer dikelilingi garis hitam. Pada garis hitam itu

tertempel delapan buah kotak hitam yang disebut handle. Jika anda

meletakkan kursor mouse di atasnya, maka kursor anak panah akan berubah

menjadi kursor Resize. Kliklah pada salah satu handle dan drag ke arah

dalam dan keluar untuk menghasilkan ukuran baru, baik pada lebar maupun

tingginya.

Gambar 7.10. Memperbesar panjang layer dengan menggesernya ke kanan

Gambar 7.11. Memperbesar lebar layer dengan menggesernya ke bawah

Membuat Layer


Gambar 7.12. Memperbesar panjang dan lebar layer sekaligus ��Untuk memperbesar dan memperkecil layer satu pixel demi satu pixel,

tekanlah tombol Ctrl+Anak Panah. Ukuran layer yang terpilih akan

menyesuaikan diri dengan arah anak panah keyboard yang anda tekan.

7.6.2. Mengatur Ukuran pada Beberapa Layer.

Di sini kita akan mengatur ukuran beberapa layer sekaligus dalam satu

waktu. Namun metode yang akan kita pelajari mungkin tidak sesuai dengan

gambaran anda. Anda tidak bisa mengatur setiap layer untuk memiliki ukuran

yang berbeda-beda satu dengan lainnya. Yang dimaksud mengatur ukuran

beberapa layer sekaligus adalah mengontrol ukuran semua layer agar memiliki

ukuran yang identik satu dengan lainnya.

Untuk memilih beberapa layer sekaligus, pilihlah layer pertama dengan

cara mengkliknya. Kemudian beralihlah pada layer kedua dan tekanlah tombol

Shift+Klik kiri mouse. Lakukanlah berulangkali pada layer yang berlainan.

Layer yang pertama kali dipilih memiliki tampilan yang sedikit berbeda

dengan layer yang dipilih terakhir. Kotak-kotak handle pada layer-layer awal

akan berwarna putih sedangkan layer yang dipilih terakhir akan berwarna

hitam.

Membuat Layer


Gambar 7.13. Memilih dua layer sekaligus Layer-layer yang ber-handle putih kita sebut secara bebas sebagai layer

dependen. Dan layer yang ber-handle hitam disebut sebagai layer independen.

Layer dependen ini akan menyesuaikan diri terhadap ukuran layer independen.

Dengan demikian jika layer independen memiliki lebar 100, maka layer-layer

dependen yang lain akan memiliki ukuran yang sama.

Untuk menyamakan ukuran layer-layer dependen terhadap independen

lakukanlah salah satu dari beberapa cara berikut ini:

��Pilihlah menu Modify dan kemudian arahkan kursor mouse ke Align. Kliklah

Make Same Width jika anda ingin layer-layer dependen sama lebar dengan

layer independen. Setelah itu kliklah Make Same Height jika ingin layer-layer

dependen sama tinggi dengan layer independen.

Gambar 7.14. Menu untuk mengatur lebar dan panjang yang sama pada beberapa layer

Membuat Layer


Gambar 7.15. Semua layer telah memiliki panjang yang sama ��Pada Property Inspector Layer masukkan ukuran yang baru pada kotak W

dan H yang ada di bagian Multiple Layer. Berbeda dengan cara pertama,

semua layer akan menyesuaikan diri dengan ukuran yang kita masukkan

pada kotak W dan H tersebut.

Gambar 7.16. Ketiga layer telah memiliki panjang dan lebar yang sama Sebagai catatan tambahan, saat beberapa layer dalam keadaan terpilih dan anda

memindah salah satu diantaranya, maka semua layer itu akan ikut juga bergerak.

7.7. Menggunakan Grid.

Salah satu fasilitas khusus yang dimiliki DreamWeaver adalah Grid. Grid

adalah garis-garis yang membentang secara vertikal dan horizontal di atas

halaman website. Fungsi garis ini semata-mata untuk membantu anda

memindah serta mengatur ukuran layar dan obyek-obyek lainnya ke posisi dan

ukuran yang lebih tepat. Grid ini tak akan tampak dalam browser karena

bukanlah HTML.

Untuk mengaktifkannya, ikuti langkah-langkah berikut ini:

1. Pilihlah menu View > Grid.

Membuat Layer


2. Langkah selanjutnya, klik Show Grid. Anda juga bisa menggunakan shortcut

dengan kombinasi Ctrl+Alt+G.

Selanjutnya tampilan grid pada halaman website DreamWeaver akan

tampak seperti gambar di bawah ini:

Gambar 7.17. Tampilan grid pada dokumen web Pada saat yang sama anda bisa menggeser obyek-obyek seperti layer,

tabel, dan gambar, ke posisi yang lebih tepat dengan bantuan grid. Namun jika

anda melakukannya saat ini, ada kemungkinan hasilnya tidak akan rapi dan

meleset kecuali jika anda sangat teliti dalam mengerjakannya. Yang perlu anda

lakukan adalah melakukan snapping seperti yang akan kita bahas berikut ini.

7.7.1. Snapping Grid ke Layer.

Snapping grid ke layer diperlukan jika anda ingin menggeser atau

memperbesar layer pada lokasi dan ukuran yang tepat. Sebelum anda

melakukan snapping, layer bisa anda geser ke arah manapun secara bebas.

Begitu juga dengan ukurannya yang bisa anda perbesar maupun perkecil secara

mudah. Namun jika anda telah melakukan snapping, layer bergeser seolah-olah

Membuat Layer


ia terikat pada grid dan layer akan menempel ke garis-garis grid yang terdekat

secara otomatis. Begitu pula jika anda mengatur ukurannya. Dengan snapping

grid ini setiap gerakan akan sangat teratur berdasarkan garis-garis grid.

Untuk melakukan snapping grid ke layer, lakukan langkah-langkah berikut ini:

1. Pastikan layer yang akan dipindah serta diperbesar dalam keadaan terpilih.

2. Aktifkan grid.

3. Masukkan ke menu View > Grid dan pilihlah Snap To Grid

4. Layer telah di-snap terhadap grid.

Kini cobalah menggeser dan mengatur ukuran layer dan anda akan merasakan

bahwa layer bergerak tidak sebebas saat layer belum di-snap.

7.7.2. Mengatur Grid.

Grid yang tampak di layar monitor bisa kita atur untuk mendapatkan

garis-garis yang lebih sesuai dengan kebutuhan. Kita bisa atur lebar kecil kotak-

kotak yang terbentuk dari tiap-tiap garis vertikal dan horizontal, mengatur

warna garis, dan sebagainya.

Untuk mengatur grid, lakukan langkah-langkah berikut ini:

1. Masuklah ke menu View > Grid dan pilihlah Edit Grid.

2. Setelah itu anda akan masuk ke kotak dialog Grid Setting.

Gambar 7.18. Kotak dialog tempat mengatur grid 3. Pada bagian Show Grid kliklah check box yang ada di samping kirinya untuk

menampilkan grid di atas dokumen website dan sebaliknya.

Membuat Layer


4. Pada bagian Spacing anda bisa mengatur berapa besar kecil kotak-kotak pada

grid.

Gambar 7.19. Grid dengan nilai spacing 10 pixel 5. Pada bagian Color anda bisa tentukan warna grid.

6. Di bagian Display tentukanlah apakah grid ditampilkan dalam wujud garis-

garis (Lines) atau titik (Dots).

Gambar 7.20. Grid dalam bentuk titik-titik (dots) 7. Pada bagian Snap to Grid anda bisa klik check box yang ada di samping

kirinya bila anda ingin melakukan snapping terhadap obyek tertentu.

7.8. Menumpuk Layer.

Di atas telah dibuat layer, cobalah untuk menggeser satu layer sampai

posisinya berada di atas layer yang lain. Hasilnya, layer bisa bertumpuk. Layer

yang bertumpuk ini bisa terjadi karena anda tidak mengaktifkan pilihan Prevent

Overlaps.

Jika anda mengaktifkan pilihan itu, maka layer-layer yang ada di dalam

dokumen web tidak akan bisa bertumpuk. Untuk mengecek apakah anda

mengaktifkan atau menonaktifkan pilihan Prevent Overlaps, masuklah ke

Window Layers dan lihatlah apakah bagian itu berada dalam kondisi terpilih

(ada tanda ceknya). Jika benar maka layer tak bisa bertumpuk dan begitu pula

sebaliknya.

Membuat Layer


Gambar 7.21. Prevent overlaps untuk mencegah layer saling bertumpuk Jika pilihan di atas aktif maka anda tak sanggup menggeser layer ke atas lokasi

di mana ada layer lain di bawahnya.

7.9. Meletakkan Gambar Latar Belakang.

Sama seperti tabel, layer juga bisa disisipi gambar latar belakang.

Gambar latar belakang akan tetap memiliki ukuran seperti yang ia miliki

sehingga jika layer berukuran lebih kecil daripada gambar latar belakang,

gambar itu akan terpotong. Namun sebaliknya jika lebih besar, gambar itu akan

tampil berulang kali (tiled).

Untuk memasukkan gambar latar belakang, anda cukup mencari dan

memasukkan nama file gambar yang ingin anda jadikan background pada kotak

Bg Image yang ada pada Property Inspector Layer.

Gambar 7.22. Gambar latar belakang pada layer Jika anda memilih beberapa layer sekaligus dan pada saat yang sama

anda ingin letakkan gambar latar belakang, maka gambar latar belakang itu akan

menempel pada semua layer yang terpilih.

Membuat Layer


Gambar 7.23. Gambar latar belakang pada beberapa layer Setelah anda meletakkan gambar latar belakang, pada tag <div> akan

tercetak atribut baru, yaitu <background-image:gambar> dan <layer-

background-image:gambar>. Lihatlah pada HTML Source.

7.10. Mewarnai Layer.

Setiap layer yang ada di lingkungan dokumen website bisa kita warnai

untuk membedakan satu layer dengan layer lainnya atau untuk membuatnya

lebih berseni. Jika anda mewarnai sebuah layer, layer itu akan terblok oleh warna

yang anda pilih. Dengan begitu, warna itu telah menjadi warna latar belakang.

Untuk mewarnai layer, pilihlah layer yang akan dipoles dengan warna

kesukaan anda. Pada Property Inspector Layer, pilihlah warna yang dimaksud

dengan mengklik ikon Bg Color atau masukkan kombinasi

angka heksadesimalnya pada kotak di samping kanan ikon itu.

Gambar 7.24. Layer yang telah memiliki warna latar belakang Setelah anda mewarnai layer dengan warna latar belakang maka terciptalah

atribut baru pada tag <div> yang bisa anda amati pada HTML Source, yaitu

<background-color:warna> dan <layer-background-color:warna>.

Membuat Layer


7.11. Mengganti Tag Layer.

Seperti telah disinggung di atas, tag untuk membuat layer dalam dunia

HTML berjumlah empat buah, yaitu <DIV>, <SPAN>, <LAYER>, dan <ILAYER>. Hal

ini memang dirasa istimewa mengingat obyek-obyek lainnya hanya memiliki

satu tag saja. Keempat tag itu memang akan menghasilkan layer yang sama

meskipun nama dan atribut-atributnya berbeda.

Diantara kedua tag pertama yang disebutkan di atas, tidak akan

menimbulkan masalah jika pengakses menggunakan browser yang berversi di

atas 4.0. Namun jika anda menggunakan <LAYER> dan <ILAYER>, akan timbul

bencana jika si pengakses web menggunakan browser selain Netscape Navigator

sebab kedua tag itu hanya dikenali oleh Navigator saja.

DreamWeaver menyediakan fasilitas yang akan memudahkan kita

mengganti tag-tag di atas menjadi tag-tag lainnya tanpa mengganggu layer

secara keseluruhan. Caranya, pilihlah tag yang sesuai pada drop down menu Tag

yang ada di Property Inspector Layer.

Setelah anda memilih salah satunya, amatilah bahwa HTML Source

mengganti tag yang terdahulu dengan tag yang baru beserta atribut-atributnya.

Amatilah juga bahwa layer yang tergambar di atas dokumen anda tidak

terpengaruh oleh penggantian tag-tag itu.

Tapi penting bagi anda untuk dicatat, berhubung setiap tag memiliki

atribut yang berbeda-beda maka setiap kali anda memilih tag yang berlainan,

tampilan Property Inspector Layer akan berubah menyesuaikan diri pada setiap

tag. Cobalah lihat masing-masing tampilan Property Inspector Layer untuk tag

DIV dan LAYER di bawah ini:

Gambar 7.25. Property Inspector Layer dengan DIV sebagai tag-nya

Gambar 7.26. Property Inspector Layer dengan LAYER sebagai tag-nya

Membuat Layer


7.12. Meletakkan Obyek pada Layer.

Layer tidaklah dirancang untuk dibiarkan kosong. Ia harus diisi oleh

obyek-obyek lain, seperti gambar dan teks misalnya. Untuk memasukkan obyek-

obyek itu letakkan kursor di dalam layer yang akan ditempati obyek-obyek itu.

Setelah kursor berada di dalamnya, Property Inspector Layer akan lenyap dan

diganti Property Inspector Text. Saat itulah anda sudah bisa mengisinya dengan

teks.

Namun jika anda ingin mengisinya dengan gambar atau obyek lainnya,

lakukanlah langkah-langkah seperti yang pernah kita lakukan dulu saat

memasukkan obyek-obyek tersebut. Hasilnya akan tampak seperti gambar di

bawah ini:

Gambar 7.27. Obyek-obyek diletakkan pada layer Obyek-obyek tersebut bisa diatur sedemikian rupa seperti pernah kita lakukan

dulu, seperti menengahkan obyek dan sebagainya.

7.13. Mengenal Stacking Order.

Telah berulangkali kita singgung bahwa satu layer bisa bertumpuk

dengan layer-layer lainnya. Kemudian bagaimana model penumpukannya? Jika

kita membuat layer lebih dari satu buah, maka layer-layer itu akan ditandai oleh

nomor urut. Layer pertama bernomor 1, layer kedua bernomor 2, dan seterusnya.

Secara default layer yang bernomor lebih tinggi akan menumpuk layer

yang bernomor lebih rendah. Ilustrasinya dapat anda lihat pada gambar di

bawah ini:

Membuat Layer


Dengan begitu, jika anda meletakkan teks di atas layer pertama dan

gambar di atas layer kedua maka teks itu akan tertumpuk gambar, dan

sebaliknya. Dan ini bisa menjadi masalah yang cukup mengganggu jika hasil

yang akan terjadi tidak sesuai harapan.

Fasilitas Stacking Order diciptakan oleh DreamWeaver untuk mengatasi

permasalahan di atas. Dengan fasilitas ini kita bisa mengatur nomor urut pada

masing-masing layer. Sebagai contoh, kita bisa mengubah nomor urut satu

menjadi dua, nomor dua menjadi nomor satu, dan sebagainya. Dengan begitu

kita bisa mengatur layer mana yang akan menumpuk layer lainnya.

7.13.1. Mengganti Nomor Urut Layer.

Pada bagian ini kita akan mencoba mengganti nomor urut layer-layer

yang telah kita buat. Sebagai latihan buat anda, ciptakanlan tiga buah layer

dimana secara otomatis layer-layer itu akan memiliki nomor urut 1-3.

Untuk mendeteksi nomor urut pada masing-masing layer, kliklah salah

satu layer agar Property Inspector Layer muncul di dalam monitor komputer

anda. Palingkan perhatian anda pada kotak Z-Index dan anda akan

temukan nomor urut layer yang anda pilih.

Selain lewat cara di atas, anda bisa melihat daftar nomor urut layer-layer

secara keseluruhan dengan langkah-langkah sebagai berikut:

1. Pilihlah menu Window.

1

2

3

Membuat Layer


Gambar 7.28. Menu untuk menampilkan jendela layer 2. Kliklah Layers, maka pada layar monitor anda akan tambah semarak dengan

hadirnya jendela baru, yaitu Layers.

3. Anda juga bisa menekan tombol F2 untuk menampilkan jendela Layers.

Gambar 7.29. Tampilan jendela layer Untuk mengganti nomor urut pada masing-masing layer, lakukanlah

salah satu cara berikut ini:

�� Jika anda menggunakan Property Inspector Layer, masukkanlah nomor urut

yang baru pada kotak Z-Index. Jika nomor urutnya tinggi maka ia akan

menumpuki layer bernomor urut rendah.

�� Jika anda menggunakan jendela layers, kliklah sekali pada salah satu nomor

urut layer yang berada di kolom Z. Gantilah dengan nomor urut yang baru.

Membuat Layer


Gambar 7.30. Mengganti nomor urut salah satu layer Untuk membuktikan efek yang terjadi setelah anda mengganti nomor

urut sebuah layer terhadap penampakannya di layar monitor, cobalah amati

kedua gambar berikut ini dimana masing-masing layer memiliki nomor urut

tertentu dan kemudian nomor urutnya diubah.

Gambar 7.31. Layer teks menumpuki layer gambar

Gambar 7.32. Layer gambar menumpuki layer teks Jika anda mengganti nomor urut pada tiap-tiap layer maka atribut <z-

index> yang ada pada tag <div> dan lainnya akan ikut berubah.

7.14. Menggunakan Overflow.

Hampir semua obyek bisa dimasukkan ke dalam layer, seperti teks,

gambar, tabel, dan lainnya. Masalah mungkin muncul jika ukuran layer lebih

kecil daripada ukuran sebuah obyek. Jika kita memiliki gambar dengan ukuran

Membuat Layer


100 x 100 pixel dan akan kita masukkan ke dalam layer yang lebih sempit, kira-

kira berukuran 50 x 50 pixel, maka ada banyak kemungkinan yang akan terjadi.

Apakah layer akan memekarkan ukurannya, gambar akan terpotong, atau

kemungkinan-kemungkinan lainnya. Di dalam bagian ini kita akan mempelajari

kemungkinan-kemungkinan tersebut.

Secara default jika ada sebuah obyek yang berukuran lebih besar

daripada luas layer maka layer akan memekarkan diri sehingga obyek bisa

tertampung seluruhnya. Namun anehnya, atribut Width dan Height yang

tercantum baik pada kotak W dan H serta pada HTML Source akan bernilai

tetap.

DreamWeaver melalui Property Inspector Layer-nya menyediakan

beberapa pilihan untuk mengatasi masalah di atas, yaitu apa yang terjadi jika

ukuran obyek lebih besar daripada ukuran layer. Pilihan-pilihan itu tersimpan

dalam sebuah fasilitas yang disebut Overflow . Amatilah kotak

Overflow yang ada pada Property Inspector Layer.

Ada empat pilihan dalam Overflow yang masing-masing akan

menciptakan sensasi yang berbeda-beda pada tampilan obyek di dalam layer:

��Visible: Jika anda memilih visible, semua bagian dalam obyek akan

ditampilkan di layar monitor meskipun ukuran layer lebih kecil daripada

ukuran obyek itu.

Gambar 7.33. Visible akan membuat seluruh obyek dalam layer akan tampak ��Hidden: Jika anda memilih hidden, obyek akan terpotong bila ukurannya

lebih besar daripada ukuran layer. Besarnya potongan yang akan terjadi

sesuai dengan luas layer. Lihat gambar 7.34.

��Scroll: Jika anda memilih scroll, layer akan menciptakan tombol scrolling

(scroll bar), baik arah atas-bawah maupun kiri-kanan bila obyek lebih besar

daripada ukuran layer. Dengan begitu, jika si pengunjung ingin melihat

Membuat Layer


obyek secara keseluruhan cukuplah ia menggeser tombol scrolling yang ada

di sana. Lihat gambar 7.35.

Gambar 7.34. Hidden akan membuat beberapa bagian obyek hilang

Gambar 7.35. Scroll akan memunculkan scroll bar pada layer ��Auto: Jika anda memilih auto, layer akan dilengkapi scroll bar hanya bila

ukuran obyek lebih besar daripada layer. Jika tidak maka scroll bar tidak

akan muncul.

Setelah anda memilih salah satu pilihan Overflow, HTML Source akan mencetak

atribut baru pada tag <div>, yaitu <overflow:pilihan>.

Sebagai catatan penting buat anda, pilihan overflow di atas mungkin

tidak akan bekerja dengan maksimal jika anda menggunakan Netscape

Navigator dan browser-browser selain Internet Explorer.

7.15. Menggunakan Clip.

Clip dipakai jika kita ingin mengatur penampakan sebuah obyek dalam

layer berdasarkan bentuk segi empat. Pada kenyataannya, hampir semua obyek

yang tampak di layar monitor memiliki bentuk segi empat, yang masing-masing

memiliki koordinat kiri-kanan-atas-bawah. Dengan fasilitas Clip yang ada pada

Property Inspector Layer, kita bisa mengatur seberapa besar obyek ingin

ditampilkan di dalam layer, apakah tampak secara utuh atau terpotong.

Membuat Layer


Gambar 7.36. Kotak tempat mengatur clip Clip memiliki empat koordinat seperti tampak pada gambar di atas, yaitu

[L]eft, [R]ight, [T]op, dan [B]ottom. Masing-masing mewakili koordinat dalam

bentuk segi empat, seperti gambar di bawah ini:

Sekarang obyek yang akan kita masukkan ke dalam layer juga memiliki bentuk

segi empat. Apa jadinya jika kita menulis koordinat pada daerah Clip dengan

nilai yang lebih kecil daripada ukuran obyek? Benar, akibatnya obyek akan

terpotong. Dan begitu juga sebaliknya jika koordinat segi empat yang kita

masukkan lebih besar daripada ukuran obyek; obyek akan muncul secara utuh.

Sebagai pedoman, gambar logo DreamWeaver yang tampak di bawah ini

memiliki luas sebesar 176 x 110. Sekarang cobalah dimasukkan koordinat

sebesar: 0, 0, 180, 120 masing-masing untuk L, T, R, dan B. Hasilnya, gambar

akan muncul secara utuh seperti ini:

Gambar 7.37. Jika clip sama atau lebih besar dengan ukuran obyek maka gambar akan muncul secara utuh.

Namun cobalah untuk mengisi koordinat dengan nilai-nilai sebagai berikut ini: 0,

0, 100, 100 masing-masing untuk L, T, R, dan B. Akibatnya gambar akan

terpotong seperti tampilan di bawah ini karena koordinat itu lebih kecil daripada

luas gambar secara keseluruhan.

L,T

R,B

Membuat Layer


Gambar 7.38. Clip memotong obyek karena lebih kecil daripada obyek Setelah anda menggunakan fasilitas Clip, HTML Source akan mencetak atribut

baru pada tag <div>, yaitu <clip:rect(L,T,R,B)>.

7.16. Menyembunyikan Layer.

Suatu hari mungkin anda secara sadar atau tidak sadar telah menciptakan

banyak layer di atas dokumen website sehingga tampilan web menjadi tidak

karuan. Anda sulit membedakan obyek A diletakkan pada layer yang mana, B

layer nomor berapa, dan seterusnya. Akibatnya, proses pengeditan obyek pada

layer mungkin akan mengalami hambatan.

Untuk menjaga dari kesemrawutan tampilan website akibat banyaknya

layer yang menumpuk di atas dokumen, anda bisa menggunakan satu fasilitas

lagi yang disebut Visibility. Fasilitas ini berfungsi untuk menampilkan dan

menyembunyikan sebuah layer atau beberapa layer sekaligus. Jika anda ingin

mengedit sebuah obyek tanpa mau terganggu oleh layer-layer lainnya,

sembunyikanlah layer-layer itu sehingga yang tertinggal hanyalah layer dengan

obyek yang akan dimodifikasi.

Untuk menyembunyikan dan menampakkan kembali sebuah layer

dengan menggunakan fasilitas Visibility, pakailah salah satu cara dari pelbagai

cara berikut ini:

��Pakailah fasilitas Vis yang ada di Property Inspector Layer. Jika anda memilih

menu Visible maka layer yang terpilih akan tampak. Sedangkan

jika anda memilih Hidden maka layer yang terpilih akan

disembunyikan.

��Pakailah fasilitas jendela Layers yang bisa anda munculkan setelah anda

menekan tombol F2. Pada jendela layer itu akan anda temui gambar mata,

Membuat Layer


dimana gambar mata terbuka Berarti layer ditampilkan (visible)

sedangkan mata tertutup berarti layer disembunyikan (hidden) .

Kliklah gambar mata itu untuk menutup dan membuka matanya.

Setelah anda memilih visibility pada layer yang terpilih amatilah jendela HTML

Source sebab pada tag <div> tercetak atribut baru, yaitu

<visibility:hidden/visible>.

Latihan.

1. Cobalah sebaik mungkin, pelbagai latihan yang ada di bab ini agar anda

lebih dalam memahami DreamWeaver.



3. Dengan adanya layer ini, sebenarnya bisa juga dibuat suatu animasi

sederhana dengan bantuan Timelines Inspector. Mintalah pada dosen/asisten

untuk mendemonstrasikan animasi sederhana dengan menggunakan layer

ini.

4. Bagaimana desain website pribadi anda? Dengan materi yang ada bab ini

pasti akan lebih baik lagi. Maka dari itu teruslah melanjutkan proyek pribadi

anda membuat website pribadi anda masing-masing.

Menciptakan Frame


BAB 8 MENCIPTAKAN FRAME


��Mampu memahami dan menggunakan frame pada DreamWeaver.

8.2. Pengantar.

Adanya frame masih tetap memiliki pesona tersendiri dalam dunia

desain website. Ia menawarkan solusi untuk beberapa perkara desain website,

seperti mencegah penulisan dan peletakan obyek dalam website berulangkali,

dan sebagainya. Frame sendiri merupakan sebuah teknologi yang biasa dipakai

untuk menggabung beberapa halaman website menjadi satu halaman website

yang utuh. Masing-masing halaman berdiri sendiri dalam satu file yang berbeda-

beda. Sebagai contoh, jika satu halaman website terdiri dari tiga frame maka ada

empat file yang membentuk halaman itu; tiga file untuk frame dan satu file

dipakai untuk menggabung tiga file itu menjadi satu.

Sebagai ilustrasi agar anda memiliki visualisasi yang lebih jelas tentang

keberadaan frame dalam halaman website, amatilkerangka website di bawah ini:

Pada gambar di atas, anda bisa lihat sendiri satu halaman website,

katakanlah index.htm, mengandung tiga buah file yang masing-masing berdiri

sendiri: judul.htm, menu.htm, dan isi.htm. Ketiganya bergabung menjadi satu

dalam file index.htm dan lahirlah satu halaman website yang utuh dimana

seolah-olah hanya satu file saja yang membentuknya. Gambar di bawah ini

merupakan contoh konkrit penggunaan frame dalam halaman website dimana

Judul.htm

Menu.htm

Isi.htm

Menciptakan Frame


anatominya sama dengan gambar di atas, yaitu satu halaman website terdiri atas

3 buah file.

Gambar 8.1. Tampilan frame pada sebuah website

8.3. Macam-macam Anatomi Frame dalam Website.

Anda telah melihat salah satu anatomi frame dalam website di atas, yaitu

satu halaman terdiri atas tiga buah file dimana masing-masing file memiliki

posisi tersendiri. Anatomi frame dalam website pada dasarnya tidak terbatas

karena anda bisa dengan bebas menciptakan banyak variasi frame dalam satu

halaman website. Namun dari banyak variasi itu bisa diambil beberapa model

frame seperti yang telah disediakan DreamWeaver untuk kita.

Model-model frame itu antara lain seperti di bawah ini:

Menciptakan Frame


Frame model Menu-Isi

Frame model Isi-Menu

Frame model Judul (Menu Atas)-Isi

Frame model Isi-Menu Bawah

Frame model Menu-Judul (Menu Atas)-Isi

Frame model Judul (Menu Atas)-Menu-Isi

Frame model segi empat segi empat

Frame model menu, judul pojok kiri atas-menu atas (Judul)-Isi

Untuk menciptakan salah satu dari keenam anatomi di atas, pakailah

Objects Pallete Frames Panel, seperti tampak pada gambar di bawah ini:

Gambar 8.2. Objects Pallete Frames Panel Masing-masing bagian frame berdiri secara independen karena frame-

frame itu merupakan file-file yang saling terpisah. Akibatnya, jika anda

mengedit satu frame maka frame-frame yang lain tidak akan ikut berubah. Selain

itu, jika anda menggeser tampilan satu frame dengan scroll bar yang ada di

Menciptakan Frame


dalamnya, tampilan frame yang lain akan tetap berada di tempatnya tanpa

terpengaruh frame yang digeser itu.

Selama anda bekerja dengan frame, muncul Property Inspector baru yang

akan sering digunakan untuk memodifikasi frame-frame yang ada, yaitu

Property Inspector Frame seperti tampak pada gambar di bawah ini:

Gambar 8.3. Property Inspector Frame

8.4. Mengenal Frame dan Frameset.

DreamWeaver mendefinisikan halaman website yang ber-frame dalam

dua istilah, frame dan frameset. Frameset adalah halaman website yang

mengandung frame, sedangkan frame menunjuk pada masing-masing frame

yang membentuk satu halaman website. Coba amati gambar berikut ini untuk

membedakannya.

Frameset

Frame Pada gambar di atas sedikit tergambarkan perbedaan antara frameset

(gambar sebelah kiri) dan frame (gambar sebelah kanan), dimana frameset

menunjuk seluruh halaman website yang di dalamnya terdiri atas banyak frame,

sedangkan frame menunjuk frame-frame secara tunggal.

8.5. Membuat Frame.

Setelah mengupas banyak mengenai anatomi frame, marilah kita

sekarang membuat frame dalam satu halaman website. Setelah menciptakan

sejumlah frame, anda akan mendapat banyak file yang jumlahnya tergantung

Menciptakan Frame


pada berapa frame yang anda buat plus satu file tambahan yang bertugas

menyatukan frame-frame itu menjadi satu halaman web.

Untuk menciptakan frame, pilihlah satu diantara dua cara berikut ini:

��Pilihlah model-model frame yang telah disediakan secara cuma-cuma oleh

DreamWeaver. Model-model itu tersimpan dalam Objects Pallete Frames

Panel. Ada banyak model disana, yaitu Left , Right , Top , Bottom

a , Left & Top , Left Top , Top Left , dan Split . Setelah

anda memilih salah satu diantaranya, halaman anda akan terpecah menjadi

beberapa frame tergantung pola yang anda pilih.

��Buatlah frame secara manual dengan menekan menu Insert > Frames. Lalu

pilihlah posisi-posisi frame yang ada pada menu itu.

Gambar 8.4. Membuat frame lewat menu Pada dasarnya, baik anda menciptakan frame lewat cara pertama atau

kedua hasilnya akan relatif sama. Cobalah amati tampilan frame berikut ini

dalam DreamWeaver:

Menciptakan Frame


Gambar 8.5. Dokumen web yang memiliki empat buah frame Sesuai gambar di atas, anda akan mendapat lima buah file sekaligus,

empat file untuk frame dan satu file untuk menggabungkan kelima file itu

menjadi satu halaman web.

Setelah anda membuat frame, HTML Source akan mencetak tag baru buat

anda, yaitu <frameset> dan <frame>.

Untuk memilih frame-frame itu, posisikan kursor mouse anda di atas

garis pemisah (border) antara satu frame dengan frame lainnya dan kliklah tepat

di sana sehingga border itu berubah menjadi garis putus-putus. Atau cara yang

lebih praktis, aktifkan jendela Frames dengan menekan tombol Shift+F2 dan klik

salah satu frame yang akan dipilih pada jendela itu.

Gambar 8.6. Memilih salah satu frame lewat jendela frames

8.6. Menghapus Frame.

Saat ini mungkin anda masih tenggelam dalam keseriusan merangkai

frame di atas halaman website sembari mengikuti buku ini. Tak jarang frame

Menciptakan Frame


yang telah anda ciptakan tidak anda senangi atau tidak dibutuhkan lagi

keberadaannya, dan anda ingin menghapusnya dari halaman web.

DreamWeaver tidak menyediakan menu atau perintah khusus yang akan

membuat satu frame yang kita pilih terhapus begitu saja. Untuk melenyapkan

satu buah frame, ikuti langkah-langkah berikut ini:

1. Pilihlah frame yang akan dihapus lewat jendela Frame. Frame yang terpilih

akan dikelilingi garis putus-putus. Lihat gambar 8.7.

2. Posisikan kursor mouse di atas garis putus-putus itu sehingga kursor anak

panah berubah menjadi kursor Resize.

Gambar 8.7. Salah satu frame yang terpilih dikelilingi garis terputus-putus 3. Geserlah ke arah luar (ke kiri atau ke atas) garis putus-putus itu sampai ia

benar-benar keluar dari halaman website.

Menciptakan Frame


Gambar 8.8. Menggeser frame keluar dari halaman web akan membuat frame itu terhapus 4. Frame yang dipilih dan tergeser itu akan hilang secara otomatis.

Gambar 8.9. Dua frame telah terhapus dan tinggal dua lagi yang tersisa Saat menghapusnya, anda perlu berhati-hati karena mungkin akan

muncul permasalahan baru. Pada gambar yang tampak di atas, keempat frame

memiliki hubungan satu dengan lainnya, yaitu hubungan antara 1 dengan 2, 1

dengan 3, 3 dengan 4, dan 2 dengan 4. Saat anda menghapus salah satu frame

maka frame yang masih berhubungan dengannya akan ikut tergusur seperti

pada saat kita menggeser frame 1 dimana frame 3 ikut hilang.

Menciptakan Frame


Kemudian mengapa keempatnya berkaitan satu dengan lainnya? Hal ini

mungkin terjadi karena keempat frame itu memiliki garis perpotongan/border

yang sama. Border vertikal 1 & 3 serta 2 & 4 adalah sama sehingga ketika

dihapus keduanya ikut lenyap. Begitu juga border horizontal 1 & 2 serta 3 & 4.

Sekarang coba amati gambar di bawah ini dan cobalah anda

menghilangkan frame 1. Frame itu akan lenyap sementara frame 2 dan 3 masih

tetap berdiri di sana. Hal ini terjadi karena border frame 1 tidak sama dengan

border frame 2, sementara frame 3 tidak lenyap karena anda menggeser border

ke arah kiri – dan sebaliknya jika anda menggeser ke arah kanan maka frame 3

akan lenyap, sedangkan frame 1 tetap.

8.7. Mengatur Luas Sempit Frame.

Di atas sebenarnya kita telah sedikit belajar bagaimana mengatur luas

sempit sebuah frame. Hanya saja kita menggeser frame sampai ke bagian paling

kiri atau paling atas dokumen sehingga frame yang bersangkutan bukannya

bertambah sempit tapi malah terhapus. Sekarang kita akan lebih dalam lagi

mempelajari bagaimana mengatur ukuran frame.

DreamWeaver menyediakan dua metode yang bisa kita pakai salah

satunya bila kita ingin mengatur ukuran frame.

��Posisikan kursor mouse di atas border frame sehingga kursor berubah dari

anak panah menjadi Resize. Kliklah tepat di atas border itu dan drag-lah ia ke

segala arah untuk mendapatkan ukuran frame yang lebih pas.

Menciptakan Frame


Gambar 8.10. Mengatur luas salah satu frame

Gambar 8.11. Mengatur lebar salah satu frame ��Cara kedua yaitu dengan menggunakan Property Inspector Frame.

Jika cara kedua yang anda pilih, lanjutkan dengan kedua sub-subbab di bawah

ini.

8.7.1. Mengatur Luas Kolom Frame.

Frame bisa memiliki kolom dan baris sekaligus dimana baris akan kita

bahas pada bagian selanjutnya. Pada dasarnya, kolom adalah frame yang

terbentuk secara vertikal sehingga seolah-olah ia dalam keadaan berdiri.

Gambar 8.12. Kolom frame adalah frame yang berada dalam keadaan berdiri Untuk mengatur luas kolom frame ikutilah langkah-langkahnya berikut ini:

Menciptakan Frame


1. Kliklah border frame atau garis yang mengelilingi frameset pada jendela

Frame. Pada intinya, kita ingin memunculkan Property Inspector Frame.

Gambar 8.13. Memilih seluruh frame (frameset) lewat jendela frames Pada Property Inspector Layer, alihkan pandangan anda pada bagian Column

2. Kini aturlah angka yang ada pada kotak Value. Pada bagian Unit pilihlah

salah satu dari tiga unit yang telah disediakan, yaitu Pixel, Percent, dan

Relative. Ketiganya akan kita bahas pada bagian lain.

3. Kolom frame akan bertambah lebar atau sempit tergantung pada nilai yang

anda masukkan.

Pada bagian Units anda menjumpai tiga pilihan satuan unit untuk menandai

nilai yang anda letakkan di bagian Value. Tiga pilihan itu akan muncul setelah

anda mengklik drop-down menu Units . Ketiga pilihan itu adalah:

��Pixels: jika anda memilih satuan unit ini, besar kecilnya sebuah frame

ditentukan oleh nilai dalam satuan pixel. Jika dokumen website mengalami

perubahan ukuran, luas sempit frame tidak akan terpengaruh.

��Percent: jika anda memilih satuan unit ini, besar kecilnya sebuah frame

ditentukan oleh perbandingan dengan frame-frame lainnya (frameset).

Artinya, ia memiliki besar berapa persen atas semua frame yang ada di

dalam dokumen website.

��Relative: jika anda memilih satuan ini, ukuran frame akan ditentukan secara

relatif terhadap ukuran keseluruhan dokumen. Artinya, ukuran ini akan

berubah jika luas dokumen ikut berubah.

Atribut frameset yang dipakai untuk mengatur ukuran frame-frame vertikal

dalam satu dokumen adalah Cols.

Menciptakan Frame


8.7.2. Mengatur Ukuran Baris Frame.

Row adalah bagian frame yang melintang secara horizontal sehingga

seolah-olah ia berada dalam keadaan tidur. Cobalah lihat gambar di bawah ini

dimana disitu terdapat satu buah baris frame.

Gambar 8.14. Baris frame adalah frame yang berada dalam posisi tidur Untuk mengatur ukuran baris pada frame, ikuti langkah-langkah berikut ini:

1. Pilihlah frame itu dengan mengklik border atau mengklik garis frameset

pada jendela Frame agar Property Inspector Frame muncul di layar monitor

Anda.

Gambar 8.15. Memilih seluruh baris frame lewat jendela frames 2. Pada bagian Rows masukkan angka pada kotak Value

untuk menentukan luas sempit baris pada frames.

3. Baris pada frame berubah ukurannya sesuai nilai yang anda masukkan tadi.

Atribut frameset yang dipakai untuk mengatur frame-frame horizontal dalam

sebuah dokumen adalah Rows.

8.7.3. Mengatur Luas Kolom dan Baris Frame.

Sekarang bagaimana caranya jika frameset dalam dokumen web

mengandung dua frame sekaligus yang masing-masing mewakili kolom dan

baris seperti tampak pada gambar di bawah ini?

Menciptakan Frame


Gambar 8.16. Frame bisa memiliki kolom dan baris sekaligus Caranya tetap sama, hanya saja anda harus teliti saat memilih border

agar Property Inspector Frame menampilkan bagian Column dan Row secara

tepat. Jika anda ingin langsung memilih lewat dokumen website, pilihlah border

vertikal jika ingin mengedit luas kolom dan pilih border horizontal jika ingin

mengatur luas baris.

Namun jika anda ingin memilihnya lewat jendela Frames, pilihlah garis

yang mengelilingi semua frame bila anda ingin mengedit luas kolom, dan

pilihlah garis yang mengitari frame-frame horizontal bila anda ingin mengatur

luas baris.

Gambar 8.17. Memilih semua frame untuk mengatur lebar dan panjang kolom serta baris frames

Gambar 8.18. Memilih seluruh baris frames Semua cara di atas hanya semata-mata kita jalankan untuk memunculkan

Property Inspector Frame yang tepat. Anda bisa pilih salah satu cara yang

menurut anda paling mudah.

Menciptakan Frame


8.8. Memunculkan Scroll Bar.

Setiap frame bisa dilengkapi oleh scroll bar, baik vertikal maupun

horizontal, bilamana perlu. Ada kalanya materi dan obyek-obyek yang

diletakkan di atas sebuah frame lebih besar daripada ukuran frame tersebut. Dan

agar materi serta obyek tersebut bisa dilihat seluruh bagiannya, diciptakanlah

scroll bar.

DreamWeaver sendiri sebenarnya menyediakan tiga pilihan untuk

menangani kasus semacam ini. Jika obyek lebih besar daripada frame, apakah

frame akan dilengkapi dengan scroll bar, tidak perlu dilengkapi, atau diatur

secara otomatis.

Untuk mengatur apakah sebuah frame perlu diberi scroll bar atau tidak,

ikutilah langkah-langkah berikut ini:

1. Pilihlah frame yang akan dipasangi scroll bar. Anda bisa memilihnya

langsung lewat dokumen atau lewat jendela Frames.

2. Pada Property Inspector Frame, arahkan perhatian anda pada bagian Scroll

a dimana di dalamnya sudah menunggu empat pilihan .

3. Pilihlah salah satu option yang telah ditawarkan.

Penjelasan per-option adalah sebagai berikut:

��Yes: jika anda memilih Yes maka frame akan dilengkapi scroll bar bila obyek

dirasa lebih besar daripada ukuran frame.

��No: jika anda memilih No maka frame tidak akan dipasangi scroll bar

meskipun obyek lebih besar daripada ukuran frame.

��Auto: jika anda memilih Auto maka frame akan secara otomatis

memunculkan scroll bar bila obyek lebih besar daripada ukuran frame dan

akan meniadakan scroll bar apabila obyek lebih kecil dibanding frame.

��Default: jika anda memilih Default maka sistem secara otomatis akan menset

pilihan Auto.

Menciptakan Frame


Gambar 8.19. Scroll bar pada salah satu frame Pada gambar di atas, frame sebelah kiri dilengkapi dua buah scroll bar, masing-

masing untuk menggerakkan layer frame ke kiri-kanan dan atas-bawah.

Jika anda menggeser scroll bar itu maka frame-frame yang lain tidak akan

ikut tergeser. Frame-frame yang lain akan tetap berada di posisinya masing-

masing.

Setelah anda memasang scroll bar, HTML Source akan mencetak atribut

baru tag <frame>, yaitu <scrolling=”yes”>.

8.9. Menggunakan NoResize.

Jika pada pembahasan di atas kita telah mengenal teknik mengatur

ukuran sebuah layer, maka pada pembahasan kali ini kita akan mengenal teknik

agar ukuran layer tak bisa diatur. Secara default ukuran layer bisa diubah-ubah

secara bebas baik oleh kita sebagai webmaster maupun oleh pengunjung

website.

NoResize dihadirkan untuk mencegah pengunjung website mengatur

ukuran layer setelah website itu muncul di dalam browser. Agar ukuran sebuah

layer tidak bisa diubah-ubah setelah website muncul dalam browser, ikuti

langkah-langkahnya berikut ini:

1. Pilihlah layer yang dimaksud.

2. Pada Property Inspector Layer, kliklah check box No Resize a

sehingga ia dalam keadaan diaktifkan (ada tanda cek). Maka kini layer tak

bisa diubah-ubah lagi ukurannya.

Menciptakan Frame


Setelah anda memilih No Resize maka HTML Source akan menambahkan atribut

NoResize pada tag <frame>.

8.10. Memberi Border.

Dalam browser, website akan tampak seolah-olah ia tak mengandung

frame jika ia tak dipasangi border. Anda bisa mengamati gambar 8.20 di bawah

ini dimana frame sebelah kiri dan kanan tak diberi batas berupa border sehingga

keduanya tampak menyatu.

Untuk memberi border pada sebuah frame, terlebih dulu pilihlah frame yang

dimaksud. Setelah itu, pilihlah salah satu option di bagian Borders ,

dan pilihlah salah satu dari tiga pilihan yang ditawarkan .

��Yes: frame yang dimaksud akan diberi border.

Gambar 8.20. Frame tanpa diberi border ��No: frame yang dimaksud tidak akan diberi border.

��Default: pilihan default untuk tidak memberi border.

Setelah anda memberi border, atribut baru akan muncul dalam tag <frameset>,

yaitu <frameborder=”yes/no”>.

Gambar 8.21. Frame yang telah memiliki border Anda sebenarnya juga bisa mengatur warna border frame dengan cara memilih

ikon Border Color . Namun entah mengapa warna border

Menciptakan Frame


yang kita pilih tak bisa diterjemahkan oleh browser sehingga warna border tidak

berubah!.

8.10.1. Border pada Seluruh Frame.

Jika di atas kita hanya memberi border pada salah satu frame yang dipilih

sehingga hanya frame itu saja yang memiliki border seperti tampak pada gambar

di bawah ini, maka dalam bagian ini kita akan coba untuk memberi border pada

semua frame (frameset).

Gambar 8.22. Border pada sebagian frame Untuk memasang border pada seluruh frame, pilihlah semua frame baik

langsung lewat dokumen/ lewat jendela Frames. Pada Property Inspector Frame,

pilihlah Borders seperti saat kita memilih border pada salah satu

frame. Pilihlah Yes jika ingin memasang border dan sebagainya. Di bagian

bawahnya anda bisa tentukan lebar bordernya dengan cara memasukkan nilai ke

dalam Border Width . Semakin tinggi angka yang anda

masukkan semakin tebal pulalah border yang akan terbentuk. Lihat gambar 8.23.

Kini cobalah untuk mewarnai semua border pada seluruh frame pada

bagian Border Color . Amatilah bahwa border telah berubah

warna. Dan yang lebih mengesankan, warna border pada salah satu frame

seperti telah kita pilih sebelumnya akan ikut muncul.

Menciptakan Frame


Gambar 8.23. Border dengan ketebalan dan warna tertentu

8.11. Mengatur Margin.

Margin ini adalah batas pada sebuah dokumen. DreamWeaver

menyediakan dua jenis margin untuk sebuah frame, yaitu Margin Width dan

Margin Height. Keduanya memiliki fungsi yang lebih mirip mengatur jarak

obyek terhadap sisi kiri dan sisi atas dokumen dalam frame.

Obyek entah itu teks, gambar, atau apapun pada umumnya terletak di

sebelah kiri atas. Namun pada kenyataannya ia telah memiliki jarak terhadap

bagian kiri (margin kiri) dan atas (margin atas) dokumen. Artinya obyek itu

tidak berada dalam koordinat 0,0. Lewat fasilitas Margin Width dan Margin

Height dalam Frame, kita bisa atur berapa jarak obyek terhadap bagian kiri

dokumen (Margin Width) dan bagian atas dokumen (Margin Height).

Fasilitas yang paling bertanggung jawab untuk menciptakan jarak margin

adalah Margin Width dan Margin Height .

Keduanya terletak pada Property Inspector Frame.

Masukkan nilai berupa angka pada Margin Width jika anda ingin

mengatur jarak obyek terhadap bagian kiri dokumen dan Margin Height jika

anda ingin mengatur jarak obyek terhadap bagian atas dokumen. Harap diingat

bahwa dokumen yang dimaksud adalah dokumen pada masing-masing frame

dan bukannya keseluruhan dokumen.

Menciptakan Frame


8.12. Menyimpan Dokumen dan Frame.

Menyimpan dokumen website dan seluruh frame yang ada di dalamnya

memang membutuhkan langkah-langkah yang lumayan lebih panjang

dibanding menyimpan sebuah dokumen tanpa frame. Hal ini terjadi karena web

yang mengandung frame tidak hanya terdiri dari dari 1 file, seperti telah kita

bahas di awal bab ini, tapi banyak file tergantung jumlah frame yang

membentuknya.

Di dalam bagian ini kita akan membahas bagaimana caranya menyimpan

dokumen yang mengandung frame dan masing-masing frame. Namun agar

memudahkan anda dalam mengerjakan latihan ini, ciptakan dulu sebuah

dokumen yang memiliki 3 frame di dalamnya seperti tampak pada gambar

berikut ini:

Gambar 8.24. Dokumen web dengan ketiga frame yang akan kita simpan seluruhnya Frame 1 akan kita beri nama frame-1.htm, frame 2 bernama frame-2.htm, dan

frame 3 bernama frame-3.htm. Sedangkan dokumen yang akan menggabung

ketiga frame tersebut akan diberi nama frameframe.htm.

8.12.1. Menyimpan Dokumen yang Mengandung

Frame.

Pertama kali kita akan menyimpan dokumen yang akan menggabung

ketiga frame itu, yang nantinya akan kita beri nama frameframe.htm. Dokumen

yang mengandung banyak frame itu disebut frameset.

Untuk menyimpan dokumen yang mengandung frame ikutilah langkah-


Menciptakan Frame


1. Pilihlah Save Frameset As… yang ada pada menu File untuk menyimpan

dokumen ini (atau tekan Ctrl+Shift+S)

Gambar 8.25. Menyimpan seluruh frame lewat menu 2. Kemudian akan muncul kotak dialog dimana anda wajib memberi nama file

ini. Berilah nama frameframe.htm.

Jika sudah, mulailah untuk menyimpan satu frame demi satu frame yang ada

pada dokumen itu.

8.12.2. Menyimpan Frame-Frame.

Untuk menyimpan frame-frame yang ada pada sebuah website,


1. Letakkan kursor pada frame yang akan disimpan. Sebagai permulaan

letakkan kursor pada frame 1.

2. Pilihlah menu File dan kemudian pilihlah Save As…

3. Masukkan nama file untuk frame itu. Dalam hal ini frame-1.htm.

Ulangi langkah-langkah di atas sampai semua frame tersimpan. Sesudah anda

melakukannya, semua frame dan dokumen yang menggabungkan frame-frame

itu telah tersimpan dengan baik.

Jika anda ingin proses penyimpanan frame-frame lebih cepat, pilihlah

Save All dimana anda tak perlu meletakkan kursor satu persatu ke dalam frame

Menciptakan Frame


karena secara otomatis DreamWeaver memilih frame yang akan disimpan

dengan cara memberi garis tebal pada frame terpilih, dan anda hanya perlu

memasukkan namanya saja. Untuk itu, amatilah dokumen tersebut agar anda

bisa melihat frame yang saat itu sedang dipilih DreamWeaver sehingga bisa

tepat saat anda memberinya nama.

8.13. Mengambil Dokumen.

Jika suatu hari nanti anda ingin mengambil dokumen yang mengandung

frame, cukuplah anda pilih menu File > Open. Pilihlah file dokumen yang

berfungsi menggabung semua frame. Jika anda memilih file dimana hanya

mengandung salah satu frame saja, maka yang akan keluar hanyalah dokumen

frame yang bersangkutan.

Latihan.

1. Implementasikan semua latihan yang ada di bab ini.



3. Teruskan proyek anda membuat website pribadi masing-masing, tentunya

harus lebih baik lagi dibanding sebelumnya.

Membuat Link


BAB 9 MEMBUAT LINK


��Mampu memahami dan menggunakan link pada DreamWeaver.

9.2. Pengantar.

Jika ada yang bertanya apakah atau siapakah yang paling berjasa dalam

dunia jaringan internet, maka jawabannya adalah link. Ia adalah semacam seutas

tali yang bisa menggandeng satu website dengan website lainnya. Secara umum,

link adalah sebuah cara yang dipakai untuk berpindah dari satu wilayah ke

wilayah lainnya, seperti satu alamat website dengan website lainnya, atau satu

halaman web menuju halaman web lainnya. Anda telah mengenal jenis-jenis link

ini di dalam bab awal buku ini. Cobalah amati bahwa ada sekian banyak link

dimana masing-masing memiliki nama sebutan sesuai tugasnya.

Jika anda sedang membaca sebuah buku, mungkin buku ini, cobalah cari

cara yang paling praktis untuk berpindah menuju halaman lain. Satu-satunya

cara adalah membolak-balik kertas buku ini sampai halaman yang tepat

ditemukan. Website memiliki anatomi mirip buku dimana di dalamnya terjilid

banyak lembar-lembar halaman. Masalahnya, website tidak terbuat dari kertas

dan ia hanya bisa disaksikan di layar monitor. Otomatis kita tak sanggup

membolak-balik web layaknya sehelai kertas. Cara yang dipakai untuk

melompat ke sebuah halaman adalah lewat link.

Di dalam bagian ini kita akan mengenal lebih dalam tentang link, baik

cara kerjanya sampai bagaimana kita menciptakannya.

9.3. Mengenal Macam-macam Path.

Link bekerja dengan cara mencari file yang dimaksud berdasarkan path

yang ada di dalamnya, entah itu document-relative path, absolute path, maupun

root-relative path. Path sendiri adalah semacam alamat untuk menuju sebuah

Membuat Link


file. Jika komputer gagal menemukan file yang dimaksud lewat alamat (path)

yang tertulis dalam link, maka komputer akan mengeluarkan pesan peringatan

yang biasanya berbunyi “404 file not found”.

Di dalam dunia website, path dapat dibagi menjadi tiga jenis sesuai

model penulisannya dan alamat yang dituju masing-masing, yaitu:

��Absolute Path

��Document-relative Path

��Root-relative Path

Baiklah kita ulas masing-masing path di atas dalam sub subbab yang

tersendiri agar materi bisa diulas secara mendalam.

9.3.1. Absolute Path.

Absolute path biasa dipakai untuk berpindah dari satu alamat website

menuju alamat website lainnya. Agar website lain dapat dituju dengan mudah

maka path yang tertulis dalam absolute path ini haruslah dibuat lengkap,

termasuk protokol yang dipakai web yang akan dituju. Salah satu contoh

absolute path yang biasa kita temui adalah seperti http://www.pikti.its-

sby.edu/index.htm. Jika sebuah link mengandung absolute path semacam itu,

maka kita akan diajak untuk berpindah dari satu website tempat kita berdiri

menuju website lain, yang dalam hal ini web kepunyaan PIKTI

(http://www.pikti.its-sby.edu/index.htm).

9.3.2. Document-relative Path.

Kita telah menyinggung barang sedikit tentang document-relative path.

Fungsi path ini adalah untuk menciptakan sambungan ke file yang masih

terletak dalam satu server, entah ia berada dalam folder yang sama atau berbeda.

Path ini paling sering dipakai untuk menghubungkan satu halaman ke halaman

lainnya dalam satu website.

Path dalam jenis ini seringkali menggunakan tanda garis miring, / dan

../, untuk menunjuk file yang akan dicari. Sabagai contoh,

Membuat Link


grafis/studio_dwfw.gif yang menunjuk sebuah file studio_dwfw.gif yang

terletak pada subfolder grafis. Untuk mengenal lebih dekat lagi, coba amati

gambar di bawah ini:

Gambar 9.1. Alur sebuah root folder Kita memiliki tiga buah folder, yaitu grafis, program, dan support, pada

root folder yaitu di F:\pikti.com. Pada folder support anda temukan subfolder lagi

yaitu script. Semua folder, baik root folder, folder, dan subfolder memiliki file-file

di dalamnya. Sekarang kita akan coba cara penulisan document-relative path jika

link ada di salah satu file tersebut.

�� Jika file index.htm memiliki link, misalnya menuju file index2.htm, yang

terletak di root folder – folder yang sama dengan index.htm – maka

document-relative path yang harus anda tulis pada link index.htm adalah

“index2.htm”.

�� Jika file guestbook.htm yang berada pada folder support memiliki link yang

menuju index.htm maka document-relative path yang tertulis adalah

“../index.htm”. Tanda “../” mengandung arti bahwa kita naik satu level ke

folder sebelumnya.

�� Jika file asp.htm yang berada pada subfolder script memiliki link yang menuju

index.htm, maka document-relative path yang tertulis adalah

“../../index.htm” sebab kita harus naik dua level folder, yaitu script dan

kemudian support.

�� Jika file guestbook.htm yang berada pada folder support memiliki link yang

menuju reguler.htm pada folder program, maka document-relative path yang

tertulis adalah ../program/reguler.htm.

Membuat Link


�� Jika file guestbook.htm memiliki link yang mengarah ke asp.htm, maka

document-relative path yang tertulis adalah script/asp.htm. Tanda “/”

mengandung arti bahwa kita turun satu level menuju subfolder di bawah

folder lain.

Sebagai catatan bagi anda, jika anda menciptakan document-relative path

pada server Linux, pastikan bahwa anda menulis huruf dengan huruf yang sama

persis sebab server ini case-sensitive (membedakan antara huruf kecil dan huruf

besar).

9.3.3. Root-relative Path.

Root-relative Path menunjuk root folder dalam website sebagai

patokannya. Root folder dalam site biasanya ditandai dengan simbol garis

miring seperti “/”. Kemudian berlanjut dengan folder dan nama file yang akan

dituju, seperti /grafis/studio_dwfw.gif, yang menunjukkan bahwa link akan

mencari file studio_dwfw.gif yang berada pada folder grafis.

Root-relative Path memiliki nilai tambah dimana bila ada sebuah

dokumen yang mengandung link dengan alamat root-relative path ini di

dalamnya dan dokumen itu dipindah ke wilayah lain, seperti folder atau

subfolder lain, maka link yang bersangkutan tidak akan gagal mencari file yang

tertulis di dalamnya. Hal ini terjadi karena root-relative path menggunakan

alamat yang lengkap untuk menunjuk sebuah file.

9.4. Membuat Link.

Sebenarnya bila anda susah memahami ketiga path di atas, tak perlulah

anda terlalu risau mengingat anda tidak begitu banyak menggunakan teknik-

teknik penulisan link pada setiap path dalam proses mendesain web selanjutnya.

Yang perlu kita lakukan hanyalah mendesain dan menciptakan link secara

mudah tanpa kita perlu tahu lebih dalam bagaimana path yang ada di dalamnya

terbentuk. Nama-nama path di atas hanyalah untuk referensi anda saja agar jika

suatu saat kita menyinggung sedikit, kita tak perlu bingung.

Membuat Link


Lewat DreamWeaver kita akan coba bagaimana mempelajari langkah-

langkah menciptakan link pada sebuah teks, gambar, dan lainnya.

9.4.1. Membuat Link pada Teks.

Pembahasan pertama materi tentang link adalah bagaimana kita

menciptakan teks yanga ada di dalamnya mengandung link. Jika kita sudah

berhasil maka teks tersebut akan menghubungkan kita menuju halaman lain,

alamat website lain, atau daerah-daerah lain termasuk alamat e-mail.

Kita bisa mencoba untuk berlatih dari file index.htm yang sudah kita buat

di bab-bab awal dari situs PIKTI-ITS kita.

Jika anda ingin menciptakan link dalam teks lewat DreamWeaver maka

alur kerja anda adalah seperti ini:

��Tulislah teks

��Taruhlah link di dalamnya

Alur kerja di atas bertolak belakang dengan alur kerja saat kita membuat

link lewat pemrograman HTML yang mengharuskan kita menulis tag link

terlebih dahulu kemudian baru menuliskan teks yang dimaksud.

Langkah-langkah membuat link pada sebuah teks adalah sebagai berikut:

1. Carilah teks yang akan kita sisipi link di dalamnya.

2. Bloklah teks tersebut. Sebagai latihan, bloklah teks Laboratorium Pemrograman

dan Jaringan Komputer berspesifikasi Pentium !!! 933 MHz.

Gambar 9.2. Memilih teks yang akan diberi link

Membuat Link


3. Pada Property Inspector Text, palingkan pandangan anda pada jendela Link

a tempat anda menulis file yang akan dituju

link itu.

4. Tekanlah ikon folder jika anda ingin memilih teks lewat cara browsing,

alih-alih menulis langsung pada text box Link.

5. Jika anda memilih menekan ikon folder, carilah file itu dengan cara

browsing. Sebagai latihan, pilihlah sebuah gambar yang terletak pada

subfolder grafis.

Gambar 9.3. Memilih file yang akan dituju link 6. Di bagian Relative To anda bisa pilih apakah path

yang akan dipakai berjenis Document-relative path atau Root-relative path

a . Jika yang pertama anda inginkan, maka pilihlah Document dan

sebaliknya Site Root.

7. Tekan OK untuk mengakhiri.

Jika anda memilih Document maka link yang akan tercipta ber-path-kan

grafis/studio_dwfw.gif. Dan jika sebaliknya Site Root yang anda pilih maka path

yang akan tercipta /grafis/studio_dwfw.gif. Path tersebut akan ditampilkan

pada bagian URL

kotak dialog Select File dan muncul juga di text box Link

a . Dan, teks “Laboratorium Pemrograman dan

Jaringan Komputer berspesifikasi Pentium !!! 933 MHz” yang anda pilih tadi

akan memiliki link yang beralamatkan seperti salah satu dari model path di atas.

Membuat Link


Sebagai tandanya, teks itu diberi garis bawah. Selain itu jika kursor mouse

berada di atasnya ia akan mengubah kursor itu dari gambar anak panah menjadi

gambar tangan – jika anda mengarahkannya setelah dokumen yang

bersangkutan ditampakkan di browser.

Gambar 9.4. Teks telah diberi link Pada HTML Source akan muncul tag baru untuk menandai link ini, yaitu

<a href=namafile> Laboratorium Pemrograman dan Jaringan Komputer

berspesifikasi Pentium !!! 933 MHz.</a>.

Sebagai catatan tambahan, jika anda ingin agar link mengandung

absolute path yang akan membawa anda dan pengunjung web ke alamat website

lain, masukkan alamat itu secara lengkap pada kotak Link

9.4.2. Membuat Link pada Gambar.

Link pada gambar tidak jauh berbeda dengan link pada teks. Jika sebuah

gambar mengandung link maka gambar tersebut bisa menghubungkan satu

halaman dengan halaman lain, atau wilayah lainnya. Kita mungkin pernah

mendengar apa itu thumbnail. Thumbnail memiliki kaitan erat dengan link pada

gambar. Secara bebas, thumbnail dapat diterjemahkan sebagai sebuah gambar

kecil yang mengandung link dimana ia sanggup menghubungkan satu halaman

dengan sebuah file gambar dalam ukuran yang lebih besar. Thumbnail hanyalah

gambar kecil yang mewakili gambar dalam ukuran yang lebih besar atau

sesungguhnya.

Membuat Link


Gambar 9.5. Thumbnails pada sebuah web Untuk meletakkan link pada sebuah gambar, masukkan dulu gambar

yang dimaksud pada DreamWeaver, kemudian pilihlah gambar itu sehingga

dikelilingi kotak hitam. Lanjutkan langkah anda dengan memilih salah satu dari

dua cara berikut ini:

��Membuat link lewat menu Modify > Make Link.

��Membuat link lewat Property Inspector Graphics.

Gambar 9.6. Membuat link lewat menu Jika anda memutuskan untuk menggunakan cara kedua, maka amatilah

bagian Link yang memiliki tampilan sama dengan yang

Membuat Link


pernah kita lihat pada bagian teks di atas. Masukkan nama file yang dituju atau

pilihlah file lewat cara browsing dengan menekan ikon Folder .

Setelah itu anda akan diwajibkan memilih file yang dimaksud dimana

kita telah mempelajarinya saat mencari file untuk link pada teks di atas.

Kini gambar yang kita pilih mengandung link. Jika kursor mouse

melintas di atasnya maka kursor itu akan berubah dari gambar anak panah

menjadi gambar tangan. Dan bila gambar itu diklik maka kita akan dibawa ke

sebuah halaman atau file lain bergantung pilihan file kita saat membuat link.

9.5. Menciptakan Link Lewat Point-to-File.

Saat kita meletakkan gambar yang kita pelajari dalam bab lain, Point-to-

File ini berjasa dalam membantu tugas kita tersebut. Point-to-File adalah sebuah

metode untuk memilih file langsung dengan cara mengklik sebuah ikon dan

men-drag-nya masuk ke dalam Site Window dan memilih file yang dimaksud.

Ikon yang dimaksud adalah yang bisa kita temukan di samping kanan kotak

Link.

Untuk membuat link pada sebuah teks atau gambar lewat metode Point-

to-File ini, lakukanlah langkah pertama terlebih dahulu, yaitu memilih teks

dengan cara membloknya, dan memilih gambar dengan cara mengkliknya satu

kali sampai gambar dikelilingi kotak hitam. Kemudian lanjutkan dengan


1. Buatlah agar jendela DreamWeaver dan jendela Site Window berada dalam

keadaan sejajar sehingga kedua-duanya tampak di layar monitor. Lihatlah

gambar di bawah ini untuk jelasnya.

Membuat Link


Gambar 9.7. Jendela DreamWeaver dan Site Window tampak dan berada dalam keadaan sejajar. 2. Kemudian kliklah ikon Point-to-File dan dengan tombol mouse kiri masih

dalam keadaan tertekan, draglah ia menuju sebuah file yang akan dipakai

sebagai link. Jika sudah, lepaskan tombol mouse itu. Amatilah bahwa file

yang dilalui ikon Point-to-File akan diberi tanda kotak.

Gambar 9.8. Memilih file lewat Point-to-File 3. File yang dipilih telah ditunjuk dan masuk ke kotak link pada Property

Inspector, teks atau gambar.

Membuat Link


9.6. Memodifikasi Link.

Jika kita telah memilih file yang akan dituju link dan pada kesempatan

lain file itu akan diubah, baik karena ingin ditukar dengan file lain atau file itu

telah berganti nama, maka kita harus melakukan modifikasi link agar path yang

ada pada link itu diperbarui dengan baik.

Beberapa cara di bawah ini ditawarkan kepada anda jika ingin

memodifikasi sebuah link dan mencari file lain sebagai penggantinya:

��Ubahlah path yang ada di jendela Link .

��Tekanlah ikon Browse dan carilah file yang dimaksud.

��Pilihlah menu Modify dan kemudian kliklah Change Link. Langkah

selanjutnya, pilihlah file pengganti.

Gambar 9.9. Mengganti link lewat menu Sesudah anda melakukan modifikasi dari salah satu cara diantara ketiga

cara di atas, nama file dan atau subfolder pada kotak Link telah terganti dengan

yang baru.

9.7. Menghilangkan Link.

Jika kita bisa menciptakan link, kita juga bisa menghilangkan link yang

menempel pada sebuah teks atau gambar. Bilamana sebuah link kita hapus,

maka teks dan gambar itu akan menjadi teks dan gambar biasa. Ia tak bisa

membawa kita menuju halaman lain atau file lain seperti layaknya jika ia

mengandung link.

Membuat Link


Untuk menghilangkan link, lakukanlah salah satu dari dua cara berikut

ini setelah anda meletakkan kursor mouse di atas teks yang di dalamnya

tersimpan link sampai Property Inspector Text menampilkan path pada kotak

Link. Atau, anda pilih gambar yang mengandung link dengan cara mengkliknya

satu kali.

��Kliklah menu Modify dan kemudian pilihlah Remove Link.

��Hapuslah path yang ada pada kotak link sehingga kotak Link berada dalam

keadaan kosong .

Gambar 9.10. Menghapus link lewat menu Selanjutnya link yang ada dalam gambar dan teks akan hilang dan teks

akan kembali normal dengan tanpa garis bawah. Ia juga tidak menyebabkan

kursor mouse berubah menjadi gambar tangan.

9.8. Image Maps.

Salah satu bentuk link yang lain adalah image maps. Image maps itu

adalah sebuah gambar yang di dalamnya tersimpan beberapa link sekaligus.

Sebelumnya kita telah mengenal bagaimana meletakkan link pada sebuah

gambar. Namun saat itu kita hanya meletakkan satu link saja pada satu buah

gambar. Pada bagian ini kita akan coba bagaimana meletakkan beberapa link

sekaligus dalam sebuah gambar.

Membuat Link


Image maps memungkinkan satu buah gambar terpecah menjadi

beberapa bagian. Setiap bagian mengandung link yang berbeda satu dengan

lainnya. Coba lihat ilustrasi berikut ini:

Gambar 9.11. Satu buah gambar memiliki banyak link Gambar di atas menunjukkan bahwa sebuah gambar terdiri atas empat

buah link dimana tiap-tiap link akan menuju file yang berbeda-beda. Jika kita

mengklik daerah tempat link itu tersimpan maka kita akan dibawa ke halaman

yang sesuai dengan file yang tertulis di dalamnya.

Untuk menciptakan daerah-daerah link pada gambar di atas,

pergunakanlah image maps. Daerah link bisa kita bentuk sesuai keinginan,

apakah berbentuk kotak, lingkaran, atau poligon.

Saat menciptakan image maps, anda akan ditemani Property Inspector

baru, yaitu Property Inspector Image Maps yang memiliki tampilan seperti ini:

Gambar 9.12. Property Inspector Image Maps

9.8.1. Menciptakan Image Maps.

Kini saatnya bagi kita untuk belajar bagaimana membuat image maps

pada sebuah gambar. Yang perlu anda lakukan hanyalah menyediakan satu

buah gambar yang akan ditempeli banyak link. Kemudian barulah kita

mendefinisikan daerah-daerah pada gambar dengan image maps ini.

Untuk membuat image maps pada gambar, ikutilah langkah-langkah

berikut ini:

1. Pilihlah gambar yang akan anda buat image maps-nya.

index.htm

home.htm

form.htm programs.htm

Membuat Link


2. Setelah muncul Property Inspector Graphics, arahkan pandangan anda pada

bagian image maps yang terletak di sebelah kiri bawah.

3. Di sana terdapat tiga buah ikon, masing-masing Rectangular Hotspot Tool ,

Oval Hotspot Tool , dan Polygon Hotspot Tool dimana setiap ikon akan

menghasilkan daerah link yang berlainan.

4. Pilihlah yang cocok sesuai daerah link yang ingin anda ciptakan. Jika salah

satu ikon berada dalam keadaan terpilih, maka saat itu juga anda harus

membuat daerah link.

5. Kini arahkan kursor di sekitar wilayah gambar yang akan diberi link.

6. Buatlah daerah itu dengan mengklik tombol kiri mouse dan geserlah kursor

sehingga tercipta wilayah yang ditandai oleh bentuk-bentuk ikon di atas.

7. Jika sudah, lepaskan tombol mouse anda sehingga muncul Property

Inspector Image Maps.

8. Di bagian Link masukkan nama file yang

akan dituju link ini. Masukkan seperti pernah kita pelajari bersama di bagian

awal bab ini.

9. Lakukanlah langkah 6-8 pada daerah-daerah lain sehingga banyak link

tersimpan dalam satu gambar.

10. Jika anda ingin bertukar dari satu ikon ke ikon lain, anda tinggal mengklik

ikon yang dimaksud dan daerah yang nanti tercipta juga akan berubah.

Gambar 9.13. Daerah-daerah image maps pada sebuah gambar 11. Namun jika anda sudah selesai membuat image maps dan ingin segera

mengakhirinya, kliklah ikon bergambar anak panah yang terletak di

pojok kiri bawah Property Inspector Image Maps.

Membuat Link


Setelah anda menciptakan image maps maka HTML Source akan mencetak

<map name=”namamap”> dan <area shape=”bentukdaerah”

coords=”koordinat” href=”links”>.

9.8.2. Memodifikasi Daerah Link.

Kita telah mencoba macam-macam daerah link pada image maps, persegi

empat, lingkaran, dan poligon yang kita pakai untuk membuat daerah dengan

bentuk yang lebih luwes. Sekarang kita coba untuk memodifikasi daerah link itu.

Sebagai contoh, kita akan memperluas atau mempersempit daerah link yang

berbentuk kotak, dan seterusnya.

Untuk memodifikasi daerah link, kliklah salah satu daerah image maps

sehingga daerah itu dikelilingi kotak-kotak kecil yang disebut handle. Kliklah di

atas salah satu handle dan drag-lah ia ke arah tertentu untuk mendapat ukuran

yang sesuai. Jika sudah, lepaskan tombol mouse. Kini daerah image maps sudah

memiliki ukuran yang lain dari yang pertama.

Gambar 9.14. Memilih salah satu daerah image maps

Gambar 9.15. Memperbesar satu daerah image maps

Membuat Link


Jika daerah image maps bertambah luas maka daerah link akan ikut

bertambah lebar. Kursor mouse jika melintas daerah itu akan menyebabkan

dirinya berubah menjadi gambar tangan.

9.8.3. Menghapus Image Maps.

Jika anda ingin menghapus salah satu daerah dalam image maps, pilihlah

salah satu daerah yang ada di sana sampai ia dikelilingi kotak-kotak kecil yang

berarti sedang dalam keadaan terpilih, dan sesudah itu tekanlah tombol Del yang

ada di atas keyboard anda. Maka beberapa detik kemudian, daerah image maps

akan terhapus.

Lakukanlah pada semua daerah yang ada jika anda ingin melenyapkan

semua image maps.

9.9. Menentukan Target.

Sekarang kita akan berbicara tentang bagaimana atau dimana halaman

website atau alamat website lain yang telah ditunjuk link akan terbuka? Apakah

terbuka di jendela baru, pada jendela yang sama, atau lainnya.

Link memindahkan kita dari satu halaman ke halaman lain, atau satu

alamat website menuju alamat website lain. Masalah mulai timbul jika kita

berbicara tentang dimana halaman atau alamat website itu akan muncul setelah

kita mengklik link yang bersangkutan. Apakah halaman akan ditampilkan pada

jendela browser yang sama, atau ditampilkan dalam jendela browser yang baru.

Untuk memecahkan masalah di atas, kita harus menentukan Target Link.

Dunia HTML dan juga DreamWeaver menyediakan empat buah pilihan target

yang masing-masing akan menciptakan efek yang berbeda, yaitu:

�� _Blank: jika anda memilih _blank maka halaman atau alamat website baru

akan diletakkan pada jendela browser baru. Satu jendela browser akan

terbuka sesaat setelah anda mengklik link dimana jendela itu akan dipakai

untuk menampilkan halaman atau alamat website yang baru.

Membuat Link


Gambar 9.16. Blank akan membuat halaman web muncul di jendela baru browser �� _Parent: jika anda memilih _parent maka halaman atau alamat website baru

akan diletakkan pada jendela browser sebelumnya. Jika jendela browser

sebelumnya tidak ada maka ia akan menampilkan halaman atau alamat

website baru di tempat link itu berada.

�� _Self: jika anda memilih _self maka halaman atau alamat website baru akan

dimunculkan pada jendela atau frame yang sama.

�� _Top: jika anda memilih _top maka halaman akan diletakkan pada halaman

yang sama dengan menghapus semua frame yang ada.

Sebagai catatan, untuk bagian _self dan _top akan lebih mendalam

pembahasannya bila kita sudah mempelajari Link pada Frame.

Untuk menentukan target, pilihlah salah satu target pada menu drop-

down Target dimana di dalamnya tersimpan

empat pilihan tadi

9.10. Link pada Frame.

Pada bab sebelumnya kita telah mengulas cara membuat frame, dan

sebagian besar materi telah kita bahas di sana. Kali ini kita akan melengkapi

materi tentang frame dimana sekarang kita memfokuskan diri pada pembahasan

link yang terletak di sebuah frame.

Membuat Link


Meletakkan link di sebuah frame tidaklah sesederhana yang mungkin

sebelum ini anda pikirkan. Masalahnya mungkin akan kompleks jika kita ingin

mengarahkan dimana munculnya halaman atau alamat website lain yang dituju

oleh link itu.

Sebagai contoh, kita memiliki tiga buah frame, masing-masing berada di

samping kiri, atas, dan samping kanan. Samping kiri (frame 1) dirancang untuk

menampung menu-menu dimana tersimpan link di dalamnya, bagian atas

(frame 2) dipakai untuk judul website, dan samping kanan (frame 3) dipakai

untuk menyajikan isi web. Cobalah lihat gambar di bawah ini untuk lebih

mudahnya:

Gambar 9.17. Link pada salah satu frame Pada bagian frame 1 terdapat empat buah link, masing-masing Halaman

Muka, Program, E-Mail, dan Buku Tamu. Yang menjadi masalah adalah, jika link

tersebut kita klik, halaman web yang akan dipanggil link itu akan dimunculkan

dimana? Misalnya jika kita mengklik link Program, maka halaman program.htm

akan muncul di mana? Apakah di frame 1, frame 2, frame 3, atau jendela baru?

Untuk mengatasi permasalahan ini, pergunakanlan Target, yang barusan kita

pelajari bersama.

Jika anda bekerja dengan link seperti di atas, anda akan temukan pilihan-

pilihan baru pada bagian Target. Pilihan-pilihan itu memiliki nama sesuai jenis

frame yang kita buat. Untuk kasus di atas, pilihan-pilihan itu adalah:

��MainFrame: jika anda memilih ini maka halaman web akan muncul pada

frame nomor 3, yang disebut frame utama (main frame).

��TopFrame: jika anda memilih ini maka halaman web akan muncul pada frame

nomor 2, yang disebut frame bagian atas (top frame).

Membuat Link


��LeftFrame: jika anda memilih ini maka halaman web akan muncul pada frame

nomor 1, yang disebut frame bagian kiri (left frame).

Pilihlah salah satu dari ketiga pilihan di atas pada menu drop-down Target.

Banyaknya pilihan target yang menunjuk letak frame akan disesuaikan

dengan jumlah dan jenis frame yang anda buat. Pada kasus di atas jumlahnya

hanya sebanyak tiga buah ditambah pilihan-pilihan target standar yang telah

kita bahas pada bagian Menentukan Target di atas .

Sekarang cobalah buat lagi sebuah frame, katakanlah Bottom Frame, dan anda

akan temukan pilihan ini di bagian Target .

Sebagai pedoman, bila anda ingin agar halaman web muncul tidak di

dalam salah satu frame namun pada jendela browser baru, pilihlah target _blank.

Namun jika diinginkan halaman web muncul di jendela yang sama namun tidak

di salah satu frame, pilihlah _top. Ini akan membuat semua frame dihapus dan

ditumpuk oleh halaman yang baru pada jendela yang sama.

9.11. Menciptakan Anchor.

Jika selama ini kita menciptakan link untuk membawa kita menuju

halaman atau alamat website baru, maka pada bagian ini akan diciptakan link

yang akan mengantar kita menuju bagian lain dalam satu halaman yang sama.

Anchor adalah semacam link yang berfungsi menghubungkan satu

bagian dengan bagian lain dalam satu dokumen yang sama atau dokumen yang

berbeda. Boleh jadi kita akan membuat sebuah dokumen web yang memiliki

banyak teks sehingga panjang ukurannya. Dan saat itu kita ingin agar terdapat

sebuah fasilitas yang membawa si pengunjung langsung ke bagian teks yang

akan dituju secara cepat tanpa perlu menggeser scroll bar ke bawah. Untuk

memenuhi permintaan ini pergunakanlah anchor. Kita letakkan anchor di bagian

yang kita pilih dan di atasnya kita ciptakan link. Link ini tidak akan

Membuat Link


menghantarkan kita ke halaman lain atau alamat web lain, tapi ke sebuah anchor

yang kita letakkan tadi. Pada prakteknya, anchor tidak hanya bisa membawa kita

ke bagian teks, tapi juga bagian-bagian lain dalam satu dokumen pada

umumnya.

Untuk menciptakan anchor, anda harus melakukan dua langkah kerja

semacam ini:

��Buatlah sebuah anchor dimana anda harus memberi nama pada setiap

anchor yang anda buat.

��Hubungkan link ke anchor itu.

Untuk membuat anchor kita buka lagi dokumen index.htm dan setelah

itu, letakkan kursor pada bagian tempat anchor ingin diletakkan – sebagai

pedoman, letakkan ia di samping kiri teks “PIKTI-ITS” di bagian paling atas

dokumen. Jika sebuah link yang mengandung anchor kita klik, maka kita akan

dibawa langsung ke bagian dimana anchor yang bersangkutan diletakkan.

Kemudian, lanjutkan dengan memilih salah satu dari 3 cara yang

ditawarkan berikut ini:

��Pilihlah menu Insert > Invisible Tags > Named Anchor.

Gambar 9.18. Membuat anchor lewat menu ��Tekanlah shortcut Anchor dengan kombinasi tombol Ctrl+Alt+A.

��Di bagian Objects Pallete, ubahlah ia sehingga menampilkan panel-panel

Invisible. Setelah itu, kliklah ikon Anchor .

Membuat Link


Gambar 9.19. Objects Pallete Invisible Panel Jika salah satu dari tiga cara di atas anda pilih dengan benar maka anda

akan mendapat kotak dialog baru dimana anda harus mengisi nama anchor yang

akan anda buat. Masukkanlah dengan nama apa saja – sebagai pedoman, tulislah

“top”.

Gambar 9.20. Memberi nama anchor Sebagai tanda bahwa bagian yang kita pilih telah diberi anchor sebuah

ikon anchor bertengger pada bagian itu.

Gambar 9.21. Anchor telah menempel pada dokumen dalam wujud sebuah ikon Sekarang giliran kita mengarahkan link ke arah anchor itu. Untuk itu,


1. Pilihlah teks yang akan disisipi link. Sebagai pedoman, tulislah pada bagian

akhir dokumen tulisan “Kembali ke depan”.

Membuat Link


Gambar 9.22. Memilih teks untuk disisipi link yang akan menuju anchor 2. Pada bagian link, tulislah #top . Tanda kres

“#” harus ditulis sebelum nama anchor sebab ia pertanda bahwa link akan

diarahkan pada sebuah anchor.

3. Kini link telah dibuat di dalam teks yang kita pilih. Jika link itu kita klik,

maka kita akan dibawa menuju anchor dengan nama “top” berada.

Sebagai catatan tambahan, point 2 dapat anda lakukan dengan beragam

cara yang berbeda seperti mengklik ikon Point-to-File dan kemudian men-drag-

nya ke atas anchor yang hendak dituju.

9.11.1. Anchor pada Dokumen Lain.

Anchor yang kita taruh di atas berada dalam dokumen yang sama antar-

link penuju anchor dan anchor yang bersangkutan. Sekarang bagaimana caranya

bila anchor yang akan dituju berada di dalam dokumen lain? Untuk mengatasi

masalah ini, anda perlu menyebut nama file tempat anchor itu berada pada

jendela link.

Misalnya, jika anchor berada pada file index.htm, dan nama anchor itu

adalah #top, maka tulislah index.htm#top pada kotak Link.

Ikuti aturan penulisan nama file agar path yang anda tulis tidak cacat.

Sebagai saran buat anda, pakailah document-relative path untuk menunjuk

nama file yang dimaksud.

Membuat Link


9.12. Link pada Alamat E-Mail.

Link yang akan kita buat kali ini berbeda dengan link-link yang kita buat

barusan sebab link ini tidak menyimpan nama file namun alamat e-mail

seseorang. Jika sebuah link yang menyimpan nama file dapat menghantar kita ke

halaman lain, maka link yang menyimpan alamat e-mail sanggup menjalankan

program E-Mail Client seperti MS Outlook, Outlook Express, Netscape

Messenger, Eudora Pro, dan lainnya. Sama seperti link-link lainnya, link alamat

e-mail ini menempel pada teks atau gambar dan jika kita klik muncullah E-Mail

Client.

Untuk membuat link alamat e-mail, pilihlah salah satu cara dari beberapa

cara di bawah ini setelah anda memilih teks atau gambar yang akan dijadikan

link ke alamat e-mail:

��Pada Property Inspector Text atau Graphics, tulislah mailto: dan diikuti

alamat e-mail di belakangnya pada kotak Link. Sebagai contoh, tulislah

mailto:[email protected].

��Pilihlah menu Insert dan kemudian klik Email Link.

Gambar 9.23. Membuat link menuju alamat e-mail ��Pada Objects Pallete Common Panel, pilihlah ikon Insert Email Link .

Jika cara kedua dan ketiga yang anda pilih maka muncullah kotak dialog

lain, yaitu Insert Email Link.

Membuat Link


Gambar 9.24. Menulis alamat email Pada bagian Text, masukkan teks tempat link itu akan tersimpan. Jika

sebelumnya anda telah memilih sebuah teks dengan cara membloknya maka teks

itu akan muncul di sana secara otomatis. Sedangkan bagian E-Mail isilah dengan

alamat e-mail yang dituju.

Kini cobalah anda jalankan halaman di atas pada sebuah browser dan

kliklah link yang mengandung alamat e-mail di dalamnya. Hasilnya, beberapa

saat kemudian komputer akan menjalankan E-Mail Client anda dan cobalah

amati pada bagian To dimana alamat e-mail seperti yang tersimpan dalam link

sudah tertulis di sana.

Gambar 9.25. E-Mail Client akan muncul begitu link e-mail diklik

9.13. Mengatur Warna Link.

Link selain ditandai oleh teks bergaris bawah, juga ditandai oleh warna

yang khas. Tujuannya agar pengunjung tahu bahwa teks itu adalah sebuah link.

Terhadap warna link ini kita bisa menggantinya dengan warna yang sesuai

dengan selera kita.

Untuk menggantinya, ikutilah langkah-langkah berikut ini:

1. Masuklah ke Page Properties dengan cara menekan menu Modify dan

mengklik Page Properties.

2. Pada bagian Link pilihlah warna yang anda pakai untuk

mewarnai teks yang mengandung link.

Membuat Link


3. Pada bagian Visited Link pilihlah warna yang anda

pakai untuk mewarnai link yang pernah dikunjungi atau diklik.

4. Pada bagian Active Link pilihlah warna yang anda

pakai untuk mewarnai link yang saat itu sedang aktif. Artinya, halaman yang

dituju link itu muncul pada saat itu di dalam dalam jendela browser.

9.14. Melihat Struktur Link.

Jika pada suatu hari nanti anda sudah menciptakan halaman web yang

kompleks, maka anda haruslah melihat struktur link untuk mendeteksi apakah

telah terjadi broken link atau tidak. Broken link adalah sebuah link dimana ia tak

bisa menemukan file sesuai yang tertulis dalam path.

Pada Site Window ada sebuah fasilitas yang bernama Site Map yang

bermanfaat untuk melihat alur struktur link dari awal hingga akhir. Pada Site

Map, file index.htm berada di atas halaman-halaman web lainnya mengingat file

index.htm adalah halaman utama sebuah website. Dari index.htm anda bisa

telusuri jaringan-jaringan yang ada di bawahnya.

Untuk melihat Site Map sebuah website, kliklah ikon Site Map a

sehingga dalam keadaan terpilih. Dan pada Site Window sebelah kiri, akan

muncul Site Map dimana alur sebuah link dapat terlihat di sana.

Gambar 9.26. Struktur link pada Site Window Pada bagian Site Map itu anda bisa mengecek link. Jika ada sebuah file

ditulis dengan warna merah maka file itu tidak ada sehingga terjadi broken link.

Untuk itu, cek-lah link yang mengarah pada file itu apakah path yang tertulis

Membuat Link


sudah benar atau file yang dimaksud memang tidak ada. Namun jika file tertulis

dengan warna biru maka file itu ada sehingga link dalam keadan baik/beres.

Latihan.

1. Untuk mengasah kemampuan anda dalam mendesain web menggunakan

DreamWeaver, maka wujudkan semua latihan yang ada di bab ini.



3. Bekal yang ada sudah lumayan banyak, ditambah latihan mandiri, maka

teruskan proyek membuat website pribadi masing-masing.

Membuat Form


BAB 10 MEMBUAT FORM


��Mampu memahami dan menggunakan form pada DreamWeaver.

10.2. Pengantar.

Form adalah wahana komunikasi dalam website, yang terdiri dari

pelbagai menu-menu dan kotak-kotak yang kita pakai untuk menampung

informasi dalam wujud teks dan pilihan-pilihan.

Form secara bebas dapat diterjemahkan sebagai formulir online.

Bentuknya memang mirip formulir pada umumnya, seperti formulir

pendaftaran mahasiswa baru, pegawai baru, daftar riwayat hidup, dan

sebagainya. Hanya saja form ini tidak berwujud kertas dan ia hanya tampak di

dalam layar monitor saja.

Fungsi form hanya untuk mengumpulkan informasi dari para

pengunjung. Informasi yang dikumpulkan bermacam-macam tergantung

kebutuhan, bisa nama, alamat, e-mail, jenis kelamin, hobi, dan jam berapa ia

belajar. Informasi-informasi atau data-data itu dikirim kepada kita dengan

semacam teknologi seperti CGI, Webbot, atau lainnya. Dan dari informasi itu,

kita dapat mengambil sebuah kesimpulan dan juga keputusan.

Form digunakan secara luas untuk membuat model-model pengisian

informasi, seperti buku tamu, formulir pendaftaran online, formulir pemesanan

barang, formulir pembelian online, dan lain sebagainya. Jadi form digunakan

untuk mengumpulkan dan menyimpan informasi, dan informasi itu bisa kita

olah untuk keperluan apapun.

Membuat Form


Gambar 10.1. Form dipakai untuk mendata anggota baru

10.3. Cara Kerja Form.

Di dalam form sendiri terdapat banyak komponen (obyek) yang masing-

masing memiliki fungsi tertentu. Komponen-komponen itu secara default adalah

text box, password field, hidden field, drop-down menu, check box, dan radio

button. Kita akan mengenal bagaimana cara menciptakan komponen-komponen

ini dan untuk apa kegunaannya.

Pada dasarnya komponen-komponen itu akan mengumpulkan informasi

dari para pengunjung, dan form mengirim informasi itu kepada kita atau kepada

server lewat semacam teknologi tertentu seperti CGI. Dalam mengirim informasi

itu, form mengandalkan dua jenis pengiriman informasi, yaitu Post dan Get.

Perbedaan diantara keduanya terletak pada bagaimana informasi itu terkirim.

Jika kita memanfaatkan Post maka informasi akan terkirim lewat HTTP Headers,

sedangkan pada Get informasi akan terkirim lewat URL. Dalam praktek

selanjutnya, Post akan dipakai jika informasi yang dikirim sangat panjang dan

besar, sementara Get dipakai untuk kasus-kasus tertentu mengingat informasi

yang terkirim memiliki batas maksimal sebanyak 8192 karakter.

Membuat Form


10.3.1. Script Pengolah Informasi Form.

Agar informasi yang dikumpulkan form bisa terkirim kepada kita atau

server, informasi tersebut harus diproses dan diterjemahkan oleh sebuah

teknologi seperti CGI. Dalam dunia web programming, CGI (Common Gateway

Interface) adalah salah satu metode pengiriman data form dari client (browser)

kepada server yang paling umum dipakai. CGI sendiri dibangun oleh sebuah

script pemrograman. Ada banyak script pemrograman yang biasa dipakai untuk

mengolah informasi pada form agar jatuh ke tangan kita atau server dengan

baik, seperti ASP, Perl, ColdFusion, PHP, dan masih banyak lagi.

10.4. Membuat Form.

Sebelum kita menciptakan komponen-komponen form yang telah kita

sebut satu persatu di atas, kita harus menciptakan form itu sendiri lebih dahulu.

Pada HTML, form ditandai dengan kombinasi tag <form> dan </form>. Dan

komponen-komponen form diletakkan diantara kedua tag itu. Jika kita

memasukkan komponen form di luar tag itu, informasi yang tertulis di

dalamnya tak bisa terkirim.

Untuk membuat form, dan juga komponen-komponen yang ada di

dalamnya, kita manfaatkan Objects Pallete Form Panel, yang memiliki tampilan

seperti ini:

Gambar 10.2. Objects Pallete Form Panel Untuk mengubah Objects Pallete ke Form Panel, kliklah ikon bergambar

anak panah kecil dan setelah muncul menu baru, pilihlah Form .

Membuat Form


10.4.1. Meletakkan Form.

Sekarang saatnya untuk mengenal langkah-langkah meletakkan form di

atas halaman web kita. Untuk meletakkan form, anda bisa pilih salah satu dari

tiga cara berikut ini:

��Letakkan kursor di tempat anda ingin meletakkan form itu, kemudian

tekanlah menu Insert dan kliklah Form.

Gambar 10.3. Membuat form lewat menu ��Tekanlah ikon Insert Form pada Objects Pallete Form Panel.

��Tekanlah ikon Insert Form di atas dan drag-lah ia keluar Objects Pallete dan

letakkan ia ke dalam dokumen web.

Setelah sukses menjalankan salah satu dari tiga cara di atas, anda akan

dapati kotak bergaris terputus-putus berwarna merah ada dalam dokumen anda.

Kotak itu berperan sebagai penanda tag <form> </form>. Anda harus

meletakkan komponen-komponen form di dalam kotak merah itu. Segala

sesuatu yang diletakkan di luar kotak merah mengindikasikan bahwa ia berada

di luar tag <form> </form>, dan tidak memiliki kaitan apapun dengan form.

Gambar 10.4. Kotak merah pada dokumen menandakan form telah dibuat Selain itu, anda akan mendapati Property Inspector baru, yaitu Property

Inspector Form yang memiliki bentuk seperti ini:

Membuat Form


Gambar 10.5. Property Inspector Form Property Inspector Form di atas akan muncul tatkala anda meletakkan

kursor tepat di atas garis merah form.

10.4.2. Meletakkan Form.

Pada Property Inspector Form di atas, terdapat kotak Action. Dalam

pemrograman website, kotak ini harus diisi dengan nama file yang paling

bertanggung jawab untuk menerima dan mengolah informasi yang dikirim oleh

form. Seperti sedikit kita ulas, file-file yang bertugas menerima dan mengolah

informasi itu dibuat dengan bahasa atau script pemrograman seperti Perl, ASP,

PHP, ColdFusion, dan lainnya.

Mengingat kali ini kita tidak membicarakan bagaimana file

pemrograman, maka sementara ini belumlah perlu memasukkan nama file di

kotak Action.

10.4.3. Memilih Method.

Seperti sedikit kita ulas, informasi dalam form dikirim lewat dua metode,

yaitu Post dan Get. Untuk memilih salah satu dari kedua metode di atas, kliklah

drop down menu Method dan pilihlah salah satu di antaranya

Default, Get, and Post .

Jika anda memilih Default maka DreamWeaver akan menunjuk Get

sebagai metode pengiriman form.

Saat ini pemilihan method memang belum begitu penting sebab method

ini erat kaitannya dengan dunia web programming. Namun anda tetap harus

mengenalinya agar saat anda terjun ke dunia web programming tak ada

rintangan di depan anda.

Membuat Form


10.5. Membuat Text-Box.

Kita akan menciptakan komponen form yang pertama, yaitu Text Box,

atau yang memiliki nama lain Text Field. Text Box ini akan merekam informasi

pengunjung jika pengunjung menulis teks di dalamnya. Text Box ini ideal untuk

menampung informasi-informasi yang tertulis dalam wujud teks, seperti nama

seseorang, alamat, e-mail, komentar, saran-saran, dan sebagainya.

Untuk menciptakan text box lakukanlah salah satu dari beberapa cara

berikut ini setelah anda meletakkan kursor di dalam kotak merah Form:

��Pilihlah menu Insert dan arahkan kursor mouse menuju bagian Form Objects.

Setelah itu klik Text Field.

��Tekanlah ikon Insert Text Field yang ada di Objects Pallete.

Gambar 10.6. Membuat form lewat menu ��Tekanlah ikon Insert Text Field dan drag-lah ia kedalam dokumen web anda.

Setelah anda menciptakan ada banyak perubahan dalam dokumen anda,

pertama-tama Text Box akan tercipta di dalam halaman web. Kedua, HTML

Source mencetak tag baru, yaitu <input type=”text”>. Dan yang ketiga, akan

muncul Property Inspector Text Field.

Gambar 10.7. Text Box pada form

Membuat Form


Gambar 10.8. Property Inspector Text Box Untuk rencana jangka panjang, taruhlah teks di depan (samping kiri) text

box itu agar pengunjung yang melihatnya bisa tahu fungsi text box itu dan

memasukkan informasi yang tepat. Sebagai contoh, tulislah “Nama” dan nanti

pengunjung akan memasukkan namanya di sana.

Gambar 10.9. Tulisan nama di depan text box

10.5.1. Mengatur Single Line-Multi Line.

Text box yang baru saja kita ciptakan dirancang hanya untuk

menampung informasi singkat seperti nama, alamat, dan email. Melihat dari

bentuknya yang hanya memiliki panjang namun tak memiliki lebar, informasi

yang bisa tertampung sepertinya tak bisa banyak. Artinya, kita tak seharusnya

menulis komentar, kritik dan saran di dalamnya.

Text box di atas meskipun kecil ukurannya tetap bisa menampung

banyak informasi. Hanya saja bentuknya tidak mendukung. Text box sendiri

memiliki dua jenis, yaitu text box single line dan text box multi line. Text box

single line telah berhasil kita buat dan anda bisa lihat gambarnya di atas. Kali ini

kita akan ciptakan text box multi line.

Langkah-langkah menciptakan text box multi line adalah sebagai berikut:

1. Ciptakan terlebih dulu text box.

2. Pilihlah text box itu sehingga ia dikelilingi border dengan garis terputus-

putus.

3. Pada Property Inspector Text Box, kliklah pilihan Multi Line .

Bulatan kecil akan berpindah dari single line menuju multi line.

4. Dan lihatlah bentuk text box telah berubah dari single line menjadi multi line.

Membuat Form


Gambar 10.10. Text box single line menjadi multi line Dengan text box multi line seperti gambar di atas, kita bisa merancang

sebuah text box dimana pengunjung bisa menulis informasi yang panjang dan

lebar seperti komentar, kritik, saran, dan sebagainya.

Dalam kenyataannya, HTML membedakan antara text box single line dan

text box multi line. HTML sendiri tidak mengenal text box multi line. Text box

berukuran besar seperti gambar di atas disebut Text Area, yang memiliki tag

<textarea></textarea>. Dan tag ini akan tercetak pada HTML Source begitu

anda membuat text box multi line.

10.5.2. Mengatur Panjang dan Lebar Text Box.

Pada kesempatan ini akan dicoba diatur panjang dan lebar text box. Jika

jenis single line yang anda pilih maka text box yang bersangkutan tidak memiliki

lebar dan hanya memiliki panjang saja. Namun jika multi line yang anda pilih

maka text box itu mempunyai panjang dan lebar sekaligus.

Panjang dan lebarnya text box, baik single line maupun multi line diatur

oleh banyaknya karakter yang bisa ditampung di dalamnya. Misalnya kita atur

panjang text box dengan jumlah 25, maka panjang text box itu hanya 25 karakter.

Jumlah karakter yang mengatur panjang dan lebar text box itu tidak

berpengaruh terhadap berapa banyaknya informasi yang tertampung di

dalamnya sebab untuk perkara ini telah diatur oleh atribut lain, yaitu Max Chars.

Jika kita menulis informasi lebih panjang daripada ukuran text box, maka teks

akan tergeser ke kiri.

Untuk mengatur panjang pada text box single line, ikutilah cara-cara

berikut ini:

1. Buatlah text box atau pilihlah text box yang telah ada.

Membuat Form


2. Pada bagian Char Width yang ada di atas Property Inspector

Text Box, masukkan jumlah karakter pada kotak yang telah disediakan.

3. Text box yang terpilih berubah ukuran panjangnya.

Setelah anda mengatur ukuran text box single line, amatilah bahwa

HTML Source akan mencetak atribut baru pada tag <input type=”text”>,

yaitu <size=”ukuran”>.

Sementara jika anda ingin mengatur panjang dan lebar text box multi

line, ikutilah cara-cara berikut ini:

1. Buatlah text box multi line atau pilihlah text box multi line yang sudah ada.

2. Pada bagian Char Width tentukan jumlah karakter yang bisa

masuk jika ditulis secara mendatar. Char Width ini berfungsi mengatur

panjang text box multi line.

3. Pada bagian Num Line tentukan jumlah baris yang bisa masuk.

Num Line ini bertugas mengatur lebar text box multi line.

Setelah anda mengatur ukuran text box multi line, amatilah bahwa

HTML Source akan mencetak atribut baru pada tag <textarea> yaitu

<cols=”jumlah karakter” dan rows=”jumlah baris”>.

10.5.3. Menggunakan Wrap.

Salah satu kemampuan yang dimiliki Text Box Multi Line adalah

Wrapping Text. Wrapping Text ini berfungsi untuk memenggal teks jika teks

yang dimasukkan melebihi panjang text box multi line. Sebagai contoh, jika text

box multi line memiliki panjang 50 dan kita mengetik karakter sebanyak 55 buah,

maka 5 karakter terakhir akan dipotong dan diletakkan pada baris selanjutnya.

Ada empat buah pilihan pada bagian Wrap yang bisa

ditemukan di bagian Property Inspector Text Box Multi Line, yaitu Default, Off,

Virtual, dan Physical .

Penjelasannya adalah sebagai berikut:

�� Jika anda memilih Default maka teks akan terpotong menjadi baris baru bila

ditulis melebihi panjang text box.

Membuat Form


�� Jika anda memilih Off maka teks tidak akan terpotong dan tetap berlanjut.

Untuk melihat teks secara keseluruhan, text box multi line akan

memunculkan scroll bar horizontal.

Gambar 10.11. Wrap dalam keadaan off sehingga teks tidak terpotong �� Jika anda memilih Virtual maka teks akan seolah-olah terpotong. Namun

sebenarnya secara fisik teks itu tidak terpotong dan baris selanjutnya masih

satu bagian dengan baris sebelumnya.

�� Jika anda memilih Physical maka teks akan benar-benar terpotong. Bagian

teks yang berada di baris berikutnya akan dianggap benar-benar sebagai

baris baru.

Wrap hanya berfungsi jika informasi yang tertulis melebihi panjang text

box multi line. Jika informasi melebihi lebar text box multi line, secara otomatis

text box multi line ini akan mengaktifkan scroll bar vertikalnya.

10.5.4. Membuat Password Field.

Password field dipakai jika kita ingin agar pengunjung memasukkan

informasi berupa sebuah password. Password field ini memiliki anatomi yang

hampir mirip dengan Text Box. Hanya saja setiap karakter yang tertulis di

dalamnya akan diubah menjadi tanda asterisk (*).

Untuk membuat password field, ikuti langkah-langkah berikut ini:

1. Buatlah text box atau pilihlah text box yang sudah ada.

2. Pada Property Inspector Text Box, pilihlah Password sehingga

bulatan kecil ada di bagian ini.

3. Text box anda akan berubah menjadi Password Field.

Membuat Form


Sepintas anda tak bisa mengamati perbedaannya. Sekarang cobalah anda

jalankan pada browser dan cobalah menuliskan karakter di dalamnya. Maka

semua karakter akan berubah menjadi *.

Gambar 10.12. Password field mengubah karakter menjadi tanda bintang Setelah anda menciptakan password field, amatilah bahwa HTML Source

akan membuat tag baru, yaitu <input type=”password”>.

10.5.5. Memasukkan Init Val.

Secara default, text box single line, text box multi line, dan password field

yang telah kita ciptakan di atas berada dalam keadaan kosong dan tak satupun

karakter tertulis di dalamnya.Oleh karenanya kita menunggu salah seorang

pengunjung untuk memasukkan teks ke dalamnya. Fasilitas Init Val berfungsi

untuk memasukkan karakter secara langsung begitu halaman yang mengandung

text box ini muncul di browser tanpa menunggu seorang pengunjung

menuliskan karakter ke dalamnya.

Untuk memasukkan init val, lakukan langkah-langkah berikut ini:

1. Buatlah text box atau pilihlah text box yang sudah ada.

2. Pada bagian Init Val masukkan karakter di dalam kotak yang telah

disediakan yang nantinya teks itu akan muncul begitu halaman yang

mengandung text box ini tampak di dalam browser.

Init val pada text box multi line dan single line memiliki perbedaan bentuk.

Namun tidak ada perbedaan teknik saat menuliskan teks di dalamnya.

Gambar 10.13. Init val untuk text box single line

Gambar 10.14. Init val untuk text box multi line

Membuat Form


Cobalah jalankan pada browser dan lihatlah text box itu telah berisi teks

sebelum siapapun mengisinya.

Gambar 10.15. Text box telah terisi teks seperti yang kita masukkan dalam init val

10.5.6. Menggunakan Max Char.

Text Box Single Line dan Password Field memiliki satu atribut yang

berguna untuk mengatur berapa jumlah maksimal karakter yang bisa tertulis di

dalamnya. Dalam HTML atribut ini bernama MaxLength, tapi DreamWeaver

menyebutnya dengan istilah Max Char.

Fasilitas ini ideal untuk menjamin bahwa pengunjung memasukkan

informasi ini hanya sebanyak yang diinginkan. Sebagai contoh kita bisa

membuat password field yang hanya bisa menampung maksimal sepuluh

karakter saja, termasuk spasi. Dengan fasilitas Max Char ini pengunjung tak bisa

menulis 11, 12, atau 13 karakter ataupun jumlah yang lebih besar. Setelah

mengetik karakter ke-10, kursor akan berhenti dan seolah-olah keyboard macet.

Untuk menggunakan max char ini dalam text box single line dan

password field, buatlah terlebih dahulu text box dan password field itu, atau

pilihlah yang sudah ada. Pada bagian Max Char masukkan jumlah

maksimal karakter yang bisa dimasukkan.

10.6. Membuat Check Box.

Komponen form berikutnya adalah check box. Check box ini dipakai saat

anda ingin menawarkan beberapa pilihan kepada pengunjung web. Apakah

pilihan itu harus diambil atau tidak, terserah anda sebab anda bisa mengaturnya

bila menguasai web programming.

Membuat Form


Check box dimanfaatkan untuk mengumpulkan informasi dimana kita

menyediakan banyak pilihan dan pengunjung hanya perlu mengklik pilihan-

pilihan itu yang dianggap sesuai dengan pilihan mereka. Hobi dan minat

hanyalah sedikit contoh dari penggunaan check box ini. Kita bisa tuliskan

banyak hobi dan minat di atas halaman website dan pengunjung memilihnya.

Check box ini memperkenankan para pengunjung untuk mengambil

pilihan lebih dari satu. Sebagai contoh, seorang pengunjung bisa memilih hobi

bermacam-macam sekaligus, seperti berenang, makan-makan, main musik, tidur,

membaca, olah raga, dan sebagainya.

Untuk membuat check box di atas halaman web, lakukanlah satu dari 3

cara berikut ini setelah anda meletakkan kursor di dalam kotak merah form:

��Pada menu Insert, pilihlah Form Objects, kemudian kliklah Check Box.

��Pada Objects Pallete Form Panel, kliklah ikon Insert Checkbox .

��Pada Objects Pallete Form Panel, kliklah ikon Insert Checkbox dan drag-lah ke

tempat anda ingin meletakkan check box ini.

Buatlah satu atau beberapa check box tergantung pada banyaknya pilihan

yang ingin anda tawarkan kepada pengunjung situs anda. Pada perkembangan

selanjutnya, jangan lupa untuk selalu menulis teks di samping kanan check box

itu agar pengunjung bisa melihat pilihan-pilihan yang tersedia.

Gambar 10.16. Check box pada halaman web

Membuat Form


Setelah menciptakannya, HTML Source akan mencetak tag baru, yaitu

<input type=”checkbox”>. Dan Property Inspector Check Box akan muncul di

hadapan anda.

Gambar 10.17. Property Inspector Check Box

10.6.1. Mengatur Initial State.

Dalam keadaan normal, check box yang kita buat tidak dalam keadaan

terpilih. Anda bisa buktikan sendiri bahwa check box yang baru saja anda

ciptakan tidak ada tanda ceknya, yang berarti tidak dalam keadaan terpilih.

Initial State mengatur apakah check box sudah dalam keadaan terpilih

begitu ia diciptakan atau belum. Jika sudah, maka check box itu akan tercek

secara otomatis tanpa menunggu pengunjung memberi tanda cek (pilihan) ke

dalamnya.

Untuk mengatur Initial State, pilihlah salah satu check box dengan cara

mengkliknya sampai ia dikelilingi border bergaris putus-putus. Sesudah itu,

pada bagian Initial State yang ada di Property Inspector Check Box akan muncul

dengan dua pilihan, Checked atau Unchecked.

Gambar 10.18. Mengatur Initial State Hasil akan cepat terlihat begitu anda memilih Checked, yaitu munculnya

tanda cek pada check box yang anda maksud.

Gambar 10.19. Check box telah ter-cek karena kita mengatur Checked pada Initial State

Membuat Form


10.6.2. Memasukkan Value.

Bagaimana kita tahu jika seorang pengunjung memilih pelbagai

Workshop yang ditawarkan PIKTI-ITS? Jika kita menggunakan text box maka

kita bisa tahu Workshop apa yang diinginkan seseorang setelah kita membaca

tulisan yang dimasukkan pengunjung di dalamnya. Namun masalahnya,

pengunjung tidak menulis apa-apa ke dalam check box. Ia hanya memilihnya.

Dengan begitu, sejujurnya tak ada informasi yang bisa terkirim. Tulisan-tulisan

yang kita bubuhkan di samping kanan check box seperti Desain Grafis, Jaringan

Komputer, Lotus Notes, dan Oracle seperti gambar di atas bukanlah sebuah

informasi yang nantinya akan terkirim kepada kita karena ketiga tulisan itu

berada di luar check box.

Kemudian bagaimana kita menciptakan informasi di dalam check box?

Jawabannya adalah pada bagian Value. Value bertugas untuk menggantikan

informasi yang tidak bisa dimasukkan oleh pengunjung seperti layaknya text

box. Dengan value ini, informasi akan terkirim kepada kita berdasarkan apa

yang tertulis di dalamnya.

Untuk mengatur value pada masing-masing check box, pilihlah salah

satu diantaranya dan tulislah text ke dalam kotak Checked Value a.

Tulislah value pada tiap-tiap check box. Dengan begitu, misalnya seorang

pengunjung memilih Desain Grafis maka informasi yang terkirim kepada kita

adalah “grafis”.

10.7. Membuat Radio Button.

Komponen form berikutnya adalah radio button. Konsep radio button

dengan check box hampir sama, yaitu memberi banyak pilihan kepada para

pengunjung. Bedanya, pengunjung hanya bisa memilih satu dari banyak pilihan

bila ia menghadapi radio button. Radio button dipakai jika kita ingin mendapat

satu jawaban dari banyak pilihan. Radio button ideal untuk membuat pilihan

jenis kelamin, status, dan pilihan-pilihan lainnya yang mustahil memiliki

jawaban ganda atau lebih dari satu.

Membuat Form


Untuk membuat radio button, pilihlah salah satu cara dari ketiga cara

berikut ini setelah anda meletakkan kursor di dalam kotak merah form:

��Pada menu Insert arahkan kursor ke Form Objects dan kemudian pilihlah

Radio Button.

��Pada Objects Pallete Form Panel, pilihlah ikon Insert Radio Button .

��Pada Objects Pallete Form Panel, pilihlah ikon Insert Radio Button dan drag-

lah ia masuk ke dalam dokumen anda.

Anda bisa menulis teks di samping kanan radio button untuk memberi

keterangan pada tiap-tiap pilihan seperti pernah kita lakukan pada check box.

Gambar 10.20. Radio button pada halaman web Setelah anda menciptakan radio button, HTML Source akan mencetak tag

baru, yaitu <input type=”radio”>.

Anda bisa mengatur Value dan Initial State pada radio button seperti saat

kita mengatur kedua atribut itu pada check box. Kita tak akan mengulangnya

mengingat cara yang harus ditempuh sama dengan check box. Hanya yang

membedakan, anda harus lakukan itu di dalam Property Inspector Radio Button

yang memiliki tampilan seperti ini:

Gambar 10.21. Property Inspector Radio Button

Membuat Form


10.8. Membuat List/Menu.

Kali ini kita akan membahas komponen form yang lain lagi, yaitu List

dan Menu. List dan Menu ini dirancang untuk menampung banyak pilihan

dalam sebuah kotak. Jika Menu yang anda inginkan maka semua pilihan

tersimpan dalam sebuah kotak dimana kita harus menekan tombol anak panah

ke bawah untuk melihat semua pilihan yang ada. Namun jika List yang anda

gunakan maka semua pilihan akan tertampung di dalam sebuah kotak dimana

kita bisa melihatnya secara langsung. Pada List terdapat scroll bar vertikal yang

dipakai untuk melihat pilihan-pilihan yang ada di bagian bawah. Dipandang

dari boros tidaknya kedua komponen form ini menggunakan wilayah halaman

web, maka Menu lebih irit.

Untuk membuat menu atau list, pilihlah salah satu dari tiga cara berikut

ini setelah anda meletakkan kursor di dalam kotak merah form:

��Pada menu Insert arahkan kursor di bagian Form Objects dan kemudian

kliklah List/Menu.

��Pilihlah ikon Insert List/Menu yang terdapat di Objects Pallete Form

Panel.

��Pilihlah ikon Insert List/Menu dan drag-lah ia masuk ke dalam dokumen

anda.

Secara default DreamWeaver akan menciptakan Menu buat anda. Untuk

mengubah Menu menjadi List, bacalah bagian lain di bawah ini.

Gambar 10.22. Menu pada halaman web

Membuat Form


Setelah anda menciptakan Menu maka HTML Source akan mencetak tag

baru, yaitu <select> </select>. Kini saatnya untuk memasukkan pilihan-

pilihan ke dalamnya lewat Property Inspector List/Menu.

Gambar 10.23. Property Inspector Menu

10.8.1. Memasukkan Pilihan-pilihan.

Menu yang telah anda buat belumlah berisi pilihan-pilihan sampai anda

memasukkan ke dalamnya isi dari pilihan itu. Pada bagian ini kita akan belajar

bagaimana caranya kita memasukkan pilihan-pilihan itu ke dalam Menu.

Misalkan kita ingin mengetahui pilihan kelas dan jam yang diinginkan

oleh pengunjung web PIKTI-ITS kita. Untuk itu, lakukanlah langkah-langkah

berikut ini:

1. Setelah anda memilih Menu yang dimaksud, tekanlah tombol List Values

a .

2. Kotak dialog List Values muncul sesudahnya.

Gambar 10.24. Memasukkan pilihan-pilihan Menu 3. Jika anda ingin menambah pilihan, kliklah tombol + .

4. Tulislah pilihan anda. Sebagai latihan, tulislah “Kelas A: 08.00-10.00”.

5. Tekanlah tombol kiri mouse di bawah Value untuk menulis value pilihan ini.

Tulislah sama dengan pilihan yang baru saja anda buat. Dalam hal ini

“KelasA”.

6. Satu pilihan beserta value-nya berhasil dibuat. Lakukan berulangkali langkah

3-5 sampai anda merasa pilihan yang akan anda tampilkan sudah cukup.

7. Jika anda ingin menghilangkan satu pilihan, tekanlah tombol - .

Membuat Form


8. Jika anda ingin mengedit, arahkah kursor pada pilihan yang hendak anda

ubah. Untuk mengarahkan kursor, anda bisa gunakan tombol atau

cukup mengklik salah satu pilihan itu.

9. Kemudian tekan tombol OK untuk mengakhiri.

Kini Menu anda sudah berisi pilihan-pilihan seperti yang telah anda

masukkan barusan. Berhubung Menu yang anda pilih, maka pilihan baru akan

terlihat jika anda dan pengunjung mengklik anak panah bawah sampai Menu itu

menampilkan kotak penyimpanannya.

Gambar 10.26. Pilihan-pilihan yang telah masuk ke dalam menu Pilihan yang anda tulis tadi juga terdaftar pada kotak Initially Selected

yang ada pada Property Inspector List/Menu. Jika anda mengklik salah satu

pilihan yang tertera di sana, maka pilihan itu akan muncul pada kotak Menu.

Gambar 10.27. Memilih salah satu pilihan

10.8.2. Mengubah Menu Menjadi List.

List tidak ubahnya sebuah Menu. Keduanya memang mirip. Menu adalah

List dengan ukuran bernilai satu sehingga hanya ada satu pilihan saja yang

tampak, sementara pilihan lainnya bisa keluar setelah kita mengklik anak panah

bawah Menu itu.

List sendiri lebih fleksibel daripada Menu mengingat ia bisa diatur

ukurannya. Selain itu, pengunjung bisa memilih beberapa pilihan sekaligus jika

Membuat Form


ia menghadapi sebuah List – dimana ia tak bisa melakukannya jika Menu yang ia

hadapi.

Untuk mengubah Menu menjadi List, anda cukup memilih menu yang

bersangkutan dan mengklik radio button List yang ada di Property

Inspector Menu/List.

Setelah anda memilih List, tampilannya belum berubah sampai anda

mengatur Height yang ada di samping kanannya. Tulislah berapa

banyak pilihan yang ada pada sebuah List. Jika anda memasukkan nilai 6, maka

semua pilihan akan tampak karena tadi kita membuat 6 pilihan kelas dan jam

belajar di PIKTI-ITS. Namun jika anda memasukkan nilai 5, List ini akan

memunculkan scroll bar vertikalnya dimana untuk melihat salah satu pilihan

yang tersembunyi kita wajib menggeser slider scroll bar ini.

Gambar 10.28. List dengan ukuran sama besar dengan banyaknya pilihan

Gambar 10.29. List dengan ukuran lebih kecil daripada banyaknya pilihan

Membuat Form


10.8.3. Mengatur Jumlah Pilihan.

List memungkinkan seorang pengunjung mengambil beberapa pilihan

dari banyak pilihan yang ada di dalamnya. Namun kita harus mengatur List

terlebih dahulu agar pengunjung bisa mengambil lebih dari satu pilihan yang

ditawarkan.

Untuk melakukan hal ini, anda cukup mengklik check box Selection Allow

Multiple .

Jika seorang pengunjung ingin memilih lebih dari satu pilihan maka ia harus

menekan tombol Shift atau Ctrl dan menggabungkannya dengan klik kiri mouse.

Gambar 10.30. Memilih lebih dari satu pilihan

10.9. Membuat Hidden Field.

Hidden field ini sangat jarang dipakai oleh para web desainer karena

memang tidak memiliki fungsi yang berarti terhadap tampilan visual website.

Hidden field kebanyakan hanya dipakai oleh para programmer web. Hidden

field ini akan mengirim informasi yang tak bisa dilihat oleh pengunjung.

Biasanya informasi yang terkirim bersifat rahasia atau informasi-informasi yang

akan mengatur hal-hal teknis website seperti nilai variabel sebuah script dan

lainnya.

Untuk membuat hidden field, lakukanlah salah satu dari tiga cara berikut ini:

��Kliklah menu Insert dan arahkan kursor pada bagian Form Objects. Sesudah

itu pilihlah menu Hidden Field.

Membuat Form


��Kliklah ikon Insert Hidden Field yang ada di Objects Pallete Form Panel.

��Kliklah ikon Insert Hidden Field dan drag-lah ia masuk ke dalam dokumen

anda.

Setelah anda melakukan salah satu dari tiga cara di atas dengan tepat,

ada beberapa perubahan terjadi pada dokumen anda. Pertama, munculnya ikon

hidden field yang tak akan tampak lagi jika anda menjalankan web itu di atas

browser. Kedua, HTML Source mencetak tag baru, yaitu <input

type=”hidden”>. Ketiga, Property Inspector Hidden Field muncul di layar

monitor.

Gambar 10.31. Ikon Hidden Field muncul menandai diletakkannya komponen Hidden Field

Gambar 10.32. Property Inspector Hidden Field

10.10. Memasukkan Button.

Komponen form terakhir yang merupakan komponen standar HTML

adalah button. Button ini sendiri dapat diatur menjadi tiga fungsi, yaitu sebagai

tombol Submit, Reset, dan None.

Jika anda memilih None maka button ini tidak berfungsi apa-apa sampai

anda memasukkan semacam script ke dalam web anda agar button ini memiliki

fungsi khusus.

Membuat Form


Namun jika anda memilih Submit dan Reset, hasilnya akan berbeda. Kita

akan mempelajari Submit dan Reset setelah kita tahu bagaimana caranya

memasukkan button ini ke dalam web:

��Pilihlah menu Insert dan arahkan kursor pada bagian Form Objects. Setelah

itu, klik Button.

��Kliklah ikon Button yang ada di Objects Pallete Form Panel.

��Kliklah ikon Button dan drag-lah ia ke dalam halaman web anda.

Sebuah button (tombol) muncul di dalam halaman anda. Sebagai

defaultnya DreamWeaver memasukkan tombol Submit. Amatilah pada jendela

HTML Source sebab di sana anda akan temukan tag baru, yaitu <input

type=”submit”>. Selain itu, Property Inspector Button akan muncul di layar

monitor anda.

Gambar 10.33. Sebuah tombol pada halaman web

Gambar 10.34. Property Inspector Button

10.10.1. Tombol Submit dan Reset.

Tombol yang baru saja anda ciptakan memiliki dua tugas yang berbeda.

Dua tugas itu adalah mengirim informasi ke server atau ke kita, dan yang

terakhir menghapus semua informasi yang telah dimasukkan oleh pengunjung.

Jika tugas pertama yang harus dijalani namanya berubah menjadi tombol Submit.

Membuat Form


Namun bila tugas kedua yang harus dijalani namanya berubah menjadi tombol

Reset.

Secara lebih detil apa fungsi tombol Submit? Form adalah tempat seorang

pengunjung website memasukkan informasi-informasi sesuai yang diinginkan,

sebagaimana kita telah ketahui di awal bab ini. Kemudian informasi tersebut

harus dikirim jika pengunjung selesai memasukkan informasi-informasinya.

Informasi itu baru terkirim kepada kita atau server setelah pengunjung itu

menekan tombol Submit, seperti kita menekan tombol Send untuk mengirim e-

mail.

Tombol Reset dipakai jika seorang pengunjung telah mengisi banyak

informasi ke dalam form tapi mendadak ia ingin menghapus dan menulis ulang

informasi-informasi tadi. Untuk memudahkan ia menghapus semua informasi

yang sudah tertulis, disediakanlah tombol Reset. Dengan begitu, ia tinggal

menulis ulang informasi-informasi itu tanpa perlu menghapus ulang.

Untuk mengubah sebuah Button menjadi Submit atau Reset, pilihlah

Button itu dan pada Property Inspector Button, kliklah radio button yang tepat

pada bagian Action, Submit form atau Reset form.

Gambar 10.35. Memilih tombol Submit atau Reset Sesudahnya, anda akan mendapat tombol sesuai pilihan anda, Submit

a atau Reset

10.10.2. Mengubah Tulisan pada Tombol.

Jika anda memilih tombol Submit maka button itu akan bertuliskan

“Submit”. Jika reset maka tulisannya “Reset”, dan jika None maka tulisannya

hanyalah “Button”.

Kita bisa mengubah tulisan yang tertera di atas button itu. Sebagai

contoh, kita bisa buat tombol submit bertuliskan “Agree” atau tombol reset

bertuliskan “Clear”. Untuk melakukan hal ini, tulislah teks itu pada kotak Label

a .

Membuat Form


Gambar 10.36. Tulisan tombol diubah dengan teks sendiri Setelah anda mengubah label pada button di atas, atribut value pada tag

<input type=”submit/reset”> akan berubah sesuai teks yang kita masukkan.

10.11. Hubungan Form dengan Pemrograman.

Kegunaan form sebenarnya baru diperlukan bila kita memang meminta

keterlibatan aktif user yang mengunjungi situs kita. Dan mau tidak mau, kita

harus mengusai pemrograman untuk mengolah lebih lanjut inputan dari user ini.

Ada 2 jenis bahasa dalam pemrograman yang dapat kita gunakan.

Pertama adalah bahasa pemrograman web yang sesungguhnya, misalnya

ASP, Java, PHP, Perl, dan lain-lain. Bahasa seperti ini memang memerlukan

waktu untuk mempelajari, dan juga diperlukan aturan-aturan tertentu. Tapi

sedikit kerumitan ini dapat tertebus dengan kemampuan yang hebat dalam hal

mendayagunakan halaman situs seoptimal mungkin.

Kedua adalah bahasa Script, yaitu kode-kode pemrograman yang

langsung dapat kita sisipkan ke kode-kode HTML kita, sehingga dapat lebih

mendayagunakan halaman situs kita. Contohnya adalah JavaScript, yang

merupakan turunan dari bahasa Java. Karena langsung disisipkan pada halaman

situs kita, maka kelemahannya adalah setiap orang dapat melihat kode script

kita. Kelemahan yang lain adalah pelbagai keterbatasan kemampuan

dibandingkan dengan bahasa pemrograman web yang sesungguhnya.

Kedua jenis bahasa di atas, lebih dalam akan dibahas dalam Mata Kuliah

Pemrograman Berbasis Web yang diajarkan juga di PIKTI-ITS pada semester 2.

Hanya untuk mengetahui hubungannya antara Mata Kuliah Desain Web dan

Pemrograman Berbasis Web ini, pada subbab ini akan dibahas sedikit mengenai

bahasa pemrograman web tersebut.

Disini yang dibahas adalah bahasa Script saja, yaitu JavaScript, karena

kalau kita sudah mengusai bahasa ini, untuk bahasa pemrograman web yang

sesungguhnya kita tak akan mengalami kesulitan lagi.

Membuat Form


10.11.1. JavaScript dalam HTML.

Cobalah anda menuliskan kode-kode HTML di bawah ini. Hal ini bisa

dilakukan melalui DreamWeaver atau bisa juga ditulis melalui Notepad.

Contoh 1. <HTML> <SCRIPT LANGUAGE="JavaScript"> var warna_aliceblue=new Function("document.bgColor='aliceblue'"); var warna_antiquewhite=new Function("document.bgColor=

'antiquewhite'"); var warna_aqua=new Function("document.bgColor='aqua'"); var warna_aquamarine=new Function("document.bgColor=

'aquamarine'"); var warna_azure=new Function("document.bgColor='azure'"); </SCRIPT> <BODY> <FORM NAME="warna"> <INPUT TYPE=BUTTON NAME="Alice_Blue" VALUE="Warna latar belakang Alice Blue" onClick="warna_aliceblue()"><P> <INPUT TYPE=BUTTON NAME="Antique_White" VALUE="Warna latar belakang Antique White" onClick="warna_antiquewhite()"><P> <INPUT TYPE=BUTTON NAME="Aqua" VALUE="Warna latar belakang Aqua" onClick="warna_aqua()"><P> <INPUT TYPE=BUTTON NAME="Aqua_Marine" VALUE="Warna latar belakang Aqua Marine" onClick="warna_aquamarine()"><P> <INPUT TYPE=BUTTON NAME="Azure" VALUE="Warna latar belakang Azure" onClick="warna_azure()"><P> </FORM> </BODY> </HTML>

Gambar 10.37. Tampilan Contoh 1 di DreamWeaver Cobalah anda preview (tekanlah tombol F12), dan amati perubahan pada

halaman itu bila anda menekan tombol-tombol di situ.

Membuat Form


Contoh 2.

<HTML> <HEAD> <TITLE>Login & Ramalan</TITLE> <SCRIPT LANGUAGE="JavaScript"> function ProsesShio(form) { angka=parseInt(form.password.value); if ((form.login.value == "aku") && (form.password.value ==

"kamu")) { if (form.shio[0].selected) { alert("Shio Macan, anda adalah seorang yg

bertanggungjawab"); } else if (form.shio[1].selected) { alert("Shio Kuda, anda seorang pekerja keras"); } else if (form.shio[2].selected) { alert("Shio Naga, anda seorang yg tangguh

hati"); } else if (form.shio[3].selected) { alert("Shio Kambing, anda seorang yg banyak

rezeki"); } else if (form.shio[4].selected) { alert("Shio Monyet, anda seorang yg banyak

teman"); } } else alert("Anda tidak berhak mengakses halaman ini!"); } function ProsesBintang(form) { if ((form.login.value == "i") && (form.password.value ==

"you")) { if (form.bintang[0].checked) { alert("Libra: Keuangan membaik, Karier melesat,

Kesehatan agak menurun"); } else if (form.bintang[1].checked) { alert("Leo: Kendalikan emosi karier perlu hati-

hati, Kesehatan ok deh"); } else if (form.bintang[2].checked) { alert("Cancer: Anda perlu lebih giat dalam

segala hal"); } else

Membuat Form


if (form.bintang[3].checked) { alert("Virgo: Segala hal rasanya menjadi lebih

indah minggu ini"); } } else alert("Anda tidak berhak mengakses halaman ini!"); } function ProsesIdola(form) { if ((form.login.value == "wo") && (form.password.value ==

"ni")) { if ((form.artis[0].checked) &&

(form.artis[2].checked)) { alert("Nonton dong sinetron: Waah .. Cantiknya") } if ((form.artis[1].checked) &&

(form.artis[3].checked)) { alert("Nonton dong sinetron: PD (Pernikahan

Dini)") } } else alert("Anda tidak berhak mengakses halaman ini!"); } </SCRIPT> </HEAD> <BODY> <FORM> <H3 ALIGN=CENTER> Ramalan Bintang Minggu Ini </H3> <H4> Shio kamu apa? <SELECT NAME="shio"> <OPTION SELECTED> Macan <OPTION> Kuda <OPTION> Naga <OPTION> Kambing <OPTION> Monyet </SELECT></H4> <P><B> Bintang kamu apa? <B><BR> <INPUT TYPE="RADIO" NAME="bintang" VALUE="libra" CHECKED>Libra <BR> <INPUT TYPE="RADIO" NAME="bintang" VALUE="leo">Leo <BR> <INPUT TYPE="RADIO" NAME="bintang" VALUE="cancer">Cancer <BR> <INPUT TYPE="RADIO" NAME="bintang" VALUE="virgo">Virgo <BR> </P> <P><B> Artis fave kamu? </B><BR> <INPUT TYPE="CHECKBOX" NAME="artis" VALUE="Anjas">Anjasmara <BR> <INPUT TYPE="CHECKBOX" NAME="artis" VALUE="Gunawan">Syahrul Gunawan <BR> <INPUT TYPE="CHECKBOX" NAME="artis" VALUE="Tamara">Tamara Bleszinsky <BR> <INPUT TYPE="CHECKBOX" NAME="artis" VALUE="Agnes">Agnes Monica <BR> <BR> Login &nbsp <INPUT TYPE="TEXT" NAME="login"><BR> Password <INPUT TYPE="PASSWORD" NAME="password"> <BR>

Membuat Form


<BR> <INPUT TYPE=BUTTON NAME="Tombol" VALUE="Ramal Shio" ONCLICK="ProsesShio(this.form)"> <INPUT TYPE=BUTTON NAME="Tombol" VALUE="Ramal Bintang" ONCLICK="ProsesBintang(this.form)"> <INPUT TYPE=BUTTON NAME="Tombol" VALUE="Idola" ONCLICK="ProsesIdola(this.form)"> </FORM> </BODY> </HTML>

Gambar 10.38. Tampilan Contoh 2 di DreamWeaver

Latihan.

1. Cobalah semua latihan yang ada di bab ini.



3. Perbagus dan terus lanjutkan proyek membuat website pribadi masing-

masing.

Memasukkan Obyek Lain dan Media


BAB 11 MEMASUKKAN OBYEK LAIN DAN MEDIA


��Mampu memahami dan mengimplementasikan penyisipan obyek-obyek lain

dan media pada DreamWeaver.

11.2. Pengantar.

Tampaknya sudah banyak obyek berhasil kita masukkan ke dalam

halaman web kita, tapi itu belum semua. Di dalam bagian ini kita akan

memasukkan obyek-obyek yang tidak bisa dimasukkan dalam salah satu bab

sebelum ini mengingat ia bukanlah salah satu kategori dengan materi yang

pernah kita bahas. Selain itu, kita akan belajar bagaimana memasukkan media

lain di luar DreamWeaver dan HTML untuk mempercantik halaman web.

Materi tentang media berkisar seputar pemanfaatan media-media lain di

luar HTML yang kini sudah sangat sering dipergunakan, seperti penggunaan

Macromedia Flash dan Macromedia Director untuk menciptakan animasi dalam

halaman Web. Flash dan Director adalah dua buah software buatan Macromedia,

produsen DreamWeaver juga. Keduanya sangat populer mengingat mereka bisa

menghasilkan film berkualitas tinggi namun dengan ukuran file yang sangat

kecil. Penggunaan Flash sekarang ini sudah umum di pelbagai website dan

memang dapat memperindah dan meningkatkan kualitas dari suatu website.

Untuk keperluan memasukkan obyek-obyek lain dan media, kita akan

sering menggunakan Objects Pallete Common Panel. Jadi pastikan bahwa

Objects Pallete ini telah tersedia di layar monitor anda.

11.3. Memasukkan Tanggal.

Obyek pertama yang akan kita masukkan ke dalam halaman web adalah

tanggal. DreamWeaver menyediakan fasilitas khusus yang akan memudahkan

kita untuk meletakkan tanggal secara otomatis. Jika kita selesai meng-update



sebuah web dan ingin memberitahu pengunjung kapan terakhir web ini

diperbarui, gunakan tanggal ini. DreamWeaver akan menuliskan tanggal sesuai

tanggal yang ada pada sistem operasi anda.

Untuk memasukkan tanggal ke dalam halaman web anda, lakukanlah

salah satu dari dua cara berikut ini.

��Pada menu Insert pilihlah Date.

Gambar 11.1. Memasukkan tanggal lewat menu ��Pada Objects Pallete Common Panel, kliklah ikon Insert Date .

Setelah berhasil, anda akan masuk ke kotak dialog Insert Date. Anda

harus memilih format-format tanggal yang telah disediakan DreamWeaver.

Format-format tanggal yang bisa anda atur adalah:

Gambar 11.2. Mengatur tanggal dan waktu lewat kotak dialog Insert Date ��Day Format: pada bagian ini anda bisa memilih format hari, apakah anda

tidak akan memasukkan nama hari atau ingin memasukkan nama hari

dengan bentuk penulisan tertentu, misalnya ditulis secara lengkap, disingkat,

atau lainnya.



��Date Format: pada bagian ini anda bisa memilih format tanggal yang akan

dipakai. Pilihlah salah satu yang paling sesuai dengan sistem tanggal di

tempat anda.

��Time Format: pada bagian ini anda bisa memilih format waktu yang akan

dipakai, apakah anda ingin menggunakan sistem waktu tertentu atau malah

tak ingin menampilkan waktu.

��Update Automatically on Save: jika anda mengklik check box ini maka tanggal

dan waktu akan ter-update secara otomatis begitu anda simpan dokumen

web anda.

Gambar 11.3. Tanggal dan waktu muncul di dalam halaman web Tanggal dan waktu di atas tidaklah bergulir secara otomatis. Sistem

tanggal dan waktu di atas bersifat statis. Setelah tampil di jendela browser ia

tidak menyesuaikan diri dengan tanggal dan waktu saat ia muncul di sana.

11.4. Memasukkan Horizontal Rule.

Horizontal Rule adalah garis horizontal yang biasa dipakai sebagai

pembatas teks, gambar, atau obyek-obyek lainnya. Dalam dunia HTML,

memasukkan horizontal rule dapat dilakukan dengan cara menulis tag <hr>.

Untuk memasukkan horizontal rule ke dalam halaman web anda,

lakukan salah satu dari dua cara berikut ini:

��Pada menu Insert pilihlah Horizontal Rule.



Gambar 11.4. Memasukkan Horizontal Rule lewat Menu ��Pada Objects Pallete Common Panel, kliklah ikon Insert Horizontal Rule .

Setelah anda melakukannya ada beberapa perubahan penting terjadi

dalam dokumen anda. Pertama, sebuah garis horizontal tampak melintang di

sana. Kedua, HTML Source mencetak tag baru yaitu <hr>, dan yang ketiga,

Property Inspector Horizontal Rule muncul di hadapan anda.

Gambar 11.5. Tampilan Horizontal Rule pada halaman web

Gambar 11.6. Property Inspector Horizontal Rule

11.4.1. Mengatur Panjang dan Lebar Horizontal

Rule.

Horizontal Rule memiliki panjang dan lebar yang bisa kita atur kemudian

lewat Property Inspector Horizontal Rule. Panjang dan lebar Horizontal Rule ini

ditentukan oleh nilai yang kita masukkan pada kotak W dan H dalam satuan

pixels atau persen.

Gambar 11.7. Kotak tempat mengatur panjang dan lebar horizontal rule



Jika anda memilih satuan pixels, maka lebar dan panjang horizontal rule

akan memiliki ukuran sebesar nilai yang anda masukkan pada kotak W dan H.

Namun jika persen yang anda masukkan, panjang dan lebar horizontal akan

bersifat relatif terhadap ukuran dokumen. Artinya, ukuran panjang dan lebar

akan diatur berapa persen terhadap ukuran panjang dan lebar dokumen. Jika

dokumen memiliki ukuran yang sempit maka horizontal rule akan pendek, dan

begitu juga sebaliknya.

Gambar 11.8. Horizontal Rule dalam ukuran pendek

Gambar 11.9. Horizontal Rule akan menyesuaikan dengan lebar dokumen jika diset dengan ukuran persen

Atribut yang paling bertanggung jawab dalam mengatur lebar dan

panjang horizontal rule ini adalah width untuk panjang dan size untuk lebar.

Anda bisa cek kedua atribut ini pada HTML Source.

11.4.2. Mengatur Shading.

Shading adalah semacam fasilitas yang berfungsi untuk memberi kesan

efek tiga dimensi pada horizontal rule. Fasilitas shading ini secara default berada

dalam kondisi aktif sehingga horizontal rule tampak bergaris tiga dimensi.

Untuk mengaktifkan atau menonaktifkan pilihan shading ini, pilihlah

horizontal rule yang dimaksud dan pada bagian Shading kliklah check

box yang ada di sana untuk mengaktifkan, dan sebaliknya untuk menonaktifkan.



Gambar 11.10. Horizontal Rule tanpa shading Jika anda tidak mengaktifkan shading maka akan muncul atribut baru

pada tag <hr>, yaitu <noshade>.

11.5. Memasukkan Shockwave Movie.

Kini akan dibahas sebuah media yang dibuat oleh Macromedia Director,

yaitu Shockwave movie. Shockwave ini akan menayangkan film pendek dengan

kualitas tinggi dimana ia bisa berinteraksi dengan para pengunjung. Shockwave

ini memiliki ukuran file yang teramat kecil karena telah mengalami

pengkompresan sehingga ideal jika digabung ke dalam halaman web kita.

Hampir semua browser versi terakhir, sanggup menangani shockwave

movie karena browser-browser itu telah melengkapi dirinya dengan semacam

plugins dan ActiveX Control.

Untuk memasukkan shockwave movie ke dalam halaman web kita,

lakukanlah salah satu dari beberapa cara berikut ini:

��Pilihlah menu Insert dan arahkan kursor mouse ke bagian Media. Setelah itu,

kliklah Shockwave.

��Pada Objects Pallete Common Panel, kliklah ikon Insert Shockwave .

Gambar 11.11. Memasukkan Shockwave lewat menu



Setelah anda melakukan salah satu dari dua cara berikut tadi, anda akan

dibawa ke kotak dialog Select File tempat anda mencari file shockwave movie.

Gambar 11.12. Memilih file shockwave Kini anda mendapat semacam ikon baru tertempel pada halaman web

anda. Pada posisi ikon itulah film anda akan diletakkan. Anda bisa mengatur

letak movie anda dengan menggunakan Property Inspector Shockwave Movie

yang akan muncul begitu anda mengklik ikon Shockwave.

Gambar 11.13. Ikon Shockwave menandakan file shockwave telah masuk ke dalam web

Gambar 11.14. Property Inspector Shockwave Berhubung fasilitas yang ada pada Property Inspector Move sebagian

besar sudah kita pelajari pada bab-bab lain, maka untuk saat ini tidak perlu

diulang lagi. Yang perlu anda cermati lagi yaitu setelah anda meletakkan

shockwave movie, HTML Source akan mencetak tag baru, yaitu Object dan

Embed. Tag Object dipakai untuk menangani ActiveX Control sedangkan Embed

dipakai untuk menangani Plugins.



11.6. Memasukkan Flash.

Salah satu media yang dapat menampilkan semacam film dan animasi

pada halaman web kita adalah flash. Flash sendiri dibuat dengan Macromedia

Flash. Hampir mirip dengan shockwave, flash akan menampilkan tayangan

animasi selama beberapa detik, dan biasanya akan muncul begitu web yang

bersangkutan muncul di browser.

Hampir semua browser terbaru sanggup menangani animasi flash ini.

Sama dengan shockwave, flash ini ditangani oleh dua tag, yaitu Object dan

Embed yang akan tercetak pada HTML Source begitu kita memasukkan animasi

flash ke dalam web kita.

Untuk memasukkan animasi flash ke dalam web anda, lakukanlah salah

satu dari cara-cara berikut ini:

��Pada menu Insert, pilihlah Media, dan kemudian kliklah Flash.

��Pada Objects Pallete, kliklah ikon Insert Flash .

Setelah anda memilih salah satu dari dua cara di atas, pilihlah file animasi

flash lewat kotak dialog Select File yang langsung muncul begitu anda

melakukan salah satu cara itu.

Kemudian, pada halaman web anda akan muncul ikon baru tanda

animasi flash sudah ditempelkan. Di bagian itulah animasi anda akan muncul.

Selain itu, anda akan mendapat Property Inspector baru, yaitu Property

Inspector Flash.

Gambar 11.15. Ikon Flash menandakan bahwa animasi flash telah menempel pada halaman web



Gambar 11.15. Property Inspector Flash Pada Property Inspector Flash di atas, anda bisa temukan fasilitas-fasilitas

tambahan, yaitu:

��Quality : bagian ini akan mengatur kualitas pada animasi

flash. Jika anda memilih Low maka kualitas animasi tidak begitu baik, dan

juga sebaliknya jika yang anda pilih adalah Auto High.

��Scale : bagian ini akan mengatur bagaimana animasi itu

akan tampak pada jendela browser, apakah akan tampak seluruhnya, tidak

diberi border, atau benar-benar tepat di jendela browser.

��Loop : bagian ini akan memerintahkan browser memutar ulang secara

otomatis animasi flash jika animasi itu telah habis.

��Autoplay : bagian ini akan memerintahkan browser untuk langsung

menjalankan animasi begitu halaman itu diakses dan file selesai di-load.

Latihan.

1. Implementasikan pelbagai latihan yang ada dalam bab ini.



3. Selesaikan proyek membuat website pribadi masing-masing sebaik-baiknya.

4. Macromedia DreamWeaver memang sebuah software pendesain web yang

hebat. Tapi jangan lupa, tanpa adanya web programming di dalamnya,

desain web yang anda buat kurang terasa kekuatan dan keluwesannya. Maka

dari itu anda semua sebaiknya juga mengusai web programming untuk

menangani pelbagai hal yang belum bisa diselesaikan hanya melalui kode-

kode HTML biasa. Marilah kita sama-sama belajar untuk meningkatkan

kualitas pribadi kita masing-masing!

Mengenal Macromedia Flash 5


BAB 12 MENGENAL MACROMEDIA FLASH 5


��Mampu mengenal dan memahami Macromedia Flash 5.

12.2. Pengantar.

Flash movie adalah program untuk grafis dan animasi yang dipasang

pada situs. Program ini berbasis vektor grafis, walau juga dapat diisi dengan

bitmap yang diimpor dari program lain. Flash movie dapat melakukan

hubungan interaktif dengan pengguna. Dapat juga dibuat non-linier movie yang

dapat berinteraksi dengan aplikasi web yang lain.

Grafis statis yang dibuat efek sehingga seolah-olah nampak bergerak itu

istilahnya animasi. Movie adalah hasil dari proses animasi, sehingga movie yang

kita nikmati merupakan hasil dari proses kejadian yang disebut proses animasi.

Urutan pembuatan Flash movie dimulai dari penggambaran obyeknya,

atau anda juga bisa mengimpor obyek tersebut dari program lain. Lalu gambar

diatur pada Stage yang merupakan bidang layer panggung dari movie itu untuk

kemudian dianimasikan. Jika diinginkan agar movie bersifat interaktif, maka

anda harus menambahkan aksi (action) apabila mendapat reaksi atau masukan

dari pengguna. Untuk itu anda harus mempelajari bahasa pemrograman untuk

Flash 5 yaitu ActionScript.

Flash movie dapat dimainkan dengan cara-cara seperti di bawah ini:

��Dengan Internet Browser seperti Internet Explorer, Netscape Navigator,

Opera, dan lain-lain yang telah diinstall di dalamnya program Flash Player.

��Menggunakan Flash ActiveX Control pada Microsoft Office, Microsoft

Internet Explorer.

��Dengan program Flash Player stand alone.

�� Sebagai stand alone proyektor, Flash movie dapat dimainkan tanpa Flash

Player.

Menggunakan Tools


12.3. Image Vector dan Bitmap.

Dalam dunia digital, image ada 2 jenis, yaitu image bitmap dan image

vector. Sebelumnya yang dikenal dalam dunia animasi adalah selalu image

bitmap. Perkembangan selanjutnya, dalam Flash digunakan image vector.

Keuntungan image vector jika dibandingkan dengan bitmap:

�� Secara umum image vector mempunyai ukuran file yang kecil.

�� Image vector mudah diubah-ubah ukurannya tanpa mengurangi kualitas

gambar, sedangkan bitmap memiliki range pembesaran yang kecil. Jika

terlalu diperbesar maka tampilannya jadi kasar dan tak jelas, jika terlalu

diperkecil maka gambar akan menggumpal (ngeblok).

Kekurangan image vector dibanding dengan bitmap:

��Dalam menampilkan gambar foto atau tekstur lukisan image vector kurang

bagus.

Gambar 12.1. Gambar sebelah kiri adalah gambar Jerry Yan dalam bentuk image Bitmap sedangkan yang sebelah kanan dalam bentuk vector

12.4. Istilah di Lingkungan Flash.

Dalam proses pembuatan Flash movie, anda akan mengenal bagian-

bagian penting berikut ini:

�� Stage, yaitu bidang segi empat dimana move dimainkan.

��Timeline, dimana obyek gambar yang diletakkan pada frame diatur

tampilannya berdasarkan urutan waktunya.

�� Symbol (simbol) merupakan media aset dari movie yang dapat dipakai

ulang.



��Library window, dimana obyek-obyek diorganisasikan.

��Movie Explorer, dimana anda dapat melihat overview suatu movie beserta

strukturnya.

��Panel-panel, baik yang menggantung maupun yang di-dock merupakan

bagian dari Flash yang memuat pelbagai elemen dalam movie.

Gambar 12.2. Menu bar dan Standard Toolbar dengan ikon-ikonnya

Gambar 12.3. Layer Flash 5 dan stage dalam keadaan masih kosong

Gambar 12.4. Struktur pada Timeline

Menggunakan Tools


Gambar 12.5. Library window yang menyimpan beberapa item, salah satunya sedang di-preview

Gambar 12.6. Panel-panel Flash

Gambar 12.7. Tombol-tombol pada Launcher Bar

Gambar 12.8. Panel Mixer dengan Pop Up menu Panel-panel yang ada di gambar 12.6 di atas, bisa saja dipindah-pindahkan ke

sembarang jenis panel lainnya, misalnya di tumpukkan ke panel Mixer/panel

Swatches.

Gambar 12.9. Panel Transform dipindah dan ditumpukkan ke panel Mixer/Swatches

Gambar 12.10. Panel Mixer ditumpukkan ke panel Transform, sehingga panel Swatches sendirian



Semua panel yang telah kita bahas, dapat anda atur penampakannya dari menu

Window > Panels.

Gambar 12.11. Menu Panels Bila anda ingin mengembalikan setting-an panel-panel seperti defaultnya

(standar dari Flash), maka anda dapat memilih menu Window > Panel Sets >

Default Layout.

12.5. Menggunakan Context Menu.

Context menu adalah menu yang muncul jika tombol kanan mouse

ditekan, pada saat anda sedang dalam suatu keadaan tertentu. Context menu ini

berisi menu-menu yang berhubungan dengan keadaan saat itu. Sebagai contoh,

ketika anda sedang mengedit suatu layer dan pada saat itu anda baru saja

mengimpor suatu file *.bmp ke layer tersebut. Begitu anda meng-klik kanan

mouse anda, maka akan muncul menu seperti berikut ini:

Gambar 12.12. Context menu yang muncul ketika dilakukan klik kanan pada gambar yang baru saja diimpor

Menggunakan Tools


12.6. Memanfaatkan Grid, Guide dan Ruler.

Di saat anda sedang menyiapkan suatu artwork pada stage, mungkin

anda memerlukan bantuan untuk men-skala bidang stage tersebut agar

peletakan obyek-obyek yang akan dianimasi dapat lebih teliti. Komponen yang

ada pada Flash untuk membantu hal ini adalah: Grid, Guide dan Ruler.

Grid berupa titik-titik yang membentuk kotak-kotak skala pada bidang

gambar. Guide berupa garis (defaultnya berwarna hijau) yang dapat ditarik dari

Horizontal dan Vertical Ruler. Garis ini untuk patokan letak suatu obyek. Ruler

adalah penggaris yang akan ditampilkan pada bidang layer bagian atas dan

samping kiri. Ruler ini berisi ukuran dengan satuan yang dapat anda pilih dari

kotak dialog Preferences.

Jika Grid ditampilan pada suatu movie, maka akan ditampilkan sebagai

garis di balik artwork pada seluruh scene. Anda dapat snap (merekatkan) obyek

ke grid, dapat mengubah tampilan warna grid maupun ukuran grid itu sendiri.

Untuk menampilkan atau menyembunyikan grid maupuan guide anda

bisa memilih dari 2 hal berikut ini:

��Pilih menu View > Grid > Show Grid (Ctrl+’) atau View > Guides > Show

Guides (Ctrl+;)

��Pilih menu View > Grid > Edit Grid (Ctrl+Alt+G) atau View > Guides > Edit

Guides (Ctrl+Alt+Shift+G), dan pilih Show Grid atau Show Guides pada

kotak dialog.

Gambar 12.13. Tampilan grid pada stage untuk membantu meletakkan obyek secara akurat di bidang gambar



12.7. Membuat Guideline.

Pada saat anda men-set tampilan layer dengan pilihan Show Guideline

maka bukan berarti secara otomatis guideline akan nampak. Guideline hanya

akan nampak jika anda membuatnya. Untuk membuat guideline, anda harus

menampakkan ruler terlebih dahulu. Urutan langkahnya adalah:

��Tampilkan Rulers dengan memilih menu View > Rulers.

��Untuk membuat Guideline Horizontal, drag mouse anda dari Horizontal

Ruler ke bidang gambar dan letakkan pada posisi yang dikehendaki dengan

melihat ukuran yang nampak pada Vertical Ruler di sisi kiri layer.

��Untuk membuat Guideline Vertical, drag mouse anda dari Vertical Ruler ke

bidang gambar dan letakkan pada posisi yang dikehendaki dengan melihat

ukuran yang nampak pada Horizontal Ruler di bagian atas layer.

��Untuk menggeser letak guideline, klik guideline lalu drag-lah dengan mouse.

��Untuk menghapus salah satu guideline, klik lalu drag-lah ke arah Ruler

darimana dia berasal.

��Untuk menghapus seluruh guideline yang ada di layer, tampilkan kotak

dialog Edit Guides lalu pilih Clear All.

��Guideline dapat dikunci posisinya. Jika ia dalam keadaan terkunci, anda tak

dapat memindahkan tempatnya. Untuk mengunci atau membebaskan kunci

dapat dilakukan dari kotak dialog Edit Guides, lalu pilih Lock Guides.

12.8. Setting Awal Movie.

Pertama kali anda membuka Flash, maka pasti akan siap suatu file baru

yang diberi nama secara default Movie1.FLA yang tentu saja dapat juga diberi

nama yang diinginkan. Nama apapun yang ditulis waktu menyimpan, maka

Flash akan otomatis menambahi dengan ekstensi .FLA. File default ini disiapkan

dengan tatanan atau setting yang default pula. Anda dapat mengubah sesuai

kebutuhan. Untuk mengetahui setting apa saja yang diberlakukan pada file

movie, anda dapat membuka kotak dialog Movie Properties.

Langkah melakukan setting properti:

Menggunakan Tools


5. Pilih menu File > New sehingga muncul sebuah file movie baru.

6. Klik Modify > Movie sehingga muncul kotak dialog Movie Properties.

Gambar 12.14. Kotak dialog Movie Properties 7. Pada kotak Frame Rate, masukkan nilai yang menggambarkan jumlah frame

yang ditampilkan setiap detik. Kebanyakan komputer mempunyai

kemampuan mendisplay suatu animasi, khususnya yang dimainkan pada

website, adlah antara 8 hingga 12 fps (frame per second). Flash menggunakan

12 fps sebagai default. Semakin banyak frame setiap detik akan

menghasilkan gerakan yang semakin halus; namun demikian bila komputer

yang membacanya memiliki kecepatan yang kurang maka gambar tadi akan

nampak terputus-putus.

8. Pada kotak Dimension, masukkan salah satu dari dua pilihan berikut:

��Untuk mendefinisikan ukuran stage dengan satuan pixel, masukkan nilai

pada kotak Width (lebar) dan Height (tinggi). Defaultnya adalah 550 x 400

pixel. Ukuran terkecil adalah 18 x 18 pixel sedangkan terbesar adalah 2880 x

2880 pixel.

��Untuk menset ukuran stage agar sesuai dengan ukuran isinya, pilih Match

Contents. Untuk meminimalisasi ukuran movie, letakkan semua elemen yang

ada ke pojok kanan atas layer sebelum menggunakan Match Contents.

��Tombol Printer untuk men-set ukuran stage agar sesuai dengan kapasitas

printer maksimum jika movie buatan anda nantinya akan dicetak melalui

printer. Anda harus memilih ukuran kertas yang dapat diterima secara

maksimum untuk printer tersebut dengan dikurangi marginnya. Untuk itu

dapat anda lihat dan kemudian atur melalui kotak dialog Page Setup pada

menu File > Page Setup.



Gambar 12.15. Kotak dialog Movie Properties 9. Untuk menset warna latar belakang movie, pilih warna dari panel yang

muncul jika anda klik kotak Background.

10. Untuk menentukan satuan ukuran yang akan ditampilkan jika anda

memasang ruler, klik pada kotak Ruler Unit. Di situ terdapat pilihan inchi,

point, cm, mm, pixel. Pilihan satuan unit ini akan ditampilkan juga pada

panel Info.

11. Klik OK.

Latihan.

1. Pahamilah benar-benar semua komponen Flash, kliklah semua yang ingin

anda klik, tanyakan kepada Dosen/Asisten bila ada yang belum dimengerti.

2. Bukalah lesson/pelajaran yang diberikan Flash pada menu Help > Lessons.

Baca dan ikuti langkah-langkahnya, tanyakan pada Dosen/Asisten bila

belum mengerti.

3. Anda dipersilakan mulai merancang situs pribadi anda dengan

mendayagunakan Flash ini.

Menggunakan Tools


BAB 13 MENGGUNAKAN TOOLS


��Mampu memahami dan menggunakan Tools pada Macromedia Flash 5.

13.2. Pengantar.

Pembuatan suatu animasi jelas memerlukan beberapa gambar. Gambar-

gambar ini dapat diambil dari program lain, maupun gambar yang dibuat

dengan Flash ini sendiri.

Flash mempunyai pelbagai tools (alat-alat gambar) yang harus anda

kenali cara penggunaannya. Disini akan dikenalkan shape dan level shape, cara

kerja alat-alat gambar, serta perbedaan antara Fill dan Outline.

13.3. Mengenal Obyek Gambar.

Image yang ada pada Flash, baik yang anda buat maupun yang diimpor

dari program lain dapat mempunyai posisi dalam beberapa level. Masing-

masing level berhubungan dengan sifat dari image tersebut, misalnya seberapa

jauh obyek itu dapat dimodifikasi.

Level pertama atau dapat disebut level yang paling bawah disebut Stage

Level. Jangan bingung dengan istilah Stage dan Stage Level karena keduanya

berbeda.

Maksud dari Stage Level adalah obyek yang ada disitu masih dapat

diubah-ubah atau diedit. Sedang istilah Stage adalah bidang gambar atau bidang

tampilan animasi dalam test mode.

Untuk menghindari terjadinya kerancuan istilah ini, maka kita akan

menyebut Stage Level dengan istilah Shape Level, yaitu suatu level yang

memungkinkan anda membuat gambar, mengedit gambar yang diimpor dari

format lain. Ini berarti setelah suatu shape diubah menjadi level yang lain, maka

ia tidak dapat lagi diubah atau diedit.

Menggunakan Tools


13.4. Dasar Suatu Shape.

Sebelum kita mulai menggunakan tools, marilah kita pahami dulu dasar

pengertian logika gambar. Sebuah bentuk itu terdiri dari garis luar yang

membatasi bentuk itu (disebut dengan stroke) dan isi dari bentuk (disebut

dengan fill).

Tools di Flash terdiri dari dua kelompok ini, garis dan bentuk tertutup.

Pada image vector, semua gambar terdiri dari stroke yang sambung

menyambung. Sebuah garis adalah stroke yang terbuka sehingga tak memiliki

fill. Suatu gambar baru dapat diisi dengan fill jika ia berbentuk path tertutup.

Gambar 13.1. Di sebelah kanan adalah sebuah obyek lingkaran yang terdiri dari garis lingkaran dan fill, sedang di sebelah kiri adalah fill yang dipisahkan dari stroke-nya

Sebuah stroke dapat terdiri dari pelbagai segmen, dimana segmen adalah

suatu potongan stroke yang menghubungkan satu titik dengan titik lainnya. Satu

segmen dapat dipisahkan dari segmen lainnya dalam stroke.

Gambar 13.2. Pada gambar sebelah kiri, terdapat huruf P yang tersusun dari pelbagai segmen, terlihat 1 segmen sedang terpilih. Sedangkan pada sebelah kanannya, terdapat 3 segmen yang

sedang terpilih. Obyek gambar jika berpotongan akan saling memotong/mengiris

sehingga masing-masing perpotongannya dapat dipisahkan.

Gambar 13.3. Gambar paling kiri adalah gambar obyek oval. Kemudian yang ditengah obyek oval tadi dipotong oleh garis lurus. Pada gambar paling kanan terlihat bahwa masing-masing bagian

dapat dipisahkan.

Menggunakan Tools


13.5. Mengenal Komponen-komponen dalam Tools.

Flash juga mempunyai toolbox sebagaimana program-program gambar

yang lain. Pada standar toolbox terdapat tool-tool utama, dan jika salah satu tool

dipilih, maka dibagian bawah toolbox akan muncul Tool Modifier. Tool

tambahan ini merupakan pengembangan tool utama yang meliputi pemilihan

warna outline dan fill, ketebalan dan bentuk garis dan pengembangan spesifik

lain yang berhubungan dengan tool utama yang aktif.

Gambar 13.3. Toolbox pada Flash 5

13.5.1. Menggambar Garis Lurus, Segi Empat dan

Oval.

Garis lurus, segi empat dan Oval adalah bentuk-bentuk dasar geometri.

Dengan Flash hal ini dapat dibuat dengan mudah menggunakan Line tool,

Rectangle tool, dan Oval tool.

Langkah-langkah menggambar garis lurus:

1. Klik Line tool.

2. Tentukan warna stroke yang diperlukan dengan mengklik ikon Stroke Color

dan klik warna pada panel Swatch yang muncul.

Menggunakan Tools


Gambar 13.4. Ikon Stroke Color dan panel pilihan warna stroke 3. Buatlah garis pada stage. Klik dan tekan Shift sambil men-drag mouse untuk

memperoleh garis lurus dengan arah kelipatan sudut 450 (horizontal, vertikal

dan diagonal). Bila tanpa menekan Shift maka akan diperoleh arah garis yang

bebas.

Langkah membuat segi empat atau oval.

1. Klik Rectangle atau Oval tool.

2. Tentukan warna stroke dan warna fill dengan klik ikon masing-masing untuk

menampilkan panel warnanya.

Gambar 13.5. Gambar panel-panel Swatch untuk pilihan warna fill 3. Gambarlah obyeknya. Dengan menekan Shift anda akan memperoleh bujur

sangkar maupun lingkaran; jika tanpa menekan Shift maka akan diperoleh

bentuk bebas, baik segi empat maupun oval.

Gambar 13.6. Bujur sangkar, Lingkaran, segi empat bebas dan obal yang dibuat dengan Oval tool dan Rectangle tool

Menggunakan Tools


13.5.2. Membuat Rounded Rectangle.

Pada Rectangle tool terdapat pilihan untuk membuat segi empat bersudut

tumpul. Hal ini dapat dilakukan dengan 2 cara, yaitu secara langsung di layer

sambil menggambar segi empat itu; dan yang kedua dengan mendefinisikan

sudut tumpulnya.

Di bawah ini adalah cara membuat Rounded Rectangle langsung di layer:

1. Klik Rectangle tool.

2. Setelah menentukan warna stroke dan fill, mulailah membuat segi empat di

layer. Sebelum melepas tombol mouse untuk mengakhiri, tekan tombol

panah ke bawah untuk membuat sudut bulat. Ulangi berkali-kali untuk

memperbesar sudut bulatnya hingga dirasa cukup. Untuk mengurangi

(meruncingkan kembali), tekan tombol panah ke atas.

3. Lepaskan tombol mouse untuk mengakhiri.

Sedangkan untuk membuat Rounded Rectangle dengan Rectangle Setting:

1. Klik Rectangle tool, tentukan warna stroke dan fill.

2. Klik ikon Rectangle Setting, dan setelah muncul kotak dialognya, isikan nilai

sudut tumpulnya (Corner Radius).

3. Klik OK lalu mulailah menggambar segi empat.

Gambar 13.7. Rounded Rectangle dan kotak dialog Rectangle Setting

13.5.3. Memanfaatkan Pen Tool.

Tool ini bisa digunakan untuk membuat garis lurus maupun garis yang

lentur, kurva secara presisi.

Untuk membuat garis lurus, maka kita harus menetapkan titik awal lalu

berpindahlah ke ujung yang lain (tanpa men-drag mouse) lalu klik lagi untuk

mendapatkan garis lurus. Untuk membuat lengkungan atau kurva, anda klik

untuk menetapkan titik awal lalu drag ke ujung berikutnya.

Menggunakan Tools


Gambar 13.7. Garis lurus dan kurva yang dibuat menggunakan Pen Tool Untuk menyunting bentuk garis tersebut, gunakanlah Subselection tool dan drag

untuk memindah-mindahkan letak node atau titik pertemuan antara suatu garis

dengan garis lainnya.

Untuk menambahkan titik node pada suatu kurva, supaya bentuknya

dapat diedit, klik dengan Pen tool pada garis kurva yang akan ditambah

nodenya. Anda tak perlu menambahkan node pada garis lurus.

13.5.4. Menata Preference dari Pen Tool.

Setting pada Pen Tool Preference, dapat dilakukan dengan langkah:

1. Pilih menu Edit > Preference, lalu klik tab Editing.

Gambar 13.8. Kotak dialog Preference untuk Editing 2. Di bawah Pen tool, lakukan pemilihan sebagai berikut:

Menggunakan Tools


�� Show Pen Preview untuk menampilkan garis sementara anda memindahkan

pointer menuju ke titik berikutnya.

�� Show Solid Point jika anda menginginkan tampilan awal dan akhir setiap

garis berupa titik yang solid, sedang titik yang sedang aktif (terpilih)

ditampilkan dalam bentuk titik yang berongga di tengahnya.

�� Show Precise Cursor untuk menampilkan pointer sebagai crosshair pointer.

��Untuk berpindah antar ketiga pilihan di atas, tekan tombol Tab.

13.5.5. Pencil Tool.

Gunakan Pencil tool untuk menggambar garis bebas (freehand). Untuk

menggunakan tool ini, klik Pencil tool kemudian draglah mouse pointer pada

bidang stage untuk menggambar obyek yang dikehendaki.

Ada 3 mode pilihan disini, yaitu Straighten, Smoot, dan Ink.

Gambar 13.9. Garis yang tergambar dengan mode Straighten, Smoot dan Ink

13.5.6. Brush Tool.

Brush tool menghasilkan goresan seperti halnya jika anda menggambar

dengan menggunakan sebuah kuas. Dari alat ini anda bisa memperoleh efek

kaligrafi, dimana pilihan arah kuas dapat anda lakukan pada Modifier tool

ketika Brush tool sedang aktif.

Kotak model bagian atas adalah Brush Size yang menentukan besarnya

stroke yang dihasilkan, sedangkan di bawahnya adalah Brush Shape yang

menentukan bentuk stroke.

Gambar 13.10. Bentuk stroke brush dengan lebar variabel digambar dengan suatu stylus

Menggunakan Tools


13.5.6.1. Meletakkan Goresan Brush Tool.

Terdapat pelbagai pilihan dalam menggunakan Brush tool, yaitu:

��Paint Normal, mengecat di atas fill dan stroke.

��Paint Fill, mengecat di atas bidang fill saja.

��Paint Behind, mengecat area kosong pada starge dan membiarkan obyek di

atasnya tidak berubah sedikit pun.

��Paint Selection, mengecat bidang fill pada obyek yang terpilih.

��Paint Inside, mengecat fill pada suatu obyek yang sebelumnya pernah dicat

outlinenya.

Gambar 13.11. Contoh obyek asli dan setelah diwarnai menggunakan lima pilihan Brush Tool Modifier

13.5.7. Eraser Tool.

Alat penghapus pada toolbox Flash berguna untuk menghapus stroke

dan fill suatu obyek. Pekerjaan ini dapat dilakukan dengan cepat pada stage.

Anda dapat menghapus suatu garis segmen secara individu maupun isian dalam

suatu bidang.

Anda dapat mengembangkan pemakaian Eraser tool hanya untuk

menghapus garis (stroke) saja atau area fill saja. Eraser tool dapat berbentuk

bulat maupun persegi, sedangkan ukurannya dapat dipilih dari jenis pilihan

yang tersedia.

��Menghapus semua obyek di stage dengan cepat. Jika saat ini di layer stage

terdapat pelbagai macam obyek yang ingin dihapus seluruhnya, maka cukup

klik ganda pada Eraser tool, dan semua obyek akan lenyap terhapus.

Menggunakan Tools


��Menghapus stroke segment ataupun Fill Area. Klik Eraser tool, lalu klik

Faucet Modifier (ikon-nya berbentuk kran) . Lalu klik Stroke segment atau

fill area yang akan dihapus.

��Menghapus dengan cara menyeretnya. Klik Erase tool, lalu pilih Eraser

Modifier dengan klik ke bidang pilihan.

Gambar 13.12. Gambar pilihan pelbagai bidang yang akan dihapus pada Eraser Modifier Erase Normal: menghapus stroke dan fill pada layer yang sama. Erase Fills:

Menghapus hanya bidang fill-nya saja. Erase Line: menghapus stroke-nya

saja. Erase Selected Fills: menghapus fill dari obyek terpilih. Erase Inside:

menghapus hanya fill di mana anda mulai menghapus stroke. Jika anda

mulai menghapus dari titik kosong maka tidak akan ada yang terhapus.

Mode ini tidak menghapus stroke.

��Klik Eraser Shape Modifier dan pilih bentuk dan ukurannya (Ikon kran harus

dalam kondisi aktif).

�� Seret pointer untuk menghapus obyek yang dimaksud.

Latihan.

1. Pahami dan cobalah semua tools/komponen pada toolbox yang telah

dibahas pada bab ini. Tanyakan kepada Dosen/Asisten bila ada yang belum

dimengerti.

2. Teruskan dalam hal lesson/pelajaran yang diberikan Flash pada menu Help

> Lessons. Baca dan ikuti langkah-langkahnya.

3. Teruskan perancangan situs pribadi anda dengan mendayagunakan Flash ini.

Mengolah Obyek


BAB 14 MENGOLAH OBYEK


��Mampu memahami dan mengimplementasikan pengolahan obyek pada

Macromedia Flash 5.

14.2. Pengantar.

Obyek pada Flash adalah semua item yang berada pada stage. Istilah

obyek (object) ini ada pada bahasa pemrograman ActionScript yang

dipergunakan pada Flash. Anda dapat mengolah suatu obyek dengan pelbagai

langkah, seperti memindahkan, meng-copy, menghapus, men-transform,

menumpuk (stack). Selain itu anda juga bisa memasukkan bitmap sebagai obyek.

14.3. Memilih Obyek.

Untuk memodifikasi suatu obyek. Anda harus memilihnya terlebih dulu.

Ada beberapa cara yang dapat ditempuh untuk memilih suatu obyek, termasuk

dengan menggunakan Arrow tool, Subselection tool, maupun Lasso tool.

Flash memperlihatkan tanda yang berbeda pada masing-masing

komponen obyek itu jika ia sedang terpilih.

Gambar 14.1. Tanda terpilih yang berbeda pada obyek oval/lingkaran

14.3.1. Arrow Tool.

Anda dapat juga mengaktifkan tool ini dengan menekan huruf V. Ketika

tool lain sedang aktif, untuk berpindah ke Arrow tool sementara, tekan saja Ctrl.

Mengolah Obyek


Tool ini digunakan untuk memilih keseluruhan obyek dengan mengklik suatu

obyek. Selain itu juga dapat dilakukan dengan menyeret pointer mouse ke

sekeliling obyek untuk memilih semua obyek yang masuk ke dalamnya.

��Memilih stroke, fill, suatu group, instance maupun teks: aktifkan Arrow tool

lalu klik obyeknya.

��Memilih garis yang bersambungan secara keseluruhan: aktifkan Arrow tool

lalu klik ganda salah satu ruas garis itu.

��Memilih fill beserta stroke outline-nya: aktifkan Arrow tool lalu klik ganda

pada fill-nya.

��Memilih beberapa obyek dalam area segi empat: Aktifkan Arrow tool dan

drag mouse ke sekeliling obyek-obyek itu.

14.3.2. Subselection Tool.

Seperti Arrow tool, Subselection tool ini juga dapat digunakan untuk

memilih suatu obyek. Bedanya, jika suatu obyek dipilih dengan Subselection

tool, maka obyek itu akan memperlihatkan titik-titik yang merupakan

perbatasan dari segmen. Dengan munculnya titik-titik segmen tersebut maka

stroke yang menjadi outline suatu bentuk obyek akan lebih mudah diedit.

Gambar 14.2. Perbedaan obyek yang terpilih dengan Arrow tool (atas) dan Subselection tool (bawah)

14.3.3. Lasso Tool.

Lasso tool digunakan untuk memilih obyek yang berupa gambar yang

bentuknya tak beraturan dan berada di sekeliling obyek lain. Anda tinggal

mengklik Lasso tool ini, lalu drag ke sekeliling obyek yang akan dipilih. Hal ini

disebut memilih obyek dengan cara freehand.

Mengolah Obyek


Namun, anda bisa juga digunakan Polygon Mode pada Modifier tool

yang aktif jika dipilih Lasso tool. Caranya hampir sama dengan cara freehand di

atas, hanya saja untuk menyambung bentuk polygon-nya, anda tinggal mengklik

ganda mouse pada titik akhir yang mempertemukannya dengan titik awal.

Gambar 14.3. Gambar dengan bentuk tak beraturan dipilih dengan Lasso tool Pada Modifier tool jika Lasso tool aktif, terdapat 3 ikon pilihan, yaitu:

��Magic Wand, untuk memilih obyek bitmap yang telah di-break apart.

��Magic Wand Properties, untuk membuka kotak dialog seperti di bawah ini,

dimana pada kotak Threshold dapat dimasukkan nilai 1 hingga 200

(defaultnya 10) dimana jika dimasukkan nilai 0 hanya pixel yang warnanya

sama yang akan dipilih; semakin tinggi nilainya maka warna-warna pixel

antara yang terpilih dengan yang berdekatan akan menjadi semakin mirip.

Pada kotak Smoothing terdapat pilihan yang menyatakan tingkat kelenturan

garis yang akan dibuat.

��Polygon Mode, untuk obyek vector agar membuat garis yang akan

melingkari obyek dalam bentuk garis-garis segi banyak.

Gambar 14.4. Kotak dialog Magic Wand Properties

Mengolah Obyek


14.4. Memindahkan Obyek.

Memindah dengan cara men-drag:

1. Pilih obyek atau multiple obyek

2. Pilih Arrow tool, pindahkan pointer pada obyek itu lalu drag menuju lokasi

baru. Untuk menyalin obyek dan hanya memindahkan hasil salinannya,

setelah obyek terpilih, tekan tombol Alt dan drag obyek itu. Yang terseret

adalah salinannya, sementara obyek aslinya masih tetap di posisi semula

Memindah obyek menggunakan tombol panah:


2. Tekan tombol panah sesuai arah yang dikehendaki. Sekali anda menekan

tombol panah maka obyek akan bergerak 1 pixel, tetapi dengan menekan

tombol Shift sambil menekan tombol panah maka akan bergerak 8 pixel.

Memindahkan obyek menggunakan panel Info:


2. Pilih menu Window > Panels > Info.

3. Ketikkan nilai koordinat X dan Y sesuai satuan yang berlaku saat itu (pada

gambar di bawah dalam satuan mm).

4. Tekan Enter sehingga obyek akan bergerak sesuai koordinat yang dituju.

Gambar 14.5. Panel Info dimana disitu dapat dimasukkan nilai dalam satuan yang diinginkan untuk memindahkan posisi obyek secara lebih presisi

Jika diinginkan suatu obyek dipindahkan dari suatu layer ke layer lain

atau dari suatu file movie ke file movie lain. Cara-cara memindah sebelum ini tak

bisa dilakukan. Maka kita harus memindahkan obyek dengan metode Copy dan

Paste, sebagai berikut:

1. Pilih obyek yang akan dipindahkan

2. Pilih menu Edit > Copy atau Edit > Cut

Mengolah Obyek


3. Berpindahlah ke layer atau file movie yang dituju, lalu gunakan menu Edit >

Paste. Jika anda menggunakan menu Edit > Copy, maka obyek dapat di-

paste berulang-ulang di beberapa tempat.

14.5. Menghapus Obyek.

Menghapus suatu obyek artinya menghilangkan obyek itu dari file.

Tetapi jika yang dihapus adalah instance suatu obyek, maka yang hilang hanya

instance itu sendiri, sedang obyek aslinya masih tetap ada.

1. Pilih obyek atau obyek yang akan dihapus.

2. Lalu pilih langkah berikut:

��Tekan tombol Delete atau tombol Backspace.

��Pilih menu Edit > Clear.

��Pilih menu Edit > Cut.

��Klik tombol kanan mouse lalu pilih Cut.

14.6. Mengatur Tumpukan Obyek.

Dalam menggambar atau menyusun obyek-obyek di suatu layer

seringkali ada obyek yang saling bertumpukan. Model tumpukannya bisa kita

atur, misalnya memindahkan suatu obyek dari tumpukan paling atas ke

tumpukan terbawah, atau memindahkan suatu obyek setingkat di atas

tumpukannya sekarang, dan sebagainya. Demikian juga tumpukan obyek antar

layer; yang kesemuanya akan mempunyai dampak pada tampilan ketika

dianimasikan.

1. Pilih obyek yang akan dipindahkan tumpukannya.

2. Pilih menu Modify > Arrange > Lalu pilih salah satu dari pilihan berikut:

Bring To Front untuk memindahkan posisi obyek ke tumpukan paling atas.

Send To Back untuk memindahkan posisi obyek menjadi paling bawah. Bring

Forward untuk memindahkan obyek satu lapis di atas posisi saat ini. Bring

Backward untuk memindahkan obyek satu lapis ke bawah posisi saat ini.

Mengolah Obyek


14.7. Meluruskan atau Melenturkan Garis.

Suatu segmen atau bagian dari garis dapat diubah sifatnya dari sifat lurus

menjadi lentur. Walaupun demikian anda dapat mengatur default sifat masing-

masing garis melalui Preference.

Jika anda mendefinisikan melalui kotak dialog Preference bahwa suatu

kurva defaultnya smooth, maka hanya kurva baru yang akan anda buat yang

bersifat begitu, sedang yang dibuat sebelumnya tak akan berubah.

Jika anda memilih Smoothing suatu kurva dan mengurangi jumlah titik-

titik yang ada diantara kurva tadi berarti anda juga mengurangi jumlah segmen

dari kurva tersebut yang berarti akan memperkecil bobot file movie anda.

Melenturkan suatu kurva dari suatu outline maupun garis kurva:

��Klik Arrow tool lalu klik Smooth Modifier pada tool bar option; atau

��Pilih menu Modify > Smooth.

Untuk mengubah agar outline dan garis kurva yang terpilih menjadi agak kaku:

��Klik Arrow tool lalu klik Straighten Modifier pada tool bar option; atau

��Pilih menu Modify > Straighten.

Jika diinginkan agar lebih kaku, tinggal ulangi langkah di atas.

14.8. Mengubah Ukuran suatu Obyek.

Jika diinginkan untuk memperbesar atau memperkecil ukuran suatu

obyek (men-skala), maka ini dapat dilakukan dengan menggunakan Scale Tool

Modifier.

Mengubah ukuran obyek dengan men-drag pointer mouse:

1. Pilihlah obyek yang akan diubah ukurannya.

2. Klik Arrow tool lalu klik Scale Modifier .

3. Lakukan salah satu langkah di bawah ini:

��Untuk memperbesar atau mengecilkan secara proporsional, drag kotak kecil

yang berada di salah satu pojok. Menarik keluar artinya memperbesar,

sedang menarik ke dalam artinya memperkecil.

Mengolah Obyek


��Untuk memperbesar atau mengecilkan ke salah satu arah, baik horizontal

maupun vertikal, tariklah kotak kecil yang terletak di tengah.

Memperbesar/memperkecil obyek menggunakan Panel Transform:

1. Pilih obyek yang akan diperbesar/diperkecil.

2. Pilih menu Window > Panel > Transform.

3. Masukkan nilai pembesaran atau pengecilan dalam bentuk persentase, dari

nilai terkecil 1 hingga terbesar 1000 baik horizontal maupun vertikal.

4. Pilih Constraint jika dikehendaki untuk mempertahankan proporsi obyek.

5. Tekan Enter untuk menjalankan perintah tersebut.

14.9. Bentuk Group dan Un-Group.

Gambar oval/lingkaran yang pernah kita buat, masih mudah diubah

bentuknya. Ia memiliki sifat-sifat yang mirip dengan telur yang berkulit lentur.

Jika anda tarik sisi-sisinya maka bentuk oval itu akan berubah mengikuti tarikan

Pick tool. Sifat seperti ini adalah karena pada saat selesai dibuat obyek itu belum

ter-group. Agar bentuknya dapat tetap maka perlu dilakukan langkah berikut:

1. Aktifkan Pick tool.

2. Lingkari obyek yang akan dipilih sehingga obyek itu masuk ke dalam

lingkaran yang mengelilinginya. Awas, jangan ada obyek lain yang ikut

dalam lingkaran tersebut, karena akan ikut masuk group. Jika perlu gunakan

Lasso tool untuk melingkari bentuk yang tak beraturan.

3. Setelah obyek terpilih pilih menu Modify > Group atau shortcut Ctrl+G.

Untuk melepaskan group, shortcut-nya adalah Ctrl+Shift+G.

14.9.1. Mengubah Bentuk Group setelah di-Group.

Pada kondisi telah di-group, bentuk obyek menjadi tetap. Namun ia

masih dapat diperbesar atau diperkecil dengan meng-klik ikon Scale yang

akan muncul di bagian bawah toolbox. Lalu klik obyek yang akan diubah

ukurannya. Obyek akan dikelilingi tanda terpilih. Drag-lah salah satu kotak kecil

itu untuk memperbesar atau memperkecil. Obyek ini akan membesar atau

Mengolah Obyek


mengecil seseuai arah tarikan mouse. Jika salah satu dari keempat pojoknya yang

ditarik, maka ia akan membesar atau mengecil secara proporsional. Tetapi jika

kotak yang ada di tengah, baik arah horizontal ataupun vertikal, maka gambar

itu akan berubah ke arah tarikan.

14.10. Memecah Obyek.

Suatu obyek, baik berupa obyek gambar, blok teks, instance maupun

bitmap dapat dipecah dengan menggunakan perintah Break Apart. Kondisi ini

berarti akan memperingan bobot file gambar sehingga akan dapat lebih cepat di-

load pada website.

Suatu gambar yang telah dipecah (di-Break Apart), tidak semuanya dapat

dikembalikan seperti keadaan semula. Oleh karenanya anda perlu memahami

apa akibat dari perintah Break Apart yang anda berikan pada suatu obyek, yaitu:

��Memotong link antara instance symbol dengan master symbol.

��Membuang semua frame kecuali yang saat ini berada pada animated symbol.

��Mengkonversi bitmap menjadi fill.

��Mengkonversi text characters menjadi suatu outline.

Jangan dirancukan antara istilah Break Apart dan Un-Group. Perintah

Un-Group hanya memisahkan beberapa obyek yang sebelumnya telah di-group-

kan. Ketika dilepaskan groupnya maka obyek kembali seperti sifat individu

sebelumnya. Perintah Un-Group tak berefek pada bitmap, instance, teks dan juga

tak mengkonversi teks menjadi outline.

Langkah untuk memecah obyek adalah sebagai berikut:

1. Pilihlah group, text block, bitmap, maupun symbol yang akan dipecah.

2. Pilih menu Modify > Break Apart.

Memecah suatu animasi simbol atau group di dalam animasi sisipan tak

direkomendasikan karena mungkin akan menyebabkan hal-hal yang tak

diharapkan. Memecah simbol yang rumit maupun blok teks yang besar mungkin

akan memerlukan waktu yang lebih lama. Dalam hal ini akan diperlukan alokasi

memory yang lebih besar untuk memecah obyek yang rumit dengan tuntas.

Mengolah Obyek


14.11. Memutar Obyek dengan Rotate Tool.

Obyek yang telah dibuat ada kalanya perlu diputar arahnya. Arah

putarnya dapat ditentukan dari putaran yang akan anda berikan. Jadi gambar

dapat diubah posisinya pada derajat putaran yang anda tentukan.

Rotate Tool untuk keperluan ini dapat aktif jika anda mengaktifkan

Pick tool terlebih dulu seperti halnya Scale tool. Caranya, pilih obyek yang akan

diputar, kemudian klik Rotate tool sehingga obyek akan dikelilingi tanda terpilih

yang berbentuk bulatan.

Gambar 14.5. Gambar aslinya, diputar ke kanan, dan diputar ke kiri.

14.12. Memodifikasi Bentuk.

Modifikasi bentuk dilakukan dengan cara sebagai berikut:

��Melakukan konversi garis menjadi line. Caranya adalah: pertama pilih garis–

garis yang akan dikonversikan, lalu pilih menu Modify > Shape > Convert

Line to Fills.

��Mengembangkan bentuk fill suatu obyek tanpa melibatkan outlinenya.

Caranya adalah: pertama pilih obyek yang akan di-Expand Fill, lalu pilih

menu Modify > Shape > Expand Fill. Kemudian isilah kotak Distance dengan

nilai pixel yang diinginkan, juga arah pengembangannya.

��Memodifikasi suatu bentuk obyek dengan efek blur. Caranya adalah:

pertama pilih obyek yang akan diproses, lalu pilih menu Modify > Shape >

Soften Fill Edges. Kemudian isilah kotak Distance dengan nilai pixel seberapa

tebal efek blur akan terjadi, juga isi Number of Steps yaitu berapa lapis

pemudaran warna akan berlangsung, dan terakhir tentukan arah blur apakah

mau melebar keluar atau menyempit ke dalam.

Mengolah Obyek


Gambar 14.6. Soften Fill Edges yang diterapkan pada teks dilakukan dengan memilih blok teks itu (bukan mengaktifkan karakternya) lalu di-Break Apart, baru dipilih menu Modify > Shape > Soften

Fill Edges

14.13. Membalik Obyek.

Posisi suatu obyek dapat dibalik (Flip) dengan arah horizontal maupun

vertikal. Langkahnya mudah saja: tinggal pilih obyek yang akan dibalik, lalu

pilih menu Modify > Transform > Flip Horizontal atau Flip Vertical.

Gambar 14.7. Obyek asli, lalu di-Flip secara horizontal, paling kanan di-Flip secara vertikal

14.14. Memiringkan Obyek.

Memiringkan suatu obyek dilakukan dengan memiringkan obyek

sepanjang satu atau dua buah porosnya. Anda dapat memiringkan suatu obyek

dengan cara menyeretnya atau memasukkan suatu nilai pada panel Transform.

Memiringkan obyek dengan mouse.

1. Pilih obyekyang akan dimiringkan.

2. Lakukan salah satu langkah berikut:

��Klik Arrow tool lalu klik Rotate Modifier tool, atau

��Pilih menu Modify > Transform > Rotate.

3. Drag-lah handle yang terletak di tengah ke arah kiri atau kanan.

4. Klik di tempat kosong untuk melepaskan obyek dari Rotation Handle.

Memiringkan obyek dengan panel Transform.

1. Pilih obyek yang akan dimiringkan.

2. Pilih menu Window > Panel > Tranform.

3. Pilih Skew

4. Masukkan nilai sudut kemiringan horizontal atau vertikal yang diinginkan.

Mengolah Obyek


Gambar 14.8. Panel Transform dengan pilihan Skew yang sedang aktif

14.15. Mengembalikan Obyek yang Telah

Ditransformasi.

Jika telah diberikan perintah-perintah transformasi yang meliputi Rotate,

Scale, dan Skew Instances, Groups, dan Text melalui panel Transform, maka

Flash masih menyimpan bentuk orisinil dari obyek tersebut beserta nilai

transformasi yang pernah anda masukkan. Oleh karenanya anda dapat

membuang hasil transformasi paling akhir yang pernah anda berikan pada suatu

obyek. Flash tak menyimpan data obyek anda sebelum yang terakhir. Jadi, data

transformasi yang disimpan hanya satu lapis saja, yaitu lapis yang terakhir. Jika

pengembalian ke bentuk asli in baru saja anda lakukan maka anda masih dapat

membatalkannya dengan perintah Undo (Ctrl+Z).

Langkahnya adalah sebagai berikut: pilih obyek yang akan diproses, lalu

pilih menu Modify > Transform > Remove Transform.

Sedangkan bila keadaan obyek yang di-transform masih terpilih, klik

tombol Undo pada toolbar utama; atau klik tombol Reset yang terletak di

pojok kanan panel Transform .

Level Undo dapat diset pada menu Edit > Preferences, lalu ketikkan

jumlah level Undo yang diinginkan.

14.16. Perataan Posisi Obyek dengan Aligning.

Pada panel Aligning terdapat pilihan bagaimana anda meletakkan posisi

suatu obyek lain maupun posisi obyek terhadap stage.

Anda dapat meratakan posisi obyek secara vertikal maupun horizontal.

Mengolah Obyek


Dengan menggunakan panel Align, anda dapat menyusun obyek-obyek yang

terpilih agar jarak mereka terbagi merata ke arah batas atas, rata kiri maupun

rata kanan.

Gambar 14.9. Panel Align dengan pilihan Align, Distribute dan Match Size serta Space

Gambar 14.10. Obyek asli (atas) dan di-align Top Edge

Latihan.

1. Pahami dan cobalah yang telah dibahas pada bab ini. Tanyakan kepada

Dosen/Asisten bila ada yang belum dimengerti.

2. Teruskan dalam hal lesson/pelajaran yang diberikan Flash pada menu Help

> Lessons. Baca dan ikuti langkah-langkahnya.


Mewarnai Obyek


BAB 15 MEWARNAI OBYEK


��Mampu memahami dan mengimplementasikan pewarnaan obyek pada

Macromedia Flash 5.

15.2. Pengantar.

Flash 5 memiliki beberapa cara untuk menggunakan, membuat, maupun

memodifikasi warna pada obyek gambar. Sebelumnya telah dipelajari bahwa

komponen gambar pada Flash terdiri dari stroke (disebut juga outline) dan fill

(warna isian bidang obyek) yang masing-masing dapat diwarnai sendiri-sendiri.

Sementara itu Flash mengenal 3 macam tipe warna:

1. Warna polos, yaitu warna-warna tunggal.

2. Warna gradien, yang terdiri dari Linier Gradience yaitu warna gradasi baik

ke arah vertikal, horizontal, maupun diagonal sesuai sudut yang diberikan;

dan Radial Gradience yaitu warna gradasi ke arah memusat ke suatu titik.

3. Warna bitmap, yaitu warna fill yang diambil dari sebuah file bitmap.

Dengan menggunakan default palette atau palette buatan anda sendiri,

anda dapat memilih warna untuk mewarnai sebuah obyek. Dengan menerapkan

stroke color ke shape akan mewarnai outline shape dengan warna tersebut.

Dengan menerapkan fill color ke shape akan mewarnai bagian dalam dari shape

dengan warna tersebut.

Ketika menggunakan stroke color ke shape, anda dapat memilih warna

polos apa saja, dan anda dapat memilih style dan ketebalan stroke tersebut.

Untuk mewarnai sebuah shape, anda dapat menggunakan warna polos, warna

gradien, atau bitmap. Untuk memakai bitmap fill, anda harus mengambil bitmap

dari file yang ada. Anda juga dapat menggunakan stroke atau fill transparan

untuk membuat outline obyek tanpa fill, atau mengisi obyek tanpa outline. Bisa

juga dipakai warna polos untuk mengisi teks.

Mewarnai Obyek


Panel Mixer memungkinkan anda untuk membuat dan mengedit warna

polos. Untuk membuat dan mengedit gradien fill, gunakan panel Fill. Anda

dapat mengimpor, ekspor, menghapus, atau memodifikasi color palette untuk

sebuah file dengan memakai panel Swatches.

15.3. Menentukan Atribut Stroke dan Fill.

Untuk menentukan stroke atau fill color, anda dapat menggunakan

kontrol Stroke dan Fill dalam toolbox, Ink Bottle dan Paint Bucket tool, atau

panel Stroke dan Fill. Untuk memodifikasi style atau line weight stroke, gunakan

panel Stroke. Untuk membuat atau mengedit gradient fill atau menerapkan

bitmap fill, anda gunakan panel Fill.

Ketika anda membuat obyek baru dengan Drawing tool dan Painting

tool, obyek akan diberi warna dengan atribut yang telah ditentukan di dalam

kontrol Stroke dan Fill. Anda juga dapat mengubah atribut stroke dan fill dari

obyek yang ada.

Anda dapat meng-copy atribut stroke dan fill dari satu obyek ke obyek

lainnya dengan menggunakan Eyedropper tool.

15.3.1. Menggunakan Ink Bottle Tool.

Untuk mengubah warna stroke, ketebalan garis maupun style garis atau

outline shape, gunakanlah Ink Bottle Tool. Yang dapat dipakai disini adalah

warna polos saja dan bukan warna gradasi ataupun bitmap. Pilihan

menggunakan Ink Bottle ini lebih mudah jika dibanding anda memilih outline

satu persatu.

1. Klik Ink Bottle Tool .

2. Tentukan warna stroke melalui panel Stroke ataupun Stroke Control.

3. Tentukan style dan ketebalan garis.

4. Klik pada obyek yang akan dimodifikasi warna stroke-nya.

Mewarnai Obyek


15.3.2. Menggunakan Paint Bucket Tool.

Dengan menggunakan Paint Bucket tool anda dapat mengisi suatu area

gambar dengan warna fill. Tool ini dapat mengisi area yang kosong dan

mengubah warna suatu area yang telah diwarnai. Anda dapat mewarnai dengan

warna polos, gradasi dan bitmap. Dapat juga digunakan untuk mengisi area

yang tak seluruhnya terliput, dan anda dapat menentukan bahwa Flash menutup

gap di dalam bentuk outline apabila anda menggunakan Paint Bucket tool. Pada

penggunaan warna gradien, tool ini dapat dimanfaatkan untuk mengubah

ukuran, arah, dan titik pusat gradasi warna maupun bitmap.

Sebagai catatan, bila anda memodifikasi suatu bitmap fill menggunakan

Paint Bucket tool, maka semua instance dari bitmap fill akan termodifikasi,

bukan hanya warna fill dari obyek yang saat itu sedang terpilih saja.

Gambar 15.1. Pada obyek sebelah kiri, stroke pada gambar tak sepenuhnya tertutup, sedang gambar bintang di sebelahnya tersusun dari garis-garis secara individu membuat bidang yang

dikelilingi dapat diisi warna. Penggunaan Paint Bucket tool untuk mengisi area:

1. Pilih Paint Bucket tool.

2. Pilih fill warna dan style.

3. Klik modifier Gap Size dan pilih opsi Gap Size:

4. Pilih Don’t Close Gap jika anda ingin menutup gap secara manual sebelum

mengisi bentuk. Closing gap secara manual dapat dipercepat untuk gambar

yang rumit.

5. Pilih Close untuk membuat Flash mengisikan bentuk yang memiliki gap.

6. Klik bentuk atau area yang ingin diwarnai.

Sebagai catatan, melakukan Zooming untuk membesarkan maupun

mengecilkan tampilan gambar akan mengubah penampakan, namun bukan

ukuran gap sebenarnya. Jika gap terlalu besar, anda dapat menutupnya secara

manual.

Mewarnai Obyek


Menyesuaikan warna gradasi atau bitmap dengan Paint Bucket tool:

1. Pilih Paint Bucket tool.

2. Klik modifier Transform Fill .

3. Klik area yang diisi dengan warna gradasi atau bitmap. Ketika anda memilih

warna gradasi atau warna bitmap untuk diedit maka akan nampak titik

pusatnya disertai kotak ikatan yang ditampilkan dengan editing handle.

Ketika ditunjuk dengan pointer maka pointer akan berubah bentuk

tampilannya (sesuai fungsinya - misal jika yang dipilih adalah yang di pojok

maka akan tampil sebagai pointer rotasi). Tekanlah Shift jika anda ingin agar

arah putaran merupakan kelipatan dari 450.

4. Bentuk kembali gradien atau fill dengan salah satu cara di bawah ini:

��Untuk menempatkan kembali titik pusat dari warna gradasi atau bitmap, klik

dan tarik titik pusat.

��Untuk mengubah lebar warna gradasi atau bitmap, klik dan tarik square

handle pada sisi kotak ikatan. (Opsi ini hanya mengukur kembali fill, bukan

obyek yang mengandung fill).

��Untuk mengubah tinggi warna gradasi atau bitmap, klik dan tarik square

handle pada bagian bawah kotak ikatan.

��Untuk memutar warna gradasi/bitmap, klik dan tarik handle rotasi

melingkar yang ada di sudut. Anda juga dapat meng-klik dan menarik

handle paling bawah pada ikatan lingkaran dari gradien atau fill melingkar.

Mewarnai Obyek


��Untuk membuat skala linear gradien atau fill, klik dan tarik square handle di

pusat kotak ikatan.

��Untuk mengubah radius lingkaran gradien, klik dan tarik handle lingkar

tengah pada lingkar ikatan.

��Untuk membuat miring fill dalam suatu bentuk, klik dan tarik handle lingkar

pada sisi atas atau kanan dari kotak ikatan.

��Untuk membuat file bitmap di dalam bentuk, buat skala fill.

Sebagai catatan, untuk melihat seluruh handle ketika bekerja dengan fill

besar atau fill yang dekat dengan ujung stage, pilih menu View > Work Area.

15.3.3. Menggunakan Eyedropper Tool.

Eyedropper tool dimanfaatkan untuk menyalin atribut fill dan stroke dari

satu obyek dan segera menerapkannya pada obyek yang lain. Tool ini juga

membiarkan anda membuat contoh gambar dalam bitmap untuk digunakan

sebagai fill.

Untuk menyalin dan membuat atribut stroke atau fill:

1. Pilih Eyedropper tool dan klik area stroke atau fill dimana atribut yang anda

inginkan diterapkan ke area stroke atau fill lainnya.

Mewarnai Obyek


2. Ketika anda meng-klik stroke, tool secara otomatis berubah ke Ink Bottle tool,

dan ketika anda meng-klik area fill, tool secara otomatis berubah ke Paint

Bucket tool dan modifier Lock Fill kembali menyala.

3. Klik area stroke atau fill lain untuk membuat atribut baru.

15.3.4. Menggunakan Kontrol Stroke dan Fill dalam

Toolbox.

Untuk memilih warna polos untuk stroke atau warna polos maupun

warna gradasi untuk fill, mengubah stroke dan fill color, atau memilih default

stroke dan fill color (black stroke dan white fill), anda dapat menggunakan

kontrol Stroke dan kontrol Fill di dalam toolbox.

Kontrol Stroke dan kontrol Fill dalam toolbox mengatur atribut

pewarnaan dari obyek yang anda buat dengan menggunakan Drawing dan

Painting tool. Untuk memakai kontrol Stroke dan Fill agar dapat mengubah

atribut pewarnaan dari obyek yang ada, anda harus memilih obyeknya dulu,

baru memilih warnanya.

Gambar 15.2. Ikon Modifier dan panel Swatch. Untuk menerapkan stroke dan fill color dengan memakai kontrol toolbox,

lakukan salah satu cara di bawah ini:

Mewarnai Obyek


��Klik segitiga di depan kotak stroke atau fill color dan pilih contoh warna dari

pop-up window. Gradien dapat dipilih hanya untuk fill color saja.

��Ketik nilai hexadesimal dari warna dalam kotak teks di dalam pop-up

window warna.

��Klik tombol None dalam pop-up window warna untuk menerapkan stroke

atau fill transparan.

Sebagai catatan, anda dapat membuat stroke atau fill transparan bagi obyek

baru, namun anda tak dapat membuat stroke atau fill transparan bagi obyek

yang telah ada. Tapi anda dapat memilih dari obyek yang sudah ada stroke atau

fill-nya dan hapus saja.

��Klik tombol Color Picker dalam pop-up window warna dan pilih warna dari

Color Picker.

��Klik tombol Swap Fill dan Stroke dalam toolbox untuk menukar warna

diantara fill dan stroke.

��Klik tombol Default Fill dan Stroke dalam toolbox untuk kembali ke

pengaturan default warna (fill putih dan stroke hitam).

15.3.5. Menentukan Warna, Style, dan Ketebalan

Stroke dalam Panel Stroke.

Untuk mengubah warna, style, dan ketebalan garis stroke pada obyek

yang telah dipilih, anda dapat menggunakan panel Stroke. Untuk pilihan style

stroke, anda dapat memilih style yang sebelumnya telah dimuat dengan Flash,

atau membuat Custom Style.

Gambar 15.3. Panel Stroke dengan bagian-bagiannya. Sebagai catatan, memilih stroke style selain Solid dapat meningkatkan

ukuran file. Untuk memilih Hard Stroke, klik segitiga di depan menu Weight

pop-up dan atur slider untuk berat yang dikehendaki.

Mewarnai Obyek


15.3.6. Bekerja dengan Warna Polos Fill, Warna

Gradasi, dan Bitmap pada Panel Fill.

Untuk memilih fill warna transparan atau warna polos, fill gradien, atau

fill bitmap, anda dapat menggunakan panel Fill. Panel Fill juga memungkinkan

anda menciptakan dan mengedit fill gradien. Anda dapat memakai fill bitmap

dengan menggunakan bitmap yang anda impor ke dalam file yang ada.

Untuk menerapkan fill transparan dengan memakai panel Fill, caranya

adalah: pilih menu Window > Panel > Fill, lalu pilih menu None dari menu Fill.

Memakai fill warna solid dengan menggunakan panel Fill, caranya

adalah: pilih menu Window > Panel > Fill, lalu klik segitiga di depan warna

kotak warna Fill dan pilih warnanya.

Memakai, membuat, atau mengedit warna gradasi dengan

menggunakan panel Fill:

1. Pilih menu Window > Panel > Fill.

2. Pilih salah satu di bawah ini dari menu Fill:

Gambar 15.4. Panel Fill dengan detil bagian pada pilihan warna gradasi. ��Linear Gradient: membuat gradien yang membayang dari titik awal sampai

titik akhir dalam garis lurus.

��Radial Gradient: membuat gradien yang membayang dari titik awal sampai

titik akhir dalam pola melingkar.

��Klik kotak warna Fill dalam toolbox dan pilih gradien dari palette.

��Untuk mengubah warna dalam gradien yang telah dipilih, klik salah satu

pointer di bawah Gradient Definition bar dan klik pada kotak warna yang

muncul di depan Gradient Definition bar untuk memilih warna.

��Untuk menambah pointer ke gradien, klik di bawah Gradient Definition bar.

Pilih warna untuk pointer baru seperti dijelaskan pada langkah 4.

��Untuk memindahkan pointer dari gradien, klik dan tarik pointer dari

Gradient Definition bar.

Mewarnai Obyek


��Untuk menyimpan gradien, klik segitiga yang ada di sudut kanan atas dari

panel Fill dan pilih Add Gradient dari menu pop-up. Gradien ditambahkan

ke Swatch palette untuk dokumen yang ada.

Membuat fill bitmap dengan menggunakan panel Fill:

1. Pilih menu Window > Panel > Fill.

2. Pilih Bitmap dari menu Fill.

3. Klik bitmap dalam window Bitmap Fill yang muncul dalam panel Fill.

4. Anda dapat memodifikasi fill Bitmap dengan menggunakan Paint Bucket

tool.

15.3.7. Mengunci Gradien atau Bitmap untuk

Mengisi Stage.

Anda dapat mengunci warna gradasi atau bitmap untuk membuatnya

muncul dimana fill melebihi keseluruhan stage sehingga obyek yang diwarnai

dengan fill tertutup menandakan gradien atau bitmap yang melandasi.

Ketika anda memilih modifier Lock Fill dengan Brush atau Paint Bucket

tool dan diwarnai dengan tool, fill bitmap atau gradien akan melebihi obyek

yang anda gambar pada stage.

Dengan menggunakan modifier Lock Fill anda dapat membuat gradien

tunggal atau bitmap yang dapat diterapkan untuk memisahkan obyek pada

stage.

Gambar 15.5. Kotak kecil-kecil pada baris kedua ini seharusnya memiliki gradasi masing-masing, tetapi karena dikunci, maka gradasi dari keseluruhan unit ini menyatu seperti kotak panjang di

baris atasnya. Menggunakan warna gradasi atau bitmap terkunci:

1. Pilih Brush atau Paint Bucket tool dan pilih gradien atau bitmap sebagai fill.

2. Untuk menggunakan bitmap sebagai fill, pisahkan bitmap dan pakailah

Eyedropper tool untuk memilih bitmap sebelum memilih Brush atau Paint

Bucket tool.

3. Klik modifier Lock Fill.

Mewarnai Obyek


4. Pertama-tama warna area dimana anda ingin menempatkan pusat fill dan

kemudian bergerak ke area lainnya.

15.3.8. Membuat dan Mengedit Warna Polos dengan

Panel Mixer.

Untuk membuat dan mengedit warna polos, anda dapat menggunakan

panel Mixer. Jika sebuah obyek dipilih pada stage, modifikasi warna yang anda

buat di dalam panel Mixer akan diterapkan ke pilihan.

Anda dapat memilih warna dari palette warna yang ada atau membuat

warna baru. Anda dapat memilih warna dalam RGB atau mode hexadesimal,

atau menentukan nilai Alpha untuk menentukan derajat transparansi untuk

warna.

Gambar 15.6. Panel Mixer untuk mencampur warna baru.

15.4. Memodifikasi Palette Warna.

Setiap file Flash berisikan palette warna tersendiri, yang disimpan dalam

file Flash. Flash menampilkan palette file sebagai contoh dalam modifier untuk

fill, stroke, dan jenis warna, serta di dalam panel Swatch. Palette default warna

merupakan Palette Web-Safe dari 216 warna. Anda dapat menambahkan warna

pada palette warna yang ada dengan menggunakan panel Mixer.

Untuk mengimpor, ekspor, dan memodifikasi palette warna file, anda

dapat menggunakan panel Swatch. Anda bisa menduplikasi warna, mengganti

warna dari palette, mengubah default palette, memuat ulang palette Web-safe

jika anda telah menggantinya, atau memilah palette berdasarkan hue.

Anda dapat mengimpor dan mengekspor baik palette solid dan gradien

diantara file-file Flash, dan juga diantara Flash dan aplikasi lainnya, seperti

Macromedia FireWorks dan Adobe PhotoShop.

Mewarnai Obyek


Membuat duplikasi warna atau menghapus warna dari palette warna:

1. Pilih menu Window > Panel > Swatch.

2. Klik warna yang anda ingin duplikasi atau hapus.

3. Pilih Duplicate Swatch atau Delete Swatch dari menu pop-up di sudut kanan

atas.

Untuk membersihkan seluruh warna dari palette warna, pada panel

Swatch, pilihlah Clear Color dari menu pop-up di sudut kanan atas. Seluruh

warna akan dipindahkan dari palette, kecuali warna hitam dan putih.

15.4.1. Menggunakan Default Palette dan Palette

Web-Safe.

Anda dapat menyimpan palette yang ada sebagai default palette,

mengganti palette yang ada dengan default palette yang didefinisikan untuk file,

atau memuat palette Web-safe untuk mengganti palette yang ada.

Untuk memuat atau menyimpan default palette, maka pada panel

Swatch, pilih salah satu perintah di bawah ini dari pop-up di sudut kanan atas:

��Load Default Colors, mengganti palette yang ada dengan default palette.

�� Save as Defaulf, menyimpan palette warna yang ada sebagai default palette.

Default palette baru digunakan ketika anda membuat file baru.

Gambar 15.7. Menu pop-up yang ditampilkan dengan klik segi tiga kecil di ujung panel Swatches Untuk memuat palette warna Web-safe 216, maka pada panel Swatch,

pilih Web 216 dari menu pop-up di sudut kanan atas.

Mewarnai Obyek


15.4.2. Mengurutkan Palette.

Agar mudah menempatkan warna, anda dapat memilah-milah atau

mengurutkan susunan warna dalam palette dengan hue.

Untuk mengurutkan susunan warna pada palette, pada panel Swatch,

pilih Sort by Color dari menu pop-up di sudut kanan atas.

15.4.3. Mengimpor dan Mengekspor Palette Warna.

Untuk mengimpor dan mengekspor warna RGB dan gradien di antara

file-file Flash, anda gunakan file Flash Color Set (file CLR). Anda dapat

mengimpor dan mengekspor palette warna RGB dengan menggunakan file

Color Table (file ACT) yang dapat digunakan bersama Macromedia FireWorks

dan Adobe PhotoShop. Anda juga dapat mengimpor palette warna, namun

bukan gradien, dari file .GIF. Anda tak dapat mengimpor atau mengekspor

gradien dari file ACT.

Mengimpor palette warna:

1. Pada panel Swatch, pilih salah satu perintah di bawah ini dari menu pop-up

di sudut kanan atas:

��Menambahkan warna hasil impor pada palette yang ada, pilih Add Colors.

��Mengganti palette yang ada dengan warna hasil impor, pilih Replace Color.

2. Arahkan dan klik file yang dikehendaki. Lalu klik OK.

Mengekspor palette warna:

1. Pada panel Swatch, pilih Save Colors dari menu pop-up di sudut kanan atas.

2. Dalam kotak dialog yang muncul, masukkan nama untuk palette warna itu.

3. Untuk Save As Type, pilih Flash Color Set atau Color Table. Klik Save.

Latihan.

1. Pahami dan cobalah yang telah dibahas pada bab ini.

2. Bukalah contoh-contoh/samples yang sesuai yang diberikan Flash pada

menu Help > Samples. Tanyakan pada Dosen/Asisten bila belum mengerti.


Mengimpor Obyek Bitmap


BAB 16 MENGIMPOR OBYEK BITMAP


��Mampu memahami dan mengimplementasikan pengimporan obyek bitmap

pada Macromedia Flash 5.

16.2. Pengantar.

Untuk membuat animasi pada Flash, anda dapat memanfaatkan artwork

yang dibuat dengan aplikasi lain. Anda dapat mengimpor grafik vektor dan

bitmap dengan pelbagai jenis format file. Apabila anda memiliki QuickTime 4

atau anda telah menginstallnya pada sistem anda, maka anda dapat mengimpor

format file tambahan.

Anda dapat mengimpor file FreeHand (versi 7 atau yang lebih baru) dan

file firework PNG langsung ke dalam Flash dengan tetap mempertahankan

atribut dari format tersebut.

16.3. Menempatkan Artwork ke dalam Flash.

Flash mengenali pelbagai macam format vektor dan bitmap. Anda dapat

menempatkan artwork ke dalam Flash dengan mengimpor atau mem-paste.

Flash mengimpor grafik vektor, bitmap, dan urutan gambar seperti di bawah ini:

��Gambar vektor dari FreeHand diimpor langsung ke dalam gambar Flash.

Anda dapat memilih opsi untuk mempertahankan layer, halaman, dan blok

teks FreeHand.

��Gambar PNG dari FireWorks dapat diimpor langsung ke dalam gambar

Flash dengan data vektor dan bitmap yang dipertahankan sebagai obyek

yang dapat diedit. Anda dapat memilih opsi untuk mempertahankan

gambar, teks, dan pedoman.

Sebagai catatan, jika anda mengimpor file PNG dari FireWorks dengan cutting

dan pasting, file akan diubah menjadi bitmap.

Meingimpor Obyek Bitmap


��Gambar vektor dari file SWF, Adobe Ilustrator, dan Windows Metafile

Format (WMF) diimpor sebagai kelompok dalam layer yang ada.

��Bitmap (fotografi yang di-scan, file BMP) diimpor sebagai obyek tunggal

dalam layer yang ada. Flash mempertahankan pengaturan transparansi dari

bitmap yang diimpor. Oleh karena mengimpor bitmap dapat memperbesar

ukuran file gambar, maka anda bisa meng-kompresnya.

Sebagai catatan, transparansi bitmap tak dapat dipertahankan ketika bitmap

diimpor dengan cara dragging dan dropping. Untuk mempertahankan

transparansi, gunakan File > perintah impor untuk mengimpor.

�� Setiap urutan gambar (misalnya, urutan PICT dan BMP) diimpor sebagai

kerangka keberhasilan dari layer yang ada.

Langkah-langkah mengimpor file ke dalam Flash:

1. Pilih menu File > Import.

2. Dalam kotak dialog Import, pilih format file dari menu pop-up Show.

3. Arahkan ke file yang diinginkan dan pilih. Jika file yang diimpor mempunyai

multiple layer, Flash dapat membuat layer baru. Pastikan timeline terlihat

ketika anda sedang mengimpor file dengan multiple layer.

Gambar 16.1. Kotak dialog Import dengan tipe file yang dapat dipilih sesuai filter yang dimiliki Flash

4. Klik Open. Apabila nama file yang anda impor berakhir dengan nomor, dan

terdapat tambahan secara berurutan pada file bernomor tersebut dengan



folder yang sama, Flash akan menanyakan apakah anda bermaksud

mengimpor file sequence atau tidak. Klik saja Yes, jika diinginkan untuk

mengimpor seluruh file urutan. Atau klik No, untuk mengimpor file tertentu

saja.

Untuk mem-paste bitmap dari aplikasi lain ke dalam Flash:

1. Salin gambar di aplikasi lain.

2. Pada Flash, pilih Edit > Paste.

16.4. Mengimpor Format File yang Berbeda.

Flash 5 dapat mengimpor format file yang berbeda tergantung pada

apakah QuickTime versi 4 atau versi yang lebih baru, telah diinstall. Dengan

menggunakan Flash dan QuickTime 4 yang telah terinstall, hal itu secara khusus

sangat berarti untuk proyek kolaboratif.

QuickTime 4 mendukung format file tertentu (termasuk Adobe

PhotoShop, PICT, QuickTime Movie, dan lainnya).

Format file di bawah ini dapat diimpor ke dalam Flash 5 dengan ataupun

tak adanya QuickTime 4:

Tipe File Ekstensi Adobe Ilustrator versi 6 atau yang lebih baru .eps, .ai AutoCAD DXF .dxf Bitmap .bmp Enhanced Windows Metafile .emf Macromedia FreeHand .fh7, .ft7, .fh8, .ft8, .fh9, .ft9 FutureSplash Player .spl GIF dan Animated GIF .gif JPEG .jpg PICT .pct, .pic PNG .png Flash Player .swf Windows Metafile .wmf

Format berikut ini hanya dapat diimpor ke Flash 5 bila QuickTime 4 terinstall:

Tipe File Ekstensi MacPaint .pntg PhotoShop .psd PICT .pct, .pic QuickTime Image .qtif QuickTime Movie .mov



Silicon Graphics .sai TGA .tgf TIFF .tiff

16.4.1. Mengimpor File FireWorks PNG.

Anda dapat mengimpor file FireWorks PNG ke dalam Flash sebagai

gambar rata atas sebagai obyek yang dapat diedit. Ketika anda mengimpor file

PNG sebagai gambar rata, keseluruhan file (termasuk setiap vektor artwork)

diubah sebagai gambar bitmap. Ketika anda mengimpor PNG sebagai obyek

yang dapat diedit, vektor artwork dalam file akan dipertahankan dalam format

vektor. Anda dapat memilih untuk mempertahankan bitmap yang telah

ditempatkan, teks, dan pedoman dalam file PNG ketika anda mengimporny

sebagai obyek yang dapat diedit. Jika anda mengimpor file PNG sebagai gambar

rata, anda dapat meluncurkan FireWorks dari dalam Flash dan mengedit file

PNG asli (dengan data vektor).

Sebagai catatan, anda dapat mengedit gambar bitmap dalam Flash

dengan mengubah gambar bitmap ke vektor artwork atau dengan memisahkan

gambar bitmap.


2. Pada kotak dialog Import, pilih PNG Image dari menu pop-up Show.

3. Arahkan ke gambar FireWorks PNG dan pilih nama filenya.

4. Klik Open.

5. Dalam kotak dialog PNG Import Settings, pilih salah satu di bawah ini:

�� Import Editable Elements, mengimpor file PNG sebagai elemen terpisah yang

mempertahankan vektor artwork. Select Include Images untuk

mempertahankan gambar bitmap pada file yang diimpor. (Gambar bitmap

ditempatkan dalam library pada movie yang ada, namun tak dapat diedit

dengan editor gambar luar). Select Include Text untuk mempertahankan teks

sebagai blok teks yang dapat diedit. Select Include Guides untuk mengimpor

pedoman FireWorks sebagai pedoman yang dapat diklik dan diarahkan.



�� Flatten Image, mengimpor file PNG sebagai gambar bitmap pada layer yang

ada. Bitmap ditempatkan dalam library untuk gambar yang ada dan dapat

diedit dengan editor gambar luar lainnya atau FireWorks.

16.4.2. Mengimpor File FreeHand.

Anda dapat mengimpor fiel FreeHand (versi 7 atau yang lebih baru)

langsung ke dalam Flash. FreeHand merupakan pilihan terbaik untuk membuat

vektor grafik dalam Flash, karena anda dapat mempertahankan layer FreeHand,

blok teks, simbol library, dan halaman, serta memilih wilayah halaman untuk

mengimpor. Jika file FreeHand yang diimpor berada dalam mode warna CMYK,

Flash mengubahnya menjadi mode RGB.

��Ketika mengimpor file dengan overlapping obyek yang anda ingin

pertahankan sebagai obyek terpisah, tempatkan obyek pada layer terpisah

dalam FreeHand, dan pilih Layers dalam kotak dialog FreeHand Import

dalam Flash ketika mengimpor file. (Apabila overlapping obyek pada layer

tunggal diimpor ke dalam Flash, overlapping bentuk akan dibagi pada titik

perpotongan, seperti halnya overlapping obyek yang anda buat dalam Flash).

��Ketika anda mengimpor file dengan file dengan fill gradien, Flash dapat

mendukung sampai delapan warna. Apabila file FreeHand berisikan warna

gradasi lebih dari delapan warna, Flash akan membuat jalur clipping

(pemotongan) untuk mensimulasi penampilan fill gradien. Jalur pemotongan

dapat meningkatkan ukuran file. Untuk meminimalkannya, gunakan warna

gradasi dengan delapan warna atau lebih sedikit dalam FreeHand.

��Ketika anda mengimpor file dengan blend (mencampur), Flash mengimpor

setiap langkah dalam blend sebagai jalur terpisah. Dengan demikian bila

semakin banyak langkah blend yang ada dalam file FreeHand, maka semakin

besar ukuran file yang diimpor tersebut dalam Flash.

��Ketika anda mengimpor file dengan stroke yang mempunyai square caps,

Flash mengubah caps menjadi round caps.



��Ketika anda mengimpor file dengan menempatkan gambar grayscale, Flash

akan mengubah gambar grayscale menjadi gambar RGB Konversi ini dapat

meningkatkan ukuran file yang diimpor.

��Ketika mengimpor file dengan menempatkan gambar EPS, pertama-tama

anda harus memilih Convert Editable EPS ketika pilihan yang diimpor

terdapat di dalam FreeHand Import Preferences sebelum anda menempatkan

EPS ke dalam FreeHand. Jika anda tak memilihnya, gambar EPS tak akan

dapat dilihat. Sebagai tambahan, Flash tak menampilkan informasi untuk

gambar EPS yang diimpor (dengan tak memperhatikan pengaturan

Preferences yang digunakan dalam FreeHand).

Langkah-langkah mengimpor file FreeHand:


2. Dalam kotak dialog Import, pilih FreeHand dari menu pop-up.

3. Arahkan ke file FreeHand dan pilih.

4. Klik Open, kemudian pada kotak dialog FreeHand Import Settings, utuk

Mapping Pages, pilih setting:

�� Scenes, mengubah setiap halaman dalam dokumen FreeHand menjadi scene

pada Flash movie.

��Keyframe akan mengkonversikan setiap halaman dalam dokumen FreeHand

ke keyframe pada Flash movie.

5. Untuk Layers, pilih salah satu di bawah ini:

��Layers mengubah setiap layer dalam dokumen FreeHand untuk layer dalam

Flash movie.

��Keyframe mengubah setiap layer dalam dokumen FreeHand menjadi

keyframe dalam Flash movie.

�� Flatten mengubah seluruh layer dalam dokumen FreeHand menjadi layer

flatten tunggal dalam Flash movie.

6. Untuk Pages, pilih salah satu di bawah ini:

��Mengimpor seluruh halaman dari dokumen FreeHand.

�� From (nomor halaman) To (nomor halaman) wilayah halaman untuk

mengimpor dari dokumen FreeHand.



7. Untuk Options, pilih opsi di bawah ini:

�� Include Visible Layers, hanya mengimpor layer yang nampak (bukan layer

yang tak kelihatan) dari dokumen FreeHand.

�� Include Background Layer, mengimpor layer latar belakang dengan

dokumen FreeHand.

��Maintain Text Blocks mempertahankan teks dalam dokumen Freehand

sebagai teks yang dapat diedit dalam Flash Movie.

8. Klik OK.

16.4.3. Mengimpor File Adobe Illustrator.

Flash mendukung impor dan ekspor format Adobe Illustrator 88, 3.0, 5.0,

dan 6.0. Ketika anda mengimpor file Illustrator ke dalam Flash, anda harus

memisahkan seluruh obyek illustrator pada seluruh layer. Sekali seluruh obyek

telah dipisahkan, obyek-obyek tersebut dapat diolah seperti obyek Flash lainnya.

16.4.4. Mengimpor Gambar Bitmap.

Mengimpor gambar bitmap ke dalam movie dapat meningkatkan ukuran

file movie; agar dapat mengurangi ukuran file gambar bitmap dapat dilakukan

dengan memilih opsi kompresi dalam kotak dialog Bitmap Properties.

Anda dapat mengedit bitmap yang telah diimpor dengan meluncurkan

FireWorks atau editor gambar luar lainnya dari dalam Flash.

Anda dapat men-trace (menelusuri) bitmap untuk mengubah gambar

menjadi vektor grafik. Dengan melakukan perubahan tersebut akan

memudahkan anda dalam memodifikasi grafik, seperti yang anda lakukan pada

vektor artwork lain dalam Flash, di samping juga mengurangi ukuran file.

Anda dapat memisahkan bitmap menjadi are-area yang dapat diedit.

Bitmap mempertahankan detil awalnya, namun terpisah ke dalam area yang

berbeda di mana anda dapat memilih dan memodifikasi secara terpisah dengan

Flash Drawing dan Painting tool. Dengan memisahkan bitmap juga akan

memungkinkan anda menggunakan bitmap sebagai fill untuk mewarnai obyek.



Apabila Flash movie menampilkan bitmap yang diimpor dengan ukuran

yang lebih besar dari aslinya, maka bentuk gambar akan menjadi berantakan.

Preview-lah bitmap yang diimpor untuk memastikan bahwa gambar dapat

ditampilkan sesuai yang diinginkan.

16.5. Menggunakan QuickTime Movies.

Bila anda telah menginstall QuickTime 4 atau versi yang lebih baru dalam

sistem anda, anda dapat mengimpor QuickTime movie ke dalam Flash agar

dapat memodifikasi movie. Meskipun demikian, agar dapat menampilkan

QuickTime movie, anda harus mengekspornya ke bentuk format QuickTime.

Anda tak dapat menampilkan QuickTime movie dalam format SWF. Anda dapat

membesarkan/mengecilka, memutar, dan membuat animasi QuickTime movie

pada Flash, dan anda dapat memainkan serta mengatur jalur direktori movie

dalam library. Namun anda tak dapat memuat QuickTime movie ke dalam

Flash. Anda dapat memasukkan aksi apa saja yang ada dalam daftar kategori

Basic Action di dalam panel Actions pada QuickTime movie yang diimpor.

Ketika anda mengimpor QuickTime movie, hanya frame pertama dari

movie yang ditampilkan. Anda harus menambahkan frame pada Timeline movie

yang diimpor agar dapat melihat frame tambahan pada movie dalam Flash.

QuicTime movie yang diimpor ke dalam Flash tak menjadi bagian dari file Flash.

Memang, Flash mempertahankan pointer pada file sumbernya.

Cara mem-preview QuickTime movie adalah:

1. Tambahkan jumlah frame ke Timeline yang sesuai dengan lamanya

QuickTime movie yang ingin anda mainkan.

2. Pilih menu Control > Play.

Sebagai catatan, anda tak dapat membuat preview isi QuickTime movie

dengan menggunakan menu Control > Test Movie.

Untuk men-set direktory path untuk file QuickTime movie adalah:

1. Pilih menu Window > Library dan pilih QuickTime movie yang ingin diedit.

2. Pada menu Options yang ada di sudut kanan atas dari Library window, pilih

Properties dan klik Set Path pada kotak dialog Video Properties.



16.6. Mengubah Bitmap Menjadi Vektor Grafis.

Perintah Trace Bitmap akan mengubah bitmap menjadi vektor grafik

dengan area warna yang berbeda dan dapat diedit. Gunakan perintah ini untuk

mengubah gambar ke vektor grafik atau untuk mengurangi ukuran file.

Apabila anda mengubah bitmap menjadi vektor grafik, vektor grafik tak

lagi akan dihubungkan dengan simbol bitmap yang ada di Library window.

Sebagai catatan, jika bitmap yang diimpor berisi bentuk-bentuk yang

rumit dan memiliki jumlah warna yang banyak, vektor grafik yang diubah dapat

memiliki ukuran file yang lebih besar dibanding bitmap aslinya. Cobalah

pelbagai macam pengaturan yang ada di dalam kotak dialog Trace Bitmap untuk

menemukan keseimbangan antara ukuran file dan kualitas gambar.

Anda dapat juga memisahkan bitmap untuk memodifikasi gambar

dengan menggunakan Flash Drawing dan Painting tool atau mewarnai dengan

bitmap sebagai fill.

1. Pilih bitmap dalam scene yang aktif.

2. Pilih menu Modify > Trace Bitmap, sehingga muncul kotak dialog ini:

Gambar 16.2. Kotak dialog Trace Bitmap 3. Masukkan nilai pada kotak Color Threshold antara 1 sampai 500. Ketika dua

pixel dibandingkan, jika perbedaan dalam nilai warna RGB kurang dari color

threshold, kedua pixel tersebut dianggap sebagai warna yang sama. Ketika

anda meningkatkan nilai threshold, hal itu berarti menurunkan jumlah

warna.

4. Untuk kotak Minimum Area, masukkan nilai antara 1 sampai 1000 untuk

mengatur jumlah pixel sekeliling untuk dipertimbangkan ketika menentukan

warna bagi pixel.

5. Untuk kotak Curve Fit, pilih opsi dari menu pop-up agar dapat menentukan

halus tidaknya outline yang tergambar. Pada menu pop-up anda dapat



memilih salah satu diantara Pixel, Very Tight, Tight, Normal, Smooth, Very

Smooth.

6. Untuk Corner Threshold, pilih opsi dari menu pop-up untuk menentukan

apakah sisi tajam dipertahankan atau tidak. Pilihannya terdiri dari Many

Corner, Normal, Few Corner.

Untuk membuat vektor grafik yang tampak seperti bitmap asli, masukkan nilai

di bawah ini:

��Color Threshold: 10

��Minimum Area: 1 pixel

��Curve Fit: Pixel

��Corner Threshold: Many Corner

Gambar 16.3. Contoh penggunaan Trace Bitmap.

16.7. Memecah Image Bitmap.

Memecah suatu image bitmap artinya memisah-misahkan pixel sehingga

dapat dipilih dan dimodifikasi secara terpisah. Dengan memecah bitmap anda

dapat memodifikasi dengan menggunakan Drawing tool yang ada pada Flash.

Selain itu anda juga dapat menggunakan bitmap sebagai fill untuk mengisi

bidang gambar.

Cara memecah bitmap ini adalah sebagai berikut:

1. Pilih bitmap pada scene yang sedang aktif.

2. Pilih menu Modify > Break Apart.

Cara melukis dengan image bitmap:

1. Setelah bitmap dipecah dengan cara di atas, pilihlah Eyedropper tool lalu

klik-kan pada bitmap. Dengan cara itu Eyedropper akan mengubah bitmap

sebagai fill sehingga tool yang aktif berganti secara otomatis ke Paint Bucket.

2. Lukislah menggunakan Paint Bucket atau Brush tool.

Cara mengganti fill dari area bitmap yang telah dipecah:

1. Pilihlah bitmap yang telah dipecah.



2. Klik Lasso tool lalu pilih Magic Wand modifier .

3. Klik modifier Magic Wand Setting dan aturlah opsi sebagai berikut:

��Pada kotak Threshold, masukkan nilai antara 1 hingga 200 untuk

mendefinisikan seberapa besar range warna yang akan dipilih melalui

seleksi. Semakin besar angka yang diberikan maka akan semakin banyak

warna yang akan dipilih; sebaliknya jika diisi 0, maka hanya pixel-pixel yang

warnanya persis dengan pixel pertama yang akan dipilih.

��Pada kotak Smoothing terdapat pilihan Pixel, Rough, Normal dan Smooth

yaitu tingkat kelembutan yang akan diberikan pada image bitmap.

4. Klik bitmap untuk memilih area dan lanjutkan hingga area yang diinginkan

telah dipilih semua.

5. Sekarang anda tinggal memilih warna isian yang akan dipergunakan untuk

mewarnai area pada Bitmap.

6. Gunakan Paint Bucket tool untuk meng-klik dimana saja pada area yang

telah terpilih untuk diisi dengan warna fill yang baru.

16.8. Mengedit Bitmap.

Apabila anda mempunyai FireWorks 3 atau versi yang lebih baru; atau

aplikasi pengedit gambar lainnya pada sistem anda, maka anda dapat

meluncurkan aplikasi dari dalam Flash untuk mengedit bitmap hasil impor.

Jika anda mengedit file FireWorks PNG yang diimpor sebagai gambar

rata (flattened image), anda dapat memilih untuk mengedit file sumber PNG

untuk bitmap, apabila tersedia.

Sebagai catatan anda tak dapat mengedit bitmap dari file FireWorks PNG

yang diimpor sebagai obyek yang dapat diedit pada editor gambar luar.

Untuk mengedit bitmap dengan FireWorks 3 atau versi yang lebih baru:

1. Pada Library window, klik kanan mouse pada ikon bitmap.

2. Pada menu Contexts bitmap, pilih Edit dengan FireWorks 3.

3. Pada kotak dialog Edit Image, tentukan apakah file sumber PNG atau file

bitmap terbuka.

4. Lakukan modifikasi yang dikehendaki pada file yang ada di FireWorks.



5. Pilih menu File > Update.

6. File secara otomatis diperbarui dalam Flash.

Mengedit bitmap dengan aplikasi pengedit gambar lainnya:

1. Pada Library window, klik kanan pada ikon bitmap.

2. Pada menu Contexts bitmap, pilih Edit With.

3. Pilih aplikasi pengedit gambar untuk membuka file bitmap, dan klik OK.

4. Lakukan modifikasi yang diinginkan terhadap file yang ada di dalam

aplikasi pengedit gambar tersebut.

5. Pada Flash, lakukan salah satu dari langkah berikut ini (sehingga nantinya

file secara otomatis diperbarui di dalam Flash):

��Pilih ikon bitmap dalam Library window dan pilih Update dari menu Library

Options.

��Klik kanan ikon bitmap pada Library window dan pilih Update dari menu

Contexts.

16.9. Setting Bitmap Properties.

Anda dapat menggunakan anti-aliasing untuk bitmap agar dapat

memperhalus sisi-sisi dalam gambar. Anda juga dapat memilih kompresi untuk

mengurangi ukuran file bitmap dan mem-format file untuk tampilan pada Web.

Untuk mengatur keadaan bitmap, anda bisa memilih kotak dialog Bitmap

Properties.

Gambar 16.4. Tampilan Bitmap Properties. 1. Memilih bitmap dalam Library window.

2. Lakukan salah satu hal di bawah ini:

��Klik ikon Properties di bagian bawah Library window.

��Klik kanan ikon bitmap dan pilih Properties dari menu Contexts.



��Pilih Properties dari menu Options di sudut kanan atas dari Library window.

3. Pada kotak dialog Bitmap Properties, pilih Allow Smoothing untuk

menghaluskan bitmap dengan anti-aliasing.

4. Untuk Compression, pilih salah satu dari pilihan di bawah ini:

��Pilih Photo (JPEG) untuk mengkompresi gambar dalam format JPEG. Untuk

menggunakan default kualitas kompresi yang ditentukan pada gambar yang

diimpor, pilih Use Document Default Quality. Agar dapat menentukan

pengaturan kompresi berkualitas baru, pilih Use Document Default Quality

dan masukkan nilai antara 1 sampai 100 dalam kotak teks Quality. (Semakin

tinggi nilai maka akan mempertahankan integritas gambar, namun

menghasilkan pengurangan yang kecil pada ukuran file).

��Pilih Lossless (PNG/GIF) untuk mengkompres gambar dengan kompresi

lossless, dimana tak ada data yang hilang dari sumber aslinya.

Sebagai catatan, gunakan Photo compression untuk gambar dengan

warna kompleks atau variasi tonal, seperti fotografi biasa atau gambar dengan

fill gradien. Gunakan Lossless compression untuk gambar dengan bentuk

sederhana dan warna relatif sedikit.

5. Klik Test untuk menentukan hasil kompresi file. Bandingkan ukuran file asli

dengan ukuran file yang dikompresi untuk menentukan apabila pengaturan

kompresi yang dipilih dapat diterima.

6. Klik OK.

Sebagai catatan, pengaturan JPEG Quality yang anda pilih dalam kotak

dialog Publish Settings tak menentukan pengaturan kualitas untuk file JPEG

yang diimpor. Anda harus menentukan pengaturan kualitas untuk file JPEG

yang diimpor pada kotak dialog Bitmap Properties.

Latihan.


2. Lanjutkan mempelajari contoh-contoh/samples yang sesuai yang diberikan

Flash pada menu Help > Samples. Tanyakan pada Dosen/Asisten bila belum

mengerti.


Membuat Teks


BAB 17 MEMBUAT TEKS


��Mampu memahami dan mengimplementasikan teks pada Flash 5.

17.2. Pengantar.

Teks atau pada Flash diistilahkan dengan type (ketikan) dapat

ditampilkan dengan efek-efek yang menarik. Teks juga merupakan bagian dari

obyek dapat dianimasikan. Teks dapat diperpanjang dan diperpendek,

diperbesar-diperkecil, juga dibalik seperti obyek-obyek yang lain.

Jika anda membuat obyek teks pada Flash, maka Flash akan

menempelkan (embeds) informasi tentang font teks itu pada file yang

berekstensi .SWF guna menjaga agar font ditampilkan dengan tepat pada saat

movie dijalankan.

Sebagai alternatif Flash juga menggunakan font khusus pada Flash yang

disebut Device font. Jika ini digunakan, pada saat movie dijalankan pada

komputer yang tak memiliki font yang tercantum pada movie, maka font

tersebut akan diganti dengan font lain. Tentu saja embedded font memiliki

ukuran file yang lebih besar dibandingkan device font.

17.3. Mengetikkan Teks.

Untuk menempatkan teks blok pada stage, gunakan Text tool. Anda

dapat menempatkan hasil ketikan pada sebuah baris saja. Namun jika ketikan

tersebut panjangnya melebihi satu baris maka baris dalam blok teks itu akan

menggulung ke bawah dan mengembang sendiri secara otomatis. Yang perlu

anda lakukan hanya menentukan seberapa panjang blok teks itu. Secara default

bentuk blok teks ini berupa Fixed Text Block.

Untuk mengubah ukuran Fixex Text Block, gunakan Arrow tool untuk

men-drag pinggiran kotak (Text Block). Sedang untuk mengubah dari Fixed Text

Membuat Teks


Block menjadi Extending Text Blok, klik ganda pada handle yang ada di pojok

kanan atas Text Block.

Gambar 17.1. Tiga buah bentuk text block pada Flash 5

17.4. Menata Set Atribut Teks.

Gambar 17.2. Panel Character dan Paragraph

17.5. Mentransformasikan Teks.

Obyek berupa teks dapat ditransformasikan sebagaimana obyek yang

lain. Hal ini dapat dibaca kembali pada bab 14, Mengolah Obyek.

Latihan.




mengerti.


Bekerja dengan Layer


BAB 18 BEKERJA DENGAN LAYER


��Mampu memahami dan mengimplementasikan layer pada Flash 5.

18.2. Pengantar.

Layer ibarat lembaran film yang berisi gambar aktor yang akan

dianimasi. Setiap kali anda membuka sebuah file movie yang baru, disitu akan

tersedia sebuah layer sebagai modal awal. Anda dapat menambah layer itu

sesuai kebutuhan. Pada setiap layer itu anda dapat menggambar dan

menyunting gambar tanpa mengganggu gambar yang berada pada layer lain.

18.3. Membuat Layer.

Untuk membuat sebuah layer baru, lakukan salah satu langkah berikut ini:

��Klik tombol Add Layer pada Timeline.

��Pilih menu Insert > Layer

��Klik kanan mouse pada nama layer di Timeline lalu pilih Insert Line.

18.4. Menampilkan Layer.

Di dalam bekerja mungkin anda menginginkan layer-layer yang ada

ditampilkan atau disembunyikan. Menyembunyikan layer biasanya disukai jika

movie itu dipublikasikan, namun demikian anda tak dapat mengedit layer jika

movie yang anda buat itu sudah disimpan dalam file yang berekstensi .SWF.

Menampilkan/menyembunyikan layer:

��Klik kolom dari ikon mata yang ada di sebelah kanan nama layer. Jika

simbolnya berupa titik hitam, berarti layer ditampilkan, sedang jika berupa

tanda silang berarti layer tak ditampilkan.



��Klik ikon mata untuk menampilkan semua layer atau klik lagi untuk

menyembunyikan semua layer.

��Alt+Klik pada kolom mata untuk menampilkan/menyembunyikan layer

lain, sedang layer yang bersangkutan tak berubah.

Menampilkan isi layer dalam bentuk outline:

��Klik kolom Outline yang letaknya di sebelah kanan nama layer

��Klik ikon outline untuk menampilkan semua layer atau klik lagi untuk

menyembunyikan semua layer.

��Alt+Klik pada kolom outline untuk menampilkan/menyembunyikan outline

obyek pada semua layer yang lain, sedang outline obyek pada layer yang

bersangkutan tak berubah.

Mengubah warna outline layer:

1. Lakukan salah satu dari langkah berikut ini:

��Klik ganda pada ikon layer (di sebelah kiri nama layer) pada Timeline untuk

menampilkan kotak dialog Layer Properties).

Gambar 18.1. Tampilan kotak dialog Layer Properties ��Klik kanan mouse dan pilih Properties.

��Pilih layer pada Timeline lalu pilih menu Modify > Layer.

2. Pada kotak dialog Layer Properties, klik kotak Outline Color dan pilih warna

baru yang diinginkan.

3. Klik OK.

Mengubah ketinggian layer pada Timeline:

Tampilkan kotak dialog Layer Properties seperti langkah-langkah yang

dibahas di atas, lalu pilih option Layer Height, dan klik OK.



Gambar 18.2. Pilihan Layer Height pada kotak dialog Layer Properties Mengatur berapa layer yang ditampilkan di TimeLine.

Secara default, di Timeline hanya ditampilkan tiga buah nama layer.

Namun jika anda memiliki banyak layer dan anda perlu menampilkan lebih dari

tiga layer, anda dapat men-drag pemisah antara Timeline dengan Stage ke

bawah sehingga nama layer yang tampil menjadi lebih banyak. Anda dapat men-

drag-nya ke atas kembali jika ingin mengecilkan bidang tampilan nama layer.

Mengedit layer.

Untuk mengedit isi suatu layer anda harus mengaktifkan layer itu. Dalam

suatu waktu hanya ada satu layer yang dapat diaktifkan dan diedit (walaupun

anda dapat memilih beberapa layer sekaligus). Secara default setiap layer baru

diberi nama Layer 1, Layer 2, dan seterusnya.

Memilih layer.

��Klik nama pada Timeline.

��Klik suatu frame pada Timeline yang diinginkan.

��Pilih sebuah obyek pada stage yang berlokasi pada layer yang diinginkan.

Memilih lebih dari satu layer.

��Memilih beberapa layer yang lokasinya berturut-turut, tekan tombol Shift

lalu klik nama-nama layer yang diinginkan. Jika ada nama layer yang

dilompati, ia akan terpilih juga.

��Memilih beberapa layer yang letaknya melompati layer lain, tekan tombol

Ctrl lalu klik nama-nama layer yang diinginkan.

��Pilih sebuah obyek pada stage yang berlokasi pada layer yang anda inginkan.

Mengganti nama layer.

��Klik ganda pada nama layer hingga menjadi aktif, lalu ketikkan nama baru.

��Klik kanan, pilih Properties untuk menampilkan kotak dialog Layer

Properties. Ganti nama lama dengan nama baru.

��Pilih layer, lalu pilih menu Modify > Layer. Pada kotak dialog Layer

Properties masukkan nama baru.



Meng-copy suatu layer.

1. Pilih nama layer yang diinginkan.

2. Gunakan menu Edit > Copy Frames.

3. Klik tombol Add Layer (+) untuk membuat layer baru.

4. Aktifkan layer baru tadi lalu gunakan menu Edit > Paste Frames.

Menghapus layer.

1. Pilih layer yang akan dihapus

2. Lakukan salah satu di bawah ini:

��Klik tombol Delete Layer (gambar tempat sampah).

��Drag nama layer yang akan dihapus ke ikon Delete Layer pada Timeline.

��Klik nama layer dengan tombol kiri mouse lalu pilih Delete Layer.

Mengunci layer.

Mengunci suatu layer biasanya dilakukan jika layer beserta isinya telah

dianggap sempurna dan dimaksudkan agar layer tersebut tak diubah-ubah isi

maupun posisinya. Untuk mengunci dan membebaskan satu atau beberapa

layer, lakukan salah satu dari cara berikut ini:

��Klik pada kolom Lock di sebelah kanan nama layer untuk mengunci dan klik

kembali untuk membebaskannya.

��Klik ikon kunci/gembok untuk mengunci semua layer dan klik sekali lagi

untuk melepaskannya.

��Tekan tombol Alt lalu klik pada kolom Lock untuk mengunci semua layer

selain layer aktif dan Alt+klik sekali lagi untuk membebaskannya.

Menggunakan Guide Layer.

Sebagai bantuan pada waktu anda menggambar, anda dapat

menggunakan Guide Layer. Guide layer ini tidak akan tampil pada saat file ini

dimainkan pada Flash Player. Anda juag dapat membuat sebuah motion guide

layer untuk mengontrol gerakan obyek pada movie yang menggunakan motion

tweened.



Gambar 18.3. Hasil dari klik kanan di Layer 1 dan Guide Layer dari Layer 1 Untuk mendefinisikan sebuah layer sebagai sebuah Guide Layer: pilih

layer itu lalu klik kanan mouse untuk menampilkan menu shortcut, lalu pilih

Guide. Untuk mengembalikan menjadi layer, ulangi sekali lagi langkah tersebut.

Latihan.




mengerti.


Simbol, Instance dan Tombol


BAB 19 SIMBOL, INSTANCE DAN TOMBOL


��Mampu memahami dan mengimplementasikan Simbol, Instance dan Tombol

pada Macromedia Flash 5.

19.2. Tipe-tipe Item pada Flash 5.

1. Simbol (Graphical Symbol).

Gambar 19.1. Contoh Graphical Symbol ini dapat dilihat pada panel Library dari menu Window > Common Libraries > Graphic.

2. Instance.

3. Tombol (Button).

Gambar 19.2. Contoh-contoh Buttons (tombol) yang dapat dilihat pada panel Library dari menu Window > Common Libraries > Buttons.

4. Movie Clip.



Gambar 19.3. Contoh-contoh movie yang dapat dilihat pada panel Library dari menu Window > Common Libraries > Movie Clips.

19.3. Simbol.

Mengenal Simbol.

Yang dimaksud dengan simbol adalah image, tombol maupun movie clip

yang dapat dipergunakan kembali (re-usable) sepanjang movie. Sebuah simbol

yang anda buat secara otomatis akan menjadi bagian dari library suatu movie.

Mula-mula gambarlah sebuah obyek di stage. Gambar yang anda buat itu

akan menempati suatu frame atau keyframe. Pertimbangkan apakah gambar

yang anda buat tadi hanya akan muncul sekali itu saja? Apakah dia tidak akan

diletakkan pada frame yang lain? Jika masih akan ditampilkan lagi, simpanlah

obyek itu sebagai suatu simbol.

Bukan hanya gambar yang anda buat sendiri, tetapi juga obyek lain yang

diimpor dari program lain. Simbol ternyata juga bukan hanya obyek gambar,

tetapi juga bisa obyek suara, juga obyek animasi yang telah dikemas terlebih

dahulu dalam suatu file.

Mengenal Pelbagai Perilaku Jalannya Simbol.

Tiap simbol memiliki sebuah Timeline dan Stage sendiri, lengkap dengan

layer-layernya. Ketika anda membuat sebuah simbol, anda harus memilih

bagaimana simbol akan berperilaku/bereaksi, tergantung pada bagaimana anda

ingin menggunakannya dalam movie.

�� Simbol dapat dipergunakan sebagai image yang statis (gambar diam) misal

background/latar belakang.



�� Simbol dipergunakan sebagai button interaktif, misalnya kalau di-klik maka

akan bereaksi dengan menjalankan perintah lain.

�� Simbol dipergunakan sebagai movie clip alias obyek yang dianimasi.

Membuat Simbol baru dari elemen-elemen gambar yang dipilih:

1. Pilihlah elemen gambar pada stage yang akan dijadikan simbol dan gunakan

menu Insert > Convert to Symbol.

2. Dalam kotak dialog Symbol Properties, ketiklah nama simbol dan pilh dari

pilihan Behavior: Movie Clip, Button, atau Graphic. Lalu klik OK.

Membuat simbol kosong baru:

1. Pastikan bahwa tak ada obyek yang sedang terpilih pada stage, lalu lakukan

salah satu dari langkah berikut:

��Pilih menu Insert > New Symbol.

��Klik tombol New Symbol pada bagian paling bawah kiri di Library window.

��Pilihlah New Symbol dari menu Library Option di sudut kanan atas Library

window.

Gambar 19.4. Pelbagai cara untuk membuat simbol baru. 2. Di kotak dialog Symbol Properties, ketik nama simbol dan pilih perilakunya.

3. Klik OK. Begitu anda menyimpan simbol (dan memberi nama), maka secara

otomatis Flash akan menambahkan simbol pada library dan beralih ke mode

editing simbol. Dalam mode editing simbol, nama simbol nampak di atas

sudut paling atas dari window, di atas Timeline, dan sebuah crosshair

mengindikasikan titik registrasi simbol.



4. Untuk membuat isi simbol, anda dapat menggunakan Timeline, gambarlah

dengan alat-alat gambar, mengimpor media, atau membuat instance-instance

dari simbol-simbol lain.

5. Jika anda telah selesai membuat kandungan simbol, lakukan salah satu:

��Pilihlah menu Edit > Edit Movie.

��Kliklah tombol Scene dalam sudut kiri atas atas dalam dokumen window.

��Kliklah tombol Edit Scene pada sudut kanan atas dokumen window dan

pilihlah salah satu scene dari menu.

Menduplikasi simbol.

Dengan menduplikasi sebuah simbol memungkinkan anda menggunakan simbol

yang telah ada sebagai titik tolak untuk membuat simbol baru.

Caranya adalah:

Pilihlah sebuah simbol dalam Library window. Lakukan salah satu di bawah ini:

��Klik kanan dan pilih Duplicate dari menu Contexts.

��Pilih Duplicate dari menu Library Option.

Mengedit simbol.

Ketika anda mengedit sebuah simbol, Flash akan memperbarui seluruh

instance simbol itu dalam movie. Ketika anda mengedit simbol itu dengan

konteks obyek-obyek lain pada stage dengan menggunakan Edit dalam perintah

Place. Obyek-obyek lain menjadi redup untuk membedakannya dari simbol yang

sedang anda edit.

Anda dapat juga mengedit sebuah simbol dalam sebuah window terpisah

menggunakan Edit dalam perintah New Window atau Editing Mode Symbol.

Pengeditan sebuah simbol dalam sebuah window terpisah memungkinkan anda

melihat baik simbol maupun Timeline utama pada saat yang sama.

Dalam Editing Mode simbol, window berubah dari pandangan stage ke

sebuah pandangan hanya simbol saja; sebuah crosshair mengindikasikan titik

registrasi simbol. Selain itu, panel Instance akan menjadi redup dan nama simbol

akan nampak di sudut kiri paling atas dari window, di atas Timeline.

Meng-“Edit in Place” sebuah simbol, lakukan salah satu berikut ini:

��Klik ganda instance pada stage.



��Pilihlah sebuah instance simbol pada stage dan klik kanan lalu dari menu

Contexts pilihlah Place > Edit.

��Pilihlah (sorotlah) sebuah instance simbol pada stage dan klik kanan, lalu

pilihlah edit dalam New Window dari menu Contexts.

��Klik ganda sebuah ikon simbol dalam Library window.

Mengedit simbol pada Editing Mode, lakukan salah satu berikut:

��Pilihlah sebuah instance simbol pada stage dan klik tombol Edit Symbol pada

tombol panel Instances.

��Pilihlah sebuah instance simbol pada stage; pilihlah menu Edit > Edit

Symbol, atau klik kanan dan pilihlah Edit dari menu Contexts.

��Klik ganda simbol pada Library window atau dalam window preview

Library; kemudian pilih Edit dari menu Library Options, atau klik kanan dan

pilihlah Edit dari menu Contexts.

�� Simbol yang melekat pada instance terbuka dalam Editing Mode simbol.

Anda sekarang, dapat mengedit simbol. Seluruh instance simbol di seluruh

movie diperbarui yang mencerminkan pengeditan anda.

��Ketika mengedit sebuah simbol, anda dapat menggunakan satu atau

beberapa dari alat gambar, media impor, atau membuat instance pada

simbol-simbol lain.

Keluar dari Editing Mode dan kembali ke Movie Editing. Lakukan satu saja:

��Pilihlah menu Edit > Edit Movie.

��Kliklah nama scene pada sudut kiri atas window dokumen.

��Kliklah tombol Edit Scene di sudut kanan atas window dokumen dan

pilihlah sebuah scene dari menu.

19.4. Instance.

Instance adalah salinan dari suatu simbol yang ditempatkan pada stage

atau bersarang di dalam simbol lainnya. Ia dapat diubah dan dibuat berbeda dari

simbolnya.



Gambar 19.5. Sebuah simbol (lihat pada kotak Library) dan dua buah instance yang telah berubah ukuran dan posisinya.

Membuat Instance.

Setelah anda membuat simbol, anda dapat membuat instance dari simbol itu.

1. Pilihlah sebuah layer pada Timeline.

2. Pilihlah menu Window > Library.

3. Dari Library window, pilih simbol yang anda inginkan, lalu drag simbol itu

dari library ke stage.

4. Setelah membuat sebuah instance dari sebuah simbol, gunakan panel

Instance (Window > Panels > Instances) untuk menentukan efek warna, aksi,

mode tampilan/display grafik seperti diperbesar, diperkecil, diputar, atau

mengubah reaksi instance. Reaksi instance sama dengan reaksi simbol,

kecuali jika anda menentukan lain. Perubahan yang anda buat pada instance

hanya mempengaruhi instance itu saja, tak akan mengubah simbol.

Mengubah Properti dari Instance.

Gunakan panel Instance (menu Window > Panels > Instance) dan panel Effect

(menu Window > Panels > Effect). Dari kedua panel ini anda dapat

mendapatkan kondisi yang diinginkan pada instance.

19.5. Tombol.

Yang dimaksud disini adalah gambar yang interaktif dan berfungsi untuk

menjalankan perintah lain. Seperti halnya anda sering mendapati pada semua

program under Windows, seperti tombol OK, Cancel, Back, Forward, Exit, dsb.



Tombol Flash sebenarnya merupakan clip movie interaktif yang terdapat

pada empat buah frame. Pada keempat frame ini tombol akan berperilaku

berbeda sesuai dengan perlakuan anda pada tombol itu.

Untuk membuat sebuah tombol menjadi interaktif dalam sebuah movie,

anda harus menempatkan instance dari gambar tombol itu pada stage, kemudian

mendefinisikan aksi-aksinya pada instance. Aksi harus diberikan pada instance

dari tombol tersebut pada movie, bukan pada frame di tombol Timeline.

Setiap frame pada Timeline dari suatu simbol tombol memiliki sebuah

fungsi spesifik, yaitu:

�� Frame pertama, disebut keadaan Up, yaitu untuk menggambarkan tombol

dalam keadaan biasa; artinya pointer mouse tak sedang di atas tombol itu.

�� Frame kedua adalah keadaan Over, artinya pointer mouse berada di atas

tombol itu (jika tombol ditunjuk dengan pointer mouse).

�� Frame ketiga adalah keadaan Down, menggambarkan penampilan tombol

ketika diklik dengan pointer mouse.

�� Frame keempat adalah keadaan Hit, menentukan area yang akan merespon

klik mouse. Area ini tak terlihat dalam movie.

Gambar 19.6. Tombol yang telah berfungsi dari kiri ke kanan: Up, Over, dan Down. Sedang tombol Hit tak terlihat di movie.

Langkah membuat sebuah tombol:

1. Yakinkan bahwa saat ini, tak satupun obyek yang sedang terpilih.

2. Pilih menu Insert > New Symbol atau tekan Ctrl+F8 sehingga muncul:

Gambar 19.7. Kotak dialog Symbol Properties setelah diisi nama tombol yang dibuat, lalu pada Behavior dipilih Button.

3. Saat itu tampilan layar berubah menjadi Symbol Editing Mode, dimana di

bagian atas Timeline nama TombolKu muncul, menandakan yang aktif

sekarang adalah editing mode dari tombol itu. Sementara pada Library



Window (jika saat itu anda buka) akan nampak muncul nama TombolKu dan

di bidang previewnya hanya nampak tanda +.

4. Gambarlah tombol berbentuk segiempat dan beri warna pada sisi luar kiri

dan atas warna terang, sedangkan sisi luar kanan dan bawah gelap, seperti

terlihat pada gambar 19.6 kiri. Pada saat itu gambar tombol tersebut akan

tampil di jendela preview Library window.

5. Klik frame kedua yang berlabel Over, lalu gunakan menu Insert > Keyframe

atau F6. Pada saat itu frame pertama akan tercopy pada frame kedua

sehingga pada keyframe kedua tombol yang anda buat itu masih terlihat.

6. Ubahlah warna fill tombol seperti terlihat pada gambar 19.6 tengah.

7. Lanjutkan dengan klik frame ketiga lakukan langkah 5 dan ubahlah warna

fill tombol seperti terlihat pada gambar 19.6 kanan. Demikian seterusnya

frame keempat setelah dimasuki keyframe, ubah warnanya menjadi hitam.

8. Jika urutan di atas telah selesai, pilih Edit > Edit Movie. Layer akan berubah

menjadi kosong. Drag simbol Tombol dari Library window ke bidang stage.

9. Cobalah dengan menu Control > Test Movie.

Mengubah animasi menjadi sebuah movie clip:

1. Pada Timeline utama, pilihlah setiap frame dalam sebuah layer animasi.

2. Pilih menu Edit > Copy Frames, atau klik kanan pada frame dan pilihlah.

3. Lepaskan pilihan anda. Lalu pilih menu Insert > New Symbol.

4. Pada Symbol Properties, namai simbol, pada Behavior pilih Movie Clip.

5. Pada Timeline, klik Frame 1 pada layer 1, pilih Edit > Paste Frames.

6. Hapus animasi dari Timeline movie utama dengan memilih setiap frame

dalam setiap layer animasi dan memilih Insert > Remove Frame.

Latihan.

1. Pahami dan cobalah semua yang telah dibahas pada bab ini.

2. Lanjutkan mempelajari contoh-contoh/samples yang sesuai yang ada pad

Flash di menu Help > Samples. Tanyakan pada Dosen/Asisten bila anda

belum mengerti.

3. Teruskan perancangan situs pribadi anda dengan menggunakan Flash ini.

Animasi


BAB 20 ANIMASI


��Mampu memahami dan mengimplementasikan animasi pada Flash 5.

Dua cara membuat animasi.

��Animasi Frame by frame, yaitu cara klasik menyusun animasi. Anda harus

membuat gambar-gambar yang berbeda dalam tiap frame.

��Tweened Animation, dengan cara ini cukup dibuat frame awal dan frame

akhir lalu Flash akan membuat frame-frame diantara keduanya.

Ciri-ciri animasi yang tampak pada Timeline.

Keyframe Motion Tweened ditandai dengan sebuah titik

hitam sedangkan tanda diantara kedua titik itu digambarkan dengan garis panah

hitam dengan latarbelakang berwarna biru muda.

Keyframe Shape Tweened ditandai dengan sebuah titik hitam

sedangkan tanda diantara kedua titik itu digambarkan dengan garis panah hitam

dengan latar belakang berwarna hijau muda.

Sebuah garis putus menandai bahwa keyframe terakhirnya

tak ada.

Seubah keyframe tunggal digambarkan dengan sebuah titik

hitam. Sedangkan frame berwarna abu-abu muda setelah tanda hitam

menggambarkan bahwa frame tunggal tadi mengandung isi yang sama tanpa

ada perubahan hingga berakhir pada segi empat kecil pada frame di akhir.

Sebuah huruf “a” kecil menandakan bahwa frame telah

ditetapkan sebagai sebuah action frame dengan panel Action.

Sebuah bendera merah menandakan bahwa frame

mengandung sebuah label atau komentar.

Animasi


Kecepatan Frame.

Jika kecepatan frame terlalu lambat, hal ini akan mengakibatkan gambar

nampak seperti tersendat-sendat, sedangkan jika frame terlalu cepat maka akan

membuat gambar yang tampil menjadi kabur. Kecepatan 12 frame per second

(fps) biasanya memberikan hasil terbaik pada tampilan di Web. Movie yang

dihasilkan oleh QuickTime dan AVI pada umumnya memiliki kecepatan frame

12 fps, sedangkan kecepatan movie standar adalah 24 fps.

Membuat animasi frame by frame.

Animasi ini mengubah kandungan stage dalam setiap frame dan paling

sesuai dengan animasi kompleks dimana sebuah gambar berubah dalam setiap

frame dan bukannya hanya bergerak atau berpindah.

Latihan 1. Membuat animasi bola jatuh dan memantul, frame by frame.

1. Buka layer movie baru, dengan menu File > New atau klik ikon New.

2. Klik Oval tool pada toolbar, pilih warna garis dan fill. Buat lingkaran.

3. Lihat pada Timeline. Saat itu pada posisi 1 terdapat simbol keyframe yang

menandakan saat ini disitulah posisi obyek. Kliklah tepat di sebelah kanan

pada posisi 2, lalu tekan tombol F6 (atau Insert > Keyframe).

Animasi


4. Geser obyek lingkaran ke posisi serong ke bawah kanan.

5. Ulangi langkah 3 dan 4 pada posisi Timeline 3, 4, dan seterusnya, hingga

posisi obyek bola sampai ke dasar layar, lalu lanjutkan gerakan bola ke arah

yang berlawanan untuk membentuk rute seperti huruf “V”. Perkirakan

gerakan ini akan berakhir pada posisi Timeline ke-20. Kalau sudah, Tes-lah.

Latihan 2. Membuat animasi illustrasi gambar frame by frame.

Caranya adalah serupa dengan latihan 1 di atas, cuma disini setiap frame berisi

gambar ilustrasi yang selalu berubah-ubah.

Latihan 3. Motion tweening (animasi gerak).

1. Buka file movie baru, lalu pilih frame 1. Masukkan keyframe dengan F6.

2. Buat sebuah gambar, misalnya teks berbunyai PIKTI dengan font Book

Antiqua 16 point, Bold, berwarna biru.

Animasi


3. Pilih obyek tersebut lalu pilih menu Insert > Convert to Symbol atau tekan

F8. Pada kotak dialog Symbol Properties, beri nama dengan “TeksKu”.

4. Kini obyek kita terlah menjadi instance dari simbol yang tersimpan di

Library. Saat ini kita berada pada Movie Editing. Jika anda mengubah obyek

gambar artinya anda hanya mengubah instancenya saja, sementara simbol

aslinya tak berubah. Lalu buka menu Window > Panel > Effect. Pilih Alpha.

5. Klik frame ke-40 lalu tekan F6 untuk memasukkan keyframe disitu.

6. Buka panel Transform lalu isikan nilai 1000% pada kotak Horizontal dan

Vertical untuk memberikan instance sebesar 10 kali ukuran awalnya.

7. Pindahkan letak obyek di pojok kanan bawah, bahkan bisa agak keluar.

8. Pada panel Effect ubahlah nilai Alpha menjadi 10%.

9. Klik frame 1, lalu pilih menu Insert > Create Motion Tween. Anda akan

melihat garis panah yang menghubungkan frame 1 hingga frame 40.

Latihan 4. Membuat motion tweening menggunakan opsi Tweening Option.

1. Klik nama layer yang diinginkan, beri keyframe kosong di layer itu.

2. Buatlah sebuah instance, group, atau blok teks pada stage.

3. Untuk melakukan tweening bergerak atas sebuah obyek yang telah

digambar, anda harus mengubahnya menjadi sebuah simbol.

4. Buatlah keyframe kedua dimana anda ingin animasi berakhir.

5. Lakukan salah satu ini, modifikasi instance, group, atau teks di frame akhir:

�� Jika efek yang dipilih adalah efek pindah tempat (Tweening Motion),

pindahkan item itu ke posisi yang baru.

�� Jika efek yang dipilih adalah mengubah ukuran obyek, memutar posisi atau

kemiringan obyek, lakukanlah modifikasi ukuran, rotasi, atau kemiringan .

Animasi


�� Jika animasinya menyertakan perubahan warna, modifikasi warna item.

6. Pilih Window > Panel > Frame.

7. Untuk Tweening, pilih Motion.

8. Jika hendak melakukan modifikasi terhadap ukuran obyek pada langkah 4 di

atas, pilih Scale untuk melakukan tweening terhadap ukuran obyek.

9. Klik dan drag handle pada nilai Easing atau ketikkan nilai tertentu untuk

menyesuaikan kecepatan perubahan antara frame-frame yang di-tweening:

��Memulai motion tweening secara lambat dan semakin lama semakin cepat,

maka tarik slider ke atas atau masukkan nilai antara –1 s/d –100.

��Memulai motion tweening secara cepat dan semakin lama semakin lambat,

maka tarik slider ke atas atau masukkan nilai antara 1 s/d 100.

10. Memutar item yang dipilih selagi melakukan tweening, klik menu Rotate.

��Pilihan None (default-nya) berarti tak ada rotasi.

��Auto untuk memutar obyek sekali dalam arah yang memerlukan paling

sedikit gerakan.

��Clockwise/searah jarum jam (CW) atau Counterclockwise/berlawanan arah

jarum (CCW), lalu masukkan nilai rotasinya.

Sebagai catatan, rotasi ini adalah tambahan untuk suatu rotasi yang digunakan

pada frame akhir dalam langkah 4.

11. Jika anda menggunakan suatu motion path, pilih Orient to Path untuk

mengarahkan baseline dari elemen yang akan di –tween.

12. Pilihlah Synchronize untuk memastikan bahwa instance akan melakukan

looping (perulangan) secara tepat dalam movie induknya. Gunakan perintah

Synchronize jika jumlah frame dalam sequence animasi di dalam simbol

bukan merupakan nilai kelipatan yang pas dari jumlah frame yang ditempati

oleh instance grafis dalam movie, misal total frame 100, sedang framenya 30.

Animasi


13. Jika anda menggunakan motion path, pilihlah Snap untuk mengaitkan

elemen yang di-tween dengan titik registrasinya. Secara default titik

registrasi (Registration Point) berada pada pojok kiri atas suatu obyek yang

telah disimpan sebagai simbol.

Latihan 5. Membuat motion tweening menggunakan menu Insert, Create

Motion Tween.

1. Pilihlah sebuah keyframe kosong dan gambarlah sebuah obyek pada stage,

atau drag sebuah instance dari simbol yang telah tersimpan di Library

window.

2. Pilih menu Insert > Create Motion Tween.

3. Tentukan animasi akan berakhir pada frame keberapa. Misal frame ke-40,

kliklah frame ke-40, kemudian gunakan menu Insert > Frame atau F5.

4. Pindahkan obyek pada stage ke posisi yang diinginkan, demikian juga jika

ingin mengubah ukuran, posisi maupun warnanya. Sesuaikan rotasi elemen

jika tweening pada rotasinya. Sebuah keyframe akhir akan ditambahkan.

5. Pilihlah keyframe pada akhir tweening gerakan (movie) dan pilihlah

Window > Panels > Frame.

6. Jika ukuran item dimodifikasi pada langkah 4, pilihlah Scale.

7. Tentukan nilai Easing.

8. Pilih Opsi dari menu Rotate: None, Auto, CW atau CCW.

9. Jika memakai path, pilihlah Orient to Path.

10. Pilihlah sinkronisasi bila perlu.

11. Pilih Snap bila perlu.

Latihan 6. Motion Tweening yang mengikuti path.

Arah gerakan suatu animasi dengan cara Motion Tweening dapat

diarahkan sesuai path/alur yang anda buat pada Motion Guide Layer.

Motion Guide Layer adalah fasilitas agar anda dapat membuat path yang

dapat diikuti oleh animasi suatu obyek. Dengan pilihan ini gerakan obyek yang

dianimasi akan mengikuti bentuk path yang dibuat.

Anda dapat menghubungkan beberapa obyek yang terletak pada layer-

layer yang berbeda (multilayer) dengan sebuah layer yang berisi path penuntun

Animasi


gerakan ini. Sebuah layer normal yang dihubungkan dengan sebuah layer

penuntun gerakan akan menjadi sebuah layer terkendali.

1. Susunlah sebuah tweened animasi dengan menetapkan posisi obyek pada

frame 1 da posisi obyek pada frame terakhir (yang ditentukan), lalu di tengah

antara frame 1 dan terakhir sisipkan Create Motion Tween.

2. Sisipkan Motion Guide dengan salah satu langkah berikut ini:

��Pilih layer berisi animasi lalu gunakan menu Insert > Motion Guide.

��Klik kanan layer yang mengandung animasi dan pilih Add Motion Guide

dari menu Contexts. Flash akan menciptakan sebuah layer baru di atas layer

animasi yang dipilih dengan sebuah ikon Motion Guide di sebelah kiri layer.

3. Pada Motion Guide Layer yang sedang aktif, gambarlah path yang akan

dilalui gerakan animasi obyek menggunakan Pen, Pensil, Garis, Lingkaran,

Bujur Sangkar, atau Brush tool.

4. Untuk memperoleh hasil yang sempurna, letakkan pertengahan obyek yang

dianimasi tepat di pangkal dan ujung path kemudian snap-kan dengan klik

ikon Snap to Object yang bergambar magnit.

5. Untuk menyembunyikan Motion Guide Layer yang berisi gambar garis-garis

path sehingga hanya gerakan obyek yang terlihat ketika anda bekerja, kliklah

kolom Eye (mata) pada Motion Guide Layer obyek tersebut.

6. Untuk menyakinkan agar layer gambar dan Motion Guide Layer saling

merekat (snap), pilihlah papan nama layer 1 dan sambil menekan Shift, pilih

papan nama layer tersebut.

Animasi


Jika anda membuat obyek yang tersimpan pada lebih dari 1 layer, agar layer-

layer gambar tersebut terhubung pada sebuah layer penuntun gerakan (Motion

Guide Layer), lakukan salah satu hal di bawah ini:

��Buatlah sebuah layer baru di bawah Motion Guide Layer. Obyek yang anda

tween pada layer ini secara otomatis akan di-tween pula di sepanjang path.

��Pilih sebuah layer di bawah Motion Guide Layer. Pilih menu Modify > Layer

sehingga tampil kotak dialog Layer Properties. Lalu pilihlah Guided di

bawah opsi Type.

Memutus hubungan hubungan layer-layer dari sebuah Motion Guide Layer:

1. Pilih layer yang ingin diputus.

2. Lakukan salah satu hal berikut ini:

��Tariklah layer di atas Motion Guide Layer.

��Pilih menu Modify > Layer, lalu pilih type Normal sebagai ganti Guided

dalam kotak dialog Layer Properties.

��Alt+Klik layer.

Shape Tweening.

Dengan proses ini dapat dibuat suatu efek yang serupa dengan

morphing, yaitu di dalam melakukan tweening dari frame ke frame maka bentuk

obyek akan diubah menjadi bentuk lain selangkah demi selangkah.

Tweening satu bentuk pada suatu waktu tertentu, biasanya

mendatangkan hasil terbaik. Jika diinginkan melakukan tweening multibentuk

pada waktu tertentu, maka seluruh bentuk harus berada pada layer yang sama.

Flash tak dapat melakukan tweening bentuk group, simbol, blok teks,

atau gambar-gambar bitmap. Gunakan dulu menu Modify > Break Apart untuk

menerapkan tweening bentuk pada elemen-elemen.

Untuk mengendalikan lebih banyak perubahan bentuk yang kompleks

atau tak dimungkinkan, gunakan Shape Hint yang mengendalikan bagaimana

bagian-bagian bentuk semula berpindah menjadi bentuk baru.

1. Aktifkan sebuah layer kemudian pilih sebuah keyframe yang masih kosong.

2. Gunakan Drawing tool untuk menggambar sebuah obyek yang akan

dianimasi. Disini obyek tersebut tak perlu diubah dulu menjadi simbol.

Animasi


3. Pilih keyframe tertentu sebagai keyframe terakhir dari animasi yang akan

dibuat, misalnya saja keyframe ke-40.

4. Seperti pada langkah ke-2 di atas, buatlah obyek kedua yag berbeda dari

obyek pertama baik dalam hal bentuk, warna maupun posisi gambar.

5. Pilih menu Window > Panels > Frame.

6. Pada panel Frame, pilihlah Shape untuk pilihan tweening.

7. Masukkan nilai Easing yang diinginkan.

8. Pilih opsi untuk Blend:

��Distributive (tersebar), membuat sebuah animasi dimana pada bentuk-

bentuk sedang akan menjadi lebih mulus dan lebih tak beraturan.

��Angular (bentuk bersiku-siku), membuat sebuah animasi yang

mempertahankan sudut-sudut yang nampak dan garis-garis lurus dalam

bentuk-bentuk antara. Bentuk ini hanya tepat untuk pencampuran bentuk-

bentuk dengan sudut-sudut tajam dan garis-garis lurus. Jika bentuk-bentuk

yang anda pilih tak memiliki sudut-sudut, Flash kembali pada tweening

bentuk Distributive.

Menggunakan Shape Tween disertai Shape Hints.

Untuk mengendalikan lebih banyak perubahan bentuk yang kompleks,

anda dapat menggunakan Shape Hints. Cara ini mengidentifikasikan titik-titik

yang sesuai dengan bentuk-bentuk awal dan akhir. Ini juga mengandung huruf-

huruf (a sampai z) untuk mengidentifikasi titik-titik mana yang sesuai dengan

bentuk awal dan akhir. Anda dapat menggunakan sampai 26 shape hints.

Semakin sederhana bentuk maka huruf-huruf yang muncul semakin sedikit.

Tanda Shape Hints akan berwarna kuning pada keyframe pertama dan

hijau pada keyframe terakhir. Jika diluar kurva, maka warnanya merah.

��Untuk tweening bentuk kompleks, ciptakan bentuk antara yaitu bentuk yang

diletakkan antara bentuk pertama (frame 1) dan bentuk akhir (frame akhir).

Animasi


��Pastikan bahwa Shape Hints dilakukan secara logis. Misalnya, jika anda

menggunakan 3 shape hint untuk suatu segitiga, ini harus berada dalam

urutan yang sama pada segitiga semula dan segitiga yang akan di-tween.

Urutannya tak diberikan dengan susunan abc dalam keyframe pertama lalu

acb dalam keyframe kedua.

�� Shape Hints berjalan terbaik jika anda menempatkannya dalam suatu urutan

yang berlawanan dengan arah jarum jam dimulai dari ujung kiri paling atas

dari bentuk tersebut.

Langkah-langkah menggunakan Shape Hints:

1. Pilihlah keyframe pertama dalam sebuah sequence Shape Tweened.

2. Pilihlah menu Modify > Transform > Add Shape Hint.

3. Pindahkan shape hint ke sebuah titik yang ingin anda tandai.

4. Pilihlah keyframe terakhir dalam sequence tweening.

5. Pindahkanlah shape hint pada titik dimana bentuk akhir yang seharusnya

sesuai dengan titik pertama yang anda tandai.

6. Jalankan movie itu lagi untuk melihat bagaimana shape hint mengubah

tweening bentuk. Gerakkan shape hint untuk mendapat tweening terbaik.

7. Ulangi proses ini dan tambahkan shape hint tambahan. Hint baru nampak

dengan huruf-huruf dengan urutan (b, c, d, dan seterusnya).

Shape tween yang sama, tanda dan dengan shape hint. Selagi bekerja dengan shape hint, dapat juga dilakukan hal ini:

��Melihat seluruh shape hint, pilih menu View > Show Shape Hints.

��Membuang shape hint, tariklah shape hint keluar dari stage.

��Menghilangkan seluruh shape hint, Modify > Tranform > Remove All Hints.

Animasi


Onion Skinning.

Umumnya Flash menampilkan 1 frame rentetan animasi pada satu waktu

pada stage. Untuk membantu anda memposisikan dan mengedit sebuah animasi

frame-frame by frame, anda dapat melihat 2 atau lebih frame pada stage

sekaligus. Frame di bawah playhead nampak dalam warna penuh, sedang frame-

frame yang mengililinginya menjadi redup (ini tak bisa diedit), membuatnya

seolah-olah setiap frame digambar pada suatu lembar kertas Onion Skin tembus

cahaya dan lembar-lembar itu ditumpuk satu di atas yang lainnya.

1. Klik tombol Onion Skin. Seluruh frame antara tanda-tanda Start Onion Skin

dan End Union Skin (dalam header Timeline) ditindihkan di atasnya sebagai

sebuah frame dalam jendela Movie.

2. Untuk mengendalikan tampilan Onion Skinning, lakukan salah satu ini:

��Menampilkan frame sebagai outline klik tombol Onion Skin Outline .

��Mengubah posisi tanda Onion Skin, tariklah pointernya ke sebuah lokasi

baru (biasanya tanda-tanda Onion Skin bergerak bersamaan dengan pointer

frame yang sedang aktif).

��Untuk memungkinkan pengeditan seluruh frame antara onion skin markers,

kliklah tombol Edit Multiple Frames. Biasanya Onion Skinning

memungkinkan anda hanya mengedit frame yang sedang aktif. Meskipun

demikian anda dapat menampilkan isi tiap-tiap frame antara onion skin

markers secara normal, dan membuatnya bisa diedit semuanya.

Animasi


Sebagai catatan, layer yang terkunci tak ditampilkan ketika Onion

Skinning sedang aktif. Untuk menghindari kekacaruan pelbagai gambar yang

ada, anda dapat mengunci atau menyembunyikan layer yang diinginkan.

Animasi dengan layer masking.

Satu lagi efek animasi, yaitu animasi yang menggunakan Layer Masking.

Dengan cara ini anda dapat membuat efek spotlight yang timbul seolah-olah

sedang menyoroti suatu obyek yang tampil dalam gelap. Layer Masking seolah-

olah membuat sebuah lubang yang anda gerakkan sebagaimana gerakan animasi

yang sudah dibahas untuk menampilkan suatu obyek yang berada di balik

masing berlubang tadi. Dalam membuat animasi dari layer masking ini, anda

dapat menggunakan cara apa saja, kecuali motion path. Anda juga tak dapat

melakukan layer mask dari dalam tombol (buttons).

1. Buatlah sebuah layer yang akan berisi obyek utama, yang nantinya akan

diintip melalui lubang mask.

2. Dalam keadaan layer sedang terpilih, gunakan menu Insert > Layer untuk

membuat layer baru persis di atas layar utama.

3. Gambarlah bentuk yang diperlukan untuk mengintip gambar yang di-mask.

Misal sebuah bentuk oval. Flash tak dapat menerima bitmap, warna gradien,

warna transparan maupun bentuk-bentuk garis. Semua bidang yang telah

diberi fill pada layer mask akan dijadikan bentuk transparan (lubang) untuk

mengintip gambar pada layer di bawahnya.

4. Klik kanan pada papan nama layer mask, kemudian pada menu Contexts

yang muncul, pilih Mask. Sekarang layer itu telah berubah menjadi layer

mask yang ditandai dengan tanda panah pada layer.

5. Pada saat layer menjadi layer mask, secara otomatis Flash akan mengunci

layer tersebut sehingga anda tak dapat mengubah atau memindah letak

obyek pada frame tersebut.

6. Selanjutnya anda dapat membuat animasi tweened pada layer mask. Untuk

memindahkan bentuk lingkaran mask, anda harus melepas kunci (gambar

kunci pada nama layer diklik). Setelah meletakkan pada posisi yang

dikehendaki, lock kembali dengan mengklik lagi gambar kunci tadi.

Animasi


Memindahkan keseluruhan animasi.

Jika diperlukan untuk memindahkan keseluruhan animasi yang ada pada stage,

anda harus memindahkan obyek-obyek gambar yang terdapat pada seluruh

frame dan layer sekaligus untuk menghindari pengaturan kembali (realigning).

1. Bukalah seluruh layer. Untuk menggerakan segalanya pada satu atau lebih

layer tetapi tidak pada layer lainnya, kunci atau sembunyikan layer tersebut.

2. Klik tombol Edit Multiple Frames dalam Timeline .

3. Tariklah Onion Skin Markers sehingga akan menutup seluruh frame yang

diinginkan, atau klik Modify Onion Markers dan pilihlah Onion All.

4. Pilihlah menu Edit > Select All.

5. Tariklah keseluruhan animasi ke lokasi baru pada stage.

Merentangkan gambar background (latar belakang).

Seringkali gambar background suatu animasi tampil statis dari awal hingga

akhir. Untuk merentang gambar background ini dapat dilakukan dengan 2 cara:

Merentangkan gambar background dengan cara multiframe:

1. Buatlah sebuah gambar dalam keyframe pertama pada sequence.

2. Pilihlah sebuah frame akhir rentangan yang ingin anda tambahkan.

3. Pilihlah menu Insert > Frame.

Cara pintas untuk merentangkan gambar background:

1. Buatlah sebuah gambar dalam keyframe pertama pada sequence.

2. Tekan Alt sambil drag keyframe ke kanan. Langkah ini akan merentangkan

gambar tersebut tanpa menambahkan keyframe yang baru pada titik akhir.

Latihan.

1. Pahami dan cobalah semua yang telah dibahas pada bab ini. Minta bantuan

Dosen/Asisten bila anda tidak mengerti. Dosen diharapkan berimprovisasi

lebih lanjut mengenai semua materi dalam bab ini.

2. Lanjutkan mempelajari contoh-contoh/samples yang sesuai yang ada pada

Flash di menu Help > Samples atau dari sumber-sumber lain. Tanyakan pada

Dosen/Asisten bila anda belum mengerti.

3. Teruskan perancangan situs pribadi anda dengan materi Flash yang ada.

Materi Pengayaan


BAB 21 MATERI PENGAYAAN


��Mampu memahami dan mengimplementasikan pelbagai materi pengayaan

Flash 5.

Disini Dosen/Asisten diminta menjelaskan dan berimprovisasi mengenai

materi-materi di bawah ini:

�� Sound/Suara pada Flash Movie.

��Aksi dan Interaksi (pengenalan ActionScript)

��Mempublikasikan Flash Movie.


DAFTAR PUSTAKA

1. Agung, Gregorius, Belajar Sendiri Macromedia DreamWeaver 3: Menjadi

Mahir Tanpa Guru, PT. Elex Media Komputindo, Jakarta, 2001.

2. Macromedia Inc., DreamWeaver Tutorial, http://www.macromedia.com/

3. Macromedia Inc., DreamWeaver 4: Quick Reference for Windows,

http://www.macromedia.com/

4. Macromedia Inc., Macromedia Flash 5: Using Flash,

http://www.macromedia.com/

5. Yudhiantoro, Dhani, Panduan Lengkap Menggunakan Macromedia Flash 5,

Penerbit Andi, Yogyakarta, 2002.


TENTANG PENULIS

Irfan Subakti adalah nama penulis. Menyelesaikan SD

Magetan III di Magetan tahun 1986, dilanjutkan

dengan SMPN 1 di kota yang sama – dan sekolah ini

diselesaikan tahun 1989. Masuk SMA 1 Magetan di

tahun yang sama, kemudian lulus tahun 1992. Melalui

UMPTN, penulis diterima di Program Studi Teknik

Komputer, Fakultas Teknologi Industri (FTI), Institut

Teknologi Sepuluh Nopember (ITS) Surabaya. Pada tahun 1994, Jurusan Teknik

Komputer, melalui Keputusan Pemerintah melalui Departemen Pendidikan

diganti namanya menjadi Jurusan Teknik Informatika. Sehingga penulis

menamatkan pendidikan di jenjang S1 di tahun 1999 pada Jurusan Teknik

Informatika, FTI – ITS, bukan lagi pada Program Studi Teknik Komputer.

Perkembangan terbaru adalah pada tahun 2001, Jurusan Teknik Informatika

bukan lagi berada di bawah FTI, tapi sudah menjadi Fakultas tersendiri, Fakultas

Teknologi Informasi (FTIF). FTIF itu sendiri, disamping terdiri dari Jurusan

Teknik Informatika juga memiliki Program Studi Sistem Informasi.

PIKTI-ITS (Pendidikan Informatika dan Komputer Terapan ITS)

merupakan Pendidikan Vokasional selama 1 tahun yang diselenggarakan oleh

Jurusan Teknik Informatika, FTIF, ITS.

Di PIKTI-ITS, penulis menyusun Buku Desain Grafis dan Desain Web.

Desain Grafis menggunakan Macromedia FreeHand, sedangkan pada Desain

Web menggunakan Macromedia DreamWeaver dan Macromedia Flash.

Kesibukan penulis sehari-hari adalah mengajar di PIKTI-ITS dan di

Jurusan yang ada di Fakultas Teknologi Informasi - ITS.

Desain Web

Documents

Transcript of Desain Web