Phunzirani momwe asakatuli a pawebusaiti amadziwonetsera chiwonetsero pogwiritsa ntchito chiwerengero cha ndalama
Ophunzira ambiri omwe amagwiritsa ntchito ma webusaiti amatha kukhala ndi nthawi yovuta pogwiritsa ntchito peresenti ya chiwerengero chachikulu. Makamaka, pali chisokonezo ndi momwe osatsegulira amawerengera magawo amenewo. Pansipa mudzapeza tsatanetsatane wa momwe kuchuluka kwa ntchito kumagwiritsira ntchito mawerengero ambiri pa webusaitiyi.
Kugwiritsira ntchito Pixel kwa Zigawi Zakukula
Mukamagwiritsa ntchito ma pixeloni ngati mtengo wamtali, zotsatira zimakhala zosavuta. Ngati mumagwiritsa ntchito CSS kuti muyambe kuyika chiwerengero chachikulu cha chigawocho pamapikiselanti 100, chigawochi chidzakhala kukula mofanana ndi kamodzi komwe mumagwiritsa ntchito ma pixel 100 pa tsamba la webusaitiyi kapena phazi kapena malo ena tsamba. Ma pixels ndi ofunika kwambiri, kotero pixelisi 100 ndi pixels 100 mosasamala kanthu komwe mu document yanu chinthu chimapezeka. Mwamwayi, pamene miyeso ya pixel ndi yosavuta kumvetsetsa, sizigwira ntchito bwino m'mawebusaiti obvomerezeka.
Ethan Marcotte anagwiritsira ntchito mawu akuti "makina ogwira ntchito pa webusaiti", akufotokozera njirayi monga ali ndi akulu akulu atatu:
- Grid yamadzimadzi
- Zida zamagetsi
- Mafunso a Media
Mfundo ziwiri zoyambirirazi, gulu la madzi ndi zamadzimadzi, zimapezeka pogwiritsira ntchito magawo ena, mmalo mwa pixelisi, poyesa maonekedwe.
Kugwiritsira ntchito Miyeso ya Zigawi Zakukula
Mukamagwiritsa ntchito maperesenti kuti muyambe m'lifupi kwa chinthucho, kukula kwake komwe mawonetsedwewo amatha kumasiyanasiyana malinga ndi komwe kuli m'kalembedwe. Miyeso ndi ya mtengo wapatali, kutanthauza kuti kukula kwake kukuwonetsedwa kumagwirizana ndi zinthu zina muzolemba zanu.
Mwachitsanzo, ngati muyika chiwerengero cha fano mpaka 50%, izi sizikutanthauza kuti chithunzicho chidzawonetsera hafu ya kukula kwake. Izi ndizolakwika zolakwika.
Ngati chithunzi chili ndi ma 600 pixels ambiri, ndiye kugwiritsa ntchito CSS mtengo kuwonetsera pa 50% sikukutanthauza kuti adzakhala 300 pixels lonse mu webusaitiyi. Mtengo wa peresenti uwu umakhala wowerengeka kuchokera pa chinthu chomwe chili ndi fano, osati kukula kwa chifaniziro chomwecho. Ngati chidebe (chomwe chingakhale kupatukana kapena chinthu china cha HTML) ndi zazikulu 1000 pixels, ndiye chithunzi chidzawonetsedwa pa pixel 500 popeza mtengowo ndi 50% m'lifupi mwake. Ngati zinthuzo zili ndi ma pixel 400, ndiye kuti chithunzichi chidzawonetsedwa pamapikseli 200, popeza kuti mtengowo ndi 50%. Chithunzi chomwe chilipo pano chili ndi 50% kukula komwe kumatengera kwathunthu pa chigawo chomwe chiri nacho.
Kumbukirani, kukonzekera bwino ndikumadzimadzi. Zolemba ndi kukula kwake zidzasintha ngati kukula kwazithunzi / chipangizo chimasintha . Ngati mumaganizira za izi muzinthu zakuthupi, zosagwiritsidwa ntchito pa webusaiti, zili ngati kukhala ndi makatoni omwe mumadzaza ndi zinthu zonyamula katundu. Ngati mukunena kuti bokosilo liyenera kukhala lakhumi lodzaza ndi zakuthupi, kuchuluka kwakunyamula zomwe mukufunikira kumasiyanasiyana malinga ndi kukula kwa bokosi. Zomwezo zimakhala zowonjezera pazitali zazitali mu web design.
Miyeso Kuchokera Peresenti Zina
M'chitsanzo cha chithunzi / chophimba, ndagwiritsa ntchito ma mtengo a pixel kwa zinthu zomwe zili ndizomwe zimasonyeza momwe chithunzi chokometsera chiwonetsera. Zowona, zomwe zilipozo zikanakhazikitsidwa ku chiwerengero ndi fano, kapena zinthu zina, mkati mwa chidebecho chikhoza kupeza malingaliro awo peresenti ya peresenti.
Pano pali chitsanzo china chomwe chikuwonetsa izi pakuchita.
Nenani kuti muli ndi webusaitiyi pomwe malo onsewa ali ndi magawano ndi gulu la "chidebe" (wamba web design practice). Mkati mwa magawano amenewo pali magawo ena atatu omwe mudzakhala nawo kale kuti muwonetse ngati mizere itatu yowona. HTML ikhoza kuoneka ngati iyi:
Tsopano, mungagwiritse ntchito CSS kukhazikitsa kukula kwa chigawenga "chotengera" kunena 90%. Mu chitsanzo ichi, kusiyana kwa chidebe kulibe chinthu china chomwe chimayandikana ndi china osati thupi, chimene sitinachiyike ku mtengo uliwonse. Mwachizolowezi, thupi lidzapereka zenera lazenera la 100%. Choncho, chigawo cha "chigawo" chotengera chidzakhazikitsidwa ndi kukula kwawindo la osatsegula. Pamene tsamba la osatsegula likusintha kukula, kotero kukula kwa "chotengera" ichi. Kotero ngati mawindo osatsegula ndi ma pixel 2000 apakati, magawanowa adzawonetsedwa pa mapikseli 1800. Izi zikuwerengedwa ngati 90 peresenti ya 2000 (2000 x .90 = 1800), yomwe ndi kukula kwa osatsegula.
Ngati magawo onse a "col" omwe amapezeka mu "chidebe" adayikidwa kukula kwa 30%, ndiye aliyense wa iwo adzakhala ma pixel 540 m'zitsanzo izi. Izi zimawerengedwa monga 30% pa mapepala a 1800 omwe chidebechi chimafika pa (1800 x .30 = 540). Ngati tasintha chiwerengero cha chidebecho, magulu amkatiwa angasinthe ndi kukula komwe akupereka chifukwa akudalira zomwe zilipo.
Tiyeni tiganize kuti mawindo osatsegula amakhalabe pa pixels 2000, koma timasintha peresenti ya chidebecho mpaka 80% mmalo mwa 90%. Izi zikutanthauza kuti zidzakwaniritsidwa pa pixel 1600 tsopano (2000 x .80 = 1600). Ngakhale sitinasinthe CSS kukula kwa magawo atatu a "col", ndikusiya iwo pa 30%, iwo apereka mosiyana tsopano popeza zomwe zili ndi zinthu, zomwe ndizofunika kwambiri, zasintha. Magulu atatuwa tsopano apereka ma pixel 480 mbali iliyonse, yomwe ndi 30% ya 1600, kapena kukula kwa chidebe (1600 x .30 = 480).
Poganizira izi, ngati pangakhale chithunzi mkati mwa magawo ena a "col" ndipo chithunzicho chinali chachikulu pogwiritsa ntchito peresenti, nkhani yakeyi idzakhala "col" yokha. Pamene gawo la "col" lija linasintha mu kukula, kotero chifanizirocho mkati mwake. Kotero ngati kukula kwa osatsegula kapena "chidebe" kusinthidwa, izo zingakhudze magawo atatu a "col", omwe angasinthe kukula kwake kwa chithunzi mkati mwa "col." Monga mukuonera, izi zonse zogwirizana Zimabwera pazomwe zimayendetsedwa.
Mukamaganizira momwe chinthu chomwe chili mkati mwa tsamba la webusaiti chidzaperekere pamene phindu la peresenti likugwiritsidwa ntchito m'lifupi mwake, muyenera kumvetsetsa momwe chigawochi chikukhalira pa tsambali.
Powombetsa mkota
Zikhulupiliro zimathandiza kwambiri pakupanga mawebusaiti a mawebusaiti . Kaya mumakhala zithunzi zogwiritsa ntchito moyenera kapena mukugwiritsa ntchito peresenti ya widths kuti mupange gulu lamadzi enieni omwe ali ofanana ndi wina ndi mzake, kumvetsetsa ziwerengerozi kudzakhala kofunikira kuti mukwaniritse momwe mukufunira.