Rumah Media Sosial Cara Tambah Imej ke Laman Web Anda di Dreamweaver - dummies

Cara Tambah Imej ke Laman Web Anda di Dreamweaver - dummies

Video: Menambahkan Favicon / Logo Web Pada Browser - HTML CSS 2025

Video: Menambahkan Favicon / Logo Web Pada Browser - HTML CSS 2025
Anonim

Menambah imej ke laman web anda mungkin kelihatan hampir ajaib pada mulanya kerana prosesnya begitu mudah dengan Dreamweaver. Cabaran dengan grafik web tidak menambahkannya ke halaman anda tetapi mencipta imej tampan yang memuat dengan cepat pada penyemak imbas anda.

Anda memerlukan program lain, seperti Photoshop, Elemen Photoshop, atau Fireworks, untuk membuat, menukar, mengedit, dan mengoptimumkan imej. Mengoptimumkan imej menjadikan saiz fail lebih kecil supaya imej anda dimuatkan lebih cepat. Dreamweaver menyediakan beberapa alat pengeditan imej asas, tetapi kebanyakannya anda menggunakan Dreamweaver untuk memasukkan dan meletakkan imej pada halaman anda.

Dreamweaver membuat gambar di laman web anda mudah dan menyediakan pelbagai cara untuk melakukannya:

  • Klik ikon Imej dalam panel Bersama Biasa dan kemudian pilih imej menggunakan kotak dialog Masukkan Imej.

  • Dalam panel Fail, klik dan seret nama imej ke halaman di mana anda mahu imej dipaparkan.

  • Gunakan menu Sisipkan.

Jika anda tidak mempunyai JPEG yang dioptimumkan di web, imej GIF, atau PNG yang berguna, anda boleh memuat turun imej percuma yang sudah dioptimumkan.

Untuk meletakkan imej di laman web menggunakan menu Sisipkan, ikuti arahan ini:

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

  2. Letakkan kursor anda di mana anda ingin memasukkan imej pada halaman.

    Anda boleh memasukkan imej ke bahagian atas kiri fail kosong baru, dan anda boleh memasukkan imej ke dalam tag dan elemen dalam laman web, tetapi anda tidak boleh meletakkan imej di tengah-tengah halaman tanpa menggunakan HTML tambahan tag atau pemformatan CSS untuk meletakkannya.

  3. Pilih Insert → Imej → Imej.

    Kotak dialog Sumber Imej Pilihan muncul.

  4. Semak imbas untuk mencari imej yang anda mahu masukkan.

    Bergantung kepada sistem komputer anda, anda boleh pratonton imej semasa anda menyelitkannya dengan cara yang berbeza. Berikut adalah tiga pilihan umum:

    • Pada PC dengan Windows XP, pilih Thumbnail dari senarai drop-down menu Lihat di sebelah kanan bidang Lihat Dalam untuk memaparkan versi lakaran semua imej di mana-mana folder terbuka. Anda juga boleh melihat pratonton tunggal mana-mana imej yang dipilih di sebelah kanan sebelah kanan kotak dialog.

    • Pada PC dengan Windows Vista atau Windows 7 , pilih pilihan ikon (Ikon Kecil, Ikon Sederhana, Ikon Besar, atau Ikon Besar Tambahan) dari senarai lungsur menu Lihat di sebelah kanan Lihat Dalam medan untuk memaparkan versi lakaran semua imej dalam mana-mana folder terbuka. Anda juga boleh melihat pratonton tunggal mana-mana imej yang dipilih di sebelah kanan sebelah kanan kotak dialog.

    • Pada Mac, pilih pilihan Lihat As Kolom dari sebelah kiri atas kotak dialog. Anda boleh melihat pratonton tunggal mana-mana imej yang dipilih di sebelah kanan sebelah kanan kotak dialog.

      Kredit: Foto oleh Casey Stoll
  5. Untuk memasukkan imej, klik dua kali nama imej atau klik sekali kemudian klik OK.

    Jika anda memasukkan imej ke dalam halaman dan imej tidak disimpan dalam folder tapak setempat anda, Dreamweaver meminta anda dengan kotak dialog amaran dan tawaran untuk menyalin imej ke dalam folder tapak setempat anda. Ramai pereka membuat subfolder dipanggil imej di dalam folder tapak tempatan di mana mereka menyimpan semua imej di laman web mereka, tetapi anda boleh mengatur imej dalam beberapa subfolder jika anda lebih suka.

  6. Pilih imej pada halaman web anda untuk melihat dan mengedit sifat imej.

    Pilihan imej dipaparkan secara automatik di pemeriksa Hartanah di bahagian bawah halaman apabila imej dipilih.

    Kredit: Foto oleh Casey Stoll

Apabila anda memasukkan fail imej ke halaman, anda tidak sebenarnya menambah salinan imej ke halaman tersebut; anda membuat rujukan kepada imej. Kod asas kelihatan seperti kod untuk pautan dari satu halaman ke halaman yang lain.

Kedua-dua rujukan dan pautan imej merangkumi nama fail dan laluan dari halaman ke fail itu. Pada asasnya, anda membuat arahan untuk pelayar web untuk mencari imej apabila ia memaparkan halaman.

Untuk memaparkan imej pada halaman web anda, anda perlu memuat naik kedua-dua halaman dan imej apabila anda menerbitkan tapak web anda. Jika fail imej anda dan halaman yang merujuk kepada fail tersebut tidak berada di lokasi relatif yang sama pada cakera keras anda kerana ia berada di pelayan web anda, anda mematahkan rujukan kepada imej anda, dan ikon Imej Patah yang hambar muncul di halaman anda.

Cara terbaik untuk memastikan imej dan fail anda berada di tempat yang sepatutnya berkaitan dengan satu sama lain adalah dengan membiarkan Dreamweaver menjejaki mereka untuk anda. Itulah sebabnya penting untuk melengkapkan proses persediaan tapak dan memastikan anda tidak pernah bergerak atau menamakan semula imej, kecuali dalam panel Fail.

Cara Tambah Imej ke Laman Web Anda di Dreamweaver - dummies

Pilihan Editor

5 Perkara yang boleh dilakukan oleh GoPro Camera - dummies

5 Perkara yang boleh dilakukan oleh GoPro Camera - dummies

Apa yang boleh dilakukan oleh GoPro? Inilah soalan yang lebih relevan: Apa yang anda mahu lakukan? Meminta soalan ini lebih seperti menanyakan diri anda tentang keinginan dan hasrat anda sendiri untuk rakaman video yang unik. Apabila anda menentukan apa yang anda ingin tangkap, semua yang anda perlu lakukan ialah menyambungkan kamera ke gunung yang sesuai ...

Pengaturan & Pintasan dSLR Untuk Menipu Cheat Sheet - dummies

Pengaturan & Pintasan dSLR Untuk Menipu Cheat Sheet - dummies

Anda mempunyai refleks kanta tunggal digital yang besar (dSLR ) kamera dan mahu menangkap beberapa gambar indah masa-masa hidup anda. Untuk sepenuhnya menguasai dSLR anda dan membuat gambar yang menarik, anda mesti menceburkan diri ke dunia baru yang berani yang melibatkan membuat keputusan tentang mod penangkapan. Mengetahui panjang fokus apa yang digunakan dalam ...

Pilihan Editor

Bagaimana Menggunakan Lapisan Masker Gradient dan Brush Masker di Photoshop CS6 - lapisan masker

Bagaimana Menggunakan Lapisan Masker Gradient dan Brush Masker di Photoshop CS6 - lapisan masker

Lapisan lapisan di Photoshop CS6 membolehkan anda secara beransur-ansur berus dalam ketelusan dan kelegapan pada asas pixel selektif. Dua alat pelapis lapisan - Alat Gradien dan Brush - lebih kerap digunakan berbanding yang lain: Alat Gradien: Menetapkan alat ini kepada kecerunan linear hitam ke putih atau putih ke ...

Cara Menggunakan Kuler untuk Cari dan Kongsi Tema Warna di Photoshop CS6 - dummies

Cara Menggunakan Kuler untuk Cari dan Kongsi Tema Warna di Photoshop CS6 - dummies

Sumber yang tersedia untuk Adobe Photoshop Creative Suite 6 adalah luas. Kuler adalah komuniti dalam talian yang menyediakan tema warna untuk anda menyemak imbas, memuat turun, membuat, mengedit, dan memuat naik untuk berkongsi dengan orang lain. Gunakan tema ini apabila membuat projek cetak grafik atau laman web. Apa yang anda perlukan ialah sambungan Internet dan Adobe ID. Di sini ...

Cara Menggunakan Kata Kunci untuk Photoshop CS6 Files dalam Bridge - dummies

Cara Menggunakan Kata Kunci untuk Photoshop CS6 Files dalam Bridge - dummies

Kata kunci adalah label deskriptif yang anda lampirkan ke fail di Bridge. Mereka membantu untuk mengkategorikan imej Photoshop CS6 anda, membolehkan anda lebih cekap dan cepat mencari fail yang anda inginkan. Berikut adalah downside untuk membuat dan menggunakan kata kunci: Untuk membuat kata kunci baru (folder kategori yang mengandungi kata kunci): Klik ikon tanda tambah (+) ...

Pilihan Editor

Dengan Touch dengan Nota Reka bentuk - dummies

Dengan Touch dengan Nota Reka bentuk - dummies

Nota reka bentuk adalah sesuai untuk berkomunikasi dengan pemaju lain yang bekerja pada Laman web, tetapi tidak dalam jarak menjerit. Ciri Dreamweaver ini berfungsi seperti tag komen (kod HTML yang membolehkan anda memasukkan teks dalam halaman yang tidak akan dipaparkan dalam penyemak imbas) tetapi dengan privasi lebih banyak. Ramai pemaju menggunakan ...

Memenuhi Dreamweaver CS3 Common Insert Bar - dummies

Memenuhi Dreamweaver CS3 Common Insert Bar - dummies

Jangan berfikir bahawa toolbar Dreamweaver CS3 Common Insert biasa dan biasa. Ia hanya dipanggil "umum" kerana ia menawarkan perintah memasukkan yang paling kerap digunakan kerana ia adalah yang paling berguna. Dengan bilah alat yang ditunjukkan di sini, anda boleh memasukkan segala-galanya dari pautan e-mel kepada tarikh kepada mana-mana media yang ingin anda letakkan ...

Gambaran Keseluruhan Alignment Imej dalam Adobe CS5 Dreamweaver - dummies

Gambaran Keseluruhan Alignment Imej dalam Adobe CS5 Dreamweaver - dummies

Penjajaran imej dan teks bersebelahan mereka di Adobe Suite Creative 5 (Adobe CS5) Dreamweaver adalah mudah, tetapi pilihan yang ada mungkin membuat kelihatan terlalu rumit. Imej dan teks bersebelahan mereka duduk pada garis dasar yang sama sebagai lalai, memaksa teks berjalan dalam satu baris ke kanan imej. Untuk ...