Titta på någon webbsida och du kommer att se en kombination av textinnehåll och bilder. Båda dessa element är viktiga ingredienser i framgången för en webbplats. Textinnehåll är vad webbplats besökare ska läsa och vilka sökmotorer kommer att använda som en del av deras rankingalgoritmer. Bilder lägger till visuellt intresse för webbplatsen och hjälper till att accentuera textinnehållet.
Lägga till text och bilder på webbplatser är enkelt. Text läggs till med vanliga HTML-taggar som stycken, rubriker och listor, medan bilder läggs på en sida med element. När du väl har lagt till en bild på din webbsida kanske du vill ha textflödet bredvid bilden, snarare än att justera under det (vilket är standardmetoden som en bild till HTML-kod kommer att göra i webbläsaren). Tekniskt finns det två sätt att uppnå detta utseende, antingen genom att använda CSS (rekommenderas) eller genom att lägga till de visuella instruktionerna direkt i HTML (rekommenderas inte, eftersom du vill behålla separationen av stil och struktur för din webbplats).
Använda CSS
Det rätta sättet att ändra hur en sidas text- och bildlayout och hur deras visuella stilar visas i webbläsaren är med CSS. Kom bara ihåg, eftersom vi talar om en visuell förändring på sidan (gör textflödet runt en bild) betyder det att det är domänen för Cascading Style Sheets.
-
Lägg först till din bild på din webbsida. Kom ihåg att utesluta visuella egenskaper (som bredd och höjdvärden) från den HTML-filen. Detta är viktigt, särskilt för en mottaglig webbplats där bildstorleken varierar beroende på webbläsaren. Vissa program, till exempel Adobe Dreamweaver, kommer att lägga till bredd och höjdinformation till bilder som sätts in med verktyget, så var noga med att ta bort den här informationen från HTML-koden! Var dock säker på att inkludera lämplig alt-text. Här är ett exempel på hur din HTML-kod kan se ut:
-
För styling ändamål kan du också lägga till en klass i en bild. Det här klassvärdet är vad vi ska använda i vår CSS-fil. Observera att värdet vi använder här är godtyckligt, men för den här stilen brukar vi använda värdena "vänster" eller "rätt" beroende på vilken väg vi vill att vår bild ska anpassas till. Vi hittar den enkla syntaxen för att fungera bra och vara lätt för andra som kanske måste hantera en webbplats i framtiden för att förstå, men du kan ge detta allt klassvärde du vill ha.
I sig kommer detta klassvärde inte att göra någonting. Bilden kommer inte automatiskt att anpassas till vänster om texten. För detta behöver vi nu vända sig till vår CSS-fil.
-
I ditt stilark kan du nu lägga till följande stil:
.vänster {
flyta till vänster;
vaddering: 0 20px 20px 0;
}
Vad du gjorde här är att använda egenskapen CSS "float", som kommer att dra bilden från normalt dokumentflöde (hur bilden normalt skulle visas, med texten inriktade under den) och den kommer att anpassa den till vänster sida av dess behållare . Texten som kommer efter den i HTML-uppställning med nu viks runt den. Vi har också lagt till några vadderingsvärden så att den här texten inte bara skulle vara direkt mot bilden. I stället kommer det att ha lite fint avstånd som blir visuellt attraktivt i sidans design. I CSS-stenografi för polstring lade vi till 0 värden till den övre och vänstra sidan av bilden och 20 pixlar till vänster och botten. Kom ihåg att du måste lägga till en del vaddering på höger sida av en vänsterjusterad bild. En högerjusterad bild (som vi kommer att titta på på ett ögonblick) skulle ha vaddering på vänster sida.
-
Om du tittar på din webbsida i en webbläsare, ska du nu se att din bild är anpassad till vänster på sidan och texten snyggt slingrar runt den. Ett annat sätt att säga detta är att bilden är "floated till vänster".
-
Om du vill ändra bilden så att den ändras till höger (som i bildexemplet som följer med den här artikeln) skulle det vara enkelt. Först måste du se till att förutom den stil vi just lagt till i vår CSS för klassvärdet "vänster", har vi också en för rättjustering. Det skulle se ut så här:
.höger {
float: right;
vaddering: 0 0 20px 20px;
}
Du kan se att detta är nästan identiskt med den första CSS vi skrev. Den enda skillnaden är det värde vi använder för egenskapen "float" och de vadderingsvärden vi använder (lägger till lite till vänster på bilden i stället för höger).
-
Slutligen skulle du ändra värdet på bildens klass från "vänster" till "höger" i din HTML:
-
Titta på din sida i webbläsaren nu och din bild ska anpassas till höger med texten snyggt omsluter den. Vi tenderar att lägga till båda dessa stilar, "vänster" och "rätt" till alla våra stylesheets så att vi kan använda dessa visuella stilar efter behov när vi skapar webbsidor. Dessa två stilar blir trevliga, återanvändbara funktioner som vi kan vända oss till när vi behöver stila bilder med textomslag kring dem.
Använda HTML istället för CSS (och varför du borde inte göra det)
Även om det är möjligt att göra omslagstext runt en bild med HTML, dikterar webbstandarder att CSS (och stegen ovan) är vägen att gå så att vi kan upprätthålla en separation av struktur (HTML) och stil (CSS). Det här är särskilt viktigt när du anser att texten för vissa enheter och layouter får inte måste flyta runt bilden. För mindre skärmar kan en upplösning på en lyhörd webbplats kräva att texten verkligen ligger under bilden och att bilden sträcker sig över hela skärmens bredd. Detta görs enkelt med mediefrågor om dina stilar är skilda från din HTML-uppställning.I dagens multi-device-värld, där bilder och text kommer att visas annorlunda för olika besökare och på olika skärmar, är denna separation avgörande för den långsiktiga framgången och hanteringen av en webbsida.
