Tumingin sa anumang web page at makikita mo ang isang kumbinasyon ng nilalaman ng teksto at koleksyon ng imahe. Ang parehong mga sangkap ay mahalagang sangkap sa tagumpay ng isang website. Ang nilalaman ng teksto ay kung ano ang binabasa ng mga bisita ng site at kung anong mga search engine ang gagamitin bilang bahagi ng kanilang mga algorithm sa ranggo. Ang mga imahe ay magdaragdag ng visual na interes sa site at matutulungan ang pagbutihin ang nilalaman ng teksto.
Madali ang pagdaragdag ng teksto at mga larawan sa mga website. Ang teksto ay idinagdag sa karaniwang mga tag ng HTML tulad ng mga talata, mga pamagat, at mga listahan, habang ang mga imahe ay inilalagay sa isang pahina na may elemento. Sa sandaling nagdagdag ka ng isang imahe sa iyong web page, gayunpaman, maaaring gusto mong magkaroon ng daloy ng teksto sa tabi ng imahe, sa halip na ihanay sa ibaba ito (na kung saan ay ang default na paraan ng isang imahe na idinagdag sa HTML code ay magre-render sa browser). Sa teknikal, may dalawang paraan na makamit mo ang hitsura na ito, alinman sa pamamagitan ng paggamit ng CSS (inirerekomenda) o sa pamamagitan ng pagdaragdag ng direktang mga tagubilin nang direkta sa HTML (hindi inirerekomenda, dahil nais mong mapanatili ang paghihiwalay ng estilo at istraktura para sa iyong website).
Paggamit ng CSS
Ang tamang paraan upang baguhin ang paraan ng layout ng teksto at mga imahe ng pahina at kung paano lumilitaw ang kanilang mga visual na estilo sa browser sa CSS. Tandaan lamang, dahil pinag-uusapan natin ang tungkol sa isang visual na pagbabago sa pahina (ginagawa ang daloy ng teksto sa paligid ng isang imahe), nangangahulugang ito ang domain ng Cascading Style Sheets.
-
Una, idagdag ang iyong imahe sa iyong web page. Tandaan na ibukod ang anumang mga visual na katangian (tulad ng lapad at mga halaga ng taas) mula sa HTML na iyon. Mahalaga ito, lalo na para sa isang tumutugon na website kung saan ang sukat ng imahe ay mag-iiba batay sa browser. Ang ilang software, tulad ng Adobe Dreamweaver, ay magdaragdag ng lapad at impormasyon ng taas sa mga larawang ipinasok sa tool na iyon, kaya siguraduhing alisin ang impormasyong ito mula sa HTML code! Gayunpaman, siguraduhing isama ang angkop na alt text. Narito ang isang halimbawa kung paano maaaring tumingin ang iyong HTML code:
-
Para sa mga layunin ng styling, maaari ka ring magdagdag ng isang klase sa isang imahe. Ang halaga ng klase ay kung ano ang gagamitin namin sa aming CSS file. Tandaan na ang halaga na ginagamit namin dito ay di-makatwirang, bagaman, para sa partikular na estilo, may posibilidad naming gamitin ang mga halaga ng "left" o "right", depende sa kung aling paraan ang gusto naming maayos ang aming imahe. Nalaman namin na ang simpleng syntax ay gumagana nang maayos at maging madali para sa iba na maaaring magkaroon ng pamamahala ng isang site sa hinaharap upang maunawaan, ngunit maaari mong ibigay ang anumang halaga sa klase na gusto mo.
Sa pamamagitan ng kanyang sarili, ang halaga ng klase na ito ay hindi gagawin. Ang imahe ay hindi awtomatikong hile-hilera sa kaliwa ng teksto. Para sa mga ito, kailangan namin ngayon upang buksan ang aming CSS file.
-
Sa iyong stylesheet, maaari mo na ngayong idagdag ang sumusunod na estilo:
.left {
lumutang pakaliwa;
padding: 0 20px 20px 0;
}
Ang iyong ginawa dito ay gumagamit ng CSS "float" na ari-arian, na kung saan ay pull ang imahe mula sa normal na daloy ng dokumento (ang paraan na ang imahe ay karaniwang ipapakita, na ang teksto ay nakahanay sa ilalim nito) at ito ay ihanay ito sa kaliwang bahagi ng lalagyan nito . Ang teksto na dumating pagkatapos nito sa markup ng HTML na ngayon ay nakabalot sa paligid nito. Nagdagdag din kami ng ilang mga halaga ng padding upang ang teksto na ito ay hindi ngunit direkta laban sa imahe. Sa halip, magkakaroon ng ilang magagandang espasyo na magiging kaakit-akit sa disenyo ng pahina. Sa CSS shorthand para sa padding, nagdagdag kami ng 0 na mga halaga sa itaas at kaliwang bahagi ng imahe, at 20 pixel sa kaliwa at ibaba nito. Tandaan, kailangan mong magdagdag ng ilang padding sa kanang bahagi ng isang nakatalang larawan sa kaliwa. Ang isang karapatan na nakahanay na imahe (na kung saan ay titingnan namin sa isang sandali) ay may padding na inilalapat sa kaliwang bahagi nito.
-
Kung titingnan mo ang iyong webpage sa isang browser, dapat mo na ngayong makita na nakahanay ang iyong imahe sa kaliwang bahagi ng pahina at ang teksto ay mahusay na nakabalot sa paligid nito. Ang isa pang paraan upang sabihin ito ay ang imahe ay "lumulutang sa kaliwa".
-
Kung gusto mong baguhin ang larawang ito upang maayos sa kanan (tulad ng halimbawa ng larawan na kasama sa artikulong ito), magiging simple ito. Una, dapat mong tiyakin na, bilang karagdagan sa estilo na idinagdag lamang namin sa aming CSS para sa halaga ng klase ng "kaliwa", mayroon din kaming isa para sa tamang pagkakahanay. Magiging ganito:
.right {
lumutang: tama;
padding: 0 0 20px 20px;
}
Makikita mo na halos pareho ito sa unang CSS na sinulat namin. Ang tanging kaibahan ay ang halaga na ginagamit namin para sa "float" na ari-arian at ang padding na mga halaga na ginagamit namin (idinagdag ang ilan sa kaliwang bahagi ng aming larawan sa halip na kanan).
-
Sa wakas, babaguhin mo ang halaga ng klase ng imahe mula sa "kaliwa" hanggang sa "kanan" sa iyong HTML:
-
Tumingin sa iyong pahina sa browser ngayon at ang iyong larawan ay dapat na nakahanay sa kanan gamit ang teksto nang maayos na nakabalot sa paligid nito. May posibilidad kaming magdagdag ng dalawa sa mga estilo, "kaliwa" at "tama" sa lahat ng aming mga estilo upang magamit namin ang mga visual na estilo na ito kung kinakailangan kapag lumilikha kami ng mga web page. Ang dalawang estilo ay magiging maganda, magagamit na mga tampok na maaari naming i-on kapag kailangan namin upang estilahin ang mga imahe na may text wrapping sa paligid ng mga ito.
Paggamit ng HTML sa halip ng CSS (at Bakit Hindi Mo Gawin Ito)
Kahit na posible na gawin ang teksto ng wrapper sa isang imahe na may HTML, ang mga pamantayan ng web ay nangangahulugan na ang CSS (at ang mga hakbang na ipinakita sa itaas) ay ang paraan upang makapagpapanatili ng paghihiwalay ng istraktura (HTML) at estilo (CSS). Ito ay lalong mahalaga kapag isinasaalang-alang mo iyan, para sa ilang mga aparato at mga layout, na teksto baka hindi kailangang dumaloy sa paligid ng imahe. Para sa mas maliliit na screen, ang layout ng tumutugon sa website ay maaaring mangailangan na ang teksto ay talagang nakaayon sa ibaba ng imahe at na ang imahe ay umaabot sa buong lapad ng screen. Madali itong gawin sa mga query sa media kung ang iyong mga estilo ay hiwalay sa iyong HTML markup.Sa mundo ng multi-device ngayon, kung saan ang mga larawan at teksto ay lilitaw nang naiiba para sa iba't ibang mga bisita at sa iba't ibang mga screen, ang paghihiwalay na ito ay napakahalaga sa pangmatagalang tagumpay at pamamahala ng isang web page.
