Nii paljude programmeerimis-, stiili- ja märgistuskeelte arendamisega muutub veebidisaini õppimine keerukamaks kui kunagi varem. Õnneks on alustamiseks palju tööriistu. Otsige mõningaid põhilisi ressursse, nagu veebipõhised õpetused või ajakohane veebidisaini raamat. Kui olete alustamiseks valmis, alustage HTML -i ja CSS -i põhitõdede omandamisega. Seejärel võite hakata uurima keerukamaid veebidisaini keeli, näiteks JavaScripti!
Sammud
Meetod 1 /4: veebidisaini ressursside leidmine
Samm 1. Otsige veebist veebidisaini kursusi ja õpetusi
Internet on täis üksikasjalikku teavet veebidisaini kohta ja suur osa sellest on vabalt saadaval. Alustuseks võite võtta mõned tasuta veebikursused Udemy või CodeCademy kaudu või liituda kodeerimiskogukonnaga, näiteks freeCodeCamp. Veebidisaini videoõpetusi leiate ka YouTube'ist.
- Kui teate täpselt, mida otsite, proovige otsida konkreetsete terminite abil (nt „klassivalijad CSS -i õpetuses”).
- Kui olete algaja, kellel pole veebidisaini kogemust, alustage HTML -i ja CSS -i kodeerimise põhitõdede tundmaõppimisest.
Samm 2. Vaadake, kuidas võtta kohalikus kolledžis või ülikoolis klassi
Kui osalete kolledžis või ülikoolis, küsige oma kooli arvutiteaduse osakonnast või vaadake kursuste kataloogi, et teada saada, kas veebidisaini kursused on saadaval. Kui te ei käi koolis, kontrollige, kas mõni teie lähedal asuv kolledž või ülikool pakub veebidisaini täiendõppe tunde.
Mõned ülikoolid pakuvad veebidisaini veebiklasse, mis on avatud kõigile, kes soovivad registreeruda. Tutvuge veebisaitidega nagu Coursera.org, et leida tasuta või taskukohaseid veebidisaini tunde, mida õpetavad ülikooli juhendajad
Samm 3. Hankige raamatupoest või raamatukogust veebidisaini raamatuid
Hea raamat veebidisaini kohta võib olla hindamatu viide, kui õpite ja rakendate oma käsitööd. Otsige ajakohaseid raamatuid üldise veebidisaini või konkreetsete kodeerimisvormingute ja keelte kohta, mida soovite õppida.
Veebidisaini käsitlevate ajakirjade ja ajaveebiartiklite lugemine on samuti hea viis uute tehnikate õppimiseks, inspiratsiooni saamiseks ja uusimate trendidega kursis hoidmiseks
Samm 4. Laadige alla või ostke mõni veebidisaini tarkvara
Hea veebidisaini tarkvara aitab teil veebisaite tõhusamalt ja tulemuslikumalt ehitada ning sobib suurepäraselt ka kodeerimise, skriptimise ja muude oluliste kujunduselementide rakendamise nüansside tundmaõppimiseks. Teil võib olla kasu selliste tööriistade kasutamisest nagu:
- Graafilise disaini programmid, nagu Adobe Photoshop, GIMP või Sketch.
- Veebisaidi loomise tööriistad, näiteks WordPress, Chrome DevTools või Adobe Dreamweaver.
- FTP tarkvara valmis failide serverisse ülekandmiseks.
Samm 5. Leidke alustamiseks mõned veebisaidimallid, millega mängida
Veebidisaini põhitõdede õppimisel pole mallide kasutamisel midagi halba. Otsige endale meelepäraseid veebilehe malle ja vaadake koodi põhjalikult, et saada aimu, kuidas disainer lehe kokku pani. Samuti saate katsetada koodi muutmist ja mallile oma elementide lisamist.
Alustamiseks otsige tasuta veebisaidimalle või katsetage oma veebidisaini tarkvaraga kaasas olevaid malle
Meetod 2/4: HTML -i valdamine
Samm 1. Tutvuge lihtsate HTML -siltidega
HTML on lihtne märgistuskeel, mida kasutatakse veebisaidi põhielementide vormindamiseks. Märgendite abil saate oma veebisaidi erinevaid elemente vormindada. Sildid kuvatakse nurksulgudes enne ja pärast iga elementi ning need annavad juhiseid selle elemendi toimimise kohta lehel. Sildi sulgemiseks pange lõpliku sildi ette nurgaklambrite sisse a /.
- Näiteks kui soovite, et osa teie tekstist oleks julge, ümbritseksite elemendi sildiga järgmiselt: See tekst on paks.
- Mõned tavalised sildid on (lõik), (ankur, mis määratleb lingitud teksti) ja (font, mis aitab määratleda teksti erinevaid atribuute, nagu suurus ja värv).
- Teised sildid määravad HTML -dokumendi enda erinevad osad. Näiteks kasutatakse lehe kohta teabe, mis ei ole vaatajale nähtav, sisaldamiseks (nt märksõnad või lehe kirjeldus, mis ilmuksid otsingumootori tulemustes).
Samm 2. Õppige kasutama märgendi atribuute
Mõned sildid vajavad lisateavet nende toimimise täpsustamiseks. See lisateave kuvatakse avamärgendis ja seda nimetatakse atribuudiks. Atribuudi nimi ilmub vahetult märgendi nime järele tühikuga eraldatuna. Atribuudi väärtus on atribuudi nime külge kinnitatud märgiga = ja ümbritsetud jutumärkidega.
- Näiteks kui soovite mõne teksti punaseks muuta, saate seda teha märgendi ja sobiva fondivärvi atribuudi abil, näiteks: See tekst on punane.
- Paljud efektid, mida kunagi rutiinselt HTML -märgendi atribuutidega saavutati, näiteks erinevate fondivärvide määramine, tehakse nüüd tavaliselt CSS -kodeeringuga.
Samm 3. Katsetage pesastatud elementidega
HTML võimaldab teil paigutada elemente ka teistesse elementidesse, et luua keerukamaid vorminguid. Näiteks kui soovite määratleda lõigu ja seejärel kursiivida osa lõigus sisalduvast tekstist, võite seda teha järgmiselt.
Ma armastan kodeerimist!
Samm 4. Tutvuge tühjade elementidega
Mõned HTML -i elemendid ei vaja nii ava- kui ka lõpumärgendeid. Näiteks kui sisestate pildi, vajate ainult ühte märgendit „img”, mis sisaldab märgendi nime ja muid vajalikke atribuute (nt pildifaili nimi ja alternatiivne tekst, mille soovite juurdepääsetavuse huvides lisada). Näiteks:
Samm 5. Uurige HTML -dokumendi põhipaigutust
HTML-põhise veebisaidi korralikuks toimimiseks peate teadma, kuidas kogu leht vormindada. See hõlmab html -koodi alguse ja lõpu koha määramist, samuti märgendite kasutamist, et määrata, millised koodi osad kuvatakse, võrreldes nendega, mis pakuvad peidetud taustteavet. Näiteks:
- Kasutage märgendit, et määratleda oma leht HTML -dokumendina.
- Seejärel sisestage siltidesse kogu leht, et määrata, kus kood algab ja lõpeb.
- Paigutage märgendite sisse kogu teave, mida vaatajale ei kuvata, näiteks lehe pealkiri, märksõnad ja lehe kirjeldus.
- Määrake siltidega oma lehe sisu (st tekst ja pildid, mida soovite vaatajale näha).
3. meetod 4 -st: CSS -iga tutvumine
Samm 1. Kasutage CSS -i stiilide rakendamiseks oma HTML -dokumentidele
CSS on stiililehe keel, mis võimaldab teil veebisaidile rakendada erinevaid stiili ja kujunduselemente. Näiteks kui soovite mõnele lehe tekstielemendile valikuliselt rakendada teatud fonti või teksti värvi, saate selle jaoks luua CSS -faili. Seejärel saate CSS -faili oma HTML -dokumenti lisada, kuhu soovite.
-
Näiteks kui soovite, et CSS -fail muudaks teie HTML -dokumendi kõik lõigu elemendid roheliseks, saate luua.css -faili, mis sisaldab järgmisi ridu:
- p {
- värv: roheline;
- }
- Seejärel salvestage fail nimega style.css.
- Stiililehe rakendamiseks oma HTML -dokumendile sisestage see siltide vahele tühja lingielemendina. Näiteks:
Samm 2. Tutvuge CSS -reeglikomplekti elementidega
Üksikut CSS -koodi nimetatakse reeglite kogumiks. Reeglite komplekt sisaldab erinevaid elemente, mis määravad, mida soovite, et teie kood teeks. Need sisaldavad:
- Valija, mis määratleb HTML -elemendi, mida soovite stiilida. Näiteks kui soovite, et teie reeglikomplekt mõjutaks lõigu elemente, alustaksite oma reeglistikku tähega „p”.
- Deklaratsioon, mis määratleb omadused, mida soovite stiilida (näiteks fondi värv). Deklaratsioon on lokkisulgudes {}.
- Atribuut, mis määrab, millist HTML -elemendi atribuuti soovite stiilida. Näiteks märgendis saate määrata, et soovite teksti värvi stiilida.
- Atribuudi väärtus määratleb konkreetselt, kuidas soovite atribuuti muuta (nt kui atribuut on fondivärviga, siis on selle väärtus roheline).
- Ühes deklaratsioonis saate muuta mitut erinevat atribuuti.
Samm 3. Rakendage oma tekstile CSS -i, et trükikunst näeks kena välja
CSS on kasulik tekstile mitmesuguste efektide rakendamiseks ilma, et peaksite iga atribuuti eraldi HTML -is kodeerima. Katsetage CSS -is erinevate trükkimisomaduste muutmist, sealhulgas:
- Fondi värv
- Fondi suurus
- Fontide perekond (nt fontide valik, mida soovite oma tekstis kasutada)
- Teksti joondamine
- Reakõrgus
- Tähtede vahe
Samm 4. Katsetage kastide ja muude CSS -i paigutuse tööriistadega
CSS on kasulik ka teie lehele atraktiivsete visuaalsete elementide, näiteks tekstiväljade ja tabelite lisamiseks. Lisaks saate selle abil muuta oma lehe üldist paigutust ja määrata, kus erinevad elemendid üksteise suhtes asetsevad.
Näiteks saate määratleda atribuudid, nagu elemendi laius ja taustavärv, lisada äärise või määrata veerised, mis jätavad teie lehe erinevate elementide vahele ruumi
Meetod 4/4: Töö teiste disainikeeltega
Samm 1. Õppige JavaScripti, kui soovite oma lehtedele interaktiivseid elemente lisada
JavaScript on suurepärane keel õppida, kui olete huvitatud oma veebisaitidele lisafunktsioonide, näiteks animatsioonide ja hüpikakende lisamisest. Osalege kursusel või otsige veebipõhiseid õpetusi JavaScripti kodeerimise ja nende kodeeritud elementide lisamise kohta oma veebilehtedele | HTML -i abil.
Enne JavaScripti tundmaõppimist peate olema kursis HTML -i ja CSS -i lehtede loomise põhitõdedega
Samm 2. Tutvuge JavaScripti kodeerimise lihtsustamiseks jQueryga
jQuery on JavaScripti teek, mis võib lihtsustada Java programmeerimist, võimaldades juurdepääsu mitmesugustele eelkodeeritud JavaScripti elementidele. jQuery on suurepärane tööriist, kui olete JavaScripti kodeerimise põhitõdedega juba tuttav.
JQuery raamatukogule ja paljudele teistele väärtuslikutele ressurssidele pääsete juurde jQuery Foundationi veebisaidi jQuery.org kaudu
Samm 3. Kui olete huvitatud taustaarendusest, õppige serveripoolseid keeli
Kuigi HTML, CSS ja JavaScript sobivad ideaalselt veebidisaineritele, kes on keskendunud sellele, mida kasutaja veebisaidil näeb ja teeb, on serveripoolsed keeled kasulikud, kui olete rohkem huvitatud kaadritagusest tööst. Kui soovite õppida taustaarenduse kohta, keskenduge selliste keelte õppimisele nagu Python, PHP ja Ruby on Rails.
Need keeled on kasulikud andmete haldamiseks ja töötlemiseks, mida kasutaja ei näe. Näiteks PHP -d saab kasutada turvaliste paroolide loomise tööriistade loomiseks veebisaitidele, mis nõuavad sisselogimist
Abifailid
HTML -i petuleht
CSS -i petuleht
