Me zhvillimin e kaq shumë gjuhëve të programimit, stilit dhe shënjimit, mësimi i dizajnit të uebit po bëhet më i ndërlikuar se kurrë. Për fat të mirë, ka mijëra mjete në dispozicion për t'ju ndihmuar të filloni. Shikoni për disa burime themelore, si mësime online ose një libër të azhurnuar në hartimin e uebit. Pasi të jeni gati për të filluar, filloni duke zotëruar bazat e HTML dhe CSS. Atëherë mund të filloni të eksploroni gjuhë më të avancuara të dizajnit të uebit, si JavaScript!
Hapa
Metoda 1 nga 4: Gjetja e Burimeve të Dizajnimit të Uebit
Hapi 1. Kontrolloni online për kurse dhe mësime të dizajnit të uebit
Interneti është plot me informacion të detajuar në lidhje me dizajnin e uebit, dhe shumë prej tyre janë të disponueshëm lirshëm. Ju mund të filloni duke marrë disa kurse falas online në Udemy ose CodeCademy, ose duke u bashkuar me një komunitet kodimi si freeCodeCamp. Ju gjithashtu mund të gjeni video mësimore për krijimin e uebit në YouTube.
- Nëse e dini saktësisht se çfarë kërkoni, provoni të bëni një kërkim duke përdorur terma të veçantë (p.sh., "përzgjedhës të klasës në tutorialin CSS").
- Nëse jeni fillestar pa përvojë në krijimin e uebit, filloni duke mësuar mbi bazat e kodimit në HTML dhe CSS.
Hapi 2. Shikoni për të marrë një klasë në një kolegj ose universitet lokal
Nëse jeni duke ndjekur një kolegj ose universitet, kontrolloni me departamentin e shkencave kompjuterike të shkollës tuaj ose konsultohuni me katalogun tuaj të kurseve për të zbuluar nëse ka ndonjë kurs të dizajnit të internetit. Nëse nuk jeni në shkollë, kontrolloni nëse ndonjë kolegj apo universitet pranë jush ofron klasa të arsimit të vazhdueshëm në hartimin e uebit.
Disa universitete ofrojnë klasa online të dizajnit të uebit që janë të hapura për këdo që dëshiron të regjistrohet. Kontrolloni faqet e internetit si Coursera.org për të gjetur klasa falas ose të përballueshme të dizajnit të uebit të mësuara nga instruktorët e universitetit
Hapi 3. Merrni disa libra për krijimin e uebit nga libraria ose biblioteka
Një libër i mirë për hartimin e uebit mund të jetë një referencë e paçmuar ndërsa jeni duke mësuar dhe aplikuar zanatin tuaj. Kërkoni libra të azhurnuar në hartimin e përgjithshëm të uebit ose formate të veçanta kodimi dhe gjuhë që dëshironi të mësoni.
Leximi i revistave dhe artikujve në blog në lidhje me dizajnin e uebit është gjithashtu një mënyrë e mirë për të mësuar teknika të reja, për të marrë frymëzim dhe për të vazhduar me trendet më të fundit
Hapi 4. Shkarkoni ose blini disa programe për krijimin e uebit
Softueri i mirë i dizajnit të uebit mund t'ju ndihmojë të ndërtoni faqe në internet në mënyrë më efikase dhe efektive, dhe është gjithashtu i shkëlqyeshëm për t'ju ndihmuar të mësoni njohuritë dhe hollësitë e aplikimit të kodimit, skriptimit dhe elementëve të tjerë kryesorë të projektimit. Ju mund të përfitoni nga përdorimi i mjeteve të tilla si:
- Programet e dizajnit grafik, si Adobe Photoshop, GIMP ose Sketch.
- Mjetet e krijimit të faqes në internet, të tilla si WordPress, Chrome DevTools ose Adobe Dreamweaver.
- Softuer FTP për transferimin e skedarëve tuaj të përfunduar në serverin tuaj.
Hapi 5. Gjeni disa shabllone të faqeve të internetit për të luajtur me të kur të filloni
Nuk ka asgjë të keqe në përdorimin e shablloneve ndërsa mësoni bazat e dizajnit të uebit. Bëni një kërkim për shabllonet e ueb faqeve që ju pëlqejnë dhe hidhini një sy kodit për të marrë një ide se si projektuesi e bashkoi faqen. Ju gjithashtu mund të eksperimentoni me ndryshimin e kodit dhe shtimin e elementeve tuaja në shabllon.
Bëni një kërkim për modele falas të uebfaqeve për të filluar, ose eksperimentoni me shabllone që vijnë me programin tuaj të dizajnit të uebit
Metoda 2 nga 4: Zotërimi i HTML
Hapi 1. Njihuni me etiketat bazë HTML
HTML është një gjuhë e thjeshtë shënimi që përdoret për të formatuar elementet bazë të një faqe në internet. Ju mund të formatoni elementë të ndryshëm të faqes tuaj të internetit duke përdorur etiketa. Etiketat shfaqen në kllapa me kënd para dhe pas çdo elementi, dhe japin udhëzime sesi ai element do të funksionojë në faqe. Për të mbyllur etiketën, vendosni a / para etiketës përfundimtare brenda kllapave me kënd.
- Për shembull, nëse doni që teksti juaj të jetë e guximshme, ju do të rrethoni elementin me etiketën, si kjo: Ky tekst është i guximshëm.
- Disa etiketa të zakonshme përfshijnë (paragraf), (spirancë, e cila përcakton tekstin e lidhur) dhe (font, të cilat mund të ndihmojnë në përcaktimin e atributeve të ndryshme të tekstit, si madhësia dhe ngjyra).
- Etiketat e tjera përcaktojnë pjesët e ndryshme të vetë dokumentit HTML. Për shembull, përdoret për të përmbajtur informacione në lidhje me faqen që nuk do të jenë të dukshme për shikuesin, si fjalë kyçe ose një përshkrim të faqes që do të shfaqet në rezultatet e motorit të kërkimit.
Hapi 2. Mësoni të përdorni atributet e etiketave
Disa etiketa kanë nevojë për informacion shtesë për të specifikuar se si duhet të funksionojnë. Ky informacion shtesë shfaqet brenda etiketës hapëse dhe quhet "atribut". Emri i atributit shfaqet menjëherë pas emrit të etiketës, i ndarë me një hapësirë. Vlera e atributit i bashkëngjitet emrit të atributit me një shenjë = dhe rrethohet me thonjëza.
- Për shembull, nëse dëshironi të bëni një pjesë të tekstit tuaj të kuq, mund ta bëni duke përdorur etiketën dhe një atribut të përshtatshëm të ngjyrës së shkronjave, si ky: Ky tekst është i kuq.
- Shumë nga efektet që dikur ishin arritur në mënyrë rutinore me atributet e etiketave HTML, të tilla si vendosja e ngjyrave të ndryshme të shkronjave, tani bëhen në mënyrë tipike me kodimin CSS.
Hapi 3. Eksperimentoni me elementë të futur
HTML gjithashtu ju lejon të vendosni elemente brenda elementeve të tjerë në mënyrë që të krijoni formatim më kompleks. Për shembull, nëse dëshironi të përcaktoni një paragraf dhe pastaj të pjerrësoni një pjesë të tekstit brenda paragrafit, mund ta bëni kështu:
Më pëlqen kodimi!
Hapi 4. Njihuni me elementë bosh
Disa elementë në HTML nuk kanë nevojë për etiketa hapëse dhe mbyllëse. Për shembull, nëse jeni duke futur një imazh, ju nevojitet vetëm një etiketë e vetme "img" që përmban emrin e etiketës dhe çdo atribut tjetër të nevojshëm (të tilla si emri i skedarit të imazhit dhe çdo tekst alternativ që dëshironi të shtoni për qëllime aksesueshmërie). Për shembull:
Hapi 5. Eksploroni paraqitjen bazë të një dokumenti HTML
Në mënyrë që faqja juaj e internetit e bazuar në HTML të funksionojë siç duhet, do të duhet të dini se si të formatoni të gjithë faqen. Kjo përfshin përcaktimin se ku fillon dhe mbaron kodi juaj html, si dhe përdorimin e etiketave për të përcaktuar se cilat pjesë të kodit do të shfaqen kundrejt atyre që janë atje për të siguruar informacion të fshehur të sfondit. Për shembull:
- Përdorni etiketën për të përcaktuar faqen tuaj si një dokument HTML.
- Tjetra, përmbani të gjithë faqen tuaj brenda etiketave për të përcaktuar se ku fillon dhe mbaron kodi juaj.
- Vendosni çdo informacion që nuk do t'i shfaqet shikuesit, siç janë titulli i faqes, fjalët kyçe dhe përshkrimi i faqes tuaj, brenda etiketave.
- Përcaktoni trupin e faqes tuaj (d.m.th., çdo tekst dhe imazhe që dëshironi që shikuesi të shohë) me etiketat.
Metoda 3 nga 4: Njohja me CSS
Hapi 1. Përdorni CSS për të aplikuar stile në dokumentet tuaja HTML
CSS është një gjuhë e stilit që ju lejon të aplikoni elementë të ndryshëm të stilit dhe dizajnit në faqen tuaj. Për shembull, nëse doni të aplikoni në mënyrë selektive një font të veçantë ose ngjyrë teksti në disa nga elementët e tekstit në faqen tuaj, mund të krijoni një skedar CSS për ta bërë këtë. Pastaj, mund të futni skedarin CSS në dokumentin tuaj HTML kudo që dëshironi.
-
Për shembull, nëse dëshironi që një skedar CSS të kthejë të gjelbër të gjithë elementët e paragrafit në dokumentin tuaj HTML, mund të krijoni një skedar.css që përmban rreshtat:
- p {
- ngjyra: jeshile;
- }
- Ju pastaj do ta ruani skedarin me një emër si style.css.
- Për të aplikuar fletën e stilit në dokumentin tuaj HTML, do ta futnit atë si një element të zbrazët të lidhjes brenda etiketave. Për shembull:
Hapi 2. Njihuni me elementet e një grupi rregullash CSS
Një pjesë individuale e kodit CSS quhet "grup rregullash". Seti i rregullave përmban elementë të ndryshëm që përcaktojnë atë që dëshironi të bëni kodin tuaj. Kjo perfshin:
- Zgjedhësi, i cili përcakton elementin HTML që dëshironi të stiloni. Për shembull, nëse dëshironi që rregulli juaj i vendosur të ndikojë në elementët e paragrafit, do të fillonit vendosjen e rregullave tuaja me shkronjën "p".
- Deklarata, e cila përcakton vetitë që dëshironi të stiloni (të tilla si ngjyra e shkronjave). Deklarata gjendet brenda kllapave kaçurrelë {}.
- Prona, e cila specifikon se cila pronë e elementit HTML dëshironi të stiloni. Për shembull, brenda etiketës, mund të specifikoni se dëshironi të stiloni ngjyrën e tekstit.
- Vlera e pronës përcakton në mënyrë specifike mënyrën se si dëshironi të ndryshoni pronën (p.sh., nëse vetia është ngjyra e shkronjave, atëherë vlera e pronës do të ishte "e gjelbër").
- Ju mund të modifikoni disa prona të ndryshme brenda një deklarate të vetme.
Hapi 3. Aplikoni CSS në tekstin tuaj për ta bërë modelimin tuaj të duket bukur
CSS është e dobishme për të aplikuar një sërë efektesh në tekstin tuaj pa pasur nevojë të kodoni individualisht secilën veti në HTML. Eksperimentoni me ndryshimin e vetive të ndryshme të shkrimit në CSS, duke përfshirë:
- Ngjyra e fontit
- Përmasa e germave
- Familja e shkronjave (p.sh., sfera e shkronjave që dëshironi të përdorni në tekstin tuaj)
- Rreshtimi i tekstit
- Vija e gjatesise
- Hapësira e shkronjave
Hapi 4. Eksperimentoni me kuti dhe mjete të tjera të paraqitjes CSS
CSS është gjithashtu e dobishme për shtimin e elementeve tërheqës vizualë në faqen tuaj, siç janë kutitë e tekstit dhe tabelat. Për më tepër, mund ta përdorni për të ndryshuar paraqitjen e përgjithshme të faqes tuaj dhe për të përcaktuar se ku pozicionohen elementët e ndryshëm në lidhje me njëri -tjetrin.
Për shembull, mund të përcaktoni atribute si gjerësia dhe ngjyra e sfondit të një elementi, të shtoni një kufi ose të vendosni kufij që do të krijojnë hapësirë midis elementëve të ndryshëm në faqen tuaj
Metoda 4 nga 4: Puna me gjuhë të tjera të projektimit
Hapi 1. Mësoni JavaScript nëse doni të shtoni elementë ndërveprues në faqet tuaja
JavaScript është një gjuhë e shkëlqyeshme për të mësuar nëse jeni të interesuar të shtoni veçori më të përparuara në faqet tuaja të internetit, të tilla si animacione dhe dritare kërcyese. Merrni një kurs ose kërkoni mësime online se si të kodoni në JavaScript dhe përfshini ato elementë të koduar në faqet tuaja të internetit | duke përdorur HTML.
Para se të ndiheni rehat me JavaScript, do t'ju duhet të njiheni me bazat e krijimit të faqeve në HTML dhe CSS
Hapi 2. Njihuni me jQuery për ta bërë më të lehtë kodimin JavaScript
jQuery është një bibliotekë JavaScript që mund të thjeshtojë programimin Java duke ju lejuar të keni qasje në një sërë elementësh të para-koduar JavaScript. jQuery është një mjet i shkëlqyeshëm nëse tashmë jeni njohur me bazat e kodimit JavaScript.
Ju mund të hyni në bibliotekën jQuery dhe shumë burime të tjera të vlefshme përmes jQuery.org, faqja e internetit e Fondacionit jQuery
Hapi 3. Studioni gjuhët nga ana e serverit nëse jeni të interesuar për zhvillimin e mëparshëm
Ndërsa HTML, CSS dhe JavaScript janë ideale për projektuesit e uebit të cilët janë të fokusuar në atë që përdoruesi sheh dhe bën në faqen e internetit, gjuhët nga ana e serverit janë të dobishme nëse jeni më të interesuar për punën në prapaskenë. Nëse doni të mësoni rreth zhvillimit të mëparshëm, përqendrohuni në mësimin e gjuhëve si Python, PHP dhe Ruby on Rails.
Këto gjuhë janë të dobishme për menaxhimin dhe përpunimin e të dhënave që përdoruesi nuk i sheh. Për shembull, PHP mund të përdoret për të krijuar mjete të sigurta për krijimin e fjalëkalimeve në faqet e internetit që kërkojnë një hyrje
Skedarët e ndihmës
Fletë mashtrimi HTML
Fletë mashtrimi CSS
