Contoh Dreamweaver MX: Keterampilan Penerapan Gambar

Mempercepat pengunduhan gambar

Jika terlalu banyak gambar di halaman web, maka akan mempengaruhi kecepatan browsing. Dreamweaver dapat dengan mudah mengatur gambar yang dimuat sebelumnya untuk mempercepat pengunduhan gambar, memungkinkan situs muncul di hadapan pengguna secepat mungkin.

Deskripsi efeknya adalah membuat file dan memuat gambar terlebih dahulu sehingga gambar diunduh ke cache terlebih dahulu untuk mempercepat kecepatan unduh gambar. Untuk efek sebenarnya, silakan telusuri file "Contoh 36 - Mempercepat Kecepatan Download Gambar" di direktori "Dreamweaver MX 2004 100 Contoh" pada CD yang disertakan dengan buku.

Pemikiran Kreatif Buka halaman baru software Dreamweaver MX 2004, lalu buka panel label, dan pilih opsi [Preload Image] di [Behavior] untuk mempercepat download gambar.

Langkah-langkah operasi

(1) Buat file baru, operasinya ditunjukkan pada Gambar 36-1.



(2) Simpan halaman dan sisipkan gambar. Agar tidak meminta jalur relatif saat menyisipkan gambar, simpan halaman terlebih dahulu sebagai "36.htm". Kemudian masukkan gambar yang akan dimuat sebelumnya, seperti yang ditunjukkan pada Gambar 36-2.


Gambar 36-2 Sisipkan gambar

(3) Tambahkan fungsi "pramuat gambar". Gunakan panel perilaku Dreamweaver untuk menambahkan fungsi "preload image", seperti yang ditunjukkan pada Gambar 36-3.

(4) Pilih gambar yang akan dimuat sebelumnya, dan pengoperasiannya seperti yang ditunjukkan pada Gambar 36-4.

Tip: Jika ada beberapa gambar besar di situs, Anda dapat mengklik ikon [+] di atas [Preload Image] untuk menambahkan beberapa gambar preload. Operasi spesifiknya sama seperti yang ditunjukkan pada Gambar 36-4.

(5) Simpan file untuk menyelesaikan operasi. Dengan cara ini kecepatan download gambar dapat dipercepat, sehingga pengguna tidak menunggu terlalu lama saat menjelajah web, yang sangat penting untuk meningkatkan kinerja website.

Gambar iklan acak

Saat menjelajahi halaman web, pemirsa dapat menemukan bahwa gambar iklan yang diperbarui secara dinamis di halaman web lebih dinamis dan menarik dibandingkan gambar statis dan tetap. Cara membuat gambar iklan acak di halaman web adalah masalah yang akan dipelajari dalam contoh ini.

Deskripsi Efek Saat menjelajahi halaman web, gambar iklan akan muncul di area banner halaman web, seperti yang ditunjukkan pada Gambar 38-1. Selanjutnya, gambar iklan diperbarui setiap dua detik, dan gambar iklan muncul secara acak, seperti yang ditunjukkan pada Gambar 38-2.

Ide Kreatif Dengan menggunakan plug-in ekstensi Macromedia Advance_Random_Images, Anda dapat dengan mudah membuat gambar iklan acak di halaman web.

Langkah-langkah operasi

(1) Pasang plugin. Gunakan perintah [Command] |.[Extension Management] di bilah menu untuk membuka kotak dialog [Macromedia Extension Manager] dan instal ekstensi Advance_Random_Images, seperti yang ditunjukkan pada Gambar 38-3.

(2) Panggil perintah. Buka file banner.htm di folder sumber contoh ini, letakkan kursor di lokasi di mana Anda ingin menyisipkan iklan, dan panggil perintah [AdvancedRandomImages], seperti yang ditunjukkan pada Gambar 38-4.

(3) Atur gambar. Atur properti transformasi gambar di kotak dialog [RandomImages] yang muncul, seperti yang ditunjukkan pada Gambar 38-5.

(4) Tambahkan gambar. Tambahkan gambar iklan pertama, seperti yang ditunjukkan pada Gambar 38-6.

Tip: Gambar yang digunakan dalam contoh ini ditempatkan di folder banner di folder materi contoh ini.

(5) Kemudian gunakan metode yang sama untuk menambahkan gambar lainnya. Setelah penambahan selesai, klik tombol [OK] untuk mengonfirmasi pengoperasian, seperti yang ditunjukkan pada Gambar 38-7.

(6) Kemudian simpan file halaman dan pratinjau, dan efek gambar iklan acak akan dibuat. Pembaca dapat merujuk ke file efek bannerok.htm di folder material contoh ini untuk melihat apakah hasil produksi sudah benar. Pada titik ini, contoh ini selesai.

Teknologi yang dijelaskan dalam contoh ini umum digunakan di berbagai situs web. Misalnya, di beberapa situs portal besar dalam negeri, iklan transformasi ini dapat dilihat di hampir setiap halaman.