Kiel Wrap Teksto Ĉirkaŭ Bildo

Rigardu iun ajn retpaĝon kaj vi vidos kombinaĵon de enhavo kaj bildaj tekstoj. Ambaŭ ĉi tiuj elementoj estas esencaj ingrediencoj en la sukceso de retejo. Teksto enhavo estas, kion legantoj de la retejo legos, kaj kiujn serĉiloj uzos kiel parto de iliaj algoritmoj de ranking. Bildoj aldonos vidan intereson al la retejo kaj helpos akcenti la enhavon de teksto.

Aldonante tekston kaj bildojn al retejoj estas facila. Teksto estas aldonita per normaj HTML-etikedoj kiel alineoj, rubrikoj kaj listoj, dum bildoj estas metitaj sur paĝo kun la elemento . Post kiam vi aldonis bildon al via retpaĝo, tamen vi eble volas ke la teksto fluu apud la bildo, anstataŭ aliĝi sub ĝi (kiu estas la defaŭlta maniero, kiun bildo aldonita al HTML-kodo donos en la retumilo). Teknike, du manieroj vi povas atingi ĉi tiun aspekton, ĉu uzante CSS (rekomenditan) aŭ aldonante la vidajn instrukciojn rekte en la HTML (ne rekomendindan, ĉar vi volas konservi la apartigon de stilo kaj strukturo por via retejo).

Uzante CSS

La ĝusta maniero ŝanĝi la vojon de teksto de teksto kaj bildaj aranĝoj kaj kiel iliaj vidaj stiloj aperas en la retumilo estas kun CSS . Nur memoru, ĉar ni parolas pri vida ŝanĝo en la paĝo (farante tekston ĉirkaŭ bildon), tio signifas, ke ĝi estas la regado de Cascading Style Sheets.

1. Unue aldonu vian bildon al via retpaĝo. Memoru ekskludi ajnajn vidajn karakterizaĵojn (kiel larĝeco kaj altecovaloroj) de tiu HTML. Ĉi tio estas grava, precipe por respondema retejo kie la grandeco de bildo varias laŭ la retumilo. Iuj programoj, kiel Adobe Dreamweaver, aldonos larĝecon kaj altan informon al bildoj, kiuj estas enmetitaj kun tiu ilo, do certigu forigi ĉi tiun informon el la HTML-kodo! Certiĝu, tamen, por inkludi taŭgan altan tekston . Jen ekzemplo de kiel via HTML-kodo eble aspektas:
2. Por celoj, vi ankaŭ povas aldoni klason al bildo. Ĉi tiu klasa valoro estas kion ni uzos en nia CSS-dosiero. Rimarku, ke la valoro, kiun ni uzas ĉi tie, estas arbitra, kvankam, por ĉi tiu aparta stilo, ni emas uzi valorojn de "maldekstra" aŭ "dekstre", laŭ kia maniero ni deziras nian bildon aliĝi. Ni trovas tiun simplan sintakson por funkcii bone kaj esti facile por aliaj, kiuj eble devas administri retejon en la estonteco por kompreni, sed vi povus doni ĉi tiun klasan valoron, kiun vi volas.
   2. En si mem, ĉi tiu klasa valoro ne faros ion. La bildo ne aŭtomate restos al la maldekstra flanko de la teksto. Por tio, ni nun devas turni al nia CSS-dosiero.

1. En via stilfolio, vi nun povas aldoni la jenan stilon:
   1. .left {
   2. flosas: maldekstre;
   3. kompletigo: 0 20px 20px 0;
   4. }
   5. Kion vi faris ĉi tie estas uzi la CSS-kaleŝegon , kiu trenos la bildon de normala dokumento-fluo (kiel la bildo kutime montrus, kun la teksto vicigita sube) kaj ĝi aligos ĝin al la maldekstra flanko de ĝia ujo . La teksto, kiu sekvas ĝin en la HTML-marko nun kunvolvas ĝin. Ni ankaŭ aldonis iujn kompletigajn valorojn por ke ĉi tiu teksto ne rekte kontraŭstaras la bildon. Anstataŭe, ĝi havos iom belan interspacon, kiu vidos alloga en la dezajno de la paĝo. En la taŭga manlibro de CSS, ni aldonis 0 valorojn al la supra kaj maldekstra flanko de la bildo kaj 20 rastrumeroj al ĝia maldekstra kaj malsupera parto. Memoru, vi devas aldoni iom da kompletigo al la dekstra flanko de maldekstra vicigita bildo. Rekte aliĝita bildo (kiun ni rigardos en momento) havus paŝon aplikitan al ĝia maldekstra flanko.
2. Se vi rigardas vian retpaĝon en retumilo, vi nun devas vidi, ke via bildo estas aligita al la maldekstra flanko de la paĝo kaj la teksto bonege ĉirkaŭas ĝin. Alia maniero diri ĉi tion estas, ke la bildo estas "flosita maldekstre".

1. Se vi volis ŝanĝi ĉi tiun bildon por esti vicigita dekstre (kiel en la foto-ekzemplon, kiu akompanas ĉi tiun artikolon), ĝi estus simpla. Unue, vi devas certigi, ke krom la stilo, kiun ni ĵus aldonis al nia CSS por la klasa valoro de "maldekstra", ni ankaŭ havas unu por dekstra alineo. Ĝi aspektus tiel:
   1. .right {
   2. flosi: dekstre;
   3. kompletigo: 0 0 20px 20px;
   4. }
   5. Vi povas vidi, ke ĉi tio estas preskaŭ identa al la unua CSS ni skribis. La nura diferenco estas la valoro, kiun ni uzas por la "flosita" propraĵo kaj la kompletigaj valoroj, kiujn ni uzas (aldonante iujn al la maldekstra flanko de nia bildo anstataŭ la dekstra).
2. Fine, vi ŝanĝus la valoron de la klaso de la bildo de "maldekstra" al "dekstra" en via HTML:
3. Rigardu vian paĝon en la retumilo nun kaj via bildo devas esti vicigita dekstre kun teksto klare ĉirkaŭanta ĝin. Ni emas aldoni ambaŭ el ĉi tiuj stiloj, "maldekstre" kaj "ĝustan" al ĉiuj niaj stiloj, por ke ni povu uzi ĉi tiujn vidajn stilojn kiel bezonas kiam ni kreas retpaĝojn. Ĉi tiuj du stiloj fariĝas belaj, reutiligeblaj trajtoj, kiujn ni povas turni al kiam ajn ni bezonas stiligi bildojn kun teksto kunvolvanta ilin.

Uzanta HTML Anstataŭ CSS (kaj Kial Vi Devos & Necesas Ĉi)

Eĉ kvankam ĝi povas enŝovi tekston ĉirkaŭ bildon kun HTML, la normoj retejo deklaras, ke CSS (kaj la paŝoj prezentitaj pli supre) estas la vojo por ke ni povu konservi apartigon de strukturo (HTML) kaj stilo (CSS). Ĉi tio estas speciale grava, kiam vi konsideras tion, por iuj aparatoj kaj layouts, ke teksto eble ne bezonas flui la bildon. Por pli malgrandaj ekranoj, respondema retejo-aranĝo eble postulas, ke la teksto efektive vicigas sub la bildo kaj ke la bildo etendas la tutan larĝon de la ekrano. Ĉi tio facile fariĝas per amaskomunikiloj, se viaj stiloj apartigas de via HTML-marko. En la hodiaŭa plur-mekanika mondo, kie bildoj kaj teksto aperos malsame por malsamaj vizitantoj kaj sur malsamaj ekranoj, ĉi tiu disiĝo estas esenca por la longtempa sukceso kaj administrado de retpaĝaro.