Sut i Wrap Testun o Gwmpas Delwedd

Edrychwch ar unrhyw dudalen we a gwelwch gyfuniad o gynnwys testun a delweddau. Mae'r ddau elfen hon yn gynhwysion hanfodol yn llwyddiant gwefan. Y cynnwys testun fydd yr ymwelwyr y bydd y wefan yn ei ddarllen a pha beiriannau chwilio fydd yn eu defnyddio fel rhan o'u algorithmau safle. Bydd delweddau yn ychwanegu diddordeb gweledol i'r safle ac yn helpu i ganolbwyntio ar gynnwys y testun.

Mae ychwanegu testun a delweddau i wefannau yn hawdd. Ychwanegir testun gyda tagiau HTML safonol fel paragraffau, penawdau a rhestrau, tra bod delweddau wedi'u gosod ar dudalen gyda'r elfen . Unwaith y byddwch wedi ychwanegu delwedd i'ch tudalen we, fodd bynnag, efallai y byddwch am gael y testun yn llifo wrth ymyl y ddelwedd, yn hytrach na'i alinio isod (sef y ffordd ddiofyn y bydd delwedd wedi'i ychwanegu at god HTML yn ei rendro yn y porwr). Yn dechnegol, mae dwy ffordd y gallwch chi gyflawni'r edrychiad hwn, naill ai trwy ddefnyddio CSS (a argymhellir) neu drwy ychwanegu'r cyfarwyddiadau gweledol yn uniongyrchol i'r HTML (heb ei argymell, gan eich bod am gadw gwahaniad arddull a strwythur ar gyfer eich gwefan).

Defnyddio CSS

Y ffordd gywir o newid y ffordd y mae testun testun a lluniau tudalen a sut mae eu harddulliau gweledol yn ymddangos yn y porwr gyda CSS . Cofiwch, gan ein bod yn sôn am newid gweledol ar y dudalen (gan wneud llif testun dros ddelwedd), mae hyn yn golygu ei fod yn faes Taflenni Arddull Cascading.

1. Yn gyntaf, ychwanegwch eich delwedd i'ch tudalen we. Cofiwch eithrio unrhyw nodweddion gweledol (fel gwerthoedd lled ac uchder) o'r HTML honno. Mae hyn yn bwysig, yn enwedig ar gyfer gwefan ymatebol lle bydd maint y llun yn amrywio yn seiliedig ar y porwr. Bydd rhai meddalwedd, fel Adobe Dreamweaver, yn ychwanegu gwybodaeth lled ac uchder i ddelweddau a fewnosodir gyda'r offeryn hwnnw, felly gwnewch yn siŵr eich bod yn dileu'r wybodaeth hon o'r cod HTML! Gwnewch yn sicr, fodd bynnag, i gynnwys testun alt priodol . Dyma enghraifft o sut y gall eich cod HTML edrych:
2. Ar gyfer dibenion arddull, gallwch hefyd ychwanegu dosbarth i ddelwedd. Y gwerth dosbarth hwn yw'r hyn y byddwn yn ei ddefnyddio yn ein ffeil CSS. Sylwch fod y gwerth a ddefnyddiwn yma yn fympwyol, er, ar gyfer yr arddull arbennig hon, rydym yn tueddu i ddefnyddio gwerthoedd "chwith" neu "dde", gan ddibynnu ar ba ffordd yr ydym am i'n delwedd gael ei alinio. Rydym yn canfod bod cystrawen syml i weithio'n dda a bod yn hawdd i eraill a allai orfod rheoli safle yn y dyfodol i'w deall, ond gallech roi unrhyw werth dosbarth rydych chi ei eisiau.
   2. Drwy'i hun, ni fydd y gwerth dosbarth hwn yn gwneud dim. Ni chaiff y ddelwedd ei alinio'n awtomatig ar ochr chwith y testun. Ar gyfer hyn, mae angen inni droi at ein ffeil CSS erbyn hyn.

1. Yn eich taflen arddull, gallwch nawr ychwanegu'r arddull ganlynol:
   1. .chwith {
   2. arnofio: chwith;
   3. padio: 0 20px 20px 0;
   4. }
   5. Yr hyn a wnaethoch yma yw defnyddio'r eiddo "arnofio" CSS , a fydd yn tynnu'r ddelwedd o lif dogfennau arferol (y ffordd y byddai'r ddelwedd fel arfer yn ei arddangos, gyda'r testun wedi'i alinio o dan ei) a bydd yn ei alinio i ochr chwith ei gynhwysydd . Mae'r testun sy'n dod ar ei ôl yn y marc HTML gyda nawr yn ei gwmpasu. Fe wnaethom hefyd ychwanegu rhai gwerthoedd padio fel na fyddai'r testun hwn ond yn union yn erbyn y ddelwedd. Yn lle hynny, bydd ganddo rywfannau rhyfeddol a fydd yn weledol yn ddeniadol yn nyluniad y dudalen. Yn y llawlyfr fer CSS ar gyfer padio, fe wnaethom ychwanegu 0 werthoedd i ochr uchaf ac ochr chwith y ddelwedd, a 20 picsel i'w chwith a'r gwaelod. Cofiwch, mae angen ichi ychwanegu peth padio ar ochr dde delwedd wedi'i alinio chwith. Byddai delwedd wedi'i alinio'n iawn (y byddwn yn edrych arno mewn eiliad) yn cael ei osod ar ochr chwith.
2. Os ydych chi'n edrych ar eich tudalen we mewn porwr, dylech chi weld bod eich delwedd wedi'i alinio ag ochr chwith y dudalen ac mae'r testun yn mynd yn ei gwmpas yn hyfryd. Ffordd arall o ddweud hyn yw bod y ddelwedd yn "flodeuo i'r chwith".

1. Os ydych chi eisiau newid y ddelwedd hon i fod wedi'i alinio i'r dde (fel yn yr enghraifft llun sy'n cyd-fynd â'r erthygl hon), byddai'n syml. Yn gyntaf, rhaid i chi sicrhau, yn ychwanegol at yr arddull yr ydym newydd ei ychwanegu at ein CSS ar gyfer gwerth dosbarth "chwith", mae gennym hefyd un ar gyfer alinio'n iawn. Byddai'n edrych fel hyn:
   1. .right {
   2. arnofio: dde;
   3. padio: 0 0 20px 20px;
   4. }
   5. Gallwch weld bod hyn bron yn union yr un fath â'r CSS cyntaf a ysgrifennom. Yr unig wahaniaeth yw'r gwerth a ddefnyddiwn ar gyfer yr eiddo "arnofio" a'r gwerthoedd padlo a ddefnyddiwn (gan ychwanegu rhai at ochr chwith ein llun yn hytrach na'r dde).
2. Yn olaf, byddech yn newid gwerth dosbarth y ddelwedd o "chwith" i "dde" yn eich HTML:
3. Edrychwch ar eich tudalen yn y porwr nawr a dylai eich delwedd fod wedi'i alinio i'r dde gyda thestun yn lapio o'i gwmpas yn daclus. Rydym yn tueddu i ychwanegu'r ddwy arddull, "chwith" a "dde" i'r holl ddalennau arddull fel y gallwn ddefnyddio'r arddulliau gweledol hyn yn ôl yr angen pan fyddwn yn creu tudalennau gwe. Mae'r ddau arddull hyn yn dod yn nodweddion neis, y gellir eu hailddefnyddio y gallwn droi ato pryd bynnag y bydd angen i ni arddull delweddau gyda lapio testun o'u cwmpas.

Gan ddefnyddio HTML yn hytrach na CSS (a Pam na ddylech chi wneud hyn)

Er ei bod yn bosib gwneud testun lapio o gwmpas delwedd gyda HTML, mae safonau gwe yn nodi mai CSS (a'r camau a gyflwynir uchod) yw'r ffordd i fynd er mwyn i ni allu cadw gwahaniad o strwythur (HTML) ac arddull (CSS). Mae hyn yn arbennig o bwysig pan fyddwch chi'n ystyried hynny, ar gyfer rhai dyfeisiadau a chynlluniau, na fydd angen i'r testun hwnnw lifo o gwmpas y ddelwedd. Ar gyfer sgriniau llai, efallai y bydd cynllun gwefan ymatebol yn ei gwneud yn ofynnol bod y testun yn cyd-fynd yn wir islaw'r ddelwedd a bod y ddelwedd yn ymestyn lled llawn y sgrin. Mae hyn yn hawdd ei wneud gydag ymholiadau'r cyfryngau os yw eich arddulliau ar wahân i'ch marc HTML. Yn y byd aml-ddyfais heddiw, lle bydd delweddau a thestun yn ymddangos yn wahanol i wahanol ymwelwyr ac ar wahanol sgriniau, mae'r gwahaniad hwn yn hanfodol i lwyddiant a rheolaeth tudalen we yn y tymor hir.