Kuvalinkkien ja kuvakarttojen luominen

• Saattaa 3, 2024

Tämän viikon vastaus on vastaus lukijakysymykseen - ”Voisitko selittää, kuinka luodaan linkki sivulle HTML-muodossa”. On pari eri tekniikkaa, joita voit käyttää linkitettyihin kuviin. Yksi on linkittää koko kuva HTML-koodiin ja toinen on kuvakartta - jossa saman kuvan eri osat on linkitetty eri paikkoihin.

Linkitetty kuva HTML-muodossa

Pienen kuvan tai kuvakkeen linkittäminen on hyvin yksinkertaista, sinun tarvitsee vain sijoittaa kuvasi linkki hyperlinktiin seuraavasti:



Ainoa mitä tein täällä oli sulkea kuva linkin html-tiedostoon. Tämä on helpoin ja tehokkain tapa linkittää pieni kuva, ja se tehdään usein mukautetuilla luoteilla, kuvakkeilla jne. Mutta entä jos haluat yhden suuren kuvan linkittävän useisiin eri paikkoihin? Tässä vaiheessa kuvan viipalointi on hyödyllistä.

Kuvan viipalointi Photoshopissa

Tämä on erittäin helppo saavuttaa Photoshopissa. Sinun tulisi käyttää kuvaa, joka ei ole liian monimutkainen, koska haluat, että käyttäjät näkevät missä napsauttaa kuvaa selvästi. Haluat myös varmistaa, että käyttäjät ymmärtävät, että heidän on napsautettava kuvaa päästäkseen minne he menevät. Kehitä kuvakarttoja huolellisesti käyttäjän mielessä. Pidä mielessä, että kuvakartat eivät ole yleensä yhtä hakukoneystävällisiä kuin sivun teksti, mutta alt-tunnisteiden oikea käyttö kuvasi sisällä voi auttaa tässä.

Kun kuvasi on luotu, seuraava askel on "viipaloida" kuvaasi. Viipaletyökalukuvake näyttää pieneltä eksaktoveitseltä. Se on lähellä työkalurivin yläosaa ja sijaitsee rajaustyökalun alla - jos napsautat “rajata” -kuvaketta, viipaleiden ja viipaleiden valintatyökalut tulevat näkyviin.

Valitse leikkuutyökalu, pidä hiiren vasenta näppäintä alhaalla ja vedä siivu varovasti haluamaasi kohtaan ja vapauta sitten. Siirry eteenpäin ja jatka koko kuvan viipalointia. Jokaisella kuvan alueella, jonka haluat linkittää toiselle sivulle, pitäisi olla viipale. Mikä tahansa suuri valkoinen alue voi olla yksi viipale.

Kun kuva on leikattu kokonaan, seuraava askel on käyttää “slice select” -työkalua, napsauttaa kutakin viipaletta ja valita sitten viipaletyyppi “image”. Tämän alapuolella täytä sen osoitteen URL-osoite, jonka haluat tämän siivun ohjata, ja seuraa alareunassa oleva alttitunnistekenttä. Muut kentät eivät ole välttämättömiä kuvan yksinkertaista kartoittamista varten. Siirry kunkin viipaleen läpi samalla tavalla, kunnes koko kuva on kartoitettu.

Kun koko kuva on valmis, käytät vaihtoehtoa "tallenna verkkoille ja laitteille". Jos napsautat yläpuolella olevaa "Tiedosto" -painiketta ja katsot alas tyypillisten tallennusvaihtoehtojen alapuolelle, näet vaihtoehdon tallentaa verkkoille ja laitteille. Valitse tämä vaihtoehto ja valintaikkuna avautuu, jossa voit esikatsella kuvan näkymistä. Jos olet tyytyväinen siihen, paina Tallenna-painiketta ja uusi valintaikkuna avautuu. Varmista, että toisessa vaihtoehdossa sanotaan "tallenna kuvat ja HTML", ja tallenna sitten työsi.

Siirry kansioon, johon olet tallentanut HTML-asiakirjan, ja avaa se. Voit kopioida ja liittää tämän koodin omaan HTML-tiedostoosi. Tyypillisesti tämä HTML on vähän huolimaton. Jos hallitset HTML: ää, voit puhdistaa sen mielesi mukaan, mutta sen pitäisi toimia vain hyvin. Varmista, kuten aina, kuvatiedostot jne. Ovat oikeissa paikoissa, muuten kuva ei näy.

Video-Ohjeita: Acrylic pouring - The ring (Saattaa 2024).