Petua untuk Mencipta Peta Imej dengan Dreamweaver

Manfaat dan kelemahan untuk menggunakan peta imej

Terdapat satu titik dalam sejarah reka bentuk web di mana banyak laman menggunakan ciri yang dikenali sebagai "peta imej". Ini adalah senarai koordinat yang dilampirkan pada imej tertentu pada halaman. Koordinat ini mewujudkan kawasan hiperpautan pada imej itu, menambah "titik panas" penting kepada grafik, yang masing-masing boleh dikodkan untuk dihubungkan ke tempat yang berbeza. Ini jauh berbeza daripada sekadar menambah tag pautan ke imej, yang akan menyebabkan keseluruhan grafik menjadi satu pautan besar ke satu destinasi.

Contoh - bayangkan mempunyai fail grafik dengan imej Amerika Syarikat. Jika anda mahukan setiap negeri menjadi "diklik" supaya mereka pergi ke halaman tentang keadaan tertentu, anda boleh melakukan ini dengan peta imej. Begitu juga, jika anda mempunyai imej band muzik, anda boleh menggunakan peta imej untuk membolehkan setiap ahli individu dapat diklik pada halaman berikutnya mengenai ahli band tersebut.

Adakah peta imej bunyi berguna? Mereka sudah tentu, tetapi mereka telah jatuh cinta pada Web hari ini. Ini adalah, sekurang-kurangnya sebahagiannya, kerana peta imej memerlukan koordinat tertentu untuk berfungsi. Tapak hari ini dibina untuk menjadi skala responsif dan imej berdasarkan saiz skrin atau peranti. Ini bermakna koordinat pra-set, iaitu bagaimana peta peta berfungsi, runtuh apabila skala tapak dan saiz imej berubah. Inilah sebabnya mengapa peta imej jarang digunakan pada tapak produksi hari ini, tetapi mereka masih mempunyai kelebihan untuk demo atau contoh di mana anda memaksa saiz halaman.

Ingin tahu cara membuat peta imej, khususnya bagaimana untuk melakukannya dengan Dreamweaver? . Proses ini tidak begitu sukar, tetapi ia tidak mudah, jadi anda harus mempunyai pengalaman sebelum anda memulakannya.

Bermula

Mari kita mulakan. Langkah pertama yang perlu anda ambil ialah menambah imej ke halaman web anda. Anda kemudiannya akan mengklik imej untuk menyerlahkannya. Dari sana, anda perlu pergi ke menu sifat (dan klik salah satu dari tiga alat lukisan hotspot: segi empat tepat, bulatan atau poligon. Jangan lupa namakan imej anda, yang boleh anda lakukan di bar hartanah. apa-apa yang anda mahu. Gunakan "peta" sebagai contoh.

Sekarang, lukiskan bentuk yang anda mahu pada imej anda menggunakan salah satu alat ini. Jika anda memerlukan tempat segi empat tepat, gunakan rectang. Sama untuk bulatan. Jika anda mahu bentuk hotspot yang lebih rumit, gunakan poligon. Inilah yang mungkin anda gunakan dalam contoh peta Amerika Syarikat, kerana poligon akan membolehkan anda menjatuhkan titik dan membuat bentuk yang sangat rumit dan tidak teratur pada imej

Dalam tetingkap sifat untuk hotspot, taip atau semak imbas ke halaman yang hotspot harus dihubungkan. Inilah yang membuat kawasan yang boleh dikaitkan. Teruskan menambahkan hotspot sehingga peta anda selesai dan semua pautan yang anda mahu tambah telah ditambah.

Sebaik sahaja anda selesai, rreview peta imej anda dalam pelayar untuk memastikan ia berfungsi dengan betul. Klik setiap pautan untuk memastikan ia pergi ke sumber yang betul atau laman web.

Kelemahan Peta Imej

Sekali lagi, ketahuilah bahawa peta imej mempunyai beberapa keburukan, bahkan di luar kekurangan sokongan yang disebutkan di atas dengan laman web yang responsif. Bunyi, butiran kecil mungkin dikaburkan dalam peta imej. Sebagai contoh, peta imej geografi boleh membantu menentukan benua mana yang berasal dari pengguna, tetapi peta ini mungkin tidak terperinci untuk menentukan asal negara pengguna. Ini bermakna peta imej boleh membantu menentukan jika pengguna berasal dari Asia tetapi bukan dari Kemboja khususnya.

Peta imej juga boleh memuat secara perlahan. Mereka tidak boleh digunakan beberapa kali di laman web kerana mereka menempati terlalu banyak ruang untuk digunakan pada setiap halaman laman web. Terlalu banyak peta imej pada satu halaman akan membuat kesesakan yang serius dan kesan besar pada prestasi tapak .

Akhirnya, peta imej mungkin tidak mudah bagi pengguna dengan masalah visual untuk mengakses. Jika anda menggunakan peta imej, anda juga harus membuat sistem navigasi lain untuk pengguna ini sebagai alternatif.

Pokoknya

Saya menggunakan peta imej dari semasa ke semasa apabila saya cuba menyusun demo ringkas reka bentuk dan bagaimana ia berfungsi. Contohnya, saya mungkin mengejek reka bentuk untuk aplikasi mudah alih dan saya mahu menggunakan peta imej untuk mencipta hotspot untuk mensimulasikan interaktiviti aplikasi. Ini lebih mudah untuk dilakukan daripada kod aplikasi, atau bahkan membina laman web dummy yang dibina mengikut piawaian semasa dengan HTML dan CSS. Dalam contoh khusus ini, dan kerana saya tahu peranti apa yang saya akan demo reka bentuk dan boleh skala kod ke peranti itu, peta imej berfungsi, tetapi memasukkannya ke tapak pengeluaran atau aplikasi sangat rumit dan sepatutnya dielakkan pada hari ini laman web.

Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 9/7/17.