Spletne strani se razlikujejo od vsakega komunikacijskega medija, ki je prišel pred njimi. Ena od glavnih stvari, ki določajo spletne strani poleg prejšnjih medijskih formatov, kot so tisk, radio in celo televizija, je koncept " hiperpovezave ".
Hiperpovezave, ki so prav tako znane kot "povezave", so tisto, kar naredi splet tako dinamičen. Za razliko od tiskane publikacije, ki se lahko sklicuje na drug članek ali drug vir, lahko spletne strani uporabljajo te povezave, da dejansko pošljejo obiskovalce na te druge strani in vire. Noben drug oddajni medij to ne more storiti. Oglas lahko poslušate na radiu ali pogledu na televiziji, vendar ni nobenih hiperpovezav, ki bi vas lahko pripeljale do podjetij v teh oglasih, kot jih lahko spletna stran zlahka naredi. Povezave so res neverjetno komunikacijsko orodje in orodje za interakcijo!
Povezave, ki jih najdete na spletni strani, so pogosto besedilna vsebina, ki usmerja obiskovalce na druge strani istega spletnega mesta. Navigacija spletnega mesta je eden od primerov besedilnih povezav v praksi, vendar povezav ni treba temeljiti na besedilih. Prav tako lahko preprosto povežete slike na vaši spletni strani. Oglejmo si, kako je to storjeno, nato pa še nekaj primerov, kjer bi radi uporabili slikovne hiperpovezave.
Kako povezati sliko
Prva stvar, ki jo boste morali storiti, je, da sliko postavite v svoj HTML dokument. Skupna uporaba povezave na podlagi slike je logotip spletnega mesta, ki je nato povezan z domačo stranjo spletnega mesta. V spodnji kodi spodaj je datoteka, ki jo uporabljamo, SVG za naš logotip. To je dobra izbira, saj bo omogočila, da bo naša slika za različne resolucije ločena, hkrati pa ohranja kakovost slike in majhno skupno velikost datoteke.
Evo, kako bi svojo sliko postavili v HTML-dokument:
Okoli slikovne oznake zdaj dodate sidrni člen, ki odpira sidrni element pred sliko in zaprite sidro po sliki. To je podobno, kako bi povezali besedilo, samo namesto zaviti besed, ki jih želite povezati s sidrnimi oznakami, obesite sliko. V našem spodnjem primeru se povezujemo na domačo stran našega spletnega mesta, ki je "index.html".
Ko dodate ta HTML na svojo stran, ne postavljajte nobenih presledkov med sidrno oznako in slikovno oznako. Če boste to storili, bodo nekateri brskalniki dodali malo klopov poleg slike, kar bo videti čudno.
Podoba logotipa bi zdaj delovala tudi kot gumb za domačo stran, kar je v teh dneh precej spletni standard. Upoštevajte, da v naši oznaki HTML ne vključujemo vizualnih slogov, na primer širine in višine slike. Te vizualne sloge bomo pustili v CSS in ohranili čisto ločitev strukture HTML in stilov CSS.
Ko pridete do CSS, slogi, ki jih pišete za ciljanje na to logotipsko grafiko, lahko vključujejo velikost slike, vključno z odzivnimi slogi za prijazne slike, ki so primerne za več naprav, in vse slike, ki jih želite dodati na sliko / povezavo, kot so meje ali CSS spustite sence. Lahko tudi podate svojo sliko ali povežete atribut razreda, če ste potrebovali dodatne "kljuke", ki jih lahko uporabljate s slogmi CSS.
Uporabite primere za povezave med slikami
Torej dodajanje slikovne povezave je precej enostavno. Kot smo pravkar videli, vse, kar morate narediti, je, da obesite sliko z ustreznimi oznakami sidra. Naslednje vprašanje je morda "kdaj bi dejansko to počeli v praksi poleg zgornjega primera povezav z logotipom / domačo stranjo?"
Tukaj je nekaj misli:
- Sličice v galeriji, ki povezujejo večje različice teh slik.
- Slike, ki se sami uporabljajo za predstavitev vsebine, kot so slike izdelkov za spletno mesto e-trgovine.
- Teaser slike, ki so del druge vsebine, kot članek v blogu ali sporočilo za javnost, ki ljudi privabijo, da opazijo, da jim ta vsebina dodeli ciljno območje, da se dotaknete ali kliknete, če želite prebrati celoten članek.
- Ikone, ki se uporabljajo kot gumbi za povezovanje s specifičnimi funkcijami ali strani znotraj spletnega mesta.
- Povezave družabnih medijev, ki uporabljajo prepoznavne logotipe na različnih spletnih mestih socialnih medijev, ki so pomembne za to spletno mesto ali podjetje.
- Slike, ki se uporabljajo kot gumbi za določene funkcije, kot so predstavitve obrazcev (opozorila o najboljših praksah - z vidika učinkovitosti spletnega mesta, gumbe, oblikovane zgolj s CSS, so boljša izbira kot gumbi za slike).
Opomnik pri uporabi slik
Slike lahko igrajo pomembno vlogo pri uspehu spletne strani. Eden od zgornjih primerov je omenjen z uporabo slik skupaj z drugo vsebino, da bi pritegnili pozornost na to vsebino in jo ljudje prebrali.
Pri uporabi slik morate biti pozorni na izbiro prave slike za vaše potrebe , to vključuje pravilno sliko predmeta, format in tudi poskrbite, da bodo vse slike, ki jih uporabljate na vašem spletnem mestu, ustrezno optimizirane za dostavo spletnega mesta . To se morda zdi veliko dela samo za dodajanje slik, vendar je izplačilo vredno! Slike lahko zelo veliko pripomorejo k uspešnosti spletnega mesta.
Ne oklevajte se za uporabo ustreznih slik na vaši spletni strani in jih po potrebi povežite, da interaktivno dodate svojo vsebino, vendar se tudi zavedajte teh najboljših praks in teh grafik in povezav pravilno in odgovorno uporabite pri svojem delu spletnega oblikovanja.