Se på hvilken som helst nettside, og du vil se en kombinasjon av tekstinnhold og bilder. Begge disse elementene er essensielle ingredienser i suksess for et nettsted. Tekstinnhold er hvilke besøkende som vil lese og hvilke søkemotorer som skal brukes som en del av deres rangeringsalgoritmer. Bilder vil legge til visuell interesse for nettstedet og bidra til å fremheve tekstinnholdet.
Det er enkelt å legge til tekst og bilder på nettsteder. Tekst legges til med standard HTML-koder som avsnitt, overskrifter og lister, mens bilder plasseres på en side med element. Når du har lagt til et bilde på websiden din, kan det hende du vil at teksten skal flyte ved siden av bildet, i stedet for å justere under den (som er standard måten et bilde lagt til i HTML-koden skal gjengis i nettleseren). Teknisk er det to måter du kan oppnå dette utseendet enten ved å bruke CSS (anbefalt) eller ved å legge de visuelle instruksjonene direkte inn i HTML-en (ikke anbefalt, siden du vil opprettholde skillet mellom stil og struktur for nettstedet ditt).
Bruke CSS
Den riktige måten å endre måten en side tekst og bilder layout og hvordan deres visuelle stiler vises i nettleseren er med CSS. Bare husk, siden vi snakker om en visuell endring på siden (gjør tekstflyten rundt et bilde), betyr dette at det er domenet til Cascading Style Sheets.
-
Først legger du til bildet ditt på websiden din. Husk å utelukke eventuelle visuelle egenskaper (som bredde og høydeverdier) fra den HTML-koden. Dette er viktig, spesielt for en responsiv nettside der bildestørrelsen vil variere basert på nettleseren. Visse programvare, som Adobe Dreamweaver, vil legge til bredde- og høydeinformasjon til bilder som er satt inn med verktøyet, så vær sikker på at du fjerner denne informasjonen fra HTML-koden! Vær imidlertid sikker på å inkludere passende alt-tekst. Her er et eksempel på hvordan HTML-koden din kan se ut:
-
For stylingsformål kan du også legge til en klasse i et bilde. Denne klassen verdien er hva vi vil bruke i vår CSS-fil. Vær oppmerksom på at verdien vi bruker her er vilkårlig, men for denne spesielle stilen har vi en tendens til å bruke verdier av "venstre" eller "høyre", avhengig av hvilken måte vi vil at bildet skal justere. Vi finner den enkle syntaksen for å fungere godt og være lett for andre som kanskje må administrere et nettsted i fremtiden for å forstå, men du kan gi dette en hvilken som helst klasseverdi du vil ha.
I seg selv vil denne klassen ikke gjøre noe. Bildet blir ikke automatisk justert til venstre for teksten. For dette trenger vi nå å vende oss til vår CSS-fil.
-
I stilarket kan du legge til følgende stil:
.venstre {
flyte: venstre;
polstring: 0 20px 20px 0;
}
Det du gjorde her, er å bruke CSS "float" -egenskapen, som vil trekke bildet fra vanlig dokumentflyt (måten som bildet normalt ville vise, med teksten justert under det) og det vil justere det til venstre på beholderen . Teksten som kommer etter det i HTML-merket med nå vikle rundt den. Vi har også lagt til noen polstringsverdier, slik at denne teksten ikke vil, men direkte opp mot bildet. I stedet vil det ha noen fine avstander som vil være visuelt attraktive i sidens design. I CSS shorthand for polstring, la vi 0 verdier til toppen og venstre side av bildet, og 20 piksler til venstre og bunn. Husk at du må legge til noe polstring på høyre side av et bilde på venstre side. Et rettjustert bilde (som vi vil se på et øyeblikk) ville ha polstring påført på venstre side.
-
Hvis du ser på websiden din i en nettleser, bør du nå se at bildet ditt er justert til venstre på siden og teksten snakkes godt rundt den. En annen måte å si dette på er at bildet er "floated til venstre".
-
Hvis du vil endre dette bildet for å bli justert til høyre (som i bildeeksemplet som følger med denne artikkelen), ville det være enkelt. Først må du sørge for at, i tillegg til den stilen vi nettopp har lagt til vår CSS for klassens verdi av "venstre", har vi også en til rettjustering. Det ville se slik ut:
.Ikke sant {
flyte: høyre;
polstring: 0 0 20px 20px;
}
Du kan se at dette er nesten identisk med det første CSS vi skrev. Den eneste forskjellen er verdien vi bruker for "float" -egenskapen og polstringsverdiene vi bruker (legger til venstre på bildet i stedet for høyre).
-
Endelig vil du endre verdien av bildets klasse fra "venstre" til "høyre" i HTML-koden din:
-
Se på siden din i nettleseren nå, og bildet ditt skal justeres til høyre med tekst som er pent innpakket rundt den. Vi pleier å legge til begge disse stilene, "left" og "right" til alle stilarkene våre, slik at vi kan bruke disse visuelle stilene etter behov når vi lager websider. Disse to stilene blir fine, gjenbrukbare funksjoner som vi kan henvende oss til når vi trenger å utforme bilder med tekstinnpakning rundt dem.
Bruke HTML i stedet for CSS (og hvorfor du ikke burde gjøre dette)
Selv om det er mulig å legge inn tekst rundt et bilde med HTML, dikterer webstandarder at CSS (og trinnene som er presentert ovenfor) er veien å gå slik at vi kan opprettholde en separasjon av struktur (HTML) og stil (CSS). Dette er spesielt viktig når du vurderer det, for enkelte enheter og layouter, den teksten kanskje ikke må flyte rundt bildet. For mindre skjermer kan det hende at en responsiv nettside layout krever at teksten faktisk justeres under bildet, og at bildet strekker seg i hele skjermbredden. Dette gjøres enkelt med medieforespørsler hvis stilene dine er skilt fra HTML-oppslaget ditt.I dagens multi-enhet verden, hvor bilder og tekst vil vises annerledes for ulike besøkende og på forskjellige skjermer, er denne separasjonen avgjørende for langsiktig suksess og styring av en nettside.
