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, savladajte osnove HTML -a i CSS -a. Tada možete početi istraživati naprednije jezike web dizajna, poput JavaScript -a!
Koraci
Metoda 1 od 4: Pronalaženje resursa za web dizajn
Korak 1. Na internetu potražite kurseve i vodiče za web dizajn
Internet je prepun detaljnih informacija o web dizajnu, a mnogo njih 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. Na YouTube -u možete pronaći i video vodiče za web dizajn.
- Ako 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 univerzitetu
Ako pohađate fakultet ili univerzitet, provjerite sa odjelom za informatiku vaše škole ili pogledajte katalog tečajeva da biste saznali postoje li neki kursevi web dizajna. Ako ne idete u školu, provjerite nude li neki fakulteti ili univerziteti u vašoj blizini nastavu za daljnje obrazovanje iz web dizajna.
Neki univerziteti nude online časove web dizajna koji su otvoreni za sve koji se žele upisati. Provjerite web stranice poput Coursera.org kako biste pronašli besplatne ili pristupačne časove web dizajna koje drže univerzitetski 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 posebnim 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 efektnijoj izgradnji web stranica, a također je odličan za naučavanje detalja primjene kodiranja, skriptiranja i drugih ključnih elemenata dizajna. Možda ćete imati koristi od korištenja alata kao što su:
- Programi za grafički dizajn, kao što su Adobe Photoshop, GIMP ili Sketch.
- Alati za izradu web stranica, kao što su WordPress, Chrome DevTools ili Adobe Dreamweaver.
- FTP softver za prijenos gotovih datoteka na vaš server.
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 ugaonih 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 koje bi se pojavile u rezultatima tražilice.
Korak 2. Naučite koristiti atribute oznaka
Nekim je oznakama potrebne dodatne informacije da bi se navelo kako bi trebale funkcionirati. Ove dodatne informacije pojavljuju se unutar početne oznake i nazivaju se „atribut“. Ime atributa pojavljuje se odmah iza naziva oznake, odvojeno razmakom. Vrijednost atributa je pridružena 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 efekti 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, to možete učiniti ovako:
Obožavam kodiranje!
Korak 4. Upoznajte se sa praznim elementima
Neki elementi u HTML -u ne trebaju otvaranje i zatvaranje oznaka. Na primjer, ako ubacujete sliku, potrebna vam je samo jedna oznaka "img" koja sadrži naziv oznake i sve ostale potrebne atribute (kao što je naziv datoteke slike 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 zasnovana 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 informacije. 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 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 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 okrene sve elemente paragrafa u vašem HTML dokumentu u zeleno, mogli biste stvoriti.css datoteku koja sadrži retke:
- p {
- boja: zelena;
- }
- Tada biste datoteku spremili pod 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 sa elementima skupa pravila CSS -a
Pojedinačni komad CSS koda naziva se „skup pravila“. Skup pravila sadrži različite elemente koji definiraju šta želite da vaš kôd radi. Ovo uključuje:
- Selektor koji definira HTML element koji želite stilizirati. Na primjer, ako želite da vaš skup pravila utječe na elemente paragrafa, 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 slova
- Porodica fontova (npr. Raspon fontova koje želite koristiti u tekstu)
- Poravnanje teksta
- Visina linije
- Razmak između slova
Korak 4. Eksperimentirajte s kutijama i drugim CSS alatima za izgled
CSS je takođe koristan za dodavanje atraktivnih vizuelnih elemenata na vašu stranicu, poput tekstualnih okvira i tabela. Osim toga, možete ga koristiti za promjenu cjelokupnog izgleda vaše stranice i definiranje gdje su različiti elementi pozicionirani 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 odličan jezik za učenje ako ste zainteresirani za dodavanje naprednijih funkcija na svoje web stranice, poput animacija i skočnih prozora. Pohađajte kurs ili potražite internetske vodiče o tome kako kodirati u JavaScript -u i ugraditi 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 sa jQueryjem kako biste olakšali kodiranje JavaScripta
jQuery je JavaScript biblioteka koja može pojednostaviti Java programiranje omogućujući vam pristup raznim unaprijed kodiranim JavaScript elementima. jQuery je odličan alat ako ste već upoznati s osnovama JavaScript kodiranja.
JQuery biblioteci i mnogim drugim vrijednim resursima možete pristupiti putem jQuery.org, web stranice jQuery Foundation
Korak 3. Proučite jezike na strani servera ako vas zanima razvoj pozadine
Dok su HTML, CSS i JavaScript idealni za web dizajnere koji su fokusirani na ono što korisnik vidi i radi na web stranici, jezici na poslužitelju su korisni 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 jezici su korisni za upravljanje i obradu podataka koje korisnik ne vidi. Na primjer, PHP se može koristiti za izradu sigurnih alata za kreiranje lozinki na web stranicama koje zahtijevaju prijavu
Datoteke pomoći
HTML Cheat Sheet
CSS Cheat Sheet
