Kā aplauzt tekstu ap attēlu

Apskatiet jebkuru tīmekļa lapu, un jūs redzēsit teksta saturu un attēlus. Abi šie elementi ir būtiskas tīmekļa vietnes veiksmes sastāvdaļas. Teksta saturs ir tas, ko vietnes apmeklētāji izlasīs un kādas meklētājprogrammas izmantos kā daļu no viņu rangu algoritmiem. Attēli pievienos vizuālo interesi par vietni un palīdzēs akcentēt teksta saturu.

Teksta un attēlu pievienošana vietnēm ir vienkārša. Teksts tiek pievienots ar standarta HTML tagiem, piemēram, punktiem, virsrakstiem un sarakstiem, bet attēli tiek ievietoti lapā ar elementu . Tomēr, kad esat pievienojis attēlu savai tīmekļa lapai, iespējams, vēlēsieties, lai blakus attēlam būtu teksta plūsma, nevis izlīdzinātu zem tā (tas ir noklusējuma veids, kā attēlā pievienotais attēls pārlūkprogrammā atveidos HTML kodu). Tehniski ir divi veidi, kā jūs varat sasniegt šo izskatu, vai nu izmantojot CSS (ieteicams), vai tieši pievienojot vizuālos norādījumus HTML (nav ieteicams, jo vēlaties saglabāt savas tīmekļa vietnes stilu un struktūras nošķiršanu).

CSS izmantošana

Pareizais veids, kā mainīt lapas teksta un attēlu izkārtojumu un to vizuālo stilu parādīšanos pārlūkprogrammā, ir ar CSS . Tikai atceraties, jo mēs runājam par vizuālām izmaiņām lapā (veidojot teksta plūsmu ap attēlu), tas nozīmē, ka tas ir Cascading Style Sheets domēns.

1. Vispirms pievienojiet savu attēlu savai tīmekļa lapai. Neaizmirstiet izslēgt jebkuru vizuālo īpašību (piemēram, platuma un augstuma vērtības) no šī HTML. Tas ir svarīgi, jo īpaši attiecībā uz atsaucīgu vietni, kurā attēla lielums atšķiras atkarībā no pārlūka. Noteikta programmatūra, piemēram, Adobe Dreamweaver, pievienos platumu un augstumu informāciju attēliem, kas ievietoti ar šo rīku, tādēļ noteikti noņemiet šo informāciju no HTML koda! Tomēr pārliecinieties, ka ir jāiekļauj atbilstošs alt teksts . Šeit ir piemērs tam, kā var izskatīties jūsu HTML kods:
2. Veidojot attēlus, varat arī pievienot kategoriju. Šī klases vērtība ir tas, ko mēs izmantosim mūsu CSS failā. Ņemiet vērā, ka vērtība, kuru mēs izmantojam šeit, ir patvaļīga, lai gan šim konkrētajam stilam mēs parasti izmantojam vērtības "pa kreisi" vai "pa labi" atkarībā no tā, kā mēs gribam, lai mūsu attēls saskaņotos. Mēs uzzinām, ka vienkāršs sintakse, lai strādātu labi un būtu viegli citiem, kuriem nākotnē vajadzētu pārvaldīt vietni, lai to izprastu, bet jūs varētu dot visu nepieciešamo klases vērtību.
   2. Pati šī klases vērtība nedarīs neko. Attēls netiks automātiski novietots teksta kreisajā pusē. Lai to izdarītu, mums tagad ir jāvēršas pie mūsu CSS faila.

1. Jūsu stilu tabulā tagad varat pievienot šādu stilu:
   1. . pa kreisi {
   2. pludiņš: pa kreisi;
   3. polsterējums: 0 20px 20px 0;
   4. }
   5. Šeit jūs izmantojat CSS "peldēt" īpašumu , kas noņems attēlu no parastās dokumentu plūsmas (veids, kādā šis attēls parasti parādās, ar tekstu, kas ir izlīdzināts zem tā), un tas tiks pieskaņots tā tvertnes kreisajam pusei . Teksts, kas pēc tam ievietots HTML marķējumā, tagad iesaiņo to. Mēs arī pievienojām dažas polsterējuma vērtības, lai šis teksts nebūtu tieši pretēji attēlam. Tā vietā būs daži jauki atstarpes, kas būs vizuāli pievilcīgi lapas dizainā. CSS sloksnēs polsterēšanai mēs pievienojām 0 vērtības attēla augšējai un kreisai pusei un 20 pikseli pa kreisi un apakšā. Atcerieties, ka jums ir jāpievieno polsterējums kreisā izlīdzinātā attēla labajā pusē. Labi izlīdzināts attēls (ko mēs uz mirkli aplūkosim) būtu uzlikts kreisajā pusē.
2. Ja skatāt savu tīmekļa lapu pārlūkprogrammā, tagad jums vajadzētu redzēt, ka jūsu attēls ir izlīdzināts lapas lapas kreisajā pusē, un teksts viegli to aptver. Vēl viens veids, kā teikt, ir tas, ka attēls ir "peldēts pa kreisi".

1. Ja vēlaties mainīt šo attēlu, lai to izlīdzinātu pa labi (tāpat kā šajā rakstā pievienotajā fotoattēla piemērā), tas būtu vienkārši. Pirmkārt, jums ir jāpārliecinās, ka papildus stilam, kuru mēs vienkārši pievienojām mūsu CSS klases vērtībai "kreisajā pusē", mums ir arī viens labais izlīdzinājums. Tas izskatās šādi:
   1. .pa labi {
   2. pludiņš: pa labi;
   3. polsterējums: 0 0 20px 20px;
   4. }
   5. Varat redzēt, ka tas ir gandrīz identisks pirmajam CSS, ko mēs rakstījām. Vienīgā atšķirība ir vērtība, kuru mēs izmantojam, lai izmantotu "peldošo" īpašumu un iespiestās vērtības, kuras mēs izmantojam (pievienojot dažus attēla kreiso pusi, nevis labo pusi).
2. Visbeidzot, jūs savā HTML formātā mainītu attēla klases vērtību no "kreisās" uz "labo":
3. Tagad pārlūkojiet lapu savā pārlūkprogrammā, un jūsu attēls ir jāsalīdzina ar labo pusi, un teksts ir kārtīgi iesaiņots. Mēs cenšamies pievienot abus šos stilus, "pa kreisi" un "pa labi" visās mūsu stilu lapās, lai mēs varētu izmantot šos vizuālos stilus pēc nepieciešamības, veidojot tīmekļa lapas. Šie divi stili kļūst par jaukām, atkārtoti lietojamām funkcijām, ar kurām mēs varam vērsties ikreiz, kad mums ir nepieciešams veidot attēlus ar teksta ietīšanu.

HTML koda izmantošana CSS vietā (un kāpēc jums tas nav jādara)

Pat ja tekstu ap HTML-attēlu var apiet, tīmekļa standarti nosaka, ka CSS (un iepriekš izklāstītās darbības) ir veids, kā rīkoties, lai mēs varētu saglabāt struktūras (HTML) un stila (CSS) atdalīšanu. Tas ir īpaši svarīgi, ja uzskatāt, ka dažām ierīcēm un izkārtojumiem šim tekstam nav nepieciešams plūst pa attēlu. Mazākiem ekrāniem, atsaucoties uz vietnes izkārtojumu, var būt nepieciešams, ka teksts patiešām sakrīt zem attēla un attēls sasniedz pilnu ekrāna platumu. Tas ir viegli izdarāms ar mediju vaicājumiem, ja jūsu stili ir atšķirīgi no HTML atzīmes. Šodienas multi-device pasaulē, kur attēli un teksts dažādiem apmeklētājiem un dažādiem ekrāniem parādīsies atšķirīgi, šī atdalīšana ir būtiska tīmekļa lapas ilgtermiņa panākumiem un vadībai.