Bab 7 Menggunakan Gambar

Webmaster Pro Front Page XP

Daftar Isi Bab 7
1.
1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8

Memasang gambar pada halaman ..............................................................209
Mengambil gambar dari Web FrontPage ....................................................... 210 Mengambil gambar dari koleksi Clip Organizer.............................................. 211 Mengambil gambar dari hard disk .................................................................. 211 Gambar dari World Wide Web atau Intranet................................................... 212 Menggunakan klik kanan pada Browser.......................................................... 213 Drag-Drop, Cut-Paste ................................................................................... 213 Gambar dari Scanner .................................................................................... 213 Menyimpan Gambar...................................................................................... 215

2
2.1 2.2 2.3 2.4 2.5 2.6

Properti gambar............................................................................................216
Penentuan program editor gambar................................................................. 217 Modifikasi gambar......................................................................................... 219 Format gambar ............................................................................................. 221 Alternatif penampilan .................................................................................... 222 Default hyperlink........................................................................................... 223 Pelipatan teks, layout dan ukuran gambar....................................................... 224

3
3.1 3.2 3.3

Tata letak gambar.........................................................................................228
Memindah gambar......................................................................................... 229 Posisi absolut................................................................................................ 229 Rotasi dan flip gambar.................................................................................. 231

4
4.1 4.2 4.3 4.4 4.5

Tampilan gambar..........................................................................................231
Mengatur kontras dan pencahayaan ............................................................... 232 Mengatur transparansi.................................................................................. 232 Cropping, resizing dan restore ....................................................................... 233 Hitam putih dan washout............................................................................... 235 Membuat teks pada gambar............................................................................ 235

5
5.1 5.2 5.3 5.4

Hyperlink pada gambar ...............................................................................236
Hyperlink manual.......................................................................................... 236 Membuat tombol dari gambar ........................................................................ 237 Gambar pengganti (thumbnail)...................................................................... 238 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

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

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

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

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

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

seperti Gambar 7. karena hal ini sudah tidak diperlukan lagi. maka halaman Anda akan kehilangan gambar. Perhatikan bahwa jika Anda telah menyisipkan suatu gambar dengan memasukkan address gambar dari Web atau Intranet. yaitu teks keterangan apabila gambar gagal tampil. 2 Properti gambar Setelah Anda memasang gambar yang diinginkan. Properti yang bisa Anda atur antara lain: • • • • • • Format file yang akan digunakan gambar tersebut. Sarana pengaturan yang diperlukan adalah kotak dialog Picture Properties. lalu apa yang perlu dilakukan? Anda dapat mengatur properti-nya agar lebih optimal. Anda akan melihat kotak dialog Picture Properties seperti Gambar 7.9. berarti halaman Anda mengacu ke gambar tersebut. 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. Sehingga jika gambar tersebut dipindahkan atau dihapus oleh pihak lain. Artinya. Hyperlink pada gambar tersebut. 216 . FrontPage tidak akan menanyakan apakah Anda akan menyimpan gambar tersebut atau tidak.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). yaitu mengurangi beban halaman. lalu klik perintah Picture Properties. Border atau garis batas di sekeliling gambar. Klik kanan gambar yang Anda inginkan.9. Teks alternatif. Ukuran gambar. gambar tersebut tidak akan disimpan di dalam web Anda. Pelipatan gambar dengan teks sekelilingnya. Jika gambar tersebut sudah berada di dalam Web Anda.

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

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

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

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

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

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

simpanlah gambar versi kedua tersebut dengan FrontPage XP di dalam web Anda.18 Kotak dialog Select Alternatif Picture Selain mencari versi kedua. Anda juga bisa membuat sendiri versi kedua dengan klik tombol Edit. dengan memasukkan address halaman yang ingin Anda hubungkan ke dalam kotak isian Location pada kelompok Default Hyperlink.5 Default hyperlink Anda dapat menjadikan sebuah gambar sebagai sebuah lin k. Khusus untuk browser Internet Explorer. Gambar 7. teks Alt akan ditampilkan sebagai hint. Teks Alt akan ditampilkan pada sebuah kotak di lokasi gambar. 2. Editor gambar akan muncul. atau jika pemakai telah mematikan fungsi penampilan gambar). Yaitu teks yang muncul ketika pointer mouse berada di atas gambar selama beberapa saat.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.4. 2.19 Pengaturan Default Hyperlink 223 .Bab 7 Menggunakan Gambar Gambar 7. Setelah mengedit. Caranya sangat mudah.

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

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

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

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

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

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

bisa lebih.Webmaster Pro Front Page XP Gambar 7. akan membawa gambar ke belakang teks sehingga kita bisa melihat teks.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.27 Gambar di belakang teks • Tombol Bring Forward ( ) untuk membawa gambar ke depan teks. Gambar 7. lihat Gambar 7. Pemakaian tombol-tombol di atas tidak hanya untuk kombinasi teks dan gambar.27. Jumlah objek yang bisa Anda gunakan tidak hanya dua. namun bisa juga untuk objek lain seperti gambar dan gambar. 230 . • Tombol Send Backward ( ).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful