Menambahkan Gambar ke Situs Anda di Dreamweaver - dummies

Menambahkan gambar ke halaman web Anda mungkin terasa sangat ajaib pada awalnya karena prosesnya sangat sederhana dengan Dreamweaver. Tantangan dengan grafis web tidak menambahkannya ke halaman Anda tapi membuat gambar tampan yang dimuat dengan cepat di browser pemirsa Anda.

Anda memerlukan program lain, seperti Photoshop, Photoshop Elements, atau Fireworks, untuk membuat, mengubah, mengedit, dan mengoptimalkan gambar. Mengoptimalkan gambar membuat ukuran file menjadi lebih kecil sehingga gambar Anda diunduh lebih cepat. Dreamweaver menyediakan beberapa alat editing gambar dasar, namun kebanyakan Anda menggunakan Dreamweaver untuk memasukkan dan memposisikan gambar di halaman Anda.

Dreamweaver membuat gambar pada halaman web Anda menjadi mudah dan menyediakan beberapa cara untuk melakukannya:

• Klik ikon Images di panel Common Insert dan kemudian pilih gambar menggunakan kotak dialog Insert Image.

• Di panel File, klik dan seret nama gambar ke halaman yang Anda inginkan agar gambar itu muncul.

• Gunakan menu Insert.

Jika Anda tidak memiliki gambar JPEG, GIF, atau PNG yang dioptimalkan untuk web, Anda dapat mendownload gambar gratis yang sudah dioptimalkan.

Untuk menempatkan gambar pada halaman web menggunakan menu Insert, ikuti petunjuk berikut:

1. Buka halaman yang ada atau buat dan simpan halaman baru.

2. Tempatkan kursor di tempat Anda ingin memasukkan gambar pada halaman.

   Anda dapat memasukkan gambar ke kiri atas dari sebuah file kosong baru, dan Anda dapat memasukkan gambar ke dalam tag dan elemen di halaman web, namun Anda tidak bisa hanya menempatkan gambar di tengah halaman tanpa menggunakan HTML tambahan. tag atau format CSS untuk memposisikannya.

3. Pilih Insert → Image → Image.

   Kotak dialog Select Image Source akan muncul.

4. Browse untuk mencari gambar yang ingin Anda sisipkan.

   Bergantung pada sistem komputer Anda, Anda dapat melihat pratinjau gambar saat Anda memasukkannya dengan berbagai cara. Berikut adalah tiga pilihan umum:

   • Pada PC dengan Windows XP, pilih Thumbnail dari daftar drop-down View menu di sebelah kanan bidang Look In untuk menampilkan versi thumbnail dari semua gambar dalam folder yang terbuka. Anda juga dapat melihat satu pratinjau dari setiap gambar yang dipilih di bagian paling kanan dari kotak dialog.

   • Pada PC dengan Windows Vista atau Windows 7 , pilih opsi ikon (Ikon Kecil, Ikon Menengah, Ikon Besar, atau Ikon Ekstra Besar) dari daftar drop-down View menu di sebelah kanan Look In lapangan untuk menampilkan versi thumbnail dari semua gambar dalam folder yang terbuka. Anda juga dapat melihat satu pratinjau dari setiap gambar yang dipilih ke bagian paling kanan dari kotak dialog.

   • Di Mac, pilih opsi Lihat As Kolom dari kiri atas kotak dialog. Anda dapat melihat satu pratinjau dari setiap gambar yang dipilih di bagian paling kanan dari kotak dialog.

     

     Credit: Photos oleh Casey Stoll

5. Untuk memasukkan gambar, klik dua kali nama gambar atau klik sekali dan kemudian klik OK.

   Jika Anda memasukkan gambar ke dalam halaman dan gambar tidak disimpan di folder situs lokal Anda, Dreamweaver meminta Anda dengan kotak dialog peringatan dan menawarkan untuk menyalin gambar ke dalam folder situs lokal Anda. Banyak desainer membuat subfolder yang disebut gambar di dalam folder situs lokal tempat mereka menyimpan semua gambar di situs mereka, namun Anda dapat mengatur gambar di beberapa subfolder jika Anda mau.

6. Pilih gambar di halaman web Anda untuk melihat dan mengedit properti gambar.

   Pilihan gambar ditampilkan secara otomatis di Property inspector di bagian bawah halaman saat gambar dipilih.

   

   Kredit: Foto oleh Casey Stoll

Bila Anda memasukkan file gambar ke halaman, Anda sebenarnya tidak menambahkan salinan gambar ke halaman; Anda membuat referensi ke gambar. Kode yang mendasarinya terlihat seperti kode untuk link dari satu halaman ke halaman lainnya.

Kedua referensi dan link gambar termasuk nama file dan path dari halaman ke file itu. Intinya, Anda menciptakan sebuah instruksi untuk browser web untuk menemukan gambar saat menampilkan halaman.

Untuk menampilkan gambar di halaman web Anda, Anda perlu mengunggah halaman dan gambar saat mempublikasikan situs web Anda. Jika file gambar dan halaman yang merujuk ke file tersebut tidak berada pada lokasi relatif yang sama pada hard drive Anda karena berada di server web Anda, Anda akan memecah referensi ke gambar Anda, dan ikon Broken Image yang jelek muncul di halaman Anda..

Cara terbaik untuk memastikan bahwa gambar dan file Anda tetap berada di tempat yang seharusnya mereka hadapi satu sama lain adalah membiarkan Dreamweaver melacaknya untuk Anda. Itulah mengapa sangat penting untuk menyelesaikan proses penyiapan situs dan untuk memastikan Anda tidak pernah memindahkan atau mengganti nama gambar, kecuali di panel File.