Tipy pre vytvorenie obrázkovej mapy pomocou programu Dreamweaver

Výhody a nevýhody používania obrázkových máp

V histórii webového dizajnu bolo miesto, kde mnoho stránok používalo funkciu známu ako "obrazové mapy". Toto je zoznam súradníc priradených k určitému obrázku na stránke. Tieto súradnice vytvárajú oblasti hypertextového prepojenia na tomto obrázku, nevyhnutné pridanie "horúcich bodov" do grafiky, z ktorých každá môže byť kódovaná na prepojenie na rôzne miesta. To je veľmi odlišné od pridania značky odkazu na obrázok, čo by spôsobilo, že celá grafika sa stane jedným veľkým odkazom na jediný cieľ.

Príklady - predstavte si grafický súbor s obrázkom Spojených štátov. Ak chcete, aby každý štát bol "klikateľný", aby sa dostali na stránky o danom konkrétnom stave, môžete to urobiť pomocou obrázkovej mapy. Podobne, ak by ste mali obraz hudobnej skupiny, mohli by ste použiť mapu obrázkov, aby ste mohli každý jednotlivý člen kliknúť na nasledujúcu stránku o tomto členovi kapely.

Mapy obrázkov sú užitočné? Určite boli, ale na dnešnej sieti zanikli. Toto je prinajmenšom z časti, pretože obrazové mapy vyžadujú špecifické súradnice pre prácu. Stránky dnes postavené tak, aby boli citlivé a obrazové škály na základe veľkosti obrazovky alebo zariadenia. To znamená, že vopred nastavené súradnice, čo je spôsob práce s obrázkami, rozpadajú sa, keď sa veľkosť webu zmenší a veľkosť obrázkov sa zmenší. To je dôvod, prečo sú mapy obrázkov zriedka používané na produkčných stránkach dnes, ale stále majú výhody pre dema alebo prípady, kedy ste nútili veľkosť stránky.

Chcete vedieť, ako vytvoriť obrazovú mapu, konkrétne ako s Dreamweaverom? , Proces nie je obzvlášť náročný, ale ani to nie je ľahké, takže by ste mali mať nejaké skúsenosti skôr, než začnete.

Začíname

Začnime. Prvým krokom, ktorý musíte urobiť, je pridať obrázok na vašu webovú stránku. Kliknutím na obrázok ju zvýrazníte. Odtiaľ je potrebné prejsť do ponuky vlastností (a kliknúť na jeden z troch nástrojov na kreslenie hotspotu: obdĺžnik, kruh alebo polygón.) Nezabudnite pomenovať svoj obrázok, ktorý môžete urobiť v paneli s vlastnosťami. všetko, čo chcete. Ako príklad použite "mapu".

Teraz nakreslite požadovaný tvar na obrázok pomocou jedného z týchto nástrojov. Ak potrebujete obdĺžnikové škvrny, použite rectange. To isté pre kruh. Ak chcete mať zložitejšie tvary hotspotu, použite polygón. To je to, čo by ste pravdepodobne použili v príklade mapy USA, pretože polygón by vám umožnil upustiť od bodov a vytvoriť veľmi zložité a nepravidelné tvary na obrázku

V okne s vlastnosťami pre hotspot zadajte alebo prejdite na stránku, ku ktorej by mal byť hotspot prepojený. To je to, čo vytvorí túto spojiteľnú oblasť. Pokračujte v pridávaní hotspotov, kým nebude vaša mapa dokončená a všetky odkazy, ktoré chcete pridať, boli pridané.

Akonáhle skončíte, zobrazte mapu obrázkov v prehliadači, aby ste sa uistili, že funguje správne. Kliknite na každý odkaz a uistite sa, že ide o správny zdroj alebo webovú stránku.

Nevýhody obrázkových máp

Opäť si uvedomte, že obrazové mapy majú niekoľko nevýhody, dokonca aj mimo vyššie spomínaného nedostatku podpory s citlivými webovými stránkami. Jedle, malé detaily môžu byť zakreslené na mape obrázkov. Napríklad mapy zemepisných obrazov môžu pomôcť určiť, z ktorého kontinentu sa používateľ nachádza, ale tieto mapy nemusia byť dostatočne podrobné na to, aby určili krajinu pôvodu používateľa. To znamená, že mapa obrázkov môže pomôcť určiť, či používateľ pochádza z Ázie, ale nie z Kambodže.

Obrazové mapy sa môžu tiež načítať pomaly. Nemali by sa používať viackrát na webových stránkach, pretože zaberajú príliš veľa priestoru na každú stránku webovej stránky. Príliš veľa obrázkových máp na jednej stránke by vytvorilo vážne prekážky a mohutný vplyv na výkonnosť webu .

A nakoniec, mapy obrázkov nemusia byť jednoduché pre používateľov s problémami s vizuálnymi prístupmi. Ak ste použili mapy obrázkov, mali by ste alternatívne vytvoriť aj iný navigačný systém pre týchto používateľov.

Spodná čiara

Používam obrazové mapy z času na čas, keď sa snažím dať dohromady rýchle ukážku dizajnu a ako to funguje. Napríklad môžem vynechať dizajn pre mobilnú aplikáciu a chcem používať obrazové mapy na vytvorenie hotspotov na simuláciu interaktívnosti aplikácie. Je to oveľa jednoduchšie, ako by bolo kódovanie aplikácie alebo dokonca vytvorenie fiktívnych webových stránok postavených na súčasných štandardoch pomocou HTML a CSS. V tomto konkrétnom príklade a preto, že viem, na akom zariadení predvediem dizajn a môžem zmeniť kód na toto zariadenie, funguje obrazová mapa, ale uvedenie do výrobnej stránky alebo aplikácie je veľmi zložité a pravdepodobne by sa malo vyhnúť dnešnému webové stránky.

Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 9/7/17.