Kuinka Wrap Text Around Kuva

Katso mitä tahansa verkkosivua ja näet tekstisisältöä ja kuvia. Molemmat elementit ovat olennaisia ​​osia verkkosivujen onnistumisessa. Tekstisisältö on mitä sivuston kävijät lukevat ja mitä hakukoneet käyttävät osana niiden sijoitusalgoritmeja. Kuvat lisäävät visuaalista kiinnostusta sivustoon ja auttavat korostamaan tekstisisältöä.

Tekstin ja kuvien lisääminen sivustoille on helppoa. Teksti lisätään tavallisiin HTML-tageihin, kuten kappaleisiin, otsikoihin ja luetteloihin, kun taas kuvat on sijoitettu sivulle -elementillä. Kun olet lisännyt kuvan Web-sivulle, sinun kannattaa kuitenkin halutessasi olla kuvan vieressä oleva tekstivirta sen sijaan, että se kohdistettaisiin sen alapuolelle (mikä on oletusarvoinen tapa, jolla HTML-koodi lisätään selaimeen). Teknisesti kahdella tavalla voit saavuttaa tämän ulkoasun joko käyttämällä CSS: tä (suositeltavaa) tai lisäämällä visuaaliset ohjeet suoraan HTML-muotoon (ei suositella, koska haluat säilyttää sivustosi tyylin ja rakenteen erottamisen).

CSS: n käyttö

Oikea tapa muuttaa sivun tekstin ja kuvien ulkoasua ja miten niiden visuaaliset tyylit näkyvät selaimessa on CSS: llä . Muista vain, koska puhumme sivun visuaalisesta muutoksesta (tekstin muodostaminen kuvan ympäri), tämä tarkoittaa sitä, että se on Cascading Style Sheetsin verkkotunnus.

1. Liitä ensin kuva Web-sivulle. Muista sulkea pois kaikki HTML-visuaaliset ominaisuudet (kuten leveys- ja korkeusarvot). Tämä on tärkeää varsinkin herkälle sivustolle, jossa kuvakoko vaihtelee selaimen mukaan. Tietyt ohjelmat, kuten Adobe Dreamweaver, lisää leveys- ja korkeustietoja kyseiseen työkaluun liitettyihin kuviin, joten muista poistaa nämä tiedot HTML-koodista! Varmista kuitenkin, että sisällytetät sopivan tekstin . Tässä on esimerkki siitä, miten HTML-koodi voi näyttää:
2. Muokkaustarkoituksiin voit myös lisätä luokan kuvaan. Tämä luokan arvo on se, mitä käytämme CSS-tiedostossamme. Huomaa, että tässä käyttämämme arvo on mielivaltainen, mutta tällä tyylillä meillä on taipumus käyttää "vasemmalla" tai "oikealla" arvoja, riippuen siitä, millä tavoin haluamme kuvan sovittaa. Mielestämme yksinkertainen syntaksi toimii hyvin ja on helppoa muille, jotka joutuvat hallitsemaan sivuston tulevaisuudessa ymmärrettäviksi, mutta voit antaa tämän mitä tahansa haluamaasi luokkaarvoa.
   2. Itse itse tämä luokan arvo ei tee mitään. Kuva ei ole automaattisesti linjassa tekstin vasemmalle puolelle. Tätä varten meidän on nyt käännyttävä CSS-tiedostoomme.

1. Voit lisätä tyylitietosi seuraavaan tyyliin:
   1. .left {
   2. float: vasen;
   3. pehmuste: 0 20px 20px 0;
   4. }
   5. Täällä käytät CSS: n "float" -ominaisuutta , joka vetää kuvan tavallisesta asiakirjavirrasta (tavan, jolla kuva tavallisesti näyttäisi, ja teksti sen alle), ja se kohdistaa sen kontin vasemmalle puolelle . Teksti, joka tulee sen jälkeen HTML-merkintään, kääri sen ympärille. Lisäsimme myös joitain pehmustearvoja, jotta tämä teksti ei olisi suoraan vastakkainen kuvaan nähden. Sen sijaan siinä on hienoja välilyöntejä, jotka ovat visuaalisesti houkuttelevia sivun suunnittelussa. CSS-lyhennettä pehmusteessa lisäsimme 0 arvot kuvan yläosaan ja vasemmalle puolelle ja 20 pikseliä vasemmalle ja alhaalle. Muista, että haluat lisätä jonkin verran vasemmanpuoleisen kuvan oikeaa puolta. Oikea kohdistettu kuva (jota tarkastelemme hetkessä) olisi pehmusteita, joita sovelletaan sen vasemmalle puolelle.
2. Jos katsot verkkosivustasi selaimessa, sinun on nyt katsottava, että kuva on kohdistettu sivun vasemmalle puolelle ja teksti kauniisti ympäröi sitä. Toinen tapa sanoa, että kuva on "kelluva vasemmalle".

1. Jos haluat muuttaa tätä kuvaa oikealle (kuten tämän artikkelin mukana tulevassa kuvasarjassa), se olisi yksinkertainen. Ensinnäkin sinun on varmistettava, että tyyliin, jonka lisäsimme CSS-luokituksemme "vasemman" luokan arvoon, meillä on myös yksi oikealle kohdistukselle. Se näyttää tältä:
   1. .oikea {
   2. float: oikea;
   3. pehmuste: 0 0 20px 20px;
   4. }
   5. Näet, että tämä on lähes 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ä jotain kuvan vasemmalle puolelle oikean sijaan).
2. Lopuksi muutat kuvan luokan arvoa vasemmalta oikealle HTML: ssä:
3. Katsele sivusi selaimessa nyt ja kuvasi on kohdistettava oikealle, ja tekstin ympärillä on neulottua tekstiä. Meillä on taipumus lisätä molemmat tyylit, "vasemmalle" ja "oikealle" kaikille tyylisivuillemme, jotta voimme käyttää näitä visuaalisia tyylejä tarpeen mukaan, kun luomme verkkosivuja. Nämä kaksi tyyliä tulevat mukaviksi, uudelleenkäytettäviksi ominaisuuksiksi, joita voimme kääntyä aina, kun tarvitsemme kuvien muotoilua tekstin ympäröimällä.

HTML-koodin käyttäminen CSS: n sijaan (ja miksi sinun ei pitäisi tehdä tätä)

Vaikka tekstin ympärille on mahdollista tehdä tekstiä HTML: n avulla, web-standardit sanovat, että CSS (ja yllä esitetyt vaiheet) on tapa edetä niin, että pystymme ylläpitämään rakenteiden (HTML) ja tyylin (CSS) erottamista. Tämä on erityisen tärkeää, kun katsot, että joillekin laitteille ja ulkoasulle tekstin ei ehkä tarvitse kulkea kuvan ympärillä. Pienemmissä näytöissä reagoivan sivuston ulkoasu saattaa edellyttää, että teksti todellakin kohdistuu kuvan alapuolelle ja että kuva ulottuu näytön koko leveydelle. Tämä on helppo tehdä mediakyselyillä, jos tyylisi ovat erillisiä HTML-merkinnöistasi. Nykypäivän moni-laite-maailmassa, jossa kuvat ja teksti näyttävät eri tavoin eri vierailijoille ja eri näytöille, erottaminen on välttämätöntä web-sivun pitkän aikavälin menestyksen ja hallinnan kannalta.