Kuidas teksti ümbritsev pilt

Vaadake ükskõik millist veebilehte ja näete teksti sisu ja pildi kombinatsiooni. Mõlemad elemendid on veebisaidi edukuse peamised koostisosad. Teksti sisu on see, mida saidi külastajad loevad ja millised otsingumootorid kasutavad oma positsiooni algoritmide osana. Pilte lisavad saidile visuaalset huvi ja aitavad rõhutada teksti sisu.

Tekstide ja piltide lisamine veebisaitidele on lihtne. Tekst lisatakse standardsete HTML-märgistega, nagu lõigud, pealkirjad ja loendid, samas kui pildid asetatakse lehele koos elemendiga . Kui olete oma veebilehele pildid siiski lisanud, võite soovida, et pildi kõrval asuks tekstivoog, selle asemel, et joondus selle all (mis on vaikimisi brauseris HTML-koodi lisatud kujutis). Tehniliselt on selle välimuse saavutamiseks kaks võimalust kas CSS-i (soovitatav) abil või visuaalsete juhiste lisamisega otse HTML-i (ei ole soovitatav, sest soovite säilitada oma veebisaidi stiili ja struktuuri eraldamist).

CSS-i kasutamine

Õige viis muuta lehe teksti ja piltide paigutust ning kuidas nende visuaalsed stiilid brauseris kuvatakse koos CSS-iga . Pidage meeles, et kuna me räägime lehekülje visuaalsetest muudatustest (pildi tekstivoogude loomine), tähendab see seda, et tegemist on kaskaaditavate stiilide lehtedega.

1. Esiteks lisage oma pilt oma veebilehele. Ärge unustage selle HTML-i mis tahes visuaalsete omaduste (nt laiuse ja kõrguse väärtused) välistamiseks. See on oluline, eriti tundlikule veebisaidile, kus pildi suurus sõltub brauserist. Teatud tarkvara, nagu Adobe Dreamweaver, lisab selle tööriista abil sisestatud kujutistele laiuse ja kõrguse teabe, nii et eemaldage see teave HTML-koodist! Kindlasti tuleb siiski lisada asjakohane alt tekst . Siin on näide sellest, kuidas teie HTML-kood võib välja nägema.
2. Stiililiseks kasutamiseks võite ka klassi lisada pildile. Selle klassi väärtus on see, mida me kasutame meie CSS-failis. Pange tähele, et väärtus, mida me siin kasutame, on meelevaldne, kuigi selle konkreetse stiili puhul kaldume kasutama "vasakule" või "paremale" väärtusi sõltuvalt sellest, kuidas tahame, et meie pilt joonduks. Leiame, et lihtne süntaks toimib hästi ja see on lihtne teistele, kes võivad tulevikus saidi haldamiseks mõista, kuid võite anda selle mis tahes klassi väärtuse, mida soovite.
   2. Selle klassi väärtus iseenesest ei tee midagi. Pilti ei saa automaatselt joondada teksti vasakule. Selleks peame nüüd pöörduma meie CSS-faili poole.

1. Teie stiililaadis saate nüüd lisada järgmise stiili:
   1. . left {
   2. ujuk: vasakule;
   3. padding: 0 20px 20px 0;
   4. }
   5. Siin kasutasite CSS-i hõljuvat omadust , mis tõmbab pildi tavapärasest dokumendivoogust (see, kuidas see pilt tavaliselt kuvatakse, mille tekst on joondatud selle all) ja joondab selle konteineri vasakul küljel . Teksti, mis järgneb sellele HTML-i märgistuses, on see nüüd ümbritsetud. Lisasime ka mõningad lisandväärtused, nii et see tekst ei oleks otseselt pildi vastu. Selle asemel on see mõni kena vahemik, mis on lehe kujunduses visuaalselt atraktiivne. Kleebise CSS-i stenogrammis lisati pildi üla- ja vasakpoolsele küljele 0 väärtust ja vasakule ja alt 20 pikslit. Pidage meeles, et peate lisama mõnda polsterit vasakule joondatud pildi parempoolsele poolele. Paremini joondatud pilt (mida me mõnel hetkel vaatleme) peaks selle vasakpoolsele küljele rakendama polsterit.
2. Kui vaatate oma veebilehte brauseris, peaksite nüüd nägema, et teie pilt on lehe vasakul küljel joondatud ja tekst ümbritseb seda kenasti. Veel üks viis seda öelda on see, et pilt on "vasakule ujutatud".

1. Kui soovite seda pilti paremini joondada (nagu käesolevale artiklile lisatud foto näites), oleks see lihtne. Esiteks peate veenduma, et lisaks stiilile, mille me just CSS-ile klassiruumi "vasakpoolse" väärtuse juurde lisati, on meil ka üks parempoolse joonduse jaoks. See oleks selline:
   1. . õige {
   2. ujuk: parem;
   3. padding: 0 0 20px 20px;
   4. }
   5. Näete, et see on peaaegu identne meie esimese CSS-i kirjutamisega. Ainus erinevus on väärtus, mida me kasutame "ujuva" vara ja kasutatavate lisandväärtuste jaoks (lisades mõned pildi vasakule küljele parema asemel).
2. Lõpuks muudaksite oma HTML-i pildi klassi väärtusest "vasakul" ja "paremal":
3. Vaadake oma lehte brauseris kohe ja teie pilt peaks olema paremale ja tekstiga, mis on seda ümbritsetud. Me kipume lisama mõlemad need stiilid, "vasakule" ja "õigesse" kõigisse meie stiilide tabelitesse, et saaksime neid visuaalseid stiile kasutada veebilehtede loomise korral. Need kaks stiili muutuvad ilusateks, korduvkasutatavateks funktsioonideks, mida me saame pöörduda, kui me peame kujundama pilte teksti ümbritsemisega.

HTML-i kasutamine CSS-i asemel (ja miks seda ei peaks tegema)

Isegi kui HTML-vormingus pilti on võimalik ümbritseda, siis veebistandardid näitavad, et CSS (ja ülaltoodud sammud) on viis, kuidas hoida struktuuri (HTML) ja stiili (CSS) eraldamist. See on eriti oluline, kui arvate, et mõne seadme ja paigutuse puhul ei pruugi see tekst pildi ümber voolata. Väiksematele ekraanidele võib reageeriv veebisaidi paigutus nõuda, et tekst tõmbaks tõepoolest pildi alla ja pilt ulatub kogu ekraani laiuseni. Seda saab hõlpsasti teha meediumipäringutega, kui teie stiilid on teie HTML-märgistusest eraldiseisvad. Tänapäeva mitme seadme maailmas, kus pildid ja tekst kuvatakse erinevatel külastajatel ja erinevatel ekraanidel erinevalt, on selline eraldamine oluline veebilehe pikaajaliseks eduks ja juhtimiseks.