Horfðu á hvaða vefsíðu sem er og þú munt sjá blöndu af innihaldi texta og myndmálum. Báðir þessir þættir eru grundvallaratriði í árangri vefsíðunnar. Texti innihald er hvaða síða gestir vilja lesa og hvaða leitarvélar munu nota sem hluti af röðun reiknirit þeirra. Myndir munu bæta sjónrænum áhuga á síðuna og hjálpa til að leggja áherslu á innihald texta.
Að bæta texta og myndum við vefsíður er auðvelt. Texti er bætt við venjulegu HTML tags eins og málsgreinar, fyrirsagnir og listi, en myndir eru settar á síðu með þátturinn. Þegar þú hefur bætt við mynd á vefsíðuna þína, gætirðu viljað að textinn flæði við hliðina á myndinni, frekar en að samræma það (sem er sjálfgefið leiðin sem myndin bætir við HTML kóða verður sýnd í vafranum). Tæknilega eru tvær leiðir til að ná þessu útliti, annaðhvort með því að nota CSS (mælt með) eða með því að bæta sjónrænum leiðbeiningum beint inn í HTML (ekki mælt með því að þú viljir viðhalda aðgreining á stíl og uppbyggingu fyrir vefsvæðið þitt).
Notkun CSS
Rétt leið til að breyta því hvernig textasnið og myndir eru settar upp og hvernig sjónrænar stíll þeirra birtist í vafranum er með CSS . Mundu bara, þar sem við erum að tala um sjónræna breytingu á síðunni (gerð texta rennur í kringum mynd) þýðir þetta að það sé lén Cascading Style Sheets.
- Fyrst skaltu bæta mynd þinni við vefsíðuna þína. Mundu að útiloka einhverjar sjónræn einkenni (eins og breidd og hæð gildi) úr þeirri HTML. Þetta er mikilvægt, sérstaklega fyrir móttækilegan vef þar sem myndastærðin er breytileg miðað við vafrann. Viss hugbúnaður, eins og Adobe Dreamweaver, mun bæta við breidd og hæð upplýsingar við myndir sem eru settar inn með það tól, svo vertu viss um að fjarlægja þessar upplýsingar úr HTML kóða! Vertu viss um að vera með viðeigandi alt texta . Hér er dæmi um hvernig HTML kóðinn þinn kann að líta út:
-
- Til að geta notað stíl geturðu einnig bætt við flokki í mynd. Þetta námsmat er það sem við munum nota í CSS skrá okkar. Athugaðu að gildið sem við notum hér er handahófskennt, en við höfum tilhneigingu til að nota gildi "vinstri" eða "hægri" eftir því sem við viljum að myndin okkar samræmist. Við finnum þetta einfalda setningafræði til að vinna vel og vera auðvelt fyrir aðra sem gætu þurft að stjórna á síðuna í framtíðinni til að skilja, en þú gætir gefið þessu hvaða bekkjarverðmæti þú vilt.
-
- Í sjálfu sér, þetta tegund gildi mun ekki gera neitt. Myndin verður ekki sjálfkrafa stillt til vinstri við textann. Til þess þurfum við nú að snúa okkur í CSS skrá okkar.
-
- Í stílblaðinu þínu geturðu nú bætt við eftirfarandi stíl:
- .left {
- fljóta: vinstri;
- padding: 0 20px 20px 0;
- }
- Það sem þú gerðir hér er að nota CSS "float" eignina , sem mun draga myndina frá venjulegu skjalflæði (hvernig myndin myndi venjulega birtast með texta sem er undir henni) og það mun leiða það til vinstri hliðar ílátsins . Textinn sem kemur eftir því í HTML-merkinu með því að vefja hana í kringum hana. Við bættum einnig nokkrar púðar gildi svo að þessi texti myndi ekki nema beint upp á móti myndinni. Í staðinn mun það hafa nokkrar góðar bilanir sem verða sjónrænt aðlaðandi í hönnun hönnunarinnar. Í CSS styttunni fyrir padding, bætt við 0 gildi efst og vinstri hlið myndarinnar og 20 punktar til vinstri og neðst. Mundu að þú þarft að bæta við einhverjum padding hægri hlið vinstri myndar Rétt ímyndað mynd (sem við munum líta á í smástund) myndi hafa padding beitt til vinstri hliðar.
- Ef þú skoðar vefsíðuna þína í vafra, þá ættirðu nú að sjá að myndin þín er takt við vinstri hlið síðunnar og textinn snýst vel um það. Önnur leið til að segja þetta er að myndin sé "flot til vinstri".
- Ef þú vilt breyta þessari mynd til að laga sig til hægri (eins og í mynddæmi sem fylgir þessari grein) væri það einfalt. Í fyrsta lagi verður þú að ganga úr skugga um að til viðbótar við þann stíl sem við höfum bætt við CSS okkar fyrir bekkjarverðmæti "vinstri", höfum við einnig einn til hægristillingar. Það myndi líta svona út:
- .right {
- fljóta: hægri;
- padding: 0 0 20px 20px;
- }
- Þú getur séð að þetta er næstum eins og fyrsta CSS sem við skrifaði. Eini munurinn er það gildi sem við notum fyrir "fljóta" eignina og padding gildi sem við notum (bæta við einhverjum vinstra megin við myndina okkar í staðinn fyrir hægri).
- Að lokum breytirðu gildi bekkjarins frá "vinstri" til "hægri" í HTML þínum:
-
- Horfðu á síðuna þína í vafranum núna og myndin þín ætti að vera takt við hægri með texta sem snyrtilega er umbúðir í kringum hana. Við höfum tilhneigingu til að bæta báðum þessum stílum, "vinstri" og "rétt" við allar stíllblöðin okkar, svo að við getum notað þessar sjónrænar stíll eftir þörfum þegar við búum til vefsíður. Þessir tveir stíll verða góðar, endurnýjanlegar aðgerðir sem við getum snúið okkur að þegar við þurfum að stilla myndir með texta umbúðir um þau.
Notkun HTML í stað þess að CSS (og af hverju þú ættir ekki að gera þetta)
Jafnvel þó að hægt sé að vefja texta í kringum mynd með HTML, mæla vefstaðlar fyrir því að CSS (og skrefin sem lýst er hér að framan) er leiðin til að fara þannig að við getum haldið aðskilnaði uppbyggingar (HTML) og stíl (CSS). Þetta er sérstaklega mikilvægt þegar þú telur að þessi texti gæti ekki þurft að flæða í kringum myndina fyrir sum tæki og skipulag. Fyrir smærri skjái getur skipulag svört vefsvæðis krafist þess að textinn sé raunar undir myndinni og að myndin nær til fullrar breiddar skjásins. Þetta er auðvelt með fjölmiðlafyrirspurnir ef stíll þinn er aðskildur frá HTML markupinu þínu. Í mörgum tækjum heimsins í dag, þar sem myndir og texti birtast öðruvísi fyrir mismunandi gesti og á mismunandi skjái, þá er þetta aðskilnaður nauðsynlegt til að ná árangri og stjórnun á vefsíðu á langan tíma.