Video: Dreamweaver CS5 Tutorial Using Images in a Web Page Adobe Training Lesson 4.1 2024
Anda dapat menambahkan gambar termasuk file Photoshop (PSD) dan Kembang Api (PNG) ke halaman kosong Anda di Adobe Creative Suite 5 (Adobe CS5) Dreamweaver. Menempatkan gambar tidak mempengaruhi panel File Dreamweaver.
-
Pilih Insert → Image.
Kotak dialog Select Image Source akan muncul.
Atau, klik tab Common pada panel Insert dan klik tombol Insert Image.
-
Arahkan ke lokasi gambar Anda dan klik Choose (Mac) atau OK (Windows).
Jika Anda memilih file asli Photoshop (PSD) atau Fireworks (PNG), kotak dialog Image Preview muncul, memungkinkan Anda untuk mengoptimalkan gambar Anda secara langsung di Dreamweaver.
Jika Anda memilih gambar web-siap, seperti GIF, JPG, atau PNG dan gambarnya ada di luar folder situs Anda, Anda akan melihat peringatan. Dreamweaver mengingatkan Anda bahwa gambar itu berada di luar folder akar, yang menyebabkan masalah saat Anda menyalin halaman ke server web.
Klik Yes untuk menyalin file ke direktori root situs Anda. Tetapkan nama baru di sana atau klik Save untuk menyimpan nama yang sama dan duplikat file gambar ke folder situs Anda.
Kotak dialog Atribut Aksesibilitas Tag Gambar akan muncul.
Semua gambar harus memiliki teks teks Alt (alternatif) yang muncul sebelum gambar diunduh atau jika penampil telah menonaktifkan pilihan untuk melihat gambar.
-
Tambahkan deskripsi gambar yang sesuai di kotak teks Alternate Text.
Jika gambar itu adalah logo, uraiannya harus menyertakan nama perusahaan sebagai teks Alt atau, jika itu adalah foto atau ilustrasi, gambarkan gambar itu dalam beberapa kata.
Dari sudut pandang aksesibilitas, alt teks membantu pembaca layar (seperti yang digunakan oleh tunanetra) dalam mengidentifikasi konten gambar kepada pengguna. Selain itu, Alt teks adalah alat yang berharga dalam menyediakan mesin pencari cara mengindeks konten gambar yang disertakan di situs Anda.
-
Klik OK.
Gambar ditambahkan ke halaman dan ke panel Files.
Anda dapat mengedit gambar dengan mengklik dua kali pada panel File. Anda juga dapat menggunakan Property inspector untuk melihat detail tentang gambar, termasuk dimensi dan ukuran file. Anda juga dapat memodifikasi properti gambar, termasuk border, hyperlink, dan padding vertikal dan horizontal.
Gunakan Property inspector untuk melihat informasi tentang gambar Anda dan memodifikasi properti gambar.Bila Anda membuat situs yang lebih besar dengan beberapa halaman yang saling terkait satu sama lain, Anda mungkin ingin mengubah tampilan panel File. Dengan mengklik daftar drop-down (di sisi kiri atas panel File) tempat situs Anda berada, Anda dapat menemukan folder dan situs lain yang telah Anda gunakan baru-baru ini.Dengan mengklik daftar drop-down View ke kanan, Anda dapat mengubah tampilan panel File.
Buka file dari panel Files dengan mengklik dua kali.