Z razvojem toliko programskih, slogovnih in označevalnih jezikov je učenje spletnega oblikovanja bolj zapleteno kot kdaj koli prej. Na srečo je na voljo ogromno orodij, ki vam bodo pomagala začeti. Poiščite nekaj osnovnih virov, na primer spletne vadnice ali posodobljeno knjigo o spletnem oblikovanju. Ko ste pripravljeni na začetek, začnite z obvladovanjem osnov HTML in CSS. Potem lahko začnete raziskovati naprednejše jezike spletnega oblikovanja, kot je JavaScript!
Koraki
Metoda 1 od 4: Iskanje virov spletnega oblikovanja
Korak 1. Na spletu poiščite tečaje in vaje za spletno oblikovanje
Internet je poln podrobnih informacij o spletnem oblikovanju in veliko jih je prosto dostopnih. Začnete lahko z brezplačnimi spletnimi tečaji na Udemyju ali CodeCademyju ali se pridružite skupnosti za kodiranje, kot je freeCodeCamp. Na YouTubu najdete tudi video vaje za spletno oblikovanje.
- Če natančno veste, kaj iščete, poskusite iskati z uporabo posebnih izrazov (npr. »Izbirniki razredov v vadnici CSS«).
- Če ste začetnik brez izkušenj s spletnim oblikovanjem, začnite z spoznavanjem osnov kodiranja v HTML in CSS.
Korak 2. Poskusite obiskovati razred na lokalni fakulteti ali univerzi
Če obiskujete fakulteto ali univerzo, se obrnite na oddelek za računalništvo vaše šole ali v katalogu tečajev, če želite izvedeti, ali so na voljo kakšni tečaji spletnega oblikovanja. Če niste v šoli, preverite, ali katera koli šola ali univerza v vaši bližini ponuja pouk za spletno oblikovanje.
Nekatere univerze ponujajo spletne tečaje spletnega oblikovanja, ki so na voljo vsem, ki se želijo vpisati. Na spletnih mestih, kot je Coursera.org, poiščite brezplačne ali cenovno ugodne tečaje spletnega oblikovanja, ki jih poučujejo univerzitetni inštruktorji
Korak 3. Pridobite nekaj knjig o spletnem oblikovanju iz knjigarne ali knjižnice
Dobra knjiga o spletnem oblikovanju je lahko neprecenljiva referenca, ko se učite in uporabljate svojo obrt. Poiščite najnovejše knjige o splošnem spletnem oblikovanju ali posebnih oblikah kodiranja in jezikih, ki bi se jih radi naučili.
Branje revij in člankov v spletnem dnevniku o spletnem oblikovanju je tudi dober način za učenje novih tehnik, pridobivanje navdiha in sledenje najnovejšim trendom
Korak 4. Prenesite ali kupite programsko opremo za spletno oblikovanje
Dobra programska oprema za spletno oblikovanje vam lahko pomaga pri učinkovitejšem in učinkovitejšem ustvarjanju spletnih mest, prav tako pa je odlična za spoznavanje prednosti uporabe kodiranja, skriptiranja in drugih ključnih elementov oblikovanja. Morda boste imeli koristi od uporabe orodij, kot so:
- Programi za grafično oblikovanje, kot so Adobe Photoshop, GIMP ali Sketch.
- Orodja za izdelavo spletnih mest, kot so WordPress, Chrome DevTools ali Adobe Dreamweaver.
- FTP programska oprema za prenos končnih datotek na strežnik.
Korak 5. Poiščite nekaj predlog spletnih mest, s katerimi se lahko igrate, ko začnete
Nič ni narobe z uporabo predlog, ko se naučite osnov spletnega oblikovanja. Poiščite predloge spletnih strani, ki so vam všeč, in si natančno oglejte kodo, da dobite predstavo o tem, kako je oblikovalec sestavil stran. Lahko tudi eksperimentirate s spreminjanjem kode in dodajanjem lastnih elementov v predlogo.
Za začetek poiščite brezplačne predloge spletnih mest ali poskusite s predlogami, ki so priložene programski opremi za spletno oblikovanje
Metoda 2 od 4: Obvladovanje HTML -ja
Korak 1. Seznanite se z osnovnimi oznakami HTML
HTML je preprost označevalni jezik, ki se uporablja za oblikovanje osnovnih elementov spletnega mesta. S pomočjo oznak lahko oblikujete različne elemente svojega spletnega mesta. Oznake so prikazane v oglatih oklepajih pred in po vsakem elementu ter dajejo navodila o tem, kako bo ta element deloval na strani. Če želite zapreti oznako, postavite / pred končno oznako znotraj oglatih oklepajev.
- Na primer, če želite, da je nekaj vašega besedila krepko, bi element obdali z oznako, na primer: To besedilo je krepko.
- Nekaj pogostih oznak vključuje (odstavek), (sidro, ki opredeljuje povezano besedilo) in (pisava, ki lahko pomaga opredeliti različne atribute besedila, kot sta velikost in barva).
- Druge oznake definirajo različne dele samega dokumenta HTML. Uporablja se na primer za vsebovanje informacij o strani, ki gledalcu ne bodo vidne, kot so ključne besede ali opis strani, ki bi se pojavil v rezultatih iskalnika.
2. korak. Naučite se uporabljati atribute oznak
Nekatere oznake potrebujejo dodatne informacije, da določijo, kako naj delujejo. Ti dodatni podatki so prikazani v uvodni oznaki in se imenujejo »atribut«. Ime atributa se prikaže takoj za imenom oznake, ločeno s presledkom. Vrednost atributa je imenu atributa pritrjena z znakom = in obdana z narekovaji.
- Če želite na primer nekaj besedila narediti rdečega, lahko to storite z oznako in ustreznim atributom barve pisave, na primer: To besedilo je rdeče.
- Mnogi učinki, ki so bili nekoč rutinsko doseženi z atributi oznak HTML, na primer nastavitev različnih barv pisave, se zdaj običajno izvajajo s kodiranjem CSS.
Korak 3. Poskusite z ugnezdenimi elementi
HTML vam omogoča tudi umestitev elementov v druge elemente, da ustvarite bolj zapleteno oblikovanje. Na primer, če želite definirati odstavek in nato poševno označiti del besedila v odstavku, lahko to naredite tako:
Obožujem kodiranje!
Korak 4. Spoznajte prazne elemente
Nekateri elementi v HTML -ju ne potrebujejo tako odpiranja kot zapiranja oznak. Če na primer vstavljate sliko, potrebujete samo eno oznako »img«, ki vsebuje ime oznake in vse druge potrebne atribute (na primer ime slikovne datoteke in katero koli drugo besedilo, ki ga želite dodati za namene dostopnosti). Na primer:
Korak 5. Raziščite osnovno postavitev dokumenta HTML
Za pravilno delovanje spletnega mesta, ki temelji na HTML-ju, morate vedeti, kako oblikovati celotno stran. To vključuje opredelitev, kje se vaša html koda začne in konča, ter uporabo oznak za določitev, kateri deli kode bodo prikazani v primerjavi s tistimi, ki ponujajo skrite informacije v ozadju. Na primer:
- Z oznako določite svojo stran kot dokument HTML.
- Nato v oznakah vključite celotno stran, da določite, kje se vaša koda začne in konča.
- V oznake dodajte podatke, ki jih gledalcu ne bodo prikazali, na primer naslov strani, ključne besede in opis strani.
- Določite telo svoje strani (tj. Poljubno besedilo in slike, ki jih želite videti gledalcu) z oznakami.
Metoda 3 od 4: Spoznajte CSS
Korak 1. Uporabite CSS, da uporabite sloge za svoje dokumente HTML
CSS je jezik slogovnega lista, ki vam omogoča, da na svojo spletno stran uporabite različne slogovne in oblikovalske elemente. Na primer, če želite selektivno uporabiti določeno pisavo ali barvo besedila za nekatere elemente besedila na svoji strani, lahko za to ustvarite datoteko CSS. Nato lahko datoteko CSS vstavite v dokument HTML, kjer koli želite.
-
Na primer, če želite, da datoteka CSS spremeni vse elemente odstavka v vašem dokumentu HTML v zeleno, lahko ustvarite datoteko.css, ki vsebuje vrstice:
- p {
- barva: zelena;
- }
- Nato bi datoteko shranili z imenom, kot je style.css.
- Če želite tabelo slogov uporabiti za dokument HTML, jo vstavite kot prazen element povezave znotraj oznak. Na primer:
Korak 2. Seznanite se z elementi nabora pravil CSS
Posamezen del kode CSS se imenuje »nabor pravil«. Niz pravil vsebuje različne elemente, ki določajo, kaj želite, da naredi vaša koda. Tej vključujejo:
- Izbirnik, ki definira element HTML, ki ga želite oblikovati. Na primer, če želite, da niz pravil vpliva na elemente odstavka, bi niz pravil začeli s črko "p".
- Izjava, ki opredeljuje lastnosti, ki jih želite oblikovati (na primer barvo pisave). Izjava je v ukrivljenih oklepajih {}.
- Lastnost, ki določa, katero lastnost elementa HTML želite oblikovati. Na primer, znotraj oznake lahko določite, da želite oblikovati barvo besedila.
- Vrednost lastnosti natančno določa, kako želite spremeniti lastnost (npr. Če je lastnost barve pisave, bi bila vrednost lastnosti »zelena«).
- V eni sami izjavi lahko spremenite več različnih lastnosti.
Korak 3. Uporabite CSS za svoje besedilo, da bo vaša pisava videti lepa
CSS je uporaben za uporabo različnih učinkov na vaše besedilo, ne da bi morali posamezno kodirati vsako lastnost v HTML -ju. Poskusite s spreminjanjem različnih lastnosti pisave v CSS, vključno z:
- Barva pisave
- Velikost pisave
- Družina pisav (npr. Obseg pisav, ki jih želite uporabiti v besedilu)
- Poravnava besedila
- Višina vrstice
- Razmik med črkami
Korak 4. Poskusite s škatlami in drugimi orodji za postavitev CSS
CSS je uporaben tudi za dodajanje privlačnih vizualnih elementov na vašo stran, kot so polja z besedilom in tabele. Poleg tega lahko z njim spremenite celotno postavitev vaše strani in določite, kje so različni elementi postavljeni drug proti drugemu.
Na primer, lahko določite atribute, kot sta širina in barva ozadja elementa, dodate obrobo ali nastavite robove, ki bodo ustvarili prostor med različnimi elementi na vaši strani
Metoda 4 od 4: Delo z drugimi oblikovalskimi jeziki
Korak 1. Naučite se JavaScript, če želite na svoje strani dodati interaktivne elemente
JavaScript je odličen jezik za učenje, če želite svojim spletnim mestom dodati naprednejše funkcije, kot so animacije in pojavna okna. Udeležite se tečaja ali poiščite spletne vadnice o kodiranju v JavaScriptu in vključitvi teh kodiranih elementov v svoje spletne strani | z uporabo HTML.
Preden se naučite uporabljati JavaScript, se morate seznaniti z osnovami izdelave strani v HTML in CSS
Korak 2. Seznanite se z jQuery za lažje kodiranje JavaScript
jQuery je knjižnica JavaScript, ki lahko poenostavi programiranje Jave z omogočanjem dostopa do različnih vnaprej kodiranih elementov JavaScript. jQuery je odlično orodje, če že poznate osnove kodiranja JavaScript.
Do knjižnice jQuery in številnih drugih dragocenih virov lahko dostopate prek jQuery.org, spletnega mesta fundacije jQuery
Korak 3. Preučite jezike na strani strežnika, če vas zanima razvoj zaledja
Medtem ko so HTML, CSS in JavaScript idealni za spletne oblikovalce, ki se osredotočajo na to, kaj uporabnik vidi in počne na spletnem mestu, so strežniški jeziki uporabni, če vas bolj zanima delo v zakulisju. Če se želite naučiti o razvoju zaledja, se osredotočite na učenje jezikov, kot so Python, PHP in Ruby on Rails.
Ti jeziki so uporabni za upravljanje in obdelavo podatkov, ki jih uporabnik ne vidi. PHP lahko na primer uporabite za izdelavo varnih orodij za ustvarjanje gesel na spletnih mestih, ki zahtevajo prijavo
Datoteke za pomoč
HTML goljufija
CSS Cheat Sheet
