Pamoja na maendeleo ya programu nyingi, mitindo, na lugha markup, ujifunzaji wa muundo wa wavuti unakuwa ngumu zaidi kuliko hapo awali. Kwa bahati nzuri, kuna tani za zana zinazopatikana kukusaidia kuanza. Tafuta rasilimali chache za msingi, kama mafunzo ya mkondoni au kitabu cha kisasa kwenye muundo wa wavuti. Mara tu ukiwa tayari kuanza, anza kwa kusimamia misingi ya HTML na CSS. Basi unaweza kuanza kuchunguza lugha za hali ya juu zaidi za wavuti, kama JavaScript!
Hatua
Njia 1 ya 4: Kupata Rasilimali za Ubunifu wa Wavuti
Hatua ya 1. Angalia mtandaoni kwa kozi na mafunzo ya muundo wa wavuti
Mtandao umejaa habari ya kina juu ya muundo wa wavuti, na nyingi zinapatikana kwa uhuru. Unaweza kuanza kwa kuchukua kozi za bure za mkondoni kwenye Udemy au CodeCademy, au kujiunga na jamii ya usimbuaji kama freeCodeCamp. Unaweza pia kupata mafunzo ya video ya muundo wa wavuti kwenye YouTube.
- Ikiwa unajua ni nini hasa unatafuta, jaribu kutafuta ukitumia maneno maalum (kwa mfano, "wateule wa darasa katika mafunzo ya CSS").
- Ikiwa wewe ni mwanzoni bila uzoefu wa muundo wa wavuti, anza kwa kujifunza juu ya misingi ya usimbuaji katika HTML na CSS.
Hatua ya 2. Angalia kuchukua darasa katika chuo kikuu au chuo kikuu
Ikiwa unasoma chuo kikuu au chuo kikuu, angalia na idara ya sayansi ya kompyuta ya shule yako au wasiliana na katalogi yako ya kozi ili kujua ikiwa kozi zozote za muundo wa wavuti zinapatikana. Ikiwa hauko shuleni, angalia ikiwa vyuo vikuu au vyuo vikuu karibu nawe vinatoa masomo ya kuendelea ya masomo katika muundo wa wavuti.
Vyuo vikuu vingine hutoa madarasa ya kubuni wavuti mkondoni ambayo iko wazi kwa mtu yeyote anayetaka kujiandikisha. Angalia tovuti kama Coursera.org kupata madarasa ya bure au ya bei nafuu ya muundo wa wavuti unaofundishwa na waalimu wa vyuo vikuu
Hatua ya 3. Pata vitabu vya kubuni wavuti kutoka duka la vitabu au maktaba
Kitabu kizuri juu ya muundo wa wavuti kinaweza kuwa kumbukumbu muhimu sana unapojifunza na kutumia ufundi wako. Tafuta vitabu vya kisasa juu ya muundo wa jumla wa wavuti au fomati maalum za usimbuaji na lugha ambazo ungependa kujifunza.
Kusoma majarida na nakala za blogi kuhusu muundo wa wavuti pia ni njia nzuri ya kujifunza mbinu mpya, kupata msukumo, na kufuata mwenendo wa hivi karibuni
Hatua ya 4. Pakua au ununue programu ya muundo wa wavuti
Programu nzuri ya muundo wa wavuti inaweza kukusaidia kujenga tovuti kwa ufanisi zaidi na kwa ufanisi, na pia ni nzuri kwa kukusaidia ujifunze kuingiliana kwa kutumia usimbuaji, maandishi, na vitu vingine muhimu vya muundo. Unaweza kufaidika kwa kutumia zana kama vile:
- Programu za kubuni picha, kama Adobe Photoshop, GIMP, au Mchoro.
- Zana za ujenzi wa wavuti, kama vile WordPress, Chrome DevTools, au Adobe Dreamweaver.
- Programu ya FTP ya kuhamisha faili zako zilizokamilishwa kwenye seva yako.
Hatua ya 5. Tafuta templeti zingine za tovuti ya kucheza nazo unapoanza
Hakuna chochote kibaya kwa kutumia templeti unapojifunza misingi ya muundo wa wavuti. Tafuta templeti unazopenda za wavuti, na uangalie kwa karibu nambari hiyo ili upate wazo la jinsi mbuni anavyoweka ukurasa huo pamoja. Unaweza pia kujaribu kubadilisha msimbo na kuongeza vitu vyako kwenye templeti.
Tafuta templeti za wavuti za bure ili uanze, au jaribu templeti ambazo zinakuja na programu yako ya muundo wa wavuti
Njia 2 ya 4: Kujifunza HTML
Hatua ya 1. Jijulishe na vitambulisho vya msingi vya HTML
HTML ni lugha rahisi ya markup ambayo hutumiwa kupangilia vitu vya msingi vya wavuti. Unaweza kupangilia vitu tofauti vya wavuti yako kwa kutumia vitambulisho. Lebo zinaonekana kwenye mabano yenye pembe kabla na baada ya kila kitu, na kutoa maagizo juu ya jinsi kipengee hicho kitakavyofanya kazi kwenye ukurasa. Ili kufunga kitambulisho, weka / mbele ya kitambulisho cha mwisho ndani ya mabano yenye pembe.
- Kwa mfano, ikiwa unataka baadhi ya maandishi yako kuwa ujasiri, ungezunguka kipengee na lebo, kama hii: Nakala hii ni ya ujasiri.
- Lebo chache za kawaida ni pamoja na (aya), (nanga, ambayo hufafanua maandishi yaliyounganishwa), na (font, ambayo inaweza kusaidia kufafanua sifa anuwai za maandishi, kama saizi na rangi).
- Lebo zingine hufafanua sehemu tofauti za hati yenyewe ya HTML. Kwa mfano, inatumiwa kuwa na habari kuhusu ukurasa ambao hautaonekana kwa mtazamaji, kama maneno muhimu au maelezo ya ukurasa ambayo yangeonekana katika matokeo ya injini za utaftaji.
Hatua ya 2. Jifunze kutumia sifa za lebo
Lebo zingine zinahitaji maelezo ya ziada kutaja jinsi zinapaswa kufanya kazi. Habari hii ya ziada inaonekana ndani ya lebo ya kufungua, na inaitwa "sifa." Jina la sifa linaonekana mara tu baada ya jina la lebo, likitengwa na nafasi. Thamani ya sifa imeambatishwa kwa jina la sifa na ishara na umezungukwa na alama za nukuu.
- Kwa mfano, ikiwa unataka kufanya maandishi yako kuwa mekundu, unaweza kuifanya kwa kutumia lebo na sifa inayofaa ya rangi ya fonti, kama hii: Nakala hii ni nyekundu.
- Athari nyingi ambazo hapo awali zilifanikiwa na sifa za lebo ya HTML, kama vile kuweka rangi tofauti za fonti, sasa kawaida hufanywa na uandishi wa CSS badala yake.
Hatua ya 3. Jaribu na vitu vyenye kiota
HTML pia hukuruhusu kuweka vitu ndani ya vitu vingine ili kuunda uundaji ngumu zaidi. Kwa mfano, ikiwa ungependa kufafanua aya na kisha kuweka maandishi kwenye maandishi, unaweza kuifanya kama hii:
Ninapenda kuweka alama!
Hatua ya 4. Jijulishe na vitu tupu
Vipengele vingine katika HTML hazihitaji vitambulisho vyote vya kufungua na kufunga. Kwa mfano, ikiwa unaingiza picha, unahitaji lebo moja tu ya "img" iliyo na jina la lebo na sifa zingine zozote zinazohitajika (kama jina la faili ya picha na maandishi mengine mbadala unayotaka kuongeza kwa sababu za ufikiaji). Kwa mfano:
Hatua ya 5. Chunguza mpangilio wa kimsingi wa hati ya HTML
Ili tovuti yako yenye msingi wa HTML ifanye kazi vizuri, utahitaji kujua jinsi ya kuunda ukurasa mzima. Hii inajumuisha kufafanua mahali ambapo nambari yako ya html inaanzia na kuishia, na vile vile kutumia vitambulisho kuamua ni sehemu gani za nambari zitaonyeshwa dhidi ya ambazo zipo ili kutoa habari ya nyuma iliyofichwa. Kwa mfano:
- Tumia kitambulisho kufafanua ukurasa wako kama hati ya HTML.
- Ifuatayo, vyenye ukurasa wako wote ndani ya vitambulisho ili kufafanua mahali nambari yako inapoanzia na kuishia.
- Weka habari yoyote ambayo haitaonyeshwa kwa mtazamaji, kama kichwa cha ukurasa, maneno, na maelezo ya ukurasa wako, ndani ya vitambulisho.
- Fafanua mwili wa ukurasa wako (yaani, maandishi yoyote na picha ambazo unataka mtazamaji azione) na vitambulisho.
Njia 3 ya 4: Kuijua CSS
Hatua ya 1. Tumia CSS kutumia mitindo kwenye hati zako za HTML
CSS ni lugha ya laida ambayo hukuruhusu kutumia mitindo tofauti na vipengee vya muundo kwenye ukurasa wako wa wavuti. Kwa mfano, ikiwa unataka kwa hiari kutumia fonti au rangi ya maandishi kwa baadhi ya vitu vya maandishi kwenye ukurasa wako, unaweza kuunda faili ya CSS kufanya hivyo. Kisha, unaweza kuingiza faili ya CSS kwenye hati yako ya HTML popote unapopenda.
-
Kwa mfano, ikiwa ungependa faili ya CSS ibadilishe vipengee vyote vya aya kwenye hati yako ya kijani kibichi, unaweza kuunda faili ya.css iliyo na mistari:
- p {
- rangi: kijani;
- }
- Ungehifadhi faili na jina kama style.css.
- Kutumia karatasi ya mitindo kwenye hati yako ya HTML, ungeiingiza kama kipengee tupu cha kiunga ndani ya vitambulisho. Kwa mfano:
Hatua ya 2. Jijulishe na vitu vya seti ya sheria ya CSS
Kipande cha kibinafsi cha nambari ya CSS inaitwa "seti ya sheria." Seti ya sheria ina vitu tofauti ambavyo hufafanua nini unataka nambari yako ifanye. Hii ni pamoja na:
- Kiteuzi, ambacho kinafafanua kipengee cha HTML unachotaka kuweka mtindo. Kwa mfano, ikiwa unataka sheria yako iwekwe kuathiri vipengee vya aya, ungeanzisha seti yako ya sheria na herufi "p".
- Tamko, ambalo hufafanua mali ambazo ungependa kuweka mtindo (kama rangi ya fonti). Tamko hilo linapatikana ndani ya mabano yaliyosokotwa {}.
- Mali, ambayo inabainisha ni mali gani ya kipengee cha HTML unachotaka kuiga. Kwa mfano, ndani ya tag, unaweza kutaja kwamba unataka kutengeneza rangi ya maandishi.
- Thamani ya mali inafafanua haswa jinsi unavyotaka kubadilisha mali (kwa mfano, ikiwa mali ni rangi ya fonti, basi dhamana ya mali itakuwa "kijani").
- Unaweza kurekebisha mali kadhaa tofauti ndani ya tamko moja.
Hatua ya 3. Tumia CSS kwa maandishi yako ili kufanya upangilio wako uwe mzuri
CSS ni muhimu kwa kutumia athari anuwai kwa maandishi yako bila kulazimika kuweka kificho kwa kila mali katika HTML. Jaribu kubadilisha mali tofauti za kupanga katika CSS, pamoja na:
- Rangi ya herufi
- Ukubwa wa herufi
- Fonti ya familia (kwa mfano, anuwai ya fonti unayotaka kutumia katika maandishi yako)
- Usawazishaji wa maandishi
- Urefu wa mstari
- Nafasi ya barua
Hatua ya 4. Jaribu na masanduku na zana zingine za mpangilio wa CSS
CSS pia ni muhimu kwa kuongeza vitu vya kuvutia vya kuona kwenye ukurasa wako, kama masanduku ya maandishi na meza. Kwa kuongeza, unaweza kuitumia kubadilisha mpangilio wa jumla wa ukurasa wako na kufafanua mahali ambapo vitu tofauti vimewekwa sawa kwa kila mmoja.
Kwa mfano, unaweza kufafanua sifa kama upana na rangi ya usuli ya kipengee, ongeza mpaka, au weka kando ambayo itaunda nafasi kati ya vitu anuwai kwenye ukurasa wako
Njia ya 4 ya 4: Kufanya kazi na Lugha zingine za Kubuni
Hatua ya 1. Jifunze JavaScript ikiwa unataka kuongeza vitu vya maingiliano kwenye kurasa zako
JavaScript ni lugha nzuri ya kujifunza ikiwa una nia ya kuongeza huduma za hali ya juu zaidi kwenye wavuti zako, kama vile michoro na viibukizi. Chukua kozi au utafute mafunzo ya mkondoni juu ya jinsi ya kuweka nambari kwenye JavaScript na ujumuishe vitu hivi vilivyowekwa kwenye ukurasa wako wa wavuti | ukitumia HTML.
Kabla ya kupata raha na JavaScript, utahitaji kufahamiana na misingi ya kurasa za ujenzi katika HTML na CSS
Hatua ya 2. Jijulishe na jQuery ili kufanya usimbuaji JavaScript uwe rahisi
jQuery ni maktaba ya JavaScript ambayo inaweza kurahisisha programu ya Java kwa kukuwezesha kupata vitu anuwai vya JavaScript vilivyowekwa hapo awali. jQuery ni zana nzuri ikiwa tayari unajua misingi ya uandishi wa JavaScript.
Unaweza kupata maktaba ya jQuery na rasilimali zingine nyingi muhimu kupitia jQuery.org, wavuti ya JQuery Foundation
Hatua ya 3. Jifunze lugha za upande wa seva ikiwa una nia ya maendeleo ya nyuma
Wakati HTML, CSS, na JavaScript ni bora kwa wabuni wa wavuti ambao wanazingatia kile mtumiaji anachokiona na kufanya kwenye wavuti, lugha za upande wa seva zinafaa ikiwa unapendezwa zaidi na kazi ya nyuma ya pazia. Ikiwa unataka kujifunza juu ya maendeleo ya mwisho-nyuma, zingatia kujifunza lugha kama Python, PHP, na Ruby kwenye Reli.
Lugha hizi ni muhimu kwa kusimamia na kusindika data ambayo mtumiaji haioni. Kwa mfano, PHP inaweza kutumika kujenga zana salama za kuunda nenosiri kwenye wavuti ambazo zinahitaji kuingia
Faili za Msaada
Karatasi ya Kudanganya ya HTML
Karatasi ya Kudanganya ya CSS
