Kaip apvynioti tekstą aplink vaizdą

Pažvelkite į bet kurį tinklalapį ir pamatysite teksto turinio ir vaizdų derinį. Abu šie elementai yra esminiai svetainės sėkmės elementai. Teksto turinys yra tai, ką svetainės lankytojai skaito ir kokie paieškos varikliai bus naudojami kaip jų reitingavimo algoritmai. Vaizdai bus vizualiai paliesti svetainę ir padės pabrėžti teksto turinį.

Tekstų ir vaizdų pridėjimas į svetaines yra lengvas. Tekstas pridedamas su standartinėmis HTML žymomis, pvz., Pastraipomis, antraštėmis ir sąrašais, o vaizdai pateikiami puslapyje su elementu. Pridėję vaizdą į savo tinklalapį, galbūt norėsite, kad šalia vaizdo būtų naudojamas teksto srautas, o ne lyginamas žemiau jo (tai yra numatytasis būdas, kurį į naršyklę įtraukiamas vaizdas į HTML kodą). Techniškai yra du būdai, kaip galite pasiekti šį išvaizdą, naudodami CSS (rekomenduojama) arba tiesiogiai pridėdami vizualiuosius nurodymus į HTML (nerekomenduojama, nes norite išlaikyti savo svetainės stiliaus ir struktūros atskyrimą).

CSS naudojimas

Teisingas būdas keisti puslapio teksto ir vaizdo išdėstymą ir tai, kaip naršyklėje rodomi jų vizualiniai stiliai, naudojant CSS . Tiesiog prisiminkime, nes mes kalbame apie vizualų puslapio pakeitimą (teksto srauto aplink vaizdą), tai reiškia, kad tai yra kaskadinių stilių lentų domenas.

1. Pirma, pridėkite savo paveikslėlį į savo tinklalapį. Nepamirškite pašalinti bet kokių vaizdinių ypatybių (pvz., Pločio ir aukščio verčių) iš šio HTML. Tai yra svarbu, ypač jautrioje svetainėje, kur vaizdo dydis priklauso nuo naršyklės. Tam tikra programinė įranga, pvz., "Adobe Dreamweaver", pridės pločio ir aukščio informaciją vaizdams, kurie yra įterpti naudojant šį įrankį, todėl būtinai pašalinkite šią informaciją iš HTML kodo! Tačiau įsitikinkite, kad įtrauktumėte tinkamą alt tekstą . Štai pavyzdys, kaip gali atrodyti jūsų HTML kodas:
2. Dėl stiliaus tikslų taip pat galite pridėti klasę prie vaizdo. Ši klasė yra tai, ką mes naudosime mūsų CSS byloje. Atkreipkite dėmesį, kad reikšmė, kurią mes naudojame čia, yra savavališka, nors šiuo konkrečiu stiliumi mes linkę naudoti "kairės" arba "dešinės" reikšmes, priklausomai nuo to, kaip mes norime, kad mūsų vaizdas būtų suderintas. Mes suprantame, kad paprastas sintaksis gerai veikia ir bus lengvas kitiems, kurie galbūt ateityje turės valdyti svetainę, bet galėtumėte pateikti šią bet kokią klasės vertę.
   2. Savo ruožtu šios klasės vertė nieko nedaro. Vaizdas automatiškai nebus suderintas su kairiuoju tekstu. Tam mes turime kreiptis į mūsų CSS failą.

1. Tavo lentelėje stilių dabar galite pridėti tokį stilių:
   1. . left {
   2. plūdė: kairė;
   3. padding: 0 20px 20px 0;
   4. }
   5. Ką jūs čia padarėte, naudokite CSS "plūduriuojančią" savybę , kuri traukia vaizdą iš įprasto dokumentų srauto (taip, kaip šis vaizdas paprastai pasirodys, tekstas bus išlygintas po juo), ir jis bus suderintas su jos konteinerio kairiuoju kraštu . Tekstas, kuris po jo įvyksta HTML žymes, dabar apvyniojamas. Mes taip pat pridėjome keletą papildinių reikšmių, kad šis tekstas nebūtų tiesiogiai prieš vaizdą. Vietoje to, jis turi keletą gražių tarpų, kurie bus vizualiai patrauklios puslapio dizaino. "CSS" stenografijoje, skirtame užpildymui, mes pridėjome 0 vertes vaizdo viršuje ir kairėje, o 20 pikselių - kairėje ir apačioje. Nepamirškite, kad turite pridėti padėtį į kairę išlygintą vaizdą dešinėje pusėje. Teisingas išlygintas vaizdas (kurį mes pažvelgsime akimirksniu) turėtų įklijuoti į kairę pusę.
2. Jei peržiūrėjote savo tinklalapį naršyklėje, dabar turėtumėte pamatyti, kad jūsų vaizdas yra lygiuojamas kairėje puslapio pusėje, o tekstas jį gerai apvyniojamas. Kitas būdas pasakyti, kad vaizdas yra "plūduras į kairę".

1. Jei norite pakeisti šį paveikslėlį, kad jis būtų suderintas su dešine (kaip šiame straipsnyje pateikiamame pavyzdyje), tai būtų paprasta. Pirma, turite įsitikinti, kad be stiliaus, kurį ką tik įtraukėme į mūsų CSS klasės klasės "kairėje", mes taip pat turime vieną, kad galėtume teisingai suderinti. Tai atrodytų taip:
   1. tiesiai {
   2. plūduras: teisė;
   3. padding: 0 0 20px 20px;
   4. }
   5. Galite matyti, kad tai yra beveik identiška pirmajam CSS, kurį mes parašėme. Vienintelis skirtumas yra tai vertybė, kurią naudojame "plūduriuojančiam" nuosavybei ir naudojamoms įklijuotoms reikšmėms (kai kurias dalis pridėjome į kairę, o ne į dešinę).
2. Galiausiai pakeisite vaizdo klipo vertę iš "kairės" į "dešinę" savo HTML:
3. Peržiūrėkite savo puslapį naršyklėje dabar ir jūsų paveikslėlis turi būti išdėstytas dešinėje, kad tekstas būtų gerai apvyniojamas. Mes linkę pridėti abiejų šių stilių, "kairiųjų" ir "teisingų" į visas mūsų stilių lenteles, kad galėtume naudoti šiuos vizualiuosius stilius, kai to reikia, kai mes kurdami tinklalapius. Šie du stiliai tampa gražiais, daugkartinio naudojimo funkcijomis, į kurias mes galime kreiptis, kai mums reikia stiliaus vaizdų su teksto apvyniojimu.

Naudojant HTML vietoj CSS (ir kodėl jūs neturėtumėte tai padaryti)

Nors į HTML formatą galima įklijuoti tekstą, internetiniai standartai nurodo, kad CSS (ir anksčiau pateikti veiksmai) yra būdas eiti, kad galėtume išlaikyti struktūros (HTML) ir stiliaus atskyrimą (CSS). Tai ypač svarbu, kai manote, kad tam tikriems įrenginiams ir išdėstymams gali tekti keisti tekstą aplink vaizdą. Mažesniems ekranams, jautriam svetainės išdėstymui gali prireikti, kad tekstas išties atitiktų žemiau vaizdo ir kad vaizdas tęstų visą ekrano plotį. Tai lengva padaryti naudojant žiniasklaidos užklausas, jei jūsų stiliai yra atskirti nuo HTML žymėjimo. Šiandieniniame kelių įrenginių pasaulyje, kur vaizdai ir tekstas skirtingiems lankytojams ir skirtingiems ekranams skiriasi skirtingai, toks atskyrimas yra būtinas siekiant ilgalaikio interneto puslapio sėkmės ir valdymo.