Bab 7 Menggunakan Gambar

Bab 7 Menggunakan Gambar

Webmaster Pro Front Page XP Daftar Isi Bab 7 1. Memasang gambar pada halaman...209 1.1 Mengambil gambar dari Web FrontPage... 210 1.2 Mengambil gambar dari koleksi Clip Organizer... 211 1.3 Mengambil gambar dari hard disk... 211 1.4 Gambar dari World Wide Web atau Intranet... 212 1.5 Menggunakan klik kanan pada Browser... 213 1.6 Drag-Drop, Cut-Paste... 213 1.7 Gambar dari Scanner... 213 1.8 Menyimpan Gambar... 215 2 Properti gambar...216 2.1 Penentuan program editor gambar... 217 2.2 Modifikasi gambar... 219 2.3 Format gambar... 221 2.4 Alternatif penampilan... 222 2.5 Default hyperlink... 223 2.6 Pelipatan teks, layout dan ukuran gambar... 224 3 Tata letak gambar...228 3.1 Memindah gambar... 229 3.2 Posisi absolut... 229 3.3 Rotasi dan flip gambar... 231 4 Tampilan gambar...231 4.1 Mengatur kontras dan pencahayaan... 232 4.2 Mengatur transparansi... 232 4.3 Cropping, resizing dan restore... 233 4.4 Hitam putih dan washout... 235 4.5 Membuat teks pada gambar... 235 5 Hyperlink pada gambar...236 5.1 Hyperlink manual... 236 5.2 Membuat tombol dari gambar... 237 5.3 Gambar pengganti (thumbnail)... 238 5.4 Hotspot (Image Maps)... 240 6 Gambar terjadwal...244 208

Bab 7 Menggunakan Gambar 1. Memasang gambar pada halaman Apa jadinya kalau suatu halaman web tidak ada gambarnya? Jawaban pertama adalah pembukaan halaman menjadi lebih cepat. Sebaliknya, meskipun gambar membuat pembukaan menjadi lambat, pada kenyataannya kita akan tetap memasang. Kenapa? sebab dengan adanya gambargambar tersebut halaman menjadi lebih cantik dan menarik. Namun sebaiknya Anda membatasi jumlah dan pemakaian gambar. Sebab gambar akan memakan waktu untuk pengiriman, waktu untuk download dan lain lain sehingga akan memperlambat kinerja halaman. Sebagai jalan tengahnya, usahakan hanya menggunakan gambar-gambar ukuran kecil, kecil secara tampak mata maupun kecil ukuran filenya. Pada saat gambar ditransfer untuk pertama kalinya, gambar akan diambil dari tempat asalnya, dan membutuhkan waktu seperti apa adanya. Namun pada transfer berikutnya, gambar tidak lagi diambil dari tempat asalnya, melainkan dari cache browser, sehingga gambar itu akan muncul dengan sangat cepat. Apabila Anda menutup browser, maka cache browser akan dihapus. Jadi kalau Anda mengaktifkan lagi browser dan membuka gambar yang tadi, akan lama juga, sebab pembukaan kali ini berarti yang pertama kali. Hitungan dimulai dari pengaktifan browser. Memasang gambar ke halaman Web adalah kegiatan menyenangkan. Dengan gambar pula para desainer halaman web bisa begitu terkenal, karena karya-karyanya menjadi lebih menarik. Bahayanya adalah jika Anda terbawa emosi dan memasangkan terlalu banyak gambar, apalagi gambar yang berukuran besar. Ingatlah bahwa kebanyakan orang masih menggunakan saluran yang lambat untuk menyambung ke internet, yaitu saluran telepon dengan modem kecepatan rendah. Apalagi kondisi di Indonesia seperti sekarang ini, mudah-mudahan segera berubah menjadi seperti kondisi di negara maju. Internet bukanlah TV dan juga bukan majalah yang bisa menampung banyak gambar. Pada waktu merancang halaman web, pikirkanlah calon pemakai Anda dan bekerjalah secara hati-hati dalam menangani jumlah gambar. Ada banyak lokasi yang menyimpan file-file gambar, yaitu: Gambar yang disimpan di dalam web FrontPage Gambar dari koleksi Clip organizer Gambar-gambar yang disimpan di dalam hard disk. 209

Webmaster Pro Front Page XP Gambar-gambar dari World Wide Web atau Intranet Mari kita lihat bagaimana cara mengambil gambar dari masing-masing sumber di atas. 1.1 Mengambil gambar dari Web FrontPage Yang pertama adalah mengambil gambar dari Web untuk dipasangkan pada halaman Anda sendiri. Caranya sebagai berikut: 1. Tempatkan kursor pada lokasi di mana Anda ingin meletakkan gambar tersebut. 2. Klik tombol Insert Picture form File ( ) pada toolbar atau aktifkan perintah Insert Picture From File. Kotak dialog Insert Picture muncul. Gambar 7.1 Direktori Images pada kotak dialog Insert Picture 3. Klik ganda direktori Images, lihat Gambar 7.1 di atas, folder tersebut adalah tempat penyimpanan gambar-gambar FrontPage. 4. Setelah terbuka direktori Images terbuka, klik file gambar yang Anda inginkan. 5. Kemudian klik OK. Gambar pilihan Anda akan ditampilkan pada lokasi kusor di halaman. 210

Bab 7 Menggunakan Gambar 1.2 Mengambil gambar dari koleksi Clip Organizer Untuk mengambil gambar dari Clip Organizer, caranya sudah kita bahas pada bab sebelumnya. Pada prinsipnya adalah: 1. Klik gambar yang Anda inginkan, lalu klik Copy. 2. Pada halaman klik kanan lokasi penyisipan gambar dan klik perintah Paste. Gambar 7.2 Clip Organizer 1.3 Mengambil gambar dari hard disk Untuk mengambil gambar yang disimpan di dalam hard disk, caranya paling sederhana, yaitu seperti proses membuka suatu file. Langkah selengkapnya adalah: 1. Tampilkan kotak dialog Picture. Gambar 7.3 Pilihan My Document My Pictures 211

Webmaster Pro Front Page XP 2. Klik icon My Documents, lalu klik ganda folder My Pictures. Kalau tujuan Anda bukan folder My Pictures, Anda bisa memanfaatkan kotak pilihan Look in untuk mencari folder yang Anda inginkan. Anda juga bisa menentukan format file gambar yang akan Anda buka, seperti.tiff,.bmp,.jpeg,.gif dan sebagainya. Anda bisa memilihnya pada kotak pilihan drop-down Files of type. 3. Klik file gambar yang Anda pilih, lalu klik Open. 1.4 Gambar dari World Wide Web atau Intranet Anda dapat meminjam halaman-halaman Web di World Wide Web atau Intranet dan mengimpornya ke dalam Web Anda sendiri. Satu hal yang harus kita perhatikan pada proses ini yaitu kita harus mengetahui address halaman yang mengandung gambar incaran kita. Bagaimana cara menemukan address gambar? Hal ini tergantung dari Web Browser Anda. Cobalah cara-cara berikut ini: Jika Anda menggunakan Netscape 3 atau 3.01, klik kanan gambar tersebut dan pilih perintah Copy Picture Location. Jika Netscape versi yang Anda gunakan tidak memiliki perintah Copy Picture Location, klik kanan gambar tersebut dan pilih perintah View Disc Picture. Maka gambar tersebut akan muncul di Window Browser dengan sendirinya. Kemudian sorotlah address dalam kotak teks pada bagian atas dari Browser, lalu salinlah dengan menekan tombol Ctrl+C. Jika Anda menggunakan Internet Explorer, klik kanan sebuah gambar dan pilihlah perintah Properties. Anda akan melihat address gambar tersebut, lalu sorotlah dan salinlah dengan menekan Ctrl+C. Setelah mendapatkan address dengan salah satu cara di atas, Anda dapat meletakkan address ke dalam kotak isian address (klik kotak isian tersebut lalu tekan Ctrl+V). Kemudian klik OK, FrontPage akan menempelkan gambar yang dari World Wide Web atau Intranet tersebut ke halaman Anda. Yang telah Anda lakukan di atas sebenarnya bukan mengambil gambar lalu menempatkan gambar itu ke dalam Web Anda, namun hanya membuat referensi yang merujuk ke gambar tersebut, yang terletak di World Wide Web atau Intranet. 212

Bab 7 Menggunakan Gambar 1.5 Menggunakan klik kanan pada Browser Anda dapat menggunakan cara klik kanan ini dengan Internet Explorer atau Netscape Navigator. Klik kanan gambar yang Anda inginkan lalu pilihlah perintah Save Picture As atau perintah lain yang mirip. Simpanlah gambar tersebut ke dalam harddisk, lalu sisipkan gambar tersebut ke dalam halaman yang Anda inginkan. Awas, jangan menyimpan gambar-gambar tersebut ke dalam direktori Web Anda yang berada di dalam harddisk. Gambar tersebut tidak akan terdaftar dengan benar, yang bisa menyebabkan gambar tidak muncul pada daftar file. 1.6 Drag-Drop, Cut-Paste Anda juga dapat men-drag gambar-gambar dari Windows Explorer lalu menaruhnya ke dalam halaman Anda. Atau gunakan Office Clipboard, yaitu menyalin gambar pada suatu program ke dalam Clipboard, lalu beralih ke halaman FrontPage dan menekan Ctrl+V untuk melekatkan gambar tersebut. Cobalah men-drag gambar dari tipe yang tidak dapat ditangani oleh FrontPage, maka tampil kotak dialog yang menanyakan apakah Anda ingin menempatkan gambar tersebut sebagai HTML, RTF, atau text. Hal ini berarti FrontPage tidak mengenali tipe gambarnya. Rasanya hal ini tidak akan terjadi, sebab FrontPage XP telah dilengkapi dengan kemampuan menampung berbagai jenis format gambar. 1.7 Gambar dari Scanner Menambahkan gambar atau foto Anda sendiri? Kenapa tidak, siapkan saja sebuah scanner untuk mengambil gambar digitalnya. Langkah yang diperlukan adalah: 1. Aktifkan Insert Picture From Scanner or Camera. Tampil kotak dialog Camera/Scanner. Gambar 7.4 Kotak dialog Camera/Scanner 2. Klik tombol Source, tampil dialog Select Source. 213

Webmaster Pro Front Page XP Gambar 7.5 Select Source 3. Klik jenis software scanner Anda, misalnya VitaScan V2.43, lalu klik Select. Tampilan kembali ke kotak dialog Camera/Scanner. 4. Kemudian klik tombol Acquire, tampil dialog pengaturan scanner. Gambar 7.6 Kotak dialog Scanner 5. Tampilan dan perilaku kotak dialog ini tergantung jenis scanner Anda. Pada scanner penulis, kotak dialog itu tampil seperti Gambar 7.6. 6. Klik tombol Test, FrontPage XP akan bekerja selama beberapa saat untuk pengujian. Setelah pengujian selesai, hasilnya akan dilaporkan seperti Gambar 7.6 sebelah kanan. 7. Klik OK. Muncul tampilan untuk menjalankan scanner seperti Gambar 7.7. 214

Bab 7 Menggunakan Gambar Gambar 7.7 Tampilan Scanner 8. Kemudian letakkan gambar atau foto pada scanner Anda dan klik tombol Scan pada tampilan scanner di atas, proses scanning dimulai. 9. Setelah selesai akan kembali ke kotak dialog Picture yang kali ini menampilkan gambar hasil scanning. 10. Klik OK, tampilan kembali ke FrontPage yang telah menyisipkan gambar hasil scanning pada lokasi kursor. 1.8 Menyimpan Gambar Pada saat Anda menyimpan halaman yang telah disisipi sebuah gambar, FrontPage mungkin menanyakan apakah Anda ingin menyimpan gambar tersebut ke dalam Web? Jika gambar tersebut berasal dari Clip Organizer, atau dari harddisk, kotak dialog akan muncul dan menanyakan apakah Anda ingin menyimpan file-file tersebut (lihat Gambar 7.8). Gambar 7.8 Konfirmasi penyimpanan gambar 215

Webmaster Pro Front Page XP Klik Yes (atau Yes to All sehingga Anda tidak perlu menjawab semua pertanyaan untuk tiap gambar yang ada dalam dokumen), dan FrontPage akan menyimpan sebuah salinan dari gambar tersebut ke dalam Web Anda. Kita bisa saja menempatkan gambar tersebut ke direktori Images dengan menuliskan kata Images di depan nama file gambar. Jika gambar tersebut sudah berada di dalam Web Anda, FrontPage tidak akan menanyakan apakah Anda akan menyimpan gambar tersebut atau tidak; karena hal ini sudah tidak diperlukan lagi. Perhatikan bahwa jika Anda telah menyisipkan suatu gambar dengan memasukkan address gambar dari Web atau Intranet, berarti halaman Anda mengacu ke gambar tersebut. Artinya, gambar tersebut tidak akan disimpan di dalam web Anda. Sehingga jika gambar tersebut dipindahkan atau dihapus oleh pihak lain, maka halaman Anda akan kehilangan gambar. 2 Properti gambar Setelah Anda memasang gambar yang diinginkan, lalu apa yang perlu dilakukan? Anda dapat mengatur properti-nya agar lebih optimal, yaitu mengurangi beban halaman. Properti yang bisa Anda atur antara lain: Format file yang akan digunakan gambar tersebut. Teks alternatif, yaitu teks keterangan apabila gambar gagal tampil. Hyperlink pada gambar tersebut. Ukuran gambar. Pelipatan gambar dengan teks sekelilingnya. Border atau garis batas di sekeliling gambar. Sarana pengaturan yang diperlukan adalah kotak dialog Picture Properties, seperti Gambar 7.9. Klik kanan gambar yang Anda inginkan, lalu klik perintah Picture Properties. Anda akan melihat kotak dialog Picture Properties seperti Gambar 7.9. 216

Bab 7 Menggunakan Gambar Gambar 7.9 Kotak dialog Picture Properties 2.1 Penentuan program editor gambar Anda tidak bisa mengedit gambar dengan FrontPage XP, namun Anda bisa memanggil program pengedit gambar dari FrontPage XP. Itupun harus ditentukan lebih dulu seperti akan dijelaskan pada langkah-langkah di bawah. Kalau Anda menginstal bonus pack FrontPage, Anda akan mendapatkan program pengedit gambar bernama Image Composer. Dan secara otomatis ditunjuk sebagai progam pengedit gambar untuk FrontPage XP Anda. Baiklah, misalnya Anda perlu mengatur penentuan program pengedit gambar. Berikut ini langkah-langkahnya: 1. Aktifkan Tools Options. Kotak dialog Options tampil. 2. Klik tab Configure Editors. 217

Webmaster Pro Front Page XP Gambar 7.10 Kotak dialog Options 3. Klik tombol Add, muncul kotak dialog Add Editor Association. Gambar 7.11 Kotak dialog Add Editor Association 4. Pada kotak isian File type, isikan jenis ekstensi file gambar, misalnya jpg. 5. Lalu pada kotak isian Folder name, tuliskan program editor gambar yang Anda miliki. 6. Pada kotak isian Command, tuliskan nama file eksekutor program tersebut berikut path-nya. Untuk mencarinya, klik tombol Browse. 218

Bab 7 Menggunakan Gambar Gambar 7.12 Kotak dialog Browse untuk mencari file eksekutor Photoshop 6 7. Setelah mendapatkannya, klik OK. Kembali ke kotak dialog Picture. 8. Klik OK pada kotak dialog Picture. 9. Klik OK pada kotak dialog Options. 2.2 Modifikasi gambar Gambar 7.13 Tab Genaral pilihan Picture Source Di dalam kotak dialog Picture Properties, tab General, khususnya di kotak Picture Source, Anda dapat melihat address untuk gambar tersebut. Lihat Gambar 7.13 di atas. Jika Anda menyisipkan gambar dari Web atau Intranet, address-nya akan menunjukkan address asli gambar tersebut. Jadi gambar tersebut belum disimpan di dalam web Anda sendiri. Jika Anda menggunakan beberapa Clipart dari Clip Organizer, atau file lainnya dari hard disk Anda, address-nya juga merupakan address asli. File gambar itu akan disimpan ke dalam web Anda, ketika Anda melakukan penyimpanan situs. Tombol Browse bisa Anda gunakan untuk mengganti gambar. Sarananya adalah kotak dialog Picture. 219

Webmaster Pro Front Page XP Gambar 7.14 Kotak dialog Picture untuk mencari gambar Anda dapat mengedit gambar dengan klik tombol Edit. Tindakan ini akan membuka program editor gambar yang telah Anda tentukan sebelumnya. Gambar 7.15 Photoshop membuka gambar untuk diedit Anda juga dapat mengaktifkan editor dengan klik ganda gambar tersebut. 220

Bab 7 Menggunakan Gambar Anda dapat meminta FrontPage untuk menyimpan file gambar tersebut ke format tertentu, misalnya GIF atau JPEG, yaitu format gambar yang paling banyak digunakan di web. 2.3 Format gambar Format GIF berguna untuk melakukan interlace file atau untuk membuatnya transparan, sementara format JPEG tidak dapat melakukan hal itu. Namun format ini dapat menyimpan gambar dengan jumlah warna lebih banyak (256 warna atau lebih) dan berguna untuk menentukan seberapa banyak bagian file yang dikompres. File dengan format JPEG (singkatan dari Joint Photographic Expert Group) disimpan dengan ekstensi JPG. Berikut ini keterangan lebih lanjut tentang kedua format: GIF (Garphics Interchange Format). Secara otomatis FrontPage akan memilih jenis gambar ini jika gambar yang telah Anda sisipkan adalah dalam format GIF, atau jika gambar tersebut memiliki warna kurang dari 256 warna. JPEG (Joint Photographic Expert Group). FrontPage secara otomatis akan memilih jenis gambar ini jika gambar Anda memiliki format JPEG atau jika gambar tersebut memiliki lebih dari 256 warna. Jika Anda memodifikasi format file, Anda akan memaksa terjadinya sebuah penyimpanan. Kalau gambar tersebut berasal dari web, yang artinya bukan gambar Anda sendiri, maka tindakan ini akan menyebabkan FrontPage menyimpan gambar tersebut. Anda akan diminta konfirmasinya lebih dulu. Gambar 7.16 Konfirmasi penyimpanan gambar dari luar Khusus untuk gambar animasi GIF, pengaturan jenis filenya tidak dapat diedit. 221

Webmaster Pro Front Page XP 2.4 Alternatif penampilan Bidang Alternative Representations berguna untuk memberitahu browser tentang pengganti gambar jika gambar tidak bisa muncul karena kedaan buruk. 2.4.1 Low Res Gambar 7.17 Bidang Alternative Representations Ada dua alternatif yang bisa digunakan untuk menggantikan tidak munculnya gambar utama, yaitu gambar ringan (Low res) atau teks. Berikut ini penjelasannya: Beberapa jenis browser tidak dapat menampilkan gambar seperti aslinya yang berat (berukuran besar atau resolusi warnanya tinggi). Nah, untuk melayani jenis browser ini, siapkan gambar versi kedua bagi gambar utama Anda. Versi kedua ini tentu saja harus gambar ringan. Klik tombol Browse untuk menentukan gambar alternatif ini. Kotak dialog Select Alternatif Picture akan tampil. 222

Bab 7 Menggunakan Gambar Gambar 7.18 Kotak dialog Select Alternatif Picture Selain mencari versi kedua, Anda juga bisa membuat sendiri versi kedua dengan klik tombol Edit. Editor gambar akan muncul. Setelah mengedit, simpanlah gambar versi kedua tersebut dengan FrontPage XP di dalam web Anda. 2.4.2 Text (Text Alt) Text Alt adalah teks yang akan ditampilkan di tempat gambar tersebut jika browser pemakai tidak dapat menampilkan gambar (penyebabnya mungkin browser tersebut jenis nongraphic, atau jika pemakai telah mematikan fungsi penampilan gambar). Teks Alt akan ditampilkan pada sebuah kotak di lokasi gambar. Khusus untuk browser Internet Explorer, teks Alt akan ditampilkan sebagai hint. Yaitu teks yang muncul ketika pointer mouse berada di atas gambar selama beberapa saat. 2.5 Default hyperlink Anda dapat menjadikan sebuah gambar sebagai sebuah lin k. Caranya sangat mudah, dengan memasukkan address halaman yang ingin Anda hubungkan ke dalam kotak isian Location pada kelompok Default Hyperlink. Gambar 7.19 Pengaturan Default Hyperlink 223

Webmaster Pro Front Page XP Kalau Anda tidak yakin dengan address halaman tujuan, klik saja tombol Browse untuk mencari halaman tersebut dengan kotak dialog Edit Hyperlink. Gambar 7.20 Kotak dialog Edit Hyperlink Mengapa disebut default hyperlink? Jawabannya agak panjang. Kalau pada halaman terdapat banyak gambar yang masing-masing memiliki link tersendiri, bahkan ada gambar yang memiliki link lebih dari satu (disebut hotspot). Maka default hyperlink adalah link gambar yang hanya memiliki satu link saja (bukan hotspot). 2.6 Pelipatan teks, layout dan ukuran gambar Klik tab Appearance untuk melihat informasi seperti Gambar 7.6. Pada tampilan ini Anda dapat mengatur tiga jenis pengaturan, antara lain: Pelipatan teks (Wrapping style), tata letak (Layout) dan ukuran gambar (Size ). 2.6.1 Pelipatan teks Ada tiga jenis pelipatan gambar di dalam teks, yaitu Left, Right dan None. Seperti tampak pada gambar iconnya, None berarti tanpa pelipatan. Left berarti pelipatan dengan gambar di sebelah kiri, sebalikya Right berarti pelipatan dengan gambar di sebelah kanan. 224

Bab 7 Menggunakan Gambar 2.6.2 Layout Gambar 7.21 Tab Appearance, pilihan wrapping style Klik kotak daftar Alignment, dan siap-siap untuk sebuah kejutan. Apa itu? Pilihanpilihan ini untuk menentukan bagaimana gambar tersebut dijajarkan dengan item lainnya, pada baris yang sama. Gambar 7.22 Pilihan Alignment Berikut ini arti dari pilihan-pilihan tersebut: 225

Webmaster Pro Front Page XP o None. FrontPage XP tidak akan menerapkan pelipatan teks pada gambar. o Left. Gambar tersebut digeser hingga ke margin kiri, dengan teks di sebelah kanannya. Teks itu kemudian akan dipenggal di sis i kanan dari gambar. o Right. Gambar akan dipindahkan ke kanan hingga margin kanan, dengan teks di sebelah kiri gambar tersebut. Teks itu akan dipenggal di sisi kiri gambar. Ketiga pilihan di atas (None, Left dan Right) fungsinya sama dengan ketiga icon pada kelompok Wrapping Style sebelum ini. Icon tersebut juga bernama None, Left dan Right. o Bottom. Gambar dijajarkan dengan baris bawah (Bukan bagian bawah teks tetapi bagian bawah dari baselinenya, yaitu baris tempat karakter bertumpu). o Middle. Gambar dijajarkan dengan bagian tengah baseline teks. o Top. Gambar dijajarkan dengan bagian atas item tertinggi dari barisan, yang dapat berupa teks atau gambar. o Absbottom.Bagian bawah gambar akan dijajarkan dengan bagian bawah absolut teks. Misalnya, jika sebuah baris memiliki karakter subscript yang mencapai bagian bawah baris, maka gambar itu akan dijajarkan dengan bagian bawah dari karakter tersebut. o Absmiddle. Gambar akan dijajarkan dengan bagian tengah baris, sehingga dapat digunakan oleh karakter dengan ukuran la in atau gambargambar lain pada baris itu. o Texttop. Gambar akan dijajarkan dengan bagian atas teks yang paling tinggi pada baris itu. (Pada Internet Explorer pilihan texttop berfungsi sama dengan pilihan top). o Baseline. Ini adalah pilihan yang sama dengan pilihan bottom. (Mengapa mempunyai dua pilihan yang fungsinya sama? Semua ini adalah nama-nama dari atribut HTML yang digunakan untuk menjajarkan gambar, dan HTML memang memiliki dua fungsi yang sama). Cobalah bereksperimen dengan pilihan-pilihan tersebut dan perhatikan hasilnya, kebanyakan tidak menyebabkan teks akan mengelilingi gambar. Hanya Left dan Right yang dapat melakukannya. Dalam kasus lainnya pilihan tersebut menyebabkan sebuah baris akan ditempatkan di sepanjang gambar itu, dengan baris-baris berikutnya pada paragraf yang sama dimulai di bawah gambar itu. Sebagai kompensasi pengaturan Alignment ini, Anda dapat menggunakan perintah Insert Break untuk menyesuaikan pengaturan aliran teks di sekitar gambar. 226

Bab 7 Menggunakan Gambar Yang telah kita lakukan adalah menjajarkan objek gambar dengan teks secara baris. Sedangkan menjajarkan objek secara kolom agak sulit. Cara yang terbaik untuk melakukannya adalah dengan tabel. Gambar 7.23 Pengaturan Border Anda dapat menempatkan border di sekeliling gambar dan juga menentukan ukuran spasi yang harus disisakan di sekeliling gambar tersebut, yaitu di antara gambar dan teks. o Border Thickness, masukkan jumlah pixel yang akan digunakan untuk border. Ingat bahwa ukuran dari garis itu akan bergantung pada resolusi video dan ukuran monitor yang digunakan pemakai. o Horizontal Spacing, adalah jarak dari atas atau bawah gambar ke teks, dalam pixels. o Vertical Spacing, adalah jarak antara sisi kiri atau kanan dari gambar ke teksjuga dalam pixels. Namun sayangnya fasilitas pengaturan border ini tidak dapat ditanggapi secara utuh oleh semua jenis browser. Ada yang menampilkan terlalu tebal atau terlalu tipis, bahkan ada yang tidak menampilkannya sama sekali. 2.6.3 Mengatur ukuran sebuah gambar Pada saat Anda menyisipkan sebuah gambar, FrontPage secara otomatis memasukkan ukurannya ke dalam tag HTML. Padahal HTML tidak membutuhkan penentuan ukuran sebuah gambar. Jika Anda menentukan ukuran sebuah gambar, sebelum browser memanggil gambar itu maka sebuah ruang akan disediakan dan pemakai akan melihat sebuah kotak dengan teks alternatif gambar tersebut. Sebaiknya tentukan ukuran gambar, jika tidak, kelak pada saat gambar dipanggil, teks pada halaman akan berpindah-pindah posisi karena harus memberi tempat bagi gambar tersebut. Yang perlu Anda atur adalah mengklik kotak cek Specify Size lalu tuliskan angka yang ingin Anda gunakan. Anda dapat menggunakan ukuran pixel atau persentase halaman. 227

Webmaster Pro Front Page XP Ada cara yang lebih mudah untuk mengubah ukuran sebuah gambar. Klik sebuah gambar dan Anda akan melihat kotak-kotak hitam kecil di setiap sudut dan sisi gambar, disebut handle. Tempatkan pointer mouse pada salah satu dari handle itu dan pointer akan berubah menjadi sebuah panah bermata dua. Drag handle ini ke arah dalam atau ke arah luar untuk memperkecil atau memperbesar gambar tersebut. Gambar 7.24 Pengaturan ukuran gambar 3 Tata letak gambar Pembahasan berikutnya banyak menggunakan toolbar Pictures. Dengan toolbar tersebut kita bisa melakukan beberapa aspek pengaturan, seperti tata letak gambar, tampilan gambar dan hyperlink gambar. Kita mulai dengan tata letak gambar yang memiliki tiga unsur pengaturan, yaitu menentukan lokasi gambar di halaman dan menentukan posisi gambar di lokasinya. Gambar 7.25 Toolbar Pictures Cara pemakaian toolbar Pictures adalah: 1. Klik gambar. 2. Klik tombol yang Anda inginkan. 228

Bab 7 Menggunakan Gambar 3. Untuk membatalkan, tekan CTRL + Z. 3.1 Memindah gambar Pada halaman, Anda dapat memindahkan gambar secara cepat dengan men-drag gambar tersebut ke lokasi tujuan. Anda juga bisa menjalankan proses drag ke halaman yang sedang terbuka dari berbagai sumber, seperti berikut ini: o Dari folder list 3.2 Posisi absolut o Dari Windows Explorer. o Dari My Computer. o Dari Internet Explorer. o Dari dokumen office (Word, Excel dan seterusnya). o Dari aplikasi windows apapun yang menerapkan metode drag and drop. Gambar bisa bertumpuk dengan teks, bisa juga tidak bertumpuk. Selanjutnya, kita bisa mengatur apakah gambar berada di atas tumpukan atau di bawah tumpukan. Pembahasan ini sebenarnya membicarakan tentang posisi gambar maupun teks pada sumbu z. Posisi tidak bertumpuk berarti nilai posisinya pada sumbu z sama, sebaliknya jika nilainya tidak sama maka keduanya akan bertumpuk. Yang bernilai besar akan terletak di atas tumpukan atau di depan. Untuk mengatur posisi gambar maupun teks terhadap sumbu z, FrontPage telah menyediakan tombol-tombol pada toolbar Pictures. Tombol Position Absolutely ( ), akan menghasilkan posisi absolut gambar, yaitu gambar tidak bertumpuk dengan teks, lihat Gambar 7.26 kiri. Bandingkan dengan gambar kanan, yaitu gambar menumpuk ke teks sehingga teks tidak tampak. 229

Webmaster Pro Front Page XP Gambar 7.26 Posisi gambar absolut (kiri) dan posisi gambar bertumpuk (kanan) Anda bisa memindahkan gambar ke posisi yang Anda inginkan dengan drag gambar ke lokasi tersebut. Tombol Send Backward ( ), akan membawa gambar ke belakang teks sehingga kita bisa melihat teks, lihat Gambar 7.27. 230 Gambar 7.27 Gambar di belakang teks Tombol Bring Forward ( ) untuk membawa gambar ke depan teks. Pemakaian tombol-tombol di atas tidak hanya untuk kombinasi teks dan gambar, namun bisa juga untuk objek lain seperti gambar dan gambar. Jumlah objek yang bisa Anda gunakan tidak hanya dua, bisa lebih.

Bab 7 Menggunakan Gambar 3.3 Rotasi dan flip gambar Selain mengatur letak atau lokasi gambar di halaman, tentu saja kita bisa mengatur posisi gambar di lokasinya. FrontPage XP menyediakan sarana pemutar gambar (rotate) dan pembalik gambar (flip). Pada toolbar Pictures terdapat tombol-tombol tersebut, yaitu: Rotate Left ( ), untuk memutar gambar ke kiri sebesar 90 deraja t. Klik kedua kali pada tombol ini akan menghasilkan perputaran 180 derajat. Jadi empat kali klik akan mengembalikan posisi gambar ke keadaan semula. Rotate Right ( ), untuk memutar gambar ke kanan sebesar 90 derajat. Sifatnya sama dengan tombol sebelumnya. Flip Horizontal ( ), untuk membalik gambar secara horisontal. Klik kedua kali akan memposisikan gambar ke kedudukan semula. Flip Vertical ( ), untuk membalik gambar secara vertikal. Gambar 7.28 Berbagai posisi gambar 4 Tampilan gambar Selanjutnya kita akan membahas segi statis gambar, yaitu tampilan. Anda bisa mengatur kontras, pencahayaan, transparansi, warna bahkan Anda bisa 231

Webmaster Pro Front Page XP menambahkan teks ke gambar tersebut yang bisa diedit dan akan mengikuti kemanapun gambar dipindahkan. 4.1 Mengatur kontras dan pencahayaan Untuk mengatur kontras kita cukup menggunakan dua tombol, yaitu More Contrast ( ) untuk menaikkan kontras dan Less Contrast ( ) untuk menurunkan kontras. Gambar 7.29 Contoh pengaturan kontras dan pencahayaan Sedangkan untuk mengatur pencahayaan, tombol yang disediakan adalah More Brightness ( ) untuk menaikkan pencahayaan dan Less Brightness ( ) untuk menurunkan pencahayaan. 4.2 Mengatur transparansi Sebuah gambar transparan adalah gambar dengan warna latar terlihat pada bagian kosong gambar tersebut. Dengan kata lain latar belakang halaman akan melatari gambar tersebut. 232

Bab 7 Menggunakan Gambar Jika Anda ingin membuat sebuah gambar transparan, tutup kotak dialog ini, klik tombol Set Transparent Color ( yang Anda inginkan. ) pada toolbar Picture, lalu klik bagian gambar Perhatikan Gambar 7.30 di bawah ini, yang diubah menjadi transparan adalah bagian gambar yang berwarna putih. Gambar 7.30 Penerapan transparan pada warna putih Anda hanya bisa mengubah gambar dengan format GIF saja. Kalau Anda menerapkan perintah ke format lain, maka FrontPage XP akan mengubah gambar tersebut menjadi GIF, selanjutnya akan membuatnya transparan. 4.3 Cropping, resizing dan restore 4.3.1 Cropping Cropping adalah proses pemotongan bagian gambar. Yang digunakan adalah tombol Crop ( ). Dan cara pemakaiannya seperti berikut ini: 1. Klik gambar yang akan di-crop. Toolbar Pictures tampil. 2. Klik tombol Crop, lalu klik dan drag bagian gambar yang Anda inginkan. 233

Webmaster Pro Front Page XP Gambar 7.31 Pemilihan area cropping 3. Kemudian tekan Enter, area yang tidak terlingkupi, yaitu yang tidak Anda pilih akan dihapus. 4.3.2 Resizing Gambar 7.32 Hasil cropping Yang dimaksud resizing adalah pengubahan ukuran gambar. Anda bisa secara melakukan langsung pada gambar, yaitu dengan klik gambar lalu drag handle ke arah luar untuk memperbesar atau ke arah dalam untuk memperkecil. Selain cara langsung tersebut, tentu saja Anda bisa memanfaatkan kotak dialog Picture Properties tab Appearance, lalu pada kotak Width dan Height tuliskan ukuran yang Anda iginkan. Kotak dialog ini bisa Anda panggil dengan klik kanan gambar lalu klik Picture Properties. 234

Bab 7 Menggunakan Gambar Gambar 7.33 Kotak dialog Picture Properties 4.3.3 Restore Setelah Anda melakukan Cropping atau resizing, Anda masih bisa mengembalikan ke keadaan asli gambar dengan klik tombol Restore ( ). 4.4 Hitam putih dan washout Gambar berwarna yang terpasang pada halaman bisa Anda ubah menjadi hitam putih dengan tombol Color ( ), lalu memilih Grayscale. Selain memilih Grayscale Anda juga bisa memilih perintah washout agar gambar berubah menjadi berkabut. Hal ini bisa kita manfaatkan untuk membuat gambar latar belakang. 4.5 Membuat teks pada gambar Bagian terakhir pengaturan tampilan adalah menambah teks ke gambar. Langkah yang diperlukan adalah: 1. Klik gambar yang Anda inginkan. 2. Klik tombol Text ( ), muncul penampung teks di gambar. 3. Tuliskan teks yang Anda inginkan. 235

Webmaster Pro Front Page XP Gambar 7.34 Teks pada gambar 5 Hyperlink pada gambar 5.1 Hyperlink manual Anda dapat menjadikan gambar sebagai link ke halaman tertentu. Caranya mudah, sama dengan pembuatan link objek lainnya, yaitu: 1. Klik kanan gambar tersebut, lalu klik tombol Hyperlink ( ). Muncul kotak dialog Isert Hyperlink. Gambar 7.35 Kotak dialog Isert Hyperlink 236

Bab 7 Menggunakan Gambar 2. Carilah gambar/halaman tujuan, setelah ketemu klik nama file halaman tersebut. Namanya akan muncul pada kotak Address. 3. Klik OK. 5.2 Membuat tombol dari gambar Gambar bisa kita atur agar tampak seperti tombol, sehingga lebih komunikatif. Yang kita butuhkan adalah tombol Bevel. 1. Klik gambar yang Anda inginkan. Toolbar Pictures muncul, jika tidak muncul aktifkan View Toolbars Pictures. 2. Pada toolbar Pictures klik tombol Bevel ( ), efek tiga dimensi muncul di sekeliling gambar sehingga menyerupai sebuah tombol. 3. Anda bisa mengulang klik beberapa kali untuk pilihan terang gelap bevel. Untuk kembali ke posisi tertentu, tekan CTRL + Z. Gambar 7.36 Contoh gambar dengan bevel, sebagai tombol 4. Klik tombol Hyperlink ( ). Muncul kotak dialog Isert Hyperlink. 5. Carilah tujuan link (misalnya halaman), setelah ketemu klik nama file halaman tersebut. Namanya akan muncul pada kotak Address. 6. Klik OK. 237

Webmaster Pro Front Page XP 5.3 Gambar pengganti (thumbnail) Untuk situs tertentu, halaman web yang ada harus menampung gambar yang besar. Situs seperti ini misalnya situs musem atau gallery seni yang harus menampilkan foto lukisan dengan ukuran besar. Tujuannya adalah agar keindahan lukisan tidak berkurang. Namun sayangnya hal ini tidak sesuai dengan kaidah web, yang mengharuskan gambar berukuran kecil. Bagaimana solusinya? gunakan hyperlink. Kita harus memiliki dua macam ukuran untuk gambar yang sama, besar dan kecil. Yang kita pasang ke halaman adalah yang kecil. Namun gambar kecil ini memiliki link ke gambar besar. Jadi, gambar besar hanya akan tampil jika gambar kecil di-klik. Dengan demikian halaman tidak terlalu terbebani dengan gambar besar. Ide seperti ini juga telah ditampung FrontPage XP dengan menyediakan tombol AutoThumbnail ( ). Adapun cara pemakaiannya adalah: 1. Klik gambar. Toolbar Pictures muncul, jika tidak muncul aktifkan View Toolbars Pictures. 2. Pada toolbar Pictures klik tombol AutoThumbnail ( ). Gambar akan memiliki garis keliling berwarna biru. Lihat Gambar 7.37 berikut ini: Gambar 7.37 Gambar sebagai thumbnail Kemudian Anda bisa membukanya pada browser. Kalau Anda klik gambar thumbnail (Gambar 7.38 kiri) tersebut, browser akan menampilkan gambar dalam ukuran aslinya yang jauh lebih besar dibanding thumbnail (Gambar 7.38 kanan). 238

Bab 7 Menggunakan Gambar Gambar 7.38 Thumbnail dan gambar asli pada browser Seperti pada ide dasarnya, FrontPage XP akan membuat gambar baru dalam ukuran kecil. Anda bisa memeriksanya pada Folder List. Pada contoh ini nama gambar aslli yang berukuran besar adalah j0227689.jpg, Setelah Anda klik tombol Auto Thumbnail, maka terbentuk gambar baru untuk thumbnail (berukuran kecil) bernama j0227689_small.jpg. Lihat gambar berikut ini: Gambar 7.39 Gambar baru lebih kecil ukurannya 239

Webmaster Pro Front Page XP Pada FrontPage XP kita bisa mengatur tampilan gambar thumbnail, yaitu dengan mengaktifkan Tools Page Options, muncul kotak dialog Page Options seperti Gambar 7.40. Klik tab AutoThumbnail, dan klik salah satu jenis gambar autothumbnail dari tiga pilihan yang disediakan, lalu klik OK. Gambar 7.40 Pilihan AutoThumbnail 5.4 Hotspot (Image Maps) Hotspot (Image Maps) adalah pemasangan link ke bagian dari gambar. Jadi di dalam sebuah gambar bisa terdapat beberapa link. Untuk membuat hotspot, pada dasarnya hanya dibutuhkan tombol-tombol hotspot, yang memiliki beberapa jenis, Rectangular (persegi panjang, ), Polygonal (banyak segi, ). ), Circular (elips, Namun sebelum membuat link, sebaiknya Anda tentukan lebih dulu tujuan link-nya. Jika belum ada, buatlah lebih dulu. 240

Bab 7 Menggunakan Gambar 5.4.1 Membuat tujuan hyperlink Buatlah tujuan link bisa berupa halaman atau bookmark. Misalnya bookmark, berupa keterangan tentang penjualan semester pertama, kedua dan ketiga. Langkahnya pembuatannya adalah: 1. Tuliskan sebuah teks judul, misalnya Semester pertama. Kalau perlu formatlah teks tersebut. 2. Tekan ENTER, lalu tuliskan paragraf keterangan penjualan. Misalnya seperti berikut: Gambar 7.41 Pembuatan bookmark sebagai tujuan link 3. Sorotlah teks judul ( Semester pertama ). 4. Aktifkan Insert Bookmark. Muncul kotak dialog Bookmark. 241

Webmaster Pro Front Page XP Gambar 7.42 Kotak dialog Bookmark 5. Pada kotak Bookmark name, tuliskan nama bookmark. Misalnya Semester pertama. 6. Klik OK, kotak dialog Bookmark akan ditutup. Teks Semester pertama pada halaman akan ditandai dengan garis bawah putus-putus. 7. Ulangi langkah 1 s/d 6 untuk bookmark Semester kedua. 8. Ulangi langkah 1 s/d 6 untuk bookmark Semester ketiga. 5.4.2 Membuat link bookmark Setelah tujuan link siap, berikutnya kita bisa menggunakan tombol-tombol untuk membuat hotspot. Yang kita pilih untuk kali ini adalah yang paling sederhana, yaitu tombol Rectangular Hotspot ( ). Langkah selengkapnya adalah: 1. Pasangkan gambar, misalnya seperti Gambar 7.43. 2. Klik gambar untuk menampilkan toolbar Pictures. 3. Klik tombol Rectangular Hotspot ( ). 242

Bab 7 Menggunakan Gambar Gambar 7.43 Gambar yangakan dipasang hotspot 4. Klik dan drag bagian gambar, misalnya batang grafik pertama. Setelah bagian tersebut terlingkupi, lepaskan drag. Muncul kotak dialog Insert Hyperlink. 5. Pada bidang kiri klik icon Place in This Document. Muncul daftar pilihan bookmark. Gambar 7.44 Pilihan bookmark pada kotak dialog Insert Hyperlink 6. Klik salah satu nama bookmark. Untuk contoh ini, klik Semester pertama. 7. Klik tombol Screen Tips, muncul kotak dialog Set Hyperlink ScreenTip. 243

Webmaster Pro Front Page XP Gambar 7.45 Pengisian ScreenTip Tuliskan keterangan singkat yang akan ditampilkan ke layar apabila pemakai meletakkan pointer mouse pada bidang hotspot pertama ini, misalnya tuliskan Semester pertama. Lalu klik OK, tampilan kembali ke kotak dialog Insert Hyperlink. Klik OK. 8. Ulangi langkah 3 s/d 7 untuk membuat hotspot kedua. 9. Ulangi langkah 3 s/d 7 untuk membuat hotspot ketiga. Setelah selesai, Anda bisa mencobanya di browser. Klik batang grafik pertama akan menampilkan keterangan bookmark pertama. Batang kedua untuk keterangan semester kedua dan batang ketiga untuk keterangan semester ketiga. Gambar 7.46 Tampilan hotspot pada browser 6 Gambar terjadwal 244 Dengan salah satu Web Component FrontPage XP, Anda bisa menampilkan sebuah gambar pada waktu dan tanggal tertentu.

Bab 7 Menggunakan Gambar Misalnya perusahaan Anda memiliki sebuah promosi yang akan dimulai pada hari tertentu dan jam tertentu, Anda dapat mengatur halaman itu sehingga sebuah gambar baru akan ditampilkan pada waktu tersebut. Nah, Web Component bisa menolongnya. Kalau Anda memiliki halaman web pribadi, Anda dapat menggunakan alat tersebut untuk mengatur penampilan gambar wisat untuk hari libur, gambar badut pada saat ulang tahun anak Anda, dan sebagainya. Beginilah cara pengaturannya: 1. Tempatkan kursor pada tempat yang Anda inginkan. 2. Aktifkan pilihan Insert Web Component. Kotak dialog Insert Web Component akan terbuka. Gambar 7.47 Kotak dialog Insert Web Component 3. Pada bidang kiri pilih Included Content dan pada bidang kanan pilihlah Picture Based on Schedule, lihat Gambar 7.48. Gambar 7.48 Kotak dialog Insert Web Component 4. Klik Finish, muncul kotak dialog penjadwalan tampilnya gambar. 245

Webmaster Pro Front Page XP Gambar 7.49 Kotak dialog Scheduled Picture properties 5. Klik tombol Browse yang pertama untuk memilih gambar yang ingin Anda tampilkan pada waktu dan tanggal yang Anda inginkan. Anda hanya dapat memilih sebuah gambar yang sudah ada pada web Anda. Gambar 7.50 Kotak dialog Picture 6. Masukkan Starting Date and Time, untuk menjadwalkan kapan gambar tersebut akan mulai muncul pada halaman Anda. 7. Masukkan Ending Date and Time untuk menjadwalkan kapan gambar tersebut akan dikeluarkan dari halaman Anda. 8. Anda juga bisa mengklik tombol Browse ke-2 untuk memilih gambar pengganti yang akan ditampilkan sebelum gambar terjadwal muncul pada halaman, dan sesudah gambar tersebut dipindahkan. 9. Klik OK dan sebuah icon Broken Picture akan ditampilkan di tempat gambar tersebut, atau mungkin gambarnya sendiri, jika Starting Date dan Time sudah lewat. 246