Muundo wa tovuti unaobadilika ni mfumo rahisi wa kuonyesha tovuti sawa kwenye aina tofauti za vifaa mtandaoni. Kwa maneno rahisi, huu ni uwezo wa kuona ukurasa mmoja wa wavuti kwenye kompyuta ndogo, simu mahiri na vifaa vingine.
Uwajibikaji kwenye wavuti umekuwa jambo la lazima tangu watu wapate vifaa vinavyoweza kutumia intaneti vya miundo mbalimbali. Makampuni, maduka ya mtandaoni, na hata tovuti za habari tu hujitahidi kufurahisha watazamaji wao, kukabiliana nayo kwa kila njia iwezekanavyo. Muundo sikivu hutatua tatizo la urahisi, kwa hivyo ni kazi ya lazima.
Sifa za Muundo wa Wavuti Unaojibu
Urahisi wa muundo unaangaziwa kwa vigezo kadhaa kuu.
- Ukubwa. Muundo wa tovuti unaojibu unapaswa kuwa na tofauti ndogo wakati wa kuonyesha ukurasa kwenye vifaa tofauti, kwa hivyo saizi za picha, maandishi na vipengele vingine vinavyotazamwa vinapaswa kuendana na saizi za vifaa vyenyewe. Ili kufanya hivyo, watengenezaji wavuti hurekebisha muundo ili uwe na matoleo mengi ya mwonekano.
- Kurekebisha maudhui. Nyenzo zinazojaza tovuti (picha, videona vipengele vingine vya media titika) lazima pia zilingane na ubora unaohitajika wa skrini bila kupoteza ubora wa onyesho.
- Kubadilika kwa muundo. Kuingizwa katika maendeleo ya vipengele vinavyokuwezesha kurekebisha haraka muundo wa tovuti unapobadilisha ukurasa wa wavuti unaotazama. Kwa mfano, mtumiaji anasogeza ukurasa juu na chini, kupitia sehemu tofauti, au kubadilisha nafasi ya skrini kutoka wima hadi mlalo na kinyume chake.
- Rahisisha vipengee kulingana na kifaa kwa utumiaji bora.
- Ficha vizuizi visivyo muhimu kwenye skrini ndogo.
Misingi
Ujenzi wa tovuti bila shaka unahusiana na lugha za kupanga programu, kwa sababu huwezi kufanya bila lugha hizo. Kwa kutumia HTML na CSS, kivinjari hutambua muundo na mpangilio wa vitu (maandishi, vielelezo, video) - hivi ndivyo tovuti inavyoundwa.
CSS inawajibikia rangi, mitindo, ukubwa, fonti, mpangilio, pedi, vipengele vya usuli, fomu, n.k. HTML inawajibika kwa maudhui na muundo wa tovuti kwa ujumla. Kwa hivyo, rasilimali ya wavuti hujengwa katika jumla ya mbinu mbili muhimu za maelezo.
CSS, kwa upande mwingine, ni zana ya lazima ya kubuni. Ina seti kubwa ya vipengele ambavyo ni bora kuliko HTML:
- Hutoa uwiano wa muundo katika kurasa nyingi, mwonekano wa tovuti, na kudhibiti uonyeshaji wa hati za HTML.
- Hukupa fursa ya kufanya muundo na maudhui kwa wakati mmoja.
- Hutumia mitindo mingi na uwezo wakutazama kwenye vifaa tofauti.
- Hufanya maamuzi changamano ya muundo.
- Ina sifa ya kasi ya juu.
Ili kuunda tovuti, unahitaji kujua baadhi ya dhana za kimsingi.
Kiteuzi cha CSS kinaonyeshwa kwa jina la mtindo unaofafanua sifa na chaguo za uumbizaji. Huambia kivinjari ni kipengele gani mahususi sifa hizo zinatumika.
Sifa ni kitengo cha muundo. Inafafanua vigezo vya nje (ukubwa, eneo, rangi, umbo, n.k.) na inaonyeshwa kwa msimbo maalum.
Kuna seti ya sifa zilizobainishwa za CSS zinazoelezea kitu kimoja kwa mwonekano na eneo.
Pamoja, vipengele hivi huunda mpango ufuatao:
Kiteuzi {mali1: thamani; mali2; thamani }.
Ukubwa wa muundo na maazimio
Ukuzaji wa muundo huanza na utayarishaji wa mpangilio katika Photoshop au programu zingine za picha. Kwa urahisi, alama maalum za gridi ya msimu huletwa kwenye turubai, indents maalum huzingatiwa. Kwa hivyo, mbunifu wa wavuti humwonyesha mbuni wa mpangilio kanuni za kuunda tovuti ya baadaye na mpangilio sahihi wa vipengee vya wavuti.
Maazimio na ukubwa wa muundo wa wavuti unaojibika kwa aina kuu za vifaa:
- Muundo huu unazingatia kanuni ya kuanza kufanya kazi kwa ruhusa ya simu ya mkononi. Mpangilio wa simu mahiri umeundwa kwa ukubwa wa 460 × 960 px.
- Ukubwa wa mpangilio wa kompyuta ya mkononi ni 768 × 1024.
- Ukubwa wa daftari ni 1280 × 802.
- Ukubwa wa Kompyuta ni 1600 × 992.
Katika toleo la tovuti ya simu ya mkononiinapaswa kurahisishwa iwezekanavyo, huku ikibakiza kazi zote kuu. Ikiwa mpangilio unatayarishwa kwa duka la mtandaoni, na kurahisisha yote katika matumizi, inapaswa kuwa na maelezo kuu, orodha ya bidhaa, chaguo la kuagiza, gari la ununuzi, nk - vipengele vyote muhimu kwa kazi kamili, kama vile kutazama kwa umbizo kamili kwenye Kompyuta. Urahisi wa toleo la simu ni kwamba hapa unaweza kuepuka kurasa za ziada ili kuokoa muda unapopakia.
Katika maudhui yanayojirekebisha, kwa kutumia msimbo wa html, unaweza kuficha baadhi ya vipengele ambavyo havihitajiki kabisa. Kwa mfano, kwa azimio la juu, tovuti inaonyesha kadi ya bidhaa na maelezo yake, bei, taarifa za utoaji na uwezo wa kuongeza kwenye "Kikapu". Katika ubora wa simu ya mkononi, mchakato hurahisishwa kwa picha, bei na kitufe cha kununua.
Maazimio ya kati na ya chini kwa muundo unaoitikia yanapaswa kuzingatia urahisi wa kusoma na kutazama kwa mtumiaji.
Muundo
Madhumuni ya muundo wa muundo unaobadilika ni kuunda mpangilio unaonyumbulika, au kama ilivyo desturi pia kusema: "kiolezo cha mpira". Jambo la msingi haliko katika ukubwa wa ukurasa wa tarakimu moja, lakini katika kubana sawia kwa kiolezo kwa utazamaji rahisi kwenye vifaa vyote.
Imeundwa kwa kutumia CSS. Wakati wa maendeleo, pointi za udhibiti wa vipimo vya skrini hutambuliwa. Kwa hivyo, upana wa vitu vilivyobaki umeamua. Ili kufanya hivyo, upana wa ukurasa umewekwa na mali ya css max-width, kulingana na vigezo hivi, ukubwa wa vipengele vingine huchaguliwa kama asilimia. Kwa mfano, saizi ya block kwenye kuuukurasa ni 600px, na upana wa utepe wa kando (upau wa tovuti) ni 400px, mtawalia, upana wa maudhui utakuwa 60%, na upana wa utepe 40%.
Kuna aina kadhaa za miundo inayoitikia. Kila moja huchaguliwa kivyake, kulingana na vipengele na muundo.
Mionekano:
- Aina ya mpangilio unaoruhusu vizuizi kufungwa wakati ubora wa skrini umepunguzwa. Kwenye tovuti za safu wima nyingi, vizuizi vya ziada vinasogezwa hadi chini ya skrini.
- Mchoro tofauti unapotayarishwa kwa kila ruhusa. Aina hii ya muundo unaojibu huchukua muda mrefu lakini ndiyo inayosomeka zaidi.
- Aina rahisi ya muundo unaolenga kuongeza vipengele vyote. Hainyumbuliki.
- Aina ya paneli ni rahisi kwa matumizi katika programu za simu, wakati vitendaji vya ziada vinapoonekana wakati wa kubadilisha mkao wa skrini yenyewe.
Kuunda safu zinazoitikia ni sehemu moja tu ya kazi. Picha zinazojirekebisha ni kipochi tofauti, ambacho kina matatizo na mbinu zake za kuzitatua.
Picha moja lazima ionyeshwe kwa uwazi katika ubora tofauti wa skrini. Kuna tatizo hapa - jinsi ya kuhakikisha kwamba picha daima inabakia sawa, bila kujali mabadiliko katika azimio. Kuweka msimbo rahisi wa CSS katika kesi hii haitatosha.
Mfano: img {max-width: 250px;} - hapa unapaswa kutumia mbinu ambayo ukubwa wa chombo kilicho na picha ni mdogo, na si picha yenyewe. Itaonekana kitu kama hiki: div img {max-width: 250px;}. Njia hii hutatua tatizompangilio wa picha ndogo, lakini hazifai kwa vielelezo vikubwa.
Kwa hivyo, wasanidi wengi wanapendelea kutumia lugha za javascript ambazo hukuruhusu kurekebisha picha yoyote bila kupakia seva kupita kiasi. Javascript inatoa idadi kubwa ya hati mbadala.
Faida na hasara za mpangilio msikivu
Chanya:
- Hifadhi eneo la vipengele vyote. Hii ni rahisi wakati mtumiaji anatumiwa kwa toleo kamili la tovuti.
- Hifadhi vikoa na anwani.
- Uwekaji mapendeleo kamili wa miundo mingine ya ruhusa.
Hasi:
- Unyumbufu wa kiutendaji umepotea
- Upakiaji wowote wa taarifa umejaa uzinduzi wa muda mrefu wa rasilimali ya wavuti, ambayo huwalazimu watumiaji wengi kubadili chaguo za haraka zaidi.
Kuunda tovuti
Muundo wa tovuti umegawanywa katika sehemu na vizuizi kadhaa. Kijadi, mpangilio una sehemu ya juu ya tovuti (kichwa), nembo, menyu, kizuizi cha yaliyomo na sehemu ya mwisho ya tovuti (kwa mfano, maelezo ya kina ya mawasiliano). Hebu tuone jinsi ya kutengeneza muundo wa tovuti unaoitikia ukitumia kiolezo rahisi.
Lebo saidizi za kuandika:
- kanda - lebo inayochanganya vipengele vyote vya kiolezo;
- kichwa H1 - nembo;
- header - kichwa cha menyu na vipengele vingine muhimu;
- maudhui - zuia;
- colshoto - saizi ya maudhui;
- colKulia - utepe (safu wima ya kando);
- chini - sehemu ya mwisho ya tovuti;
- skrini ya midia - setiazimio linalohitajika.
Unapoandika tovuti, vipengele hivi vinaweza kusonga kwa mpangilio tofauti, kulingana na hitaji. Kwa mfano, kwa maazimio ya juu, menyu inaweza kuonyeshwa kwa wima. Katika toleo la rununu, mpangilio unaweza kujengwa kwa njia ambayo menyu itateleza katika mkao mlalo.
- viewport - lebo inayokuruhusu kuhifadhi ukubwa wa maandishi katika toleo dogo la muundo. Iko kati ya lebo.
- upana-wa juu - ili kuboresha tovuti ili kuepuka kunyoosha katika mibozi ya zaidi ya pikseli 1000.
Wakati wa kutekeleza mpangilio, maktaba ya jQuery husaidia sana unapohitaji kubadilisha mtindo na muundo wa vizuizi.
Kuna tofauti gani kati ya muundo sikivu na wa simu
Kwa ufahamu kamili, zingatia mifano michache ya kielelezo, kwani mkanganyiko kati ya dhana hizi mbili si jambo la kawaida.
Unahitaji kuelewa kuwa toleo la simu ya mkononi ni analogi ya tovuti msingi yenye kikoa kidogo. Uwasilishaji wa nje wa tovuti hurudia kabisa mtindo na utendakazi, wakati muundo na maudhui yake yanaweza kutofautiana na toleo kuu, kwa kuwa toleo limepunguzwa kwa vipengele muhimu.
Muundo wa kuitikia ni bora kwa ubora wote wa kifaa. Inaweza kuongezwa na inatoa ipasavyo bila kujali hali ya kutazama.
Haya ni mawasilisho mawili tofauti ya tovuti, ambayo mabishano hukasirisha ni nani aliye bora zaidi. Ikumbukwe kwamba hakuna uamuzi wa uhakika bado umefikiwa. Mtu anasifu muundo huu, akionyesha mwenendo wa mtindo na faida nyingi. Toleo la rununu pia lina faida kadhaa ambazo muundo wa msikivu hauna. Kwa hivyo, kwa kuanzia, unapaswa kuelewa mahitaji ya kimsingi.
Faida
Je, muundo wa kuitikia ni bora kuliko simu ya mkononi?
Ufanisi. Katika wakati wetu, na ukuaji huo wa soko, ni muhimu tu kuwasilisha habari kwa njia tofauti, kukidhi matakwa ya watumiaji. Muundo sikivu hutatua tatizo hili.
Ofa bora katika injini za utafutaji. Nini haiwezi kuhusishwa na faida kuu za kifaa cha kurekebisha. Mitambo ya utafutaji inapendelea kuwapa watumiaji tovuti zinazoitikia.
Utumiaji. Muundo wa kuitikia kwa kawaida hutengenezwa kwa suluhu bora zaidi za muundo, ambazo ni zawadi nzuri kwa mwonekano wa watumiaji.
Urahisi na usahili katika utekelezaji wa mradi na matumizi yake.
Viwango vyema vya ubadilishaji. Kwa kuwa kwa muundo unaobadilika kuna fursa zaidi za kuonyesha, ubadilishaji wenyewe huongezeka.
Uchumi. Ni nafuu zaidi kuliko kuunda na kutangaza toleo tofauti la simu ya mkononi.
Faida na hasara za toleo la simu
Kuunda muundo unaoitikia wa simu ya mkononi kunahitaji utengamano na uthabiti. Kwanza kabisa, inashauriwa kuandika masharti ya kumbukumbu kwa undani, ambayo, kwa kweli, itasaidia kuzuia kazi isiyo ya lazima na kuokoa wakati, na pia kuzingatia sifa za seva ambayo tovuti itakaribishwa..
Kuna faida na hasara fulani kwa muundo wa iitikiaji wa simu ya mkononi.
Faida:
- Ikiwa una tovuti iliyotengenezwa tayari, hakuna haja ya kutengeneza muundo wa toleo la simu kuanzia mwanzo. Ni mabadiliko machache tu yanaweza kufanywa, na kukomboa mpangilio huu kutoka kwa utendakazi usiohitajika.
- Kwa sababu ya kila aina ya kurahisisha, toleo la simu ya mkononi huzingatiwa kwa haraka wakati wa kupakua.
- Mtumiaji huona taarifa muhimu zaidi katika maudhui yote.
- Utekelezaji wa haraka. Kuna programu-jalizi ambazo unaweza kutumia urekebishaji wa simu, hata kama hujui lebo na misimbo.
- Chaguo za injini ya utafutaji hupendelea matoleo yanayobadilika kwa sababu huchukua muda mfupi kuchanganua.
Hasara:
- Si matoleo yote ya simu yanaweza kulingana na ubora wa vifaa vya mkononi. Tovuti, bila shaka, itafungua, lakini azimio la skrini hailingani na mpangilio kila wakati. Wakati mwingine muundo wa simu mahiri uliobuniwa vyema unaweza kuonekana tofauti unapofunguliwa kama kompyuta kibao.
- Matoleo ya rununu yanahitaji vikoa tofauti vya kulipia.
- Kuna matatizo madogo kuhusu kuchapisha maudhui. Ikiwa kuna matoleo kadhaa mara moja, maudhui yanapaswa kurekebishwa kwa miundo yote mara moja. Kuwasilisha nyenzo mpya kwenye tovuti kuu na kuiga kwa toleo la simu inaweza kuchukuliwa kuwa kuiba. Ili kuepuka tatizo hili, unaweza kuthibitisha muunganisho wa rasilimali.
Mbinu za utekelezaji
Njia kuu za utekelezaji:
- Baada ya kuunda muundo wa mpangilio na mpangilio, hupakiwa kwa vipimo vinavyohitajika kwa kutumiatovuti ya operator na kanuni kuu. Hii ni njia ya kawaida inayotumiwa wakati wa kuunda matoleo ya kati na madogo (kompyuta kibao, simu mahiri n.k.).
- BootStrap ni seti rahisi na wazi ya zana za urekebishaji. Inafaa kwa kuunda matoleo ya Ukurasa wa Kutua na miradi mingine isiyo ngumu sana ya wavuti. Inatoa fursa nzuri ya kutumia mitindo mingi tofauti katika vitendaji vya kiolesura.
- Mfumo wa Gridi Unaojibu ni seti maarufu ya zana zinazoweza kutumika anuwai. Rahisi kutumia na hauitaji maarifa ya kina. Inajumuisha aina mbalimbali za infographics.
- GUMBY - Mfumo wa CSS unaojivunia usikivu rahisi na utumiaji mzuri wa zana.
- Vidakuzi - hukuruhusu kutekeleza picha sikivu. Huandamana kiotomatiki faili zilizoombwa na kivinjari.
- ExpressionEngine ni njia nyingine ya kuunda picha sikivu. Hubainisha ikiwa kifaa ni cha mkononi, kinachoweza kubadilisha picha hadi mwonekano unaohitajika.
- ProtoFluid - Hutoa uchapaji wa haraka. Inafaa kwa kila aina ya vifaa.
