Tīmekļa vietnes atšķirībā no visiem saziņas līdzekļiem, kas bija pirms tiem. Viena no galvenajām lietām, kas nosaka tīmekļa vietnes, izņemot iepriekšējos multivides formātus, piemēram, drukātu, radio un pat televīziju, ir hipersaites jēdziens.
Hipersaites, ko parasti sauc arī par saitēm, padara tīmekli tik dinamisku. Atšķirībā no drukātas publikācijas, kas var norādīt uz citu rakstu vai citu resursu, tīmekļa vietnes var izmantot šīs saites, lai faktiski sūtītu apmeklētājus uz šīm citām lapām un resursiem. Neviens cits raidījumu nesējs to nevar izdarīt. Jūs varat dzirdēt reklāmu radio vai televīzijā, taču nav tādu hipersašu, kas varētu jūs nogādāt uz šajās reklāmās esošajām kompānijām, kā to vienkārši var izdarīt vietnei. Saites tiešām ir pārsteidzošs saziņas un mijiedarbības rīks!
Bieži vien saitēs, kas atrodamas tīmekļa vietnē, ir teksta saturs, kas virza apmeklētājus uz citām šīs pašas vietnes lapām. Mājas lapas navigācija ir viens piemērs teksta saitēm praksē, bet saitēm nav jābūt balstītām uz tekstu. Jūs varat arī viegli saistīt attēlus savā vietnē. Apskatīsim, kā tas tiek paveikts, kam seko dažos gadījumos, kad jūs vēlaties izmantot attēlu balstītas hipersaites.
Kā saistīt attēlu
Pirmais, kas jums jādara, ir ievietot attēlu savā HTML dokumentā. Attēlu balstītas saites kopīga izmantošana ir vietnes logotipa grafiks, kas pēc tam tiek saistīts atpakaļ uz vietnes sākumlapu. Tālāk sniegtajā piemēra kodā izmantotais fails ir mūsu logotipa SVG . Tā ir laba izvēle, jo tas ļaus mūsu attēlam pielāgot dažādas izšķirtspējas, vienlaikus saglabājot attēla kvalitāti un nelielu faila lielumu.
Tālāk ir norādīts, kā jūs ievietotu savu attēlu HTML dokumentā.
Apkārt attēla tagam jūs tagad pievienosit enkura saiti, atverot enkura elementu pirms attēla un aizverot enkura pēc attēla. Tas ir līdzīgs tam, kā jūs saitītu tekstu, tikai tā vietā, lai iesaiņotu vārdus, kurus vēlaties pievienot saitei ar enkura tagiem, jūs iesietat attēlu. Turpmākajā piemērā mēs izveidojam saiti uz mūsu vietnes sākumlapu, kas ir "index.html".
Pievienojot šo HTML lapu savai lapai, neievietojiet atstarpes starp enkura tagu un attēla tagu. Ja jūs to izdarīsit, dažas pārlūkprogrammas blakus attēlam pievienos mazas ērces, kas izskatās nepāra.
Tagad logotipa attēls darbosies kā sākumlapas poga, kas šobrīd ir diezgan daudz tīmekļa standarts. Ņemiet vērā, ka mūsu HTML marķējumā neiekļaujam nekādus vizuālos stilus, piemēram, attēla platumu un augstumu. Mēs pametīsim šos vizuālos stilus CSS un uzturēsim skaidru HTML struktūras un CSS stilu nošķiršanu.
Kad jūs nokļūsit CSS, rakstītie stili, lai atlasītu šo logotipa grafiku, varētu ietvert attēla lielumu, tostarp reaģējošos stilus multivides draudzīgiem attēliem, kā arī jebkādus attēlus, kurus vēlaties pievienot attēlam / saitei, piemēram, robežas vai CSS. piliens ēnas. Jūs varētu arī piešķirt savu attēlu vai sasaistīt klases atribūtu, ja jums vajadzīgi papildu "āķi", ko izmantot ar CSS stiliem.
Izmantojiet attēlus saites
Tāpēc attēla saites pievienošana ir diezgan vienkārša. Kā mēs tikko redzējām, viss, kas jums jādara, ir iesaiņot attēlu ar atbilstošiem enkuru tagiem. Jūsu nākamais jautājums varētu būt "kad jūs praktiski to darītu praksē, izņemot iepriekšminēto logotipu / mājas lapas saites piemēru?"
Šeit ir dažas domas:
- Galerijā esošie sīktēlu attēli, kas saistīti ar šo attēlu lielākām versijām.
- Attēli, kas tiek izmantoti vienīgi, lai attēlotu saturu, piemēram, produkta fotoattēlus e-komercijas vietnei.
- Teaser attēli, kas ir daļa no cita satura, piemēram, emuāra rakstu vai preses relīze, liek cilvēkiem pamanīt, ka saturs dod viņiem mērķa apgabalu, lai piesaistītu vai noklikšķinātu, lai lasītu pilnu rakstu.
- Ikonu attēli, kas tiek izmantoti kā pogas, lai izveidotu savienojumu ar konkrētu funkcionalitāti vai vietnes lapām.
- Sociālo mediju saites, kurās tiek izmantoti atpazīstami dažādu sociālo vietņu vietņu logotipi, kas ir svarīgi šai vietnei vai uzņēmumam.
- Attēli, kas tiek izmantoti kā pogas noteiktai funkcionalitātei, piemēram, veidlapu iesniegšana (paraugprakses piezīme - no vietnes veiktspējas viedokļa pogas, kas ir veidotas tikai ar CSS, ir labāka izvēle nekā attēlu pogas).
Atgādinājums, izmantojot attēlus
Attēli var spēlēt svarīgu lomu mājas lapas veiksmē. Viens no iepriekš minētajiem piemēriem, izmantojot attēlus kopā ar citu saturu, pievērš uzmanību šim saturam un ļauj cilvēkiem to izlasīt.
Lietojot attēlus, jums jāpatur prātā, ka jūsu vajadzībām ir atlasīts pareizais attēls , tas ietver arī pareizu attēla priekšmetu, formātu un arī pārliecinieties, vai visi jūsu vietnē izmantotie attēli ir pareizi optimizēti, lai nodrošinātu vietnes piegādi . Tas var likties kā liels darbs, lai pievienotu attēlus, bet tā ir vērts! Attēli tiešām var pievienot tik daudz vietnes panākumus.
Nevilcinieties izmantot atbilstošus attēlus savā vietnē un saistīt šos attēlus, kad nepieciešams, lai interaktīvi pievienotu jūsu saturam, kā arī ievērojiet šo labāko paraugpraksi un pareizi un atbildīgi izmantojiet šīs grafikas / saites tīmekļa dizaina darbā.