Razvojem tolikih jezika programiranja, stilova i označavanja učenje web dizajna postaje sve kompliciranije nego ikad. Srećom, na raspolaganju je mnoštvo alata koji će vam pomoći da započnete. Potražite nekoliko osnovnih resursa, poput internetskih vodiča ili najnoviju knjigu o web dizajnu. Kad budete spremni za početak, počnite svladavanjem osnova HTML -a i CSS -a. Tada možete početi istraživati naprednije jezike web dizajna, poput JavaScripta!
Koraci
Metoda 1 od 4: Pronalaženje resursa za web dizajn
Korak 1. Na internetu potražite tečajeve i vodiče za web dizajn
Internet je prepun detaljnih informacija o web dizajnu, a puno ih je slobodno dostupno. Možete početi tako što ćete pohađati neke besplatne internetske tečajeve na Udemyju ili CodeCademyju ili se pridružiti zajednici za kodiranje poput freeCodeCamp. Video vodiče o web dizajnu možete pronaći i na YouTubeu.
- Ako točno znate što tražite, pokušajte pretražiti koristeći određene pojmove (npr. "Birači klasa u CSS vodiču").
- Ako ste početnik bez iskustva u web dizajnu, počnite s učenjem osnova kodiranja u HTML -u i CSS -u.
Korak 2. Razmotrite pohađanje nastave na lokalnom fakultetu ili sveučilištu
Ako pohađate fakultet ili sveučilište, obratite se svom odjelu informatike u svojoj školi ili pogledajte katalog tečajeva da biste saznali postoje li neki tečajevi web dizajna. Ako niste u školi, provjerite nude li neki fakulteti ili sveučilišta u vašoj blizini nastavu za daljnje obrazovanje iz web dizajna.
Neka sveučilišta nude internetske tečajeve web dizajna koji su otvoreni za sve koji se žele upisati. Na web stranicama poput Coursera.org pronađite besplatne ili pristupačne tečajeve web dizajna koje predaju sveučilišni nastavnici
Korak 3. Nabavite neke knjige o web dizajnu iz knjižare ili biblioteke
Dobra knjiga o web dizajnu može biti neprocjenjiva referenca dok učite i primjenjujete svoj zanat. Potražite najnovije knjige o općem web dizajnu ili specifičnim formatima kodiranja i jezicima koje želite naučiti.
Čitanje časopisa i članaka na blogu o web dizajnu također je dobar način za učenje novih tehnika, dobivanje inspiracije i praćenje najnovijih trendova
Korak 4. Preuzmite ili kupite softver za web dizajn
Dobar softver za web dizajn može vam pomoći u učinkovitijoj i djelotvornijoj izgradnji web stranica, a također je odličan jer vam pomaže naučiti sve primjene kodiranja, skriptiranja i drugih ključnih elemenata dizajna. Možda ćete imati koristi od korištenja alata kao što su:
- Programi za grafičko oblikovanje, poput Adobe Photoshopa, GIMP -a ili Sketcha.
- Alati za izradu web stranica, kao što su WordPress, Chrome DevTools ili Adobe Dreamweaver.
- FTP softver za prijenos gotovih datoteka na vaš poslužitelj.
Korak 5. Pronađite neke predloške web stranica s kojima ćete se igrati na početku
Nema ništa loše u korištenju predložaka dok učite osnove web dizajna. Pretražite predloške web stranica koji vam se sviđaju i pažljivo pogledajte kôd kako biste stekli uvid u to kako je dizajner sastavio stranicu. Također možete eksperimentirati s promjenom koda i dodavanjem vlastitih elemenata u predložak.
Pretražite besplatne predloške web stranica za početak ili eksperimentirajte s predlošcima koji dolaze s vašim softverom za web dizajn
Metoda 2 od 4: Ovladavanje HTML -om
Korak 1. Upoznajte se s osnovnim HTML oznakama
HTML je jednostavan jezik za označavanje koji se koristi za oblikovanje osnovnih elemenata web stranice. Pomoću oznaka možete oblikovati različite elemente svoje web stranice. Oznake se pojavljuju u uglatim zagradama prije i poslije svakog elementa i pružaju upute o tome kako će taj element funkcionirati na stranici. Da biste zatvorili oznaku, stavite / ispred konačne oznake unutar zakrivljenih zagrada.
- Na primjer, ako želite da neki vaš tekst bude podebljano, okružili biste element oznakom, ovako: Ovaj tekst je podebljan.
- Nekoliko uobičajenih oznaka uključuju (odlomak), (sidro, koje definira povezani tekst) i (font, koji može pomoći u definiranju različitih atributa teksta, poput veličine i boje).
- Ostale oznake definiraju različite dijelove samog HTML dokumenta. Na primjer, koristi se za sadržavanje informacija o stranici koje neće biti vidljive gledatelju, poput ključnih riječi ili opisa stranice koji bi se pojavili u rezultatima tražilice.
Korak 2. Naučite koristiti atribute oznaka
Za neke oznake potrebne su dodatne informacije kako bi se navelo kako bi trebale funkcionirati. Ove dodatne informacije pojavljuju se unutar početne oznake i nazivaju se "atribut". Naziv atributa pojavljuje se odmah iza naziva oznake, odvojen razmakom. Vrijednost atributa pridružena je imenu atributa znakom = i okružena navodnicima.
- Na primjer, ako želite dio teksta učiniti crvenim, to možete učiniti pomoću oznake i odgovarajućeg atributa boje fonta, poput ovog: Ovaj tekst je crven.
- Mnogi učinci koji su se nekad rutinski postizali s atributima HTML oznaka, poput postavljanja različitih boja fonta, sada se obično rade umjesto CSS kodiranja.
Korak 3. Eksperimentirajte s ugniježđenim elementima
HTML vam također omogućuje postavljanje elemenata unutar drugih elemenata radi stvaranja složenijeg oblikovanja. Na primjer, ako želite definirati odlomak, a zatim kurzivizirati dio teksta u odlomku, mogli biste to učiniti ovako:
Obožavam kodiranje!
Korak 4. Upoznajte se s praznim elementima
Neki elementi u HTML -u ne trebaju otvaranje i zatvaranje oznaka. Na primjer, ako umetnete sliku, potrebna vam je samo jedna oznaka "img" koja sadrži naziv oznake i sve ostale potrebne atribute (kao što je naziv slikovne datoteke i bilo koji alternativni tekst koji želite dodati radi pristupačnosti). Na primjer:
Korak 5. Istražite osnovni izgled HTML dokumenta
Da bi vaša web stranica temeljena na HTML-u pravilno funkcionirala, morate znati oblikovati cijelu stranicu. To uključuje definiranje gdje vaš html kôd počinje i završava, kao i korištenje oznaka za određivanje koji će se dijelovi koda prikazati u odnosu na one koji pružaju skrivene pozadinske podatke. Na primjer:
- Pomoću oznake definirajte svoju stranicu kao HTML dokument.
- Zatim cijelu stranicu stavite unutar oznaka kako biste definirali gdje vaš kôd počinje i završava.
- U oznake stavite informacije koje se neće prikazati gledatelju, poput naslova stranice, ključnih riječi i opisa stranice.
- Odredite tijelo svoje stranice (tj. Bilo koji tekst i slike koje želite da gledatelj vidi) s oznakama.
Metoda 3 od 4: Upoznavanje sa CSS -om
Korak 1. Pomoću CSS -a primijenite stilove na svoje HTML dokumente
CSS je jezik stilske tablice koji vam omogućuje da primijenite različite elemente stila i dizajna na svoju web stranicu. Na primjer, ako želite selektivno primijeniti određeni font ili boju teksta na neke od tekstualnih elemenata na svojoj stranici, možete stvoriti CSS datoteku da biste to učinili. Zatim možete umetnuti CSS datoteku u svoj HTML dokument gdje god želite.
-
Na primjer, ako želite da CSS datoteka pozeleni sve elemente odlomka u vašem HTML dokumentu, mogli biste stvoriti.css datoteku koja sadrži retke:
- p {
- boja: zelena;
- }
- Tada biste spremili datoteku s imenom poput style.css.
- Da biste primijenili tablicu stilova na svoj HTML dokument, umetnuli biste je kao prazan element veze unutar oznaka. Na primjer:
Korak 2. Upoznajte se s elementima skupa pravila CSS -a
Pojedinačni komad CSS koda naziva se "skup pravila". Skup pravila sadrži različite elemente koji definiraju što želite da vaš kod radi. To uključuje:
- Birač koji definira HTML element koji želite stilizirati. Na primjer, ako želite da vaš skup pravila utječe na elemente odlomka, započeli biste skup pravila sa slovom "p".
- Deklaracija koja definira svojstva koja želite stilizirati (poput boje fonta). Deklaracija se nalazi u zagradama {}.
- Svojstvo koje navodi koje svojstvo HTML elementa želite stilizirati. Na primjer, unutar oznake možete odrediti da želite stilizirati boju teksta.
- Vrijednost svojstva posebno definira način na koji želite promijeniti svojstvo (npr. Ako je svojstvo boje fonta, tada bi vrijednost svojstva bila "zelena").
- U jednoj deklaraciji možete izmijeniti nekoliko različitih svojstava.
Korak 3. Primijenite CSS na svoj tekst kako bi vaše slaganje lijepo izgledalo
CSS je koristan za primjenu različitih efekata na vaš tekst bez potrebe za pojedinačnim kodiranjem svakog svojstva u HTML -u. Eksperimentirajte s promjenom različitih svojstava slaganja u CSS -u, uključujući:
- Boja fonta
- Veličina fonta
- Obitelj fontova (npr. Raspon fontova koje želite koristiti u tekstu)
- Poravnanje teksta
- Visina crte
- Razmak između slova
Korak 4. Eksperimentirajte s kutijama i drugim alatima za CSS izgled
CSS je također koristan za dodavanje atraktivnih vizualnih elemenata na vašu stranicu, poput tekstualnih okvira i tablica. Osim toga, možete ga koristiti za promjenu ukupnog izgleda vaše stranice i definiranje gdje su različiti elementi postavljeni jedan prema drugom.
Na primjer, možete definirati atribute poput širine i boje pozadine elementa, dodati obrub ili postaviti margine koje će stvoriti prostor između različitih elemenata na vašoj stranici
Metoda 4 od 4: Rad s drugim jezicima dizajna
Korak 1. Naučite JavaScript ako želite dodati interaktivne elemente na svoje stranice
JavaScript je izvrstan jezik za učenje ako ste zainteresirani za dodavanje naprednijih značajki na svoje web stranice, poput animacija i skočnih prozora. Pohađajte tečaj ili potražite mrežne vodiče o kodiranju u JavaScript -u i ugradite te kodirane elemente na svoje web stranice | pomoću HTML -a.
Prije nego što se upoznate s JavaScriptom, morate se upoznati s osnovama izrade stranica u HTML -u i CSS -u
Korak 2. Upoznajte se s jQueryjem za lakše kodiranje JavaScripta
jQuery je JavaScript knjižnica koja može pojednostaviti Java programiranje omogućujući vam pristup raznim unaprijed kodiranim JavaScript elementima. jQuery izvrstan je alat ako ste već upoznati s osnovama JavaScript kodiranja.
Knjižnici jQuery i mnogim drugim vrijednim resursima možete pristupiti putem jQuery.org, web stranice jQuery Foundation
Korak 3. Proučite jezike na strani poslužitelja ako vas zanima razvoj pozadine
Dok su HTML, CSS i JavaScript idealni za web dizajnere koji su usredotočeni na ono što korisnik vidi i radi na web stranici, jezici na poslužitelju korisni su ako vas više zanima rad iza kulisa. Ako želite naučiti o back-end razvoju, usredotočite se na učenje jezika kao što su Python, PHP i Ruby on Rails.
Ovi su jezici korisni za upravljanje i obradu podataka koje korisnik ne vidi. Na primjer, PHP se može koristiti za izradu sigurnih alata za stvaranje lozinki na web stranicama koje zahtijevaju prijavu
Datoteke pomoći
HTML Cheat Sheet
CSS Cheat Sheet
