Skip to content

Kuinka kääriä teksti kuvan ympärille

26 de kesäkuu de 2021

Katso mitä tahansa verkkosivua ja näet yhdistelmän tekstisisältöä ja kuvia. Molemmat elementit ovat välttämättömiä ainesosia verkkosivuston menestykselle. Tekstisisältö on mitä sivuston kävijät lukevat ja mitä hakukoneet käyttävät osana sijoitusalgoritmejaan. Kuvat lisäävät visuaalista kiinnostusta sivustoon ja korostavat tekstisisältöä.

HTML-tunnisteet vs. CSS-tyylit

Tekstin ja kuvien lisääminen verkkosivustoille on helppoa. Teksti lisätään tavallisilla HTML-tunnisteilla, kuten kappaleilla, otsikoilla ja luetteloilla, kun taas kuvat sijoitetaan sivulle, jossa on elementti. Kun olet lisännyt kuvan verkkosivullesi, saatat haluta, että teksti kulkee kuvan viereen sen sijaan, että kohdistat sen alle (mikä on oletus tapa, jolla HTML-koodiin lisätty kuva renderoidaan selaimessa). Teknisesti on kaksi tapaa saavuttaa tämä ilme joko käyttämällä CSS: ää (suositus) tai lisäämällä visuaaliset ohjeet suoraan HTML-koodiin (ei suositella, koska haluat säilyttää verkkosivustosi tyylin ja rakenteen erillisyyden).

Kuinka käyttää CSS: ää tekstin kulkemiseen kuvan ympärillä

CSS: llä on oikea tapa muuttaa sivun tekstin ja kuvien asettelua ja niiden visuaalista tyyliä selaimessa. Muista vain, koska puhumme sivun visuaalisesta muutoksesta (tekstin siirtämisestä kuvan ympärille), se tarkoittaa, että se on CSS-tyylitaulukoiden verkkotunnus.

  1. Lisää ensin kuvasi verkkosivullesi. Muista sulkea pois kaikki visuaaliset ominaisuudet (kuten leveys- ja korkeusarvot) HTML-koodista. Tämä on tärkeää etenkin reagoivalla verkkosivustolla, jossa kuvan koko vaihtelee selaimen mukaan. Tietyt ohjelmistot, kuten Adobe Dreamweaver, lisäävät leveys- ja korkeustietoja työkaluun lisättyihin kuviin, joten muista poistaa nämä tiedot HTML-koodista! Muista kuitenkin lisätä sopiva vaihtoehtoinen teksti. Tässä on esimerkki HTML-koodisi ulkoasusta:

    type = ”code”>

  2. Suunnittelua varten voit lisätä luokan myös kuvaan. Tätä luokan arvoa käytämme CSS-tiedostossamme. Huomaa, että tässä käyttämämme arvo on mielivaltainen, vaikka tälle tyylille meillä on tapana käyttää arvoja ”vasen” tai ”oikea”, riippuen siitä, miten haluamme kuvan kohdistuvan. Olemme havainneet, että yksinkertainen syntaksin on toimittava hyvin ja muiden, joiden on ehkä ylläpidettävä sivustoa tulevaisuudessa, ymmärtäminen helposti, mutta voit antaa tälle minkä tahansa luokan arvon.

    type = ”code”> Itse asiassa tämä luokan arvo ei tee mitään. Kuvaa ei kohdisteta automaattisesti tekstin vasemmalle puolelle. Tätä varten meidän on nyt palattava CSS-tiedostoon.

  3. Tyylitaulukkoon voit nyt lisätä seuraavan tyylin: .left {

    type = ”code”> kellua: vasen;

    type = ”code”> täyte: 0 20px 20px 0;

    type = ”code”>}

    type = ”code”> Tässä teit CSS: n ”float” -ominaisuuden, joka vetää kuvan normaalista asiakirjavirrasta (tavalla, jolla kuva normaalisti näytetään, tekstin ollessa sen alla) ja tasaa sen astian vasemmalle puolelle. Sen jälkeen HTML-merkinnässä oleva teksti kiertyy sen ympärille. Lisäsimme myös joitain täytearvoja, jotta tämä teksti ei vastoin kuvaa. Sen sijaan siinä on hienoja välejä, jotka ovat visuaalisesti houkuttelevia sivun suunnittelussa. CSS-lyhenteessä täytteenä lisättiin 0 arvoa kuvan ylä- ja vasemmalle puolelle ja 20 pikseliä vasemmalle ja alareunalle. Muista, että sinun on lisättävä täyte vasemmalle tasatun kuvan oikealle puolelle. Oikealle tasatun kuvan (jota tarkastelemme hetkessä) vasemmanpuoleiseen reunaan olisi kiinnitetty pehmuste.

  4. Jos tarkastelet verkkosivua selaimessa, sinun pitäisi nyt nähdä, että kuvasi on kohdistettu sivun vasempaan reunaan ja teksti kiertyy kauniisti sen ympärille. Toinen tapa sanoa tämä on, että kuva ”kelluu vasemmalle”.

  5. Jos haluat muuttaa tämän kuvan tasattavaksi oikealle (kuten tämän artikkelin mukana olevassa kuvassa), se olisi yksinkertaista. Ensinnäkin, sinun on varmistettava, että sen tyylin lisäksi, jonka juuri lisäsimme CSS: ään luokan ”vasen” arvolle, meillä on myös oikea tasaus. Se näyttäisi tältä: .right {

    type = ”code”> float: oikea;

    type = ”code”> täyte: 0 0 20px 20px;

    type = ”code”>}

    type = ”code”> Voit nähdä, että tämä on melkein identtinen ensimmäisen kirjoittamamme CSS: n kanssa. Ainoa ero on arvo, jota käytämme ”float” -ominaisuudelle, ja käyttämämme pehmustearvot (lisäämällä joitain kuvan vasemmalle puolelle oikean sijaan).

  6. Lopuksi muuttaisit kuvan luokan arvon ”vasemmalta” oikealle HTML-koodissasi:

    type = ”code”>

  7. Katso sivusi selaimessa nyt, ja kuvasi tulisi kohdistaa oikealle tekstin kanssa, joka on kääritty siististi sen ympärille. Meillä on tapana lisätä molemmat tyylit, ”vasen” ja ”oikea” kaikkiin tyylitaulukoihimme, jotta voimme käyttää näitä visuaalisia tyylejä tarpeen mukaan luodessamme verkkosivuja. Näistä kahdesta tyylistä tulee mukavia, uudelleenkäytettäviä ominaisuuksia, joihin voimme kääntyä aina, kun meidän on suunniteltava kuvia tekstin ympärille.

Käytä HTML: ää CSS: n sijaan (ja miksi sinun ei pitäisi tehdä tätä)

Vaikka tekstiä on mahdollista kiertää kuvan ympärille HTML: llä, verkkostandardit sanovat, että CSS (ja yllä esitetyt vaiheet) on oikea tapa edetä, jotta voimme säilyttää rakenteen (HTML) ja tyylin (CSS) erotuksen. Tämä on erityisen tärkeää, kun otetaan huomioon, että joillekin laitteille ja asetteluille kyseinen teksti ei saa täytyy virrata kuvan ympäri. Pienemmissä näytöissä reagoiva verkkosivuston asettelu saattaa edellyttää, että teksti todellakin kohdistuu kuvan alle ja että kuva venyttää koko näytön leveyden. Tämä on helppo tehdä mediakyselyillä, jos tyylisi ovat erillään HTML-merkinnöistä. Nykyisessä monilaitteisessa maailmassa, jossa kuvat ja teksti näkyvät eri tavoin eri kävijöille ja eri näytöillä, tämä erottaminen on välttämätöntä verkkosivun pitkäaikaiselle menestykselle ja hallinnalle.

Alusta mla apa chicago Sinun viitteesi

Kyrnin, Jennifer. ”Kuinka kääriä teksti kuvan ympärille.” ThoughtCo, toukokuu. 14, 2021, thinkco.com/wrapping-text-around-image-3466530.
Kyrnin, Jennifer. (2021, 14. toukokuuta). Kuinka kääriä teksti kuvan ympärille. Haettu osoitteesta https://www.thoughtco.com/wrapping-text-around-image-3466530
Kyrnin, Jennifer. ”Kuinka kääriä teksti kuvan ympärille.” ThoughtCo. https://www.thoughtco.com/wrapping-text-around-image-3466530 (käytetty 26. kesäkuuta 2021).