Jinsi ya Kufunga Nakala Karibu na Picha

Angalia ukurasa wowote wa wavuti na utaona mchanganyiko wa maudhui ya maandishi na picha. Vipengele hivi vyote ni viungo muhimu katika mafanikio ya tovuti. Maudhui ya maandishi ni nini wageni wa tovuti watasoma na injini gani za utafutaji zitazitumia kama sehemu ya taratibu zao za cheo. Picha zitasaidia kuvutia maslahi kwenye tovuti na kusaidia kuongezea maudhui ya maandishi.

Kuongeza maandiko na picha kwenye tovuti ni rahisi. Nakala huongezwa kwa vitambulisho vya kawaida vya HTML kama aya, vichwa, na orodha, wakati picha zimewekwa kwenye ukurasa na kipengele . Mara tu umeongeza picha kwenye ukurasa wako wa wavuti, hata hivyo, ungependa kuwa na mtiririko wa karibu na picha, badala ya kuunganisha chini yake (ambayo ni njia ya default picha iliyoongezwa kwenye msimbo wa HTML itatoa katika kivinjari). Kwa kitaalam, kuna njia mbili unaweza kufikia kuangalia hili, ama kwa kutumia CSS (ilipendekezwa) au kwa kuongeza maelekezo ya kuona moja kwa moja kwenye HTML (haipendekezi, kwa kuwa unataka kudumisha utengano wa mtindo na muundo wa tovuti yako).

Kutumia CSS

Njia sahihi ya kubadilisha njia ya ukurasa wa maandiko na picha na jinsi mitindo yao ya kuona inayoonekana katika kivinjari iko na CSS . Kumbuka tu, kwa kuwa tunasema juu ya mabadiliko ya Visual kwenye ukurasa (kutengeneza mzunguko wa maandishi kuzunguka picha), hii inamaanisha ni uwanja wa Majarida ya Sinema.

1. Kwanza, ongeza picha yako kwenye ukurasa wako wa wavuti. Kumbuka kuepuka sifa yoyote ya kuona (kama vile maadili ya upana na urefu) kutoka kwa HTML. Hii ni muhimu, hasa kwenye tovuti ya msikivu ambapo ukubwa wa picha utatofautiana kulingana na kivinjari. Programu fulani, kama Adobe Dreamweaver, itaongezea upana na urefu wa habari kwenye picha zilizoingizwa na chombo hicho, na hakikisha uondoe habari hii kutoka kwenye msimbo wa HTML! Je! Hakikisha, hata hivyo, ni pamoja na maandishi sahihi ya hifadhi . Hapa ni mfano wa jinsi code yako ya HTML inaweza kuonekana:
2. Kwa madhumuni ya maridadi, unaweza pia kuongeza darasa kwa picha. Thamani hii ya darasa ni nini tutayotumia kwenye faili yetu ya CSS. Kumbuka kwamba thamani tunayotumia hapa ni ya uongofu, ingawa, kwa mtindo huu maalum, tunatumia kutumia maadili ya "kushoto" au "kulia", kulingana na njia gani tunataka picha yetu kuifanisha. Tunaona kuwa syntax rahisi kufanya kazi vizuri na kuwa rahisi kwa wengine ambao wanaweza kuwa na kusimamia tovuti baadaye kuelewa, lakini unaweza kutoa hili thamani yoyote ya darasa unayotaka.
   2. Kwa yenyewe, thamani hii ya darasa haiwezi kufanya chochote. Sura haitakuwa sawa na kushoto kwa maandiko. Kwa hili, sasa tunahitaji kurejea kwenye faili yetu ya CSS.

1. Katika stylesheet yako, sasa unaweza kuongeza mtindo uliofuata:
   1. .left {
   2. kuelea: kushoto;
   3. padding: 0 20px 20px 0;
   4. }
   5. Nini ulichofanya hapa ni kutumia mali ya "kuelea" ya CSS , ambayo itauvuta picha kutoka kwa mtiririko wa kawaida wa kawaida (njia ambayo picha inaweza kawaida kuonyesha, pamoja na maandishi iliyokaa chini yake) na itaifunga kwa upande wa kushoto wa chombo chake . Nakala inayokuja baada yake katika markup ya HTML na kuifunga sasa. Tuliongeza pia maadili ya pedi ili maandishi haya yasiweke moja kwa moja dhidi ya picha. Badala yake, itakuwa na nafasi nzuri ambayo itaonekana ya kuvutia katika kubuni ukurasa. Katika css shorthand kwa padding, sisi aliongeza 0 maadili juu na kushoto upande wa picha, na pixels 20 upande wa kushoto na chini. Kumbuka, unahitaji kuongeza paneli fulani upande wa kulia wa picha iliyosawazishwa iliyo kushoto. Sura ya kulia iliyokaa (ambayo tutaangalia kwa muda mfupi) ingekuwa na padding inayotumika upande wake wa kushoto.
2. Ikiwa utaona ukurasa wako wa wavuti katika kivinjari, unapaswa sasa kuona kwamba picha yako imeunganishwa na upande wa kushoto wa ukurasa na maandishi hutafuta vizuri. Njia nyingine ya kusema hii ni kwamba picha "inaelekezwa kushoto".

1. Ikiwa unataka kubadilisha picha hii ili kuzingatia haki (kama mfano wa picha unaoambatana na makala hii), itakuwa rahisi. Kwanza, lazima uhakikishe kwamba, pamoja na mtindo tuliongeza kwenye CSS yetu kwa thamani ya darasa ya "kushoto", tunayo moja ya kuunganishwa kwa haki. Inaonekana kama hii:
   1. .haki {
   2. kuelea: haki;
   3. padding: 0 0 20px 20px;
   4. }
   5. Unaweza kuona kwamba hii inakaribia kufanana na CSS ya kwanza tuliyoandika. Tofauti pekee ni thamani tunayotumia kwa mali ya "kuelea" na maadili ya padding tunayotumia (kuongeza baadhi upande wa kushoto wa picha yetu badala ya haki).
2. Hatimaye, utabadilisha thamani ya darasa la picha kutoka "kushoto" hadi "kulia" katika HTML yako:
3. Angalia ukurasa wako katika kivinjari sasa na picha yako inapaswa kuunganishwa kwa haki na maandishi kufunika kwa karibu kote. Tunaongeza kuongeza mitindo yote hii, "kushoto" na "haki" kwenye mitindo yetu yote ili tuweze kutumia mitindo hii ya kuona kama inavyotakiwa tunapojenga kurasa za wavuti. Mitindo miwili ya kuwa nzuri, vipengee vinavyoweza kutumika ambavyo tunaweza kurejea wakati wowote tunapohitaji picha za mtindo na kuzunguka maandishi kuzunguka.

Kutumia HTML Badala ya CSS (na Kwa nini Unapaswa & # 39; t Je, hii)

Ingawa inawezekana kufunga maandishi karibu na picha na HTML, viwango vya wavuti vinataja kuwa CSS (na hatua zilizotolewa hapo juu) ni njia ya kwenda ili tuweze kudumisha tofauti ya muundo (HTML) na mtindo (CSS). Hii ni muhimu hasa wakati unapofikiri kuwa, kwa vifaa na mipangilio fulani, maandishi hayo hayatakiwi kuzunguka picha. Kwa skrini ndogo, mipangilio ya tovuti ya msikivu inaweza kuhitaji kuwa maandiko inaunganisha kweli chini ya picha na kwamba picha inaweka upana kamili wa skrini. Hii inafanywa kwa urahisi na maswali ya vyombo vya habari ikiwa mitindo yako ni tofauti na markup yako ya HTML. Katika ulimwengu wa kisasa wa kifaa, ambapo picha na maandiko zitatokea tofauti kwa wageni tofauti na kwenye skrini tofauti, kujitenga hii ni muhimu kwa mafanikio ya muda mrefu na usimamizi wa ukurasa wa wavuti.