Nakala ya kwanza

Nakala ya pili

Katika html, usuli wa tovuti haujabainishwa; hii imeandikwa kwa kutumia mitindo ya CSS, lakini huu ni utaratibu wa kinadharia tu. Sasa hebu tujue jinsi ya kuamua historia hii.

Asili ya tovuti au kizuizi tofauti

Kwa kuwa ili kufikia lengo hili tunahitaji faili ya css, tunahitaji kuiunda na kuiunganisha kwa html. Hii imeandikwa kuhusu. Baada ya hayo, unaweza kuanza kufanya kazi. Kwanza, unahitaji kuamua ni nini unataka kuweka mandharinyuma. Ikiwa ukurasa mzima kwa ujumla, basi unaweza kuifanya kama hii:

Mwili( Rangi ya usuli: nyeupe; )

Hiyo ni, tunafikia lebo ya mwili, ambayo inawakilisha ukurasa wetu wote. Ili kuweka rangi ya mandharinyuma, tumia kipengele cha rangi ya usuli. Lakini vipi ikiwa unahitaji kuweka usuli kwa muundo badala ya rangi thabiti? Kisha unapaswa kuandika kama hii:

Mwili( Picha ya usuli: url(njia ya kwenda kwenye picha. kiendelezi cha picha))

Kwa uwazi, napendekeza kuangalia kila kitu kwa undani zaidi kwa kutumia mfano. Kwa hili nitatumia picha hii:

Kwa mfano, picha ya usuli: url(comp.png) . Katika mfano huu, tumeweka picha ya mandharinyuma inayoitwa comp (hiyo ndiyo niliyoiita) katika umbizo la png, ambalo liko kwenye folda sawa na faili ya css.
Katika html nitaunda kizuizi maalum na vipimo maalum ili kuonyesha utendakazi wa mali za CSS.

Na hapa kuna mitindo yake:

#ct( Picha ya usuli: url(comp.png); upana: 600px; urefu: 400px;)

Hivi ndivyo tulivyopata:

Kwanini hivyo? Ukweli ni kwamba kwa default kivinjari hurudia picha mara nyingi ili kujaza kabisa kizuizi. Wakati mwingine hii ni muhimu, kwa mfano, wakati wa kutumia mifumo isiyo imefumwa, lakini kwa upande wetu kunapaswa kuwa na picha moja. Kwa bahati nzuri, hii inaweza kudhibitiwa kwa urahisi sana.

Rudia mandharinyuma

Ikiwa una picha kama usuli, basi kwa chaguo-msingi itarudiwa kwa usawa na wima ili kujaza nafasi nzima ya ukurasa. Ili kuondoa hii, tumia kipengele cha kurudia-rudia na thamani yake ya kutorudiwa. Pia kuna maadili yafuatayo:

• Rudia-x - kurudia tu kwa usawa
• Rudia-y - wima pekee

Wacha tuongeze kwa sifa za asili yetu ya picha:

Kurudia-rudia: hakuna kurudia;

Nafasi

Sifa ya nafasi ya usuli huamua mahali ambapo picha itawekwa. Thamani mbili zimebainishwa hapa - kwa usawa na kwa wima. Mifano: nafasi ya usuli: chini kulia - weka kwenye kona ya chini kulia, juu-kushoto - katika kona ya juu ya chini (na hivyo kwa chaguo-msingi), 250px 500px - kukabiliana kutoka kona ya juu kushoto kwenda kulia kwa pikseli 250 na chini kwa 500.

Wacha tuangalie mifano vizuri zaidi:

Msimamo wa usuli: juu kulia;

Picha itahamia kwenye makali ya juu ya kulia. Pia niliipa block background ya njano ili kingo zake ziweze kuonekana.

background-msimamo: 50% 50%;

Picha ilionekana hasa katikati ya kizuizi chake. Ndiyo, ndiyo, hii pia inawezekana shukrani kwa asilimia ya kurekodi nafasi.

nafasi ya nyuma: 70% 20%;

Mandharinyuma huhamishwa na 70% mlalo na 20% wima.

Pia inaruhusiwa kubainisha thamani ya nafasi hasi katika pikseli. Hii inaweza kufanyika, kwa mfano, wakati unatumia picha kubwa ya sprite na unahitaji kuweka sehemu inayohitajika ya sprite hii kwenye kizuizi.

Funga mandharinyuma

Pia napenda sana mali moja inayoitwa background-attachment . Ina maadili mawili tu na ya kwanza ni chaguo-msingi (sogeza). Hii ina maana kwamba unaposogeza ukurasa, mandharinyuma pia yatasonga, na ikiwa unatumia picha bila kurudia, hatimaye itaisha na itakuwa tu rangi thabiti.

Ili kuzuia hili kutokea, kiambatisho cha usuli: fasta kimebainishwa na sasa usuli wetu umewekwa mahali salama. Hii inaweza kulinganishwa na jinsi ya kufafanua nafasi iliyowekwa kwa kizuizi ili isipotee kutoka kwa ukurasa wakati inasonga.

Toleo la kifupi la wema huu wote

Tumejadili sifa nyingi zinazokuruhusu kuunda usuli, lakini ukizitumia zote, utaishia na rekodi ngumu. Kuna suluhisho la kifahari sana. Mali ya mandharinyuma hukuruhusu kuandika mipangilio muhimu iliyotenganishwa na nafasi kwa mpangilio huu:
Mandharinyuma: picha ya rangi kurudia nafasi ya pini;
Na sasa kila kitu kinaweza kuandikwa kama hii:

Mandharinyuma: url ya manjano(comp.png) hakuna kurudia 20% 100px;

Ikiwa mali fulani haitaji kufafanuliwa, basi imeachwa tu (kwa upande wetu, hatukuandika kiambatisho cha nyuma).

Asili nyingi

Je, ikiwa unahitaji picha kadhaa za mandharinyuma? Inatokea, unaweza kufanya nini? Leo CSS inaauni kipengele hiki. Hebu tujaribu pia. Hebu tuchukue ikoni hii

Niliita laptop.

Na hapa kuna nambari ya kuingiza simu nyingi:

Mandharinyuma: url(comp.png) hakuna kurudia 20% 100px, url(laptop.png) hakuna kurudia 50% 50%; background-rangi: njano;

Kama unavyoona, unahitaji tu kuweka koma baada ya picha ya kwanza na ingiza mipangilio ya pili. Katika kesi hii, ni bora kuweka rangi imara tofauti.

Vivyo hivyo, unaweza kurekodi picha nyingi zaidi unavyopenda, lakini usizidishe - picha nyingi sana sio nzuri sana.

Hapa ndipo ningependa kumalizia makala hii. Unaweza kufanya mambo mengine mengi ya kuvutia na historia, nitajaribu kuandika juu yao katika siku zijazo (na tayari nimeandika kitu - kwa mfano,). Bahati nzuri na uvumbuzi wako wa mali hii.

Salaam wote! Mtumishi wako mnyenyekevu anawasiliana nawe na sehemu ya nyenzo muhimu na ya vitendo juu ya mada ya jinsi ya kuweka msingi wa wavuti. Huu ni mwanzo kabisa wa mpangilio wa html na hapa nitaonyesha wazi kwa mfano jinsi unavyoweza kutengeneza mandharinyuma nzuri ya tovuti ambayo hakika itavutia mtumiaji wa Mtandao na kuongeza uhalisi.

Ikiwa umegundua, wafanyabiashara wengi wa mtandaoni hutumia usuli wa kipekee kwenye kurasa zao za mauzo na usajili. Leo tutachambua sehemu ya kiufundi ya mchakato huu.

Kwa hiyo, kwanza tunahitaji, bila shaka, picha. Kuna tovuti moja nzuri sana kwenye mtandao wa kigeni ambapo unaweza kupakua mbalimbali picha kwa mandharinyuma ya tovuti. Kuna tu idadi kubwa yao huko. Wavuti inaitwa Mifumo Mpole.

Inaonekana katika nafasi ya kwanza katika orodha ya injini ya utafutaji ya Google, kwa hiyo ninapendekeza kwa kazi. Unaweza pia kupata idadi kubwa ya tovuti zingine ukiandika kwenye mtambo wa kutafuta kitu kama vile "mifumo ya picha ya usuli", "kupakua picha ya usuli kwa tovuti" na kadhalika.

Ikiwa huna matatizo na lugha ya Kiingereza, utaielewa bila shida.

Katika makala hii nimechagua mada na inaitwa tweed. Unaweza kuipakua.

Hivi ndivyo inavyoonekana katika toleo dogo kwenye wavuti

Kwanza, tengeneza hati mpya katika programu

Na kabla ya kuihariri, hakikisha kuihifadhi chini ya jina, kwa mfano index.html na kuunda folda kwenye kompyuta, kwa mfano, unaweza kuunda folda "Tovuti yangu" na kuweka faili yetu ya index (index.html) ndani yake. Ni bora kuunda folda kwa Kiingereza ili kivinjari kisichanganyike. na kuonyesha tovuti kimakosa.

Kwa kuongezea hii, kwenye folda kuu "tovuti yangu" unahitaji kuunda folda ndogo mbili zaidi, kwa moja tutaweka picha zetu zote na itaitwa "picha", na nyingine tutaita "CSS" (mtindo wa kuteleza). sheets) na uweke faili hapo mtindo.css

Sasa tunaweza kufanya kazi katika hati yetu. Hatua inayofuata ni kuingiza msimbo tupu wa HTML, kinachojulikana kama mfumo mkuu ambao yote huanza. Unaweza kuipakua moja kwa moja. Ifuatayo, tutanakili kila kitu kutoka kwa faili hii na kuihamisha kwenye faili yetu ya programu. Matokeo ya mwisho yanapaswa kuwa kitu kama kifuatacho

Karibu na jina la faili utaona diski nyekundu ya floppy. Kwa hiyo, ikiwa ni nyekundu, inamaanisha kuwa faili haijahifadhiwa, hakikisha bonyeza kitufe cha kuokoa ili diskette igeuke bluu.

Katika lebo ya kichwa unaweza kubadilisha jina la hati, kwa mfano unaweza kuifanya "Ukurasa wangu wa kwanza wa wavuti". Na hakikisha kuwa ukurasa wako umehifadhiwa katika usimbaji UTF-8

Vinginevyo, ikiwa kuna encoding tofauti, kwa mfano madirisha-1251, basi maandishi ya hati katika kivinjari yataonyeshwa kwenye hieroglyphs. Unaweza kubadilisha usimbaji katika sehemu ya "Encodings - Encode katika Utf-8 (bila BOM)" kwenye upau wa programu.

Na usisahau kuokoa kila hatua tunayochukua.

Sasa hebu tuanze kuunda usuli katika hati yetu. Nitasema mara moja kwamba vitendo vyetu vyote kwenye muundo wa ukurasa wa wavuti vitafanyika kwa kutumia karatasi za mtindo wa kuachia zinazoitwa CSS, yaani, tutaunda sura katika html, na tutaileta kwa mtindo mzuri na mwonekano kwa kutumia. CSS.

Kwa njia hii utajifundisha utaratibu sahihi wa vitendo. Haupaswi kushughulika na mitindo moja kwa moja kwenye hati ya HTML; ni bora kuiweka katika hati tofauti.

Ili kufanya hivyo, katika programu yetu ya Notepad ++ tutaunda faili nyingine na kuiita Style.css na kuihifadhi kwenye folda mpya ya css, ambayo itakuwa iko kwenye folda iliyoshirikiwa "Tovuti yangu"

Kubwa! Ili kivinjari chetu kionyeshe ukurasa kwa usahihi, tunahitaji kuunganisha laha ya mtindo kwenye hati yetu ya html. Hivi ndivyo inafanywa

Tunaingia moja kwa moja kwenye mstari mzima hapo juu. Kwa mstari huu tunaunganisha karatasi yetu ya mtindo.
Sasa tutafafanua picha ya usuli kwa lebo ya mwili wetu kupitia laha ya mtindo. Ili kufanya hivyo, tunaunda muundo ufuatao katika hati ya style.css (ichukue tu na uandike katika msimbo wa programu)

Ngoja nieleze kidogo hapa. Sifa ya usuli ina thamani nyingi, mojawapo ikiwa ni kurudia-rudia, ambayo ina jukumu la kunyoosha taswira yetu ya usuli kwa hati ya wavuti.

USULI-RUDIA:

RUDIA //(nyoosha mlalo na wima) RUDIA-X // (nyoosha mlalo pekee) RUDIA-Y //(nyoosha wima pekee) HAKUNA-RUDIA //(usirudie picha ya usuli)

Kwa upande wetu, tunaiga picha yetu ndogo kwa wima na kwa usawa. Matokeo yake, ukurasa mzima umejaa picha yetu. Hivi ndivyo inavyoonekana kwenye kivinjari:

Pia nilifanya uteuzi wa tovuti hasa kwa ajili yako ambapo unaweza kupakua mandharinyuma nzuri ya tovuti

Vivinjari vya kisasa hukuruhusu kuongeza idadi ya kiholela ya picha za mandharinyuma kwenye kipengele, ukiorodhesha vigezo vya kila usuli uliotenganishwa na koma. Inatosha kutumia mali ya mandharinyuma ya ulimwengu wote na kutaja asili moja kwa hiyo kwanza na ya pili ikitenganishwa na koma.

Jinsi ya kunyoosha asili kwa upana kamili wa dirisha?

Ili kuongeza usuli, tumia mali ya ukubwa wa mandharinyuma; weka thamani yake hadi 100%, kisha mandharinyuma itachukua upana mzima wa dirisha la kivinjari. Kwa matoleo ya zamani ya vivinjari, unapaswa kutumia sifa maalum zilizo na viambishi awali, kama inavyoonyeshwa katika mfano 1.

Jinsi ya kuongeza picha ya mandharinyuma kwenye ukurasa wa wavuti?

Ili kuongeza picha ya usuli kwenye ukurasa wa wavuti, weka njia ya picha ndani ya thamani ya url ya sifa ya mtindo wa usuli, ambayo nayo huongezwa kwa kiteuzi cha mwili.

Je, inawezekana kutengeneza usuli uliohuishwa?

Uhuishaji ni mbinu yenye nguvu ambayo inaweza kuleta uhai wa hati yoyote, kwa hivyo haishangazi kwamba teknolojia ya Flash, ambayo huongeza katuni kwenye kurasa za wavuti, na zinazoingiliana wakati huo, imekuwa maarufu sana. Umbizo la picha la GIF pia linaauni uhuishaji rahisi kwa kubadilisha fremu kwa mpangilio. Kwa hiyo, kwa kutumia picha katika muundo huu, inawezekana kuhuisha picha za kibinafsi tu, bali pia historia ya ukurasa wa wavuti au kipengele maalum.

Kwanza, utahitaji kuunda picha ya uhuishaji katika umbizo la GIF, ambalo unaweza kutumia Adobe Photoshop au programu nyingine inayofaa kwa kusudi hili. Pia kuna maktaba ya faili zilizoundwa tayari za uhuishaji ambazo zinaweza kutumika kama taswira ya usuli. Ifuatayo, picha huongezwa kama usuli kwa kutumia mali ya mtindo wa usuli, kama inavyoonyeshwa kwenye Mfano wa 1.

Jinsi ya kuweka picha ya mandharinyuma kwenye kona ya chini ya kulia ya ukurasa?

Ili kudhibiti nafasi ya picha ya usuli kwenye ukurasa, sifa ya mtindo wa nafasi ya usuli hutumiwa; wakati huo huo huweka viwianishi vya mlalo na wima vya picha. Ili kughairi kurudia taswira ya usuli, tumia kipengele cha nafasi ya usuli chenye thamani ya kutorudia .

Ninawezaje kuzuia mandharinyuma isijirudie?

Kwa chaguo-msingi, taswira ya usuli inarudiwa kwa mlalo na wima, na kutengeneza mosai kwenye uwanja mzima wa ukurasa wa wavuti. Walakini, tabia hii ya nyuma haihitajiki kila wakati, haswa wakati wa kuweka picha moja, kwa hivyo kuongeza thamani ya kutorudia kwa mali ya mtindo wa usuli itasaidia.

Ninawezaje kufanya mandharinyuma kurudia wima tu?

Urudiaji wa usuli kwa kawaida huhitajika ili kuunda mistari ya mapambo au gradient ambazo zimefungwa kwa urefu wa kipengele cha ukurasa wa wavuti au dirisha. Katika hali kama hizi, kurudia usuli kwa wima hutoa picha thabiti, bila kujali saizi ya vipengee. Mara ya kwanza tu unapaswa kuhakikisha kuwa picha ya nyuma inarudiwa bila seams.

Wabunifu wengi wa mpangilio wa novice, wakichunguza tu kiini cha kuunda tovuti, mara nyingi wanashangaa jinsi ya kufanya mandharinyuma picha katika html. Na hata kama watu wengine wanaweza kufahamu kazi hii, matatizo bado hutokea wakati wa kunyoosha picha kwa upana mzima wa kufuatilia. Wakati huo huo, ningependa tovuti ionyeshwe kwa usawa kwenye vivinjari vyote, kwa hivyo mahitaji ya kivinjari lazima yatimizwe. Unaweza kuweka mandharinyuma kwa njia mbili: kwa kutumia mtindo wa CSS. Kila mtu anachagua chaguo bora zaidi kwao wenyewe. Kwa kweli, mtindo wa CSS ni rahisi zaidi, kwa sababu nambari yake imehifadhiwa kwenye faili tofauti na haichukui safu wima za ziada kwenye vitambulisho kuu vya tovuti, lakini kwanza, hebu tuangalie njia rahisi ya kuweka picha kwenye picha. mandharinyuma ya tovuti.

Lebo za msingi za HTML za kuunda usuli

Kwa hivyo, wacha tuendelee kwenye swali, usuli katika html kwenye skrini nzima. Ili tovuti ionekane nzuri, unahitaji kuelewa maelezo moja muhimu zaidi: inatosha tu kutengeneza msingi wa gradient au kuipaka na rangi thabiti, lakini ikiwa unahitaji kuingiza picha nyuma, haitanyoosha. katika upana mzima wa kufuatilia. Hapo awali, unahitaji kuchagua picha au ufanye muundo mwenyewe na kiendelezi ambacho ukurasa wako wa tovuti utaonyeshwa. Tu baada ya picha ya mandharinyuma iko tayari, ihamishe kwenye folda inayoitwa "Picha". Ndani yake tutahifadhi picha zote, uhuishaji na faili zingine za picha tunazotumia. Folda hii inapaswa kuwa katika saraka ya mizizi ya faili zako zote za html. Sasa unaweza kuendelea na msimbo. Kuna chaguzi kadhaa za kuandika nambari ambayo itabadilisha mandharinyuma kuwa picha.

1. Andika sifa ya lebo.
2. Kupitia mtindo wa CSS katika msimbo wa HTML.
3. Andika mtindo wa CSS katika faili tofauti.

Jinsi ya kufanya mandharinyuma kuwa picha katika HTML ni juu yako, lakini ningependa kusema maneno machache kuhusu jinsi ingekuwa bora zaidi. Njia ya kwanza, kwa kutumia kuandika kupitia sifa ya lebo, imepitwa na wakati. Chaguo la pili hutumiwa katika matukio machache sana, kwa sababu tu kanuni nyingi sawa zinapatikana. Na chaguo la tatu ni la kawaida na la ufanisi zaidi. Hapa kuna mifano ya HTML ya vitambulisho:

1. Njia ya kwanza ya kuandika ni kupitia sifa ya lebo (mwili) katika faili ya index.htm. Imeandikwa kwa namna ifuatayo: (mandharinyuma ya mwili= "Folder_name/Image_name.extension")(/mwili). Hiyo ni, ikiwa tunayo picha yenye jina "Picha" na kiendelezi cha JPG, na tukaita folda "Picha", basi ingizo la msimbo wa HTML litaonekana kama hii: (mwili background="Images/Picture.jpg"). … (/mwili).
2. Njia ya pili ya kurekodi huathiri mtindo wa CSS, lakini imeandikwa katika faili sawa inayoitwa index.htm. (body style="background: url("../Images/Picture.jpg")).
3. Na njia ya tatu ya kurekodi inafanywa katika faili mbili. Katika hati inayoitwa index.htm, mstari ufuatao umeandikwa: (head)(link rel="stylesheet" type="text/css" href="Njia_to_CSS_file")(/head). Na katika faili ya mtindo inayoitwa style.css tayari tunaandika: body (background: url(Images/Picture.jpg")).

Tumejadili jinsi ya kutengeneza taswira ya usuli katika HTML. Sasa unahitaji kuelewa jinsi ya kunyoosha picha kwa upana wa skrini nzima.

Njia za kunyoosha picha ya nyuma kwa upana wa dirisha

Hebu tufikirie skrini yetu katika hali ya asilimia. Inageuka kuwa upana wote na urefu wa skrini itakuwa 100% x 100%. Tunahitaji kunyoosha picha kwa upana huu. Hebu tuongeze mstari kwenye ingizo la picha katika faili ya style.css, ambayo itanyoosha picha kwa upana mzima na urefu wa kufuatilia. Je, hii imeandikwaje kwa mtindo wa CSS? Ni rahisi!

mandharinyuma: url(Images/Picture.jpg")

saizi ya nyuma: 100%; /* ingizo hili linafaa kwa vivinjari vingi vya kisasa */

Kwa hivyo tulifikiria jinsi ya kutengeneza picha kama usuli katika html ili kujaza skrini nzima. Pia kuna njia ya kuandika katika faili ya index.htm. Ingawa njia hii imepitwa na wakati, ni muhimu kwa wanaoanza kuijua na kuielewa. Katika (kichwa)(mtindo) div ( saizi ya usuli: kifuniko; ) (/mtindo) (/kichwa), ingizo hili linamaanisha kuwa tutatenga kizuizi maalum kwa mandharinyuma, ambacho kitawekwa katika upana mzima wa dirisha. Tuliangalia njia 2 za kufanya usuli wa tovuti kuwa taswira ya HTML ili picha ienee katika upana mzima wa skrini katika kivinjari chochote cha kisasa.

Jinsi ya kutengeneza background fasta

Ikiwa unaamua kutumia picha kama msingi wa rasilimali ya wavuti ya baadaye, basi unahitaji tu kujua jinsi ya kuifanya isiyo na mwendo ili isienee kwa urefu na kuharibu mwonekano wa uzuri. Ni rahisi kutosha kuandika nyongeza hii ndogo kwa usaidizi. Unahitaji kuongeza kifungu kimoja cha maneno katika faili ya style.css baada ya usuli: url(Images/Picture.jpg") iliyosasishwa; au badala yake ongeza mstari tofauti baada ya nusu-koloni - nafasi: fasta. Kwa hivyo, taswira yako ya usuli haitasonga. Wakati wa Kupitia yaliyomo kwenye tovuti, utaona kwamba mistari ya maandishi inasonga, lakini usuli unabaki mahali.Kwa hivyo umejifunza jinsi ya kufanya usuli kuwa picha katika html, kwa njia kadhaa.

Kufanya kazi na jedwali katika HTML

Watengenezaji wengi wa wavuti wasio na uzoefu, wanapokabiliwa na meza na vizuizi, mara nyingi hawaelewi jinsi ya kutengeneza picha kama usuli wa jedwali katika HTML. Kama mitindo yote ya CSS, lugha hii ya programu ya wavuti ni rahisi sana. Na suluhisho la shida kama hiyo itakuwa kuandika mistari kadhaa ya nambari. Unapaswa kujua kuwa uandishi wa safu mlalo na safu wima za jedwali hurejelewa kama tagi za (tr) na (td) mtawalia. Ili kutengeneza mandharinyuma ya jedwali kwa namna ya picha, unahitaji kuongeza maneno rahisi kwenye tagi ya (meza), (tr) au (td) inayoonyesha kiungo cha picha: mandharinyuma = URL ya picha. Kwa uwazi, hebu tupe mifano michache.

Majedwali yaliyo na picha badala ya usuli: mifano ya HTML

Hebu tuchore jedwali la 2x3 na tufanye usuli wake kuwa picha iliyohifadhiwa kwenye folda ya “Picha”: (mandharinyuma ya jedwali = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/meza). Kwa njia hii meza yetu itachorwa kwenye mandharinyuma ya picha.

Sasa hebu tuchore bati sawa na vipimo 2x3, lakini ingiza picha kwenye safu wima zilizo na nambari 1, 4, 5 na 6. (meza)(tr)(td background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Picha/Picture.jpg”)4(/td) (td background = “Picha/Picture.jpg”) 5( /td) (td background = “Picha/Picture.jpg”)6(/td) (/tr) (/meza). Baada ya kutazama, tunaona kwamba mandharinyuma inaonekana tu kwenye seli ambazo tumejiandikisha, na sio kwenye meza nzima.

Utangamano wa kivinjari cha tovuti

Pia kuna kitu kama utangamano wa kivinjari cha rasilimali ya wavuti. Hii ina maana kwamba kurasa za tovuti zitaonyeshwa kwa usawa katika aina tofauti na matoleo ya vivinjari. Katika kesi hii, unahitaji kurekebisha msimbo wa HTML na mtindo wa CSS kwa vivinjari vinavyohitajika. Kwa kuongeza, katika zama za kisasa za maendeleo ya smartphone, watengenezaji wengi wa wavuti wanajaribu kuunda tovuti zilizobadilishwa kwa matoleo ya simu na maoni ya kompyuta.