Wéi Wrap Text ëm en Bild

Kuckt op all aner Websäit an Dir kënnt eng Kombinatioun vun Textinhalt an Bildmaterial gesinn. Déi zwee Elementer si wichteg Ressourcen am Succès vun enger Websäit. Textinhalt ass wat Site Visiteur liest a wat fir Motoren sinn am Kader vun hire Ranking Algorithmen. Biller ginn visuell Interessi un der Säit an hëlleft den Textinhalt zou.

Text a Biller op Websäiten ass einfach. Text gëtt mat Standard-HTML-Bezeechnungen wéi Paragraphen, Rubriken an Lëschte hinzugefügt, während Biller op enger Säit mat dem Element platzéiert sinn. Wann Dir e Bild op Är Websäit erginn, musst Dir awer den Text direkt niewt dem Bild hunn, anstatt datt et drënner ass (wat ass de Standardart wéi e Bild mat HTML Code am Browser bréngt). Technesch sinn et zwou Méiglechkeeten, Dir kënnt dëst Optrëtt erreechen, entweder mat CSS (recommandéiert) oder duerch d'visuell Instruktioune direkt an d' HTML (net recommandéiert, well Dir d'Trennung vu Stil a Struktur fir Är Websäit pflegt wëllt).

CSS benotzen

De richtege Wee fir d'Art a Weis wéi d'Text an d'Biller vum Layout erofgelueden sinn a wéi hir visuell Stile am Browser ersat ginn ass mat CSS . Gitt mer drun, well mir schwätzen iwwer e visuellen Changement op der Säit (fir Textfuerderen ronderëm e Bild ze maachen) heescht dat heescht dat ass Domänen vum Cascading Style Sheets.

1. Eischt Äert Bild op Är Websäit. Vergiesst keng visuell Charakteristike (wéi Breet an Héichtewäerter) aus dësem HTML aus. Dëst ass wichteg, besonnesch fir eng reaktiouns Websäit wou d'Bildgréisst variéiert op Basis vum Browser. Bestëmmte Software, wéi Adobe Dreamweaver, wäert d'Breet- an d'Héichtinformatioun fir Biller eroflueden, déi mat deem Tool agebaut ginn, also sidd sécher, dës Informatioun vum HTML Code ze bidden! Maacht sécher, datt Dir Äert Argument Text enthält . Hei ass e Beispill vu wéi Äre HTML Code ka kucken:
2. Fir Stilziller benotzt Dir och eng Klass zu engem Bild. Dëse Klasswert ass wat mir an eiser CSS-Datei benotzen. Bedenkt datt de Wäert deen eis hier benotzt, ass willkürlech, obwuel, fir dee besonnesche Stil neideg Wäerter vun "lénks" oder "richteg" sinn, jee no wéi mir wëllen eisen Bild opmaachen. Mir fannen dat einfach Syntax fir gutt funktionnéieren an einfach ze sinn, datt aner Leit kënnen an der Zukunft verwalten fir ze verstoen, awer Dir kënnt dëst all Klassenwert Dir wëllt.
   2. Seng Klassenwert wäert näischt maachen. De Image gëtt net automatesch op lénks vum Text ausgeriicht. Dofir brauche mer elo un eis CSS Datei.

1. In Ären Stilsattell kënnt Dir de folgende Stil addéieren:
   1. .lénks {
   2. fléien: lénks;
   3. Ustellung: 0 20px 20px 0;
   4. }}
   5. Wat Dir gemaach hutt, benotzt d' CSS "Schwimmer" Eegeschafte , déi d'Bild vum normale Dokumententrée zitt (d'Art a Weis datt dëse Biller normalerweis mat der Text ënnersträichen) an et wäert se op der lénkser Säit vum Container ausrichten . Den Text, deen no him an der HTML Markup kommen ass elo mat hinne ëmkreest. Mir hunn och e puer Padding-Wäerter ergänzt fir datt dësen Text net direkt géint d'Bild kënnt. Et ass e puer gutt Staze, déi visuell Attraktiv op der Säit vum Design sinn. An der CSS-Schnappstëftung fir Fëllementer hunn mer 0 Wäerter erop an déi bescht Säit vum Bild eropgeluede an 20 Pixelen op déi lénks a ënnen. Denkt drun, Dir musst e puer Pads an der rietser Säit vun engem lénks ausgeriichtten Bild fügen. E richtege bildëge Bild (dat mir e Moment kucken) wäerte Padding op seng lénks Säit applizéiert hunn.
2. Wann Dir Är Websäit an engem Browser kuckt, musst Dir elo kucken datt Är Bild op der lénkser Säit vun der Säit ausgeriicht ass an den Text gutt schmaacht. Eng aner Manéier fir dëst ze soen, datt d'Bild "Schwämm op der lénkser".

1. Wann Dir wëllt datt Äert Bild geännert ginn op de riets (sou wéi an der Fotonfigur, déi dëse Artikel begleet ass), wier et einfach. Als éischt, musst Dir sécher stellen, datt, niewent dem Stil, deen mer just un eise CSS fir de Klasswert vun "lénks" agefouert hunn, hu mir och eng fir d'richteg Ausrichtung. Et schéngt esou ze kucken:
   1. .riets {
   2. fléien: richteg;
   3. Ustellung: 0 0 20px 20px;
   4. }}
   5. Dir kënnt gesinn, datt dat bal nawell identesch ass mam éischt CSS, dee mir geschriwwen hunn. De eenzegen Ënnerscheed ass de Wäert dee mir fir de "Schwämm" Eegeschafte benotzen an d'Padding Wäerter déi mir benotzen (et gëtt e puer op d'lénks Säit vun eisem Bild anstatt de Recht).
2. Schlussendlech wäers de den Wert vun der Bildklass vun "lénks" op "richteg" an Äert HTML änneren:
3. Kuckt Iech op Är Säit am Browser elo an Äert Bild sollt op der rietser Säit zougänglech a mat Text unzemellen ëmginn. Mir tendéieren all dës Stile, "lénks" a "richteg" fir all eis Stylesheets hinzu fir datt mir dës visuell Stile benotzt wéi néideg sinn, wann mir nei Säiten erstellen. Déi zwee Stiler ginn net gutt, benotzt Wiederverwendbare Fonctiounen, déi mir kënne maachen, wann Dir braucht, Biller mat Text ze kreéieren, déi ronderëm si wéckelen.

HTML benotzen Statt CSS (a firwat Dir et net soll maachen)

Obwuel et méiglech ass, Text ëm en Bild mat HTML ze wandelen, befollegt d'Web Standards datt de CSS (an déi Schrëtt hei ënnendrënner) de Wee ass fir datt mir eng Trennung vu Struktur (HTML) a Stil benotzen (CSS). Dëst ass besonnesch wichteg, wann Dir fannt, datt fir verschidde Apparater a Layout deen Text net däerf am Bild sinn ze fléien. Fir kleng Bildschirmer kënnen e Layout vun der Responsabiliséierter Websäit verlaangen datt den Text wierklech d'Bild ugewisen huet an datt d'Bild déi ganz Breet vum Écran spillt. Dëst ass ganz einfach mat Medien erfrëscht, wann Är Stiler eenzel vun Ärem HTML Markup sinn. An der heiteger Multi-Device Welt, wou Biller a Texter anescht wéi fir verschidden Gäscht an op verschiddene Bildschirmer sinn, ass dës Trennung essentiell fir den langfristeg Erfolleg an d'Gestioun vun enger Websäit.