Attīstoties tik daudzām programmēšanas, stila un iezīmēšanas valodām, tīmekļa dizaina apgūšana kļūst sarežģītāka nekā jebkad agrāk. Par laimi, ir pieejami daudzi rīki, lai palīdzētu jums sākt darbu. Meklējiet dažus pamata resursus, piemēram, tiešsaistes apmācības vai atjauninātu grāmatu par tīmekļa dizainu. Kad esat gatavs sākt, sāciet apgūt HTML un CSS pamatus. Tad jūs varat sākt pētīt modernākas tīmekļa dizaina valodas, piemēram, JavaScript!
Soļi
1. metode no 4: tīmekļa dizaina resursu atrašana
1. solis. Pārbaudiet tiešsaistes tīmekļa dizaina kursus un apmācības
Internets ir pilns ar detalizētu informāciju par tīmekļa dizainu, un liela daļa no tā ir brīvi pieejama. Jūs varat sākt, apmeklējot dažus bezmaksas tiešsaistes kursus Udemy vai CodeCademy, vai pievienojoties kodēšanas kopienai, piemēram, freeCodeCamp. Tīmekļa dizaina video pamācības varat atrast arī vietnē YouTube.
- Ja jūs precīzi zināt, ko meklējat, mēģiniet veikt meklēšanu, izmantojot konkrētus vārdus (piemēram, “klases atlasītāji CSS apmācībā”).
- Ja esat iesācējs bez pieredzes tīmekļa dizainā, sāciet, apgūstot kodēšanas pamatus HTML un CSS.
2. solis. Apsveriet iespēju apmeklēt nodarbību vietējā koledžā vai universitātē
Ja apmeklējat koledžu vai universitāti, sazinieties ar savas skolas datorzinātņu nodaļu vai apmeklējiet kursu katalogu, lai uzzinātu, vai ir pieejami kādi tīmekļa dizaina kursi. Ja neesat skolā, pārbaudiet, vai jūsu tuvumā esošās koledžas vai universitātes piedāvā tālākizglītības kursus tīmekļa dizainā.
Dažas universitātes piedāvā tiešsaistes tīmekļa dizaina nodarbības, kas ir pieejamas ikvienam, kurš vēlas reģistrēties. Pārbaudiet tādas vietnes kā Coursera.org, lai atrastu bezmaksas vai pieejamu tīmekļa dizaina nodarbības, kuras pasniedz universitātes pasniedzēji
Solis 3. Iegūstiet dažas tīmekļa dizaina grāmatas no grāmatnīcas vai bibliotēkas
Laba grāmata par tīmekļa dizainu var būt nenovērtējama atsauce, mācoties un pielietojot savu amatu. Meklējiet jaunākās grāmatas par vispārēju tīmekļa dizainu vai konkrētiem kodēšanas formātiem un valodām, kuras vēlaties apgūt.
Žurnālu un emuāru rakstu lasīšana par tīmekļa dizainu ir arī labs veids, kā apgūt jaunas metodes, smelties iedvesmu un sekot līdzi jaunākajām tendencēm
4. solis. Lejupielādējiet vai iegādājieties kādu tīmekļa dizaina programmatūru
Laba tīmekļa dizaina programmatūra var palīdzēt jums efektīvāk un efektīvāk izveidot vietnes, un tā ir arī lieliska, lai palīdzētu jums apgūt kodēšanas, skriptu un citu galveno dizaina elementu pielietošanas smalkumus. Jūs varētu gūt labumu, izmantojot šādus rīkus:
- Grafiskā dizaina programmas, piemēram, Adobe Photoshop, GIMP vai Sketch.
- Vietņu veidošanas rīki, piemēram, WordPress, Chrome DevTools vai Adobe Dreamweaver.
- FTP programmatūra gatavo failu pārsūtīšanai uz serveri.
5. solis. Atrodiet dažas vietnes veidnes, ar kurām spēlēties, kad sākat darbu
Veidņu izmantošanā nav nekas nepareizs, apgūstot tīmekļa dizaina pamatus. Meklējiet sev tīkamas tīmekļa lapu veidnes un rūpīgi apskatiet kodu, lai gūtu priekšstatu par to, kā dizainers ir salicis lapu. Varat arī eksperimentēt, mainot kodu un veidnei pievienojot savus elementus.
Lai sāktu darbu, meklējiet bezmaksas vietņu veidnes vai eksperimentējiet ar veidnēm, kas pievienotas jūsu tīmekļa dizaina programmatūrai
2. metode no 4: HTML apgūšana
1. solis. Iepazīstieties ar pamata HTML tagiem
HTML ir vienkārša iezīmēšanas valoda, ko izmanto, lai formatētu vietnes pamatelementus. Izmantojot tagus, varat formatēt dažādus savas vietnes elementus. Tagi tiek parādīti leņķveida iekavās pirms un pēc katra elementa un sniedz norādījumus par šī elementa darbību lapā. Lai aizvērtu tagu, ielieciet a / pirms pēdējās atzīmes leņķveida iekavās.
- Piemēram, ja vēlaties, lai daļa teksta būtu treknrakstā, jūs apņemtu elementu ar tagu šādi: Šis teksts ir treknrakstā.
- Daži izplatīti tagi ir (rindkopa), (enkurs, kas nosaka saistīto tekstu) un (fonts, kas var palīdzēt definēt dažādus teksta atribūtus, piemēram, izmēru un krāsu).
- Citi tagi nosaka dažādas HTML dokumenta daļas. Piemēram, tiek izmantots, lai ietvertu informāciju par lapu, kas nebūs redzama skatītājam, piemēram, atslēgvārdus vai lapas aprakstu, kas tiktu parādīts meklētājprogrammas rezultātos.
2. solis. Uzziniet, kā izmantot tagu atribūtus
Dažiem tagiem ir nepieciešama papildu informācija, lai norādītu, kā tiem vajadzētu darboties. Šī papildu informācija tiek parādīta sākuma tagā, un to sauc par “atribūtu”. Atribūta nosaukums parādās uzreiz pēc taga nosaukuma, atdalīts ar atstarpi. Atribūta vērtība ir pievienota atribūta nosaukumam ar zīmi =, un to ieskauj pēdiņas.
- Piemēram, ja vēlaties tekstu padarīt sarkanu, varat to izdarīt, izmantojot tagu un atbilstošu fonta krāsas atribūtu, piemēram: Šis teksts ir sarkans.
- Daudzi efekti, kas kādreiz tika regulāri sasniegti, izmantojot HTML tagu atribūtus, piemēram, dažādu fontu krāsu iestatīšana, tagad parasti tiek veikti, izmantojot CSS kodējumu.
Solis 3. Eksperimentējiet ar ligzdotiem elementiem
HTML arī ļauj ievietot elementus citos elementos, lai izveidotu sarežģītāku formatējumu. Piemēram, ja vēlaties definēt rindkopu un pēc tam slīprakstā daļu rindkopas teksta, varat to darīt šādi:
Man patīk kodēt!
Solis 4. Iepazīstieties ar tukšiem elementiem
Dažiem HTML elementiem nav nepieciešami gan sākuma, gan noslēguma tagi. Piemēram, ja ievietojat attēlu, jums ir nepieciešams tikai viens tags “img”, kas satur taga nosaukumu un citus nepieciešamos atribūtus (piemēram, attēla faila nosaukumu un jebkuru citu tekstu, ko vēlaties pievienot pieejamības nolūkos). Piemēram:
5. solis. Izpētiet HTML dokumenta pamata izkārtojumu
Lai jūsu vietne, kuras pamatā ir HTML, darbotos pareizi, jums jāzina, kā formatēt visu lapu. Tas ietver html koda sākuma un beigu noteikšanu, kā arī tagu izmantošanu, lai noteiktu, kuras koda daļas tiks parādītas, salīdzinot ar tām, kas paredzētas, lai sniegtu slēptu pamatinformāciju. Piemēram:
- Izmantojiet tagu, lai definētu savu lapu kā HTML dokumentu.
- Pēc tam tagos iekļaujiet visu savu lapu, lai noteiktu, kur sākas un beidzas jūsu kods.
- Ievietojiet tagos visu informāciju, kas netiks parādīta skatītājam, piemēram, lapas nosaukumu, atslēgvārdus un lapas aprakstu.
- Izmantojot tagus, definējiet savas lapas pamattekstu (t.i., jebkuru tekstu un attēlus, ko vēlaties skatītājam redzēt).
3. metode no 4: Iepazīšanās ar CSS
1. darbība. Izmantojiet CSS, lai piemērotu stilus HTML dokumentiem
CSS ir stila lapas valoda, kas ļauj savai tīmekļa lapai piemērot dažādus stila un dizaina elementus. Piemēram, ja vēlaties selektīvi piemērot noteiktu fontu vai teksta krāsu dažiem lapas teksta elementiem, varat izveidot CSS failu, lai to izdarītu. Pēc tam varat ievietot CSS failu savā HTML dokumentā, kur vien vēlaties.
-
Piemēram, ja vēlaties, lai CSS fails pārvērstu visus rindkopas elementus jūsu HTML dokumentā zaļā krāsā, varat izveidot.css failu, kurā ir šādas rindas:
- p {
- krāsa: zaļa;
- }
- Pēc tam failu saglabātu ar nosaukumu style.css.
- Lai stilu lapu piemērotu HTML dokumentam, ievietojiet to tagos kā tukšu saites elementu. Piemēram:
2. solis. Iepazīstieties ar CSS noteikumu kopas elementiem
Atsevišķu CSS koda daļu sauc par “noteikumu kopu”. Noteikumu kopa satur dažādus elementus, kas nosaka, ko vēlaties darīt ar kodu. Tie ietver:
- Atlasītājs, kas nosaka HTML elementu, kuru vēlaties veidot. Piemēram, ja vēlaties, lai jūsu noteikumu kopa ietekmētu rindkopas elementus, savu noteikumu kopu sāciet ar burtu “p”.
- Deklarācija, kas nosaka rekvizītus, kurus vēlaties veidot (piemēram, fonta krāsa). Deklarācija ir ietverta cirtainās iekavās {}.
- Īpašums, kas norāda, kura HTML elementa rekvizītu vēlaties veidot. Piemēram, tagā varat norādīt, ka vēlaties veidot teksta krāsas stilu.
- Īpašuma vērtība konkrēti nosaka, kā vēlaties mainīt īpašumu (piemēram, ja rekvizīts ir fonta krāsā, tad rekvizīta vērtība būs “zaļa”).
- Vienā deklarācijā varat mainīt vairākus dažādus rekvizītus.
3. solis. Izmantojiet CSS savam tekstam, lai iekrāvējums izskatītos jauki
CSS ir noderīgs, lai tekstam piemērotu dažādus efektus, atsevišķi nekodējot katru īpašumu HTML kodā. Eksperimentējiet, mainot dažādus salikšanas rekvizītus CSS, tostarp:
- Fonta krāsa
- Fonta izmērs
- Fontu saime (piemēram, fontu klāsts, ko vēlaties izmantot tekstā)
- Teksta izlīdzināšana
- Līnijas augstums
- Burtu atstarpes
Solis 4. Eksperimentējiet ar kastēm un citiem CSS izkārtojuma rīkiem
CSS ir noderīgs arī, lai savai lapai pievienotu pievilcīgus vizuālos elementus, piemēram, tekstlodziņus un tabulas. Turklāt varat to izmantot, lai mainītu lapas kopējo izkārtojumu un noteiktu, kur dažādi elementi ir novietoti viens pret otru.
Piemēram, varat definēt tādus atribūtus kā elementa platums un fona krāsa, pievienot apmales vai iestatīt piemales, kas radīs atstarpi starp dažādiem jūsu lapas elementiem
4. metode no 4: Darbs ar citām dizaina valodām
1. solis. Uzziniet JavaScript, ja vēlaties savām lapām pievienot interaktīvus elementus
JavaScript ir lieliska valoda, ko iemācīties, ja vēlaties vietnēm pievienot papildu funkcijas, piemēram, animācijas un uznirstošos logus. Apmeklējiet kursu vai meklējiet tiešsaistes apmācības par to, kā kodēt JavaScript un iekļaut šos kodētos elementus savās tīmekļa lapās | izmantojot HTML.
Lai sāktu lietot JavaScript, jums jāzina HTML un CSS lapu veidošanas pamati
2. solis. Iepazīstieties ar jQuery, lai atvieglotu JavaScript kodēšanu
jQuery ir JavaScript bibliotēka, kas var vienkāršot Java programmēšanu, ļaujot piekļūt dažādiem iepriekš kodētiem JavaScript elementiem. jQuery ir lielisks rīks, ja esat jau iepazinies ar JavaScript kodēšanas pamatiem.
JQuery bibliotēkai un daudziem citiem vērtīgiem resursiem varat piekļūt, izmantojot jQuery Foundation tīmekļa vietni jQuery.org
3. solis. Izpētiet servera puses valodas, ja jūs interesē aizmugures izstrāde
Lai gan HTML, CSS un JavaScript ir ideāli piemēroti tīmekļa dizaineriem, kuri koncentrējas uz to, ko lietotājs redz un dara vietnē, servera puses valodas ir noderīgas, ja jūs vairāk interesē darbs aizkulisēs. Ja vēlaties uzzināt par aizmugures attīstību, koncentrējieties uz tādu valodu apguvi kā Python, PHP un Ruby on Rails.
Šīs valodas ir noderīgas, lai pārvaldītu un apstrādātu datus, kurus lietotājs neredz. Piemēram, PHP var izmantot, lai izveidotu drošus paroļu izveides rīkus vietnēs, kurām nepieciešama pieteikšanās
Palīdzības faili
HTML apkrāptu lapa
CSS apkrāptu lapa
