Hoe om teks rondom 'n prent om te draai

Kyk na enige webblad en jy sal 'n kombinasie van teksinhoud en beelde sien. Albei hierdie elemente is noodsaaklike bestanddele in die sukses van 'n webwerf. Teksinhoud is wat besoekers sal lees en watter soekenjins sal gebruik as deel van hul posisie algoritmes. Beelde sal visuele belangstelling vir die werf byvoeg en help om die teksinhoud te beklemtoon.

Om teks en prente by webwerwe by te voeg, is maklik. Teks word bygevoeg met standaard HTML-tags soos paragrawe, opskrifte en lyste, terwyl beelde op 'n bladsy geplaas word met die element. Sodra jy 'n prentjie by jou webblad gevoeg het, wil jy dalk die teks langs die prentjie laat vloei, eerder as om dit te onderstreep (wat die verstek is waarop 'n prent wat by HTML-kode gevoeg word, in die blaaier sal vertoon). Tegnies is daar twee maniere om hierdie voorkoms te bereik, óf deur gebruik te maak van CSS (aanbeveel) óf deur die visuele instruksies direk by die HTML in te voeg (nie aanbeveel nie, aangesien jy die skeiding van styl en struktuur vir jou webwerf wil handhaaf).

Gebruik CSS

Die korrekte manier om die manier waarop 'n bladsy se teks en prentuitleg en hoe hul visuele style in die blaaier verskyn, te verander, is met CSS . Onthou net, aangesien ons praat oor 'n visuele verandering op die bladsy (om teks om 'n beeld te maak), beteken dit dat dit die domein van Cascading Style Sheets is.

1. Voeg eers jou prent op jou webblad. Onthou om enige visuele eienskappe (soos breedte en hoogtewaardes) van daardie HTML uit te sluit. Dit is belangrik, veral vir ' n responsiewe webwerf waar die beeldgrootte afhang van die blaaier. Sekere sagteware, soos Adobe Dreamweaver, sal breedte- en hoogte-inligting by foto's voeg wat by daardie instrument geplaas word. Maak seker dat u hierdie inligting uit die HTML-kode verwyder! Maak egter seker dat u toepaslike alt-teks insluit . Hier is 'n voorbeeld van hoe jou HTML-kode mag lyk:
2. Vir stileringsdoeleindes kan jy ook 'n klas by 'n prent voeg. Hierdie klaswaarde is wat ons in ons CSS-lêer sal gebruik. Let daarop dat die waarde wat ons hier gebruik, willekeurig is, maar vir hierdie spesifieke styl gebruik ons ​​waardes van "links" of "regs", afhangende van die manier waarop ons wil hê ons beeld moet in lyn wees. Ons vind daardie eenvoudige sintaksis goed om te werk en maklik vir ander wees wat 'n webwerf in die toekoms moet bestuur om te verstaan, maar u kan dit enige klaswaarde gee wat u wil hê.
   2. Op sigself sal hierdie klaswaarde niks doen nie. Die prentjie word nie outomaties aan die linkerkant van die teks gebind nie. Hiervoor moet ons nou na ons CSS-lêer draai.

1. In jou style heet kan jy nou die volgende styl byvoeg:
   1. .left {
   2. dryf: links;
   3. Padding: 0 20px 20px 0;
   4. }
   5. Wat jy hier gedoen het, gebruik die CSS-float-eienskap , wat die prentjie van normale dokumentvloei sal trek (die manier waarop die prent normaalweg sal vertoon, met die teks wat daarop gemik is) en dit sal na die linkerkant van die houer . Die teks wat daarop volg, word in die HTML-opmerkings aangebring. Ons het ook 'n paar opskrifwaardes bygevoeg, sodat hierdie teks nie net direk teen die prent sou wees nie. In plaas daarvan het dit 'n lekker spasiëring wat visueel aantreklik sal wees in die ontwerp van die bladsy. In die CSS-kortskrif vir opvulling het ons 0 waardes aan die boonste en linkerkant van die prent bygevoeg, en 20 pixels aan die linkerkant en onderkant. Onthou, jy moet die regterkant van 'n linkerbelynde prentjie byvoeg. 'N Reguitlynde prentjie (wat ons binnekort gaan kyk) sal op sy linkerkant toegepas word.
2. As jy jou webblad in 'n blaaier bekyk, moet jy nou sien dat jou prentjie aan die linkerkant van die bladsy gemik is en die teks mooi om dit draai. Nog 'n manier om dit te sê, is dat die prentjie na links gedraai word.

1. As jy hierdie prentjie wil verander om regs te pas (soos in die foto-voorbeeld wat hierdie artikel vergesel), sou dit eenvoudig wees. Eerstens moet jy seker maak dat, benewens die styl wat ons net aan ons CSS bygevoeg het vir die klaswaarde van "links", het ons ook een vir reguitlyn. Dit sal so lyk:
   1. . reg
   2. dryf: regs;
   3. Padding: 0 0 20px 20px;
   4. }
   5. Jy kan sien dat dit byna identies is aan die eerste CSS wat ons geskryf het. Die enigste verskil is die waarde wat ons gebruik vir die "float" eiendom en die polswaardes wat ons gebruik (voeg 'n paar aan die linkerkant van ons prent in plaas van die regterkant).
2. Uiteindelik verander u die waarde van die beeld se klas van "links" na "regs" in u HTML:
3. Kyk nou na jou bladsy in die blaaier nou en jou prentjie moet regs gebind word met teks wat netjies daarheen gaan. Ons is geneig om albei hierdie style, "links" en "regs" by al ons style sheets by te voeg sodat ons hierdie visuele style kan gebruik soos nodig wanneer ons webblaaie skep. Hierdie twee style word lekker, herbruikbare eienskappe waarna ons kan draai wanneer ons beelde met teksomslag rondom hulle moet styl.

Gebruik HTML eerder as CSS (en waarom moet jy dit nie doen nie)

Alhoewel dit moontlik is om teks om 'n beeld met HTML te verpak, stel webstandaarde voor dat CSS (en die stappe wat hierbo aangebied word) die pad is om te gaan sodat ons 'n skeiding van struktuur (HTML) en styl (CSS) kan handhaaf. Dit is veral belangrik as u dit oorweeg dat die teks vir sommige toestelle en uitlegte dalk nie rondom die prent moet vloei nie. Vir kleiner skerms kan die uitleg van 'n responsiewe webwerf vereis dat die teks wel onder die prentjie pas en dat die beeld die volle breedte van die skerm strek. Dit kan maklik met media navrae gedoen word as jou style afsonderlik van jou HTML-opmaak is. In vandag se multi-toestel wêreld, waar beelde en teks anders sal verskyn vir verskillende besoekers en op verskillende skerms, is hierdie skeiding noodsaaklik vir die langtermyn sukses en bestuur van 'n webblad.