Savjeti za kreiranje mape sa Dreamweaver-om

Prednosti i nedostaci korišćenju mapa slika

Postojala je poenta u istoriji web dizajna gde su mnoge lokacije koristile funkciju poznatu kao "mape slika". Ovo je lista koordinata vezanih za određenu sliku na stranici. Ove koordinate stvaraju područja hiperpovezivanja na toj slici, neophodno dodavanje "vrućih tačaka" grafici, od kojih se svaka može kodirati kako bi se povezala na različita mjesta. Ovo je mnogo drugačije od dodavanja oznake veze na sliku, što bi uzrokovalo da cela grafika postane jedna velika veza sa jednim odredištem.

Primjeri - zamislite da imate grafičku datoteku sa imidžom Sjedinjenih Država. Ako ste želeli da svaka država bude "klikna", pa će ići na stranice o tom specifičnom stanju, to možete uraditi sa mapom slika. Slično tome, ako ste imali sliku muzičke grupe, mogli biste da koristite mapu slika da biste svakom pojedinačnom članu mogli kliknuti na narednu stranicu o tom članu benda.

Da li su slike slike korisne? Svakako su bili, ali su na današnjem Vebu pale iz usluge. To je, barem djelomično, jer mape za slike zahtevaju specifične koordinate za rad. Sajtovi danas su izgrađeni da budu odzivni i slike skale zasnovane na veličini ekrana ili uređaja. To znači da se unapred podešene koordinate, na čemu prikazuju karte za slike, raspadaju kada se skali lokacije i slike menjaju. Zbog toga se karte za slike retko koriste na produkcijskim lokacijama danas, ali i dalje imaju prednosti za demo-snimke ili primerke u kojima uveličavate veličinu stranice.

Želite znati kako napraviti mapu slika, konkretno kako to učiniti sa Dreamweaver-om? . Proces nije naročito težak, ali nije ni lak, tako da bi trebalo da imate iskustva pre nego što počnete.

Počinjemo

Hajde da počnemo. Prvi korak koji treba da preduzmete je da dodate sliku na svoju web stranicu. Zatim ćete kliknuti na sliku kako biste je označili. Odatle, potrebno je da odete do menija sa svojstvima (i kliknete na jedan od tri alatke za crtanje tačaka: pravougaonik, krug ili poligon). Ne zaboravite da imenujete svoju sliku koja možete da uradite u traci svojstava. to je sve što želite. Koristite "mapu" kao primer.

Sada, nacrtajte oblik koji želite na vašoj slici pomoću jednog od ovih alata. Ako vam trebaju pravougaone tačke, koristite rektanj. Isto za krug. Ako želite više složene pristupne tačke, koristite poligon. To je ono što biste verovatno iskoristili na primeru mape SAD-a, pošto će vam poligon omogućiti da ispuštate poene i da kreirate veoma složene i nepravilne oblike na slici

U prozoru svojstava za pristupnu tačku ukucajte ili pretražite stranicu na koju treba povezati hotspot. To je ono što stvara tu povezanu površinu. Nastavite sa dodavanjem vrućih tačaka dok vaša mapa nije popunjena i dodate sve linkove koje želite dodati.

Kada završite, pregledajte mapu slika u pregledaču kako biste se uverili da to funkcioniše ispravno. Kliknite na svaku vezu da biste osigurali da ide na odgovarajući resurs ili web stranicu.

Nedostaci Mape slika

Još jednom, budite svjesni da mape slika imaju nekoliko razloga, čak i izvan navedenog nedostatka podrške s odgovarajućim web stranicama. Firme, mali detalji mogu biti zamagljeni na kartici slika. Na primjer, geografske mape slika mogu pomoći u određivanju od kojeg kontinenta je korisnik, ali ove mape možda neće biti dovoljno detaljne za identifikaciju zemlje porekla korisnika. To znači da mapa slike može pomoći da se utvrdi da li je korisnik iz Azije, a ne iz Kambodže.

Karte za slike mogu se takođe polagati. Ne bi trebalo da se koriste više puta na veb lokaciji jer zauzimaju previše prostora za korišćenje na svakoj stranici web stranice. Previše mape slika na jednoj stranici stvaraće ozbiljno usko grlo i veliki uticaj na performanse sajta .

Na kraju, slike za slike možda neće biti lako za korisnike sa vizuelnim problemima za pristup. Ako ste koristili mape slika, takođe bi trebalo da napravite još jedan navigacioni sistem za ove korisnike kao alternativu.

Bottom Line

S vremena na vrijeme koristim mape slika kada pokušavam da sastavim brzi demo dizajna i kako to funkcioniše. Na primjer, možda se isprobavam dizajnom za mobilnu aplikaciju i želim koristiti mape slika za kreiranje vrućih tačaka za simuliranje interaktivnosti aplikacije. Ovo je mnogo lakše uraditi nego što bi bilo kodiranje aplikacije, ili čak izgraditi lažne web stranice izgrađene prema trenutnim standardima pomoću HTML i CSS-a. U ovom konkretnom primeru i zato što znam kakav uređaj ću demo dizajnirati i da mogu da skali kod na taj uređaj, mapa slike radi, ali stavljanje na proizvodnu lokaciju ili aplikaciju je vrlo teško i trebalo bi da se izbegava na današnjem web stranice.

Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 9/7/17.