Se på enhver webside, og du vil se en kombination af tekstindhold og billeder. Begge disse elementer er vigtige ingredienser i succesen med et websted. Tekst indhold er, hvad besøgende vil læse og hvilke søgemaskiner vil bruge som en del af deres ranking algoritmer. Billeder vil tilføje visuel interesse for webstedet og hjælpe med at fremhæve tekstindholdet.
Tilføjelse af tekst og billeder til websteder er let. Tekst tilføjes med standard HTML tags som afsnit, overskrifter og lister, mens billeder placeres på en side med element. Når du har tilføjet et billede til din webside, kan du måske have tekstrømmen ved siden af billedet, i stedet for at justere under den (hvilket er standardmetoden, som et billede tilføjes til HTML-kode vil blive gjort i browseren). Teknisk set er der to måder, du kan opnå dette udseende, enten ved at bruge CSS (anbefales) eller ved at tilføje de visuelle instruktioner direkte i HTML'en (anbefales ikke, da du vil bevare adskillelsen af stil og struktur for dit website).
Brug af CSS
Den rigtige måde at ændre måden på en sides tekst- og billedlayout, og hvordan deres visuelle stilarter vises i browseren, er med CSS. Bare husk, da vi taler om en visuel ændring på siden (gør tekstflow omkring et billede) betyder det, at det er domænet for Cascading Style Sheets.
-
Først skal du føje dit billede til din webside. Husk at udelukke eventuelle visuelle egenskaber (som bredde og højdeværdier) fra den pågældende HTML. Dette er vigtigt, især for en lydhør hjemmeside, hvor billedstørrelsen vil variere baseret på browseren. Visse software, som Adobe Dreamweaver, vil tilføje bredde og højdeinformation til billeder, der er indsat med det pågældende værktøj, så sørg for at fjerne disse oplysninger fra HTML-koden! Vær dog sikker på at inkludere passende alt-tekst. Her er et eksempel på, hvordan din HTML kode kan se ud:
-
Til styling kan du også tilføje en klasse til et billede. Denne klasseværdi er det, vi vil bruge i vores CSS-fil. Bemærk, at den værdi, vi bruger her, er vilkårlig, men for denne særlige stil har vi tendens til at bruge værdierne "venstre" eller "højre", alt efter hvilken måde vi ønsker, at vores billede skal justeres. Vi finder den enkle syntaks for at fungere godt og være let for andre, der måske må administrere et websted i fremtiden for at forstå, men du kunne give det enhver klasse værdi, du vil have.
I sig selv vil denne klasseværdi ikke gøre noget. Billedet bliver ikke automatisk justeret til venstre for teksten. Til dette skal vi nu vende tilbage til vores CSS-fil.
-
I dit stylesheet kan du nu føje følgende stil:
.venstre {
flyde: venstre;
polstring: 0 20px 20px 0;
}
Hvad du gjorde her, er at bruge CSS "float" egenskaben, som vil trække billedet fra normal dokumentflow (den måde, som billedet normalt vil vise, med teksten justeret under det) og det vil justere det til venstre side af sin beholder . Teksten, der kommer efter den i HTML-markeringen med nu ombrydes rundt om den. Vi har også tilføjet nogle polstringsværdier, så denne tekst ikke vil være, men direkte op imod billedet. I stedet vil den have en god afstand, der vil være visuelt attraktiv i sidens design. I CSS-stenografi til polstring tilføjede vi 0 værdier til den øverste og venstre side af billedet og 20 pixel til venstre og nederst. Husk, at du skal tilføje nogle polstring på højre side af et billede med venstrejustering. Et højrejusteret billede (som vi vil se på i et øjeblik) ville have polstring på sin venstre side.
-
Hvis du ser din webside i en browser, skal du nu se, at dit billede er justeret til venstre på siden, og teksten snor sig omhyggeligt. En anden måde at sige dette på er, at billedet er "floated til venstre".
-
Hvis du ønsker at ændre billedet for at blive justeret til højre (som i billedeksemplet, der følger med denne artikel), ville det være enkelt. For det første skal du sørge for, at i tillæg til den stil, vi lige har tilføjet vores CSS til klasseværdien af "venstre", har vi også en til højrejustering. Det ville se sådan ud:
.ret {
flyde: højre;
polstring: 0 0 20px 20px;
}
Du kan se, at dette er næsten identisk med det første CSS, vi skrev. Den eneste forskel er den værdi, vi bruger til "float" egenskaben og de polstringsværdier vi bruger (tilføjer nogle til venstre for vores billede i stedet for højre).
-
Endelig vil du ændre værdien af billedets klasse fra "venstre" til "højre" i din HTML:
-
Kig på din side i browseren nu, og dit billede skal justeres til højre med tekst, der omhyggeligt ombrydes. Vi har tendens til at tilføje begge disse stilarter, "left" og "right" til alle vores stylesheets, så vi kan bruge disse visuelle stilarter efter behov, når vi laver websider. Disse to stilarter bliver gode genanvendelige funktioner, som vi kan henvende os til, når vi skal style billeder med tekstindpakning omkring dem.
Brug HTML i stedet for CSS (og hvorfor du bør ikke gøre dette)
Selvom det er muligt at omsætte tekst omkring et billede med HTML, bestemmer webstandarder, at CSS (og trinene ovenfor) er vejen at gå, så vi kan opretholde en adskillelse af struktur (HTML) og stil (CSS). Dette er især vigtigt, når du overvejer den tekst for nogle enheder og layouter må ikke skal flyde rundt på billedet. For mindre skærme kan et responsivt websteds layout kræve, at teksten rent faktisk ligger under billedet, og at billedet strækker sig på skærmens fulde bredde. Dette gøres nemt med medieforespørgsler, hvis dine stilarter er adskilt fra din HTML-markering.I dagens multi-enhed verden, hvor billeder og tekst vil fremstå forskelligt for forskellige besøgende og på forskellige skærme, er denne adskillelse afgørende for den langsigtede succes og styring af en webside.
