Met die ontwikkeling van soveel programmeer-, styl- en opmaaktale, word die aanleer van webontwerp ingewikkelder as ooit. Gelukkig is daar baie gereedskap wat u kan help om aan die gang te kom. Soek 'n paar basiese hulpbronne, soos aanlyn-tutoriale of 'n bygewerkte boek oor webontwerp. Sodra u gereed is om te begin, begin deur die basiese beginsels van HTML en CSS te bemeester. Dan kan u meer gevorderde webontwerptale, soos JavaScript, begin ondersoek!
Stappe
Metode 1 van 4: Soek hulpmiddels vir webontwerp
Stap 1. Kyk aanlyn vir webontwerpkursusse en tutoriale
Die internet is vol gedetailleerde inligting oor webontwerp, en baie daarvan is gratis beskikbaar. U kan begin met 'n paar gratis aanlynkursusse oor Udemy of CodeCademy, of by 'n koderingsgemeenskap aansluit, soos freeCodeCamp. U kan ook video -tutoriale vir webontwerp op YouTube vind.
- As u presies weet waarna u op soek is, probeer om spesifieke terme te soek (bv. 'Klaskeurders in CSS -tutoriaal').
- As u 'n beginner is sonder ervaring in webontwerp, begin deur te leer oor die basiese beginsels van kodering in HTML en CSS.
Stap 2. Kyk of u 'n klas by 'n plaaslike kollege of universiteit volg
As u 'n kollege of universiteit volg, raadpleeg die rekenaarwetenskaplike afdeling van u skool of raadpleeg u kurskatalogus om uit te vind of daar webkursusse beskikbaar is. As u nie op skool is nie, kyk of kolleges of universiteite in u omgewing voortgesette opleidingsklasse in webontwerp aanbied.
Sommige universiteite bied aanlyn webontwerpklasse aan wat oop is vir almal wat wil inskryf. Gaan na webwerwe soos Coursera.org om gratis of bekostigbare webontwerpklasse te vind wat deur universiteitsinstrukteurs aangebied word
Stap 3. Kry 'n paar webontwerpboeke by die boekwinkel of biblioteek
'N Goeie boek oor webontwerp kan 'n waardevolle verwysing wees as jy jou handwerk leer en toepas. Soek opgedateerde boeke oor algemene webontwerp of spesifieke koderingsformate en tale wat u graag wil leer.
Tydskrifte en blogartikels oor webontwerp is ook 'n goeie manier om nuwe tegnieke te leer, inspirasie te kry en tred te hou met die nuutste neigings
Stap 4. Aflaai of koop 'n paar web ontwerp sagteware
Goeie webontwerpprogrammatuur kan u help om webwerwe doeltreffender en doeltreffender te bou, en is ook ideaal om u te leer hoe u kodering, script en ander sleutelontwerpelemente kan toepas. U kan baat vind by die gebruik van gereedskap soos:
- Grafiese ontwerpprogramme, soos Adobe Photoshop, GIMP of Sketch.
- Gereedskap vir die bou van webwerwe, soos WordPress, Chrome DevTools of Adobe Dreamweaver.
- FTP -sagteware om u voltooide lêers na u bediener oor te dra.
Stap 5. Soek 'n paar webwerf -sjablone waarmee u kan begin speel
Daar is niks verkeerd met die gebruik van sjablone terwyl u die basiese beginsels van webontwerp leer nie. Soek na webbladsye wat u wil, en kyk na die kode om 'n idee te kry van hoe die ontwerper die bladsy saamgestel het. U kan ook eksperimenteer met die verandering van die kode en die toevoeging van u eie elemente aan die sjabloon.
Soek gratis webwerf -sjablone om aan die gang te kom, of eksperimenteer met sjablone wat by u webontwerpsagteware kom
Metode 2 van 4: Bemeester HTML
Stap 1. Maak kennis met basiese HTML -etikette
HTML is 'n eenvoudige opmaaktaal wat gebruik word om die basiese elemente van 'n webwerf te formateer. U kan verskillende elemente van u webwerf formateer deur etikette te gebruik. Etikette verskyn tussen hakies voor en na elke element, en gee instruksies oor hoe die element op die bladsy sal funksioneer. Om die etiket te sluit, plaas a / voor die laaste etiket binne die hakies.
- Byvoorbeeld, as u van u teks wil hê vetgedruk, sou u die element omring met die etiket, soos volg: Hierdie teks is vet.
- 'N Paar algemene etikette sluit in (paragraaf), (anker, wat gekoppelde teks definieer), en (lettertipe, wat verskillende eienskappe van die teks kan definieer, soos grootte en kleur).
- Ander etikette definieer die verskillende dele van die HTML -dokument self. Word byvoorbeeld gebruik om inligting te bevat oor die bladsy wat nie vir die kyker sigbaar sal wees nie, soos sleutelwoorde of 'n bladsybeskrywing wat in die resultate van die soekenjins verskyn.
Stap 2. Leer om etiketteienskappe te gebruik
Sommige etikette benodig bykomende inligting om te spesifiseer hoe dit moet funksioneer. Hierdie bykomende inligting verskyn in die openingsetiket en word '' kenmerk 'genoem. Die kenmerknaam verskyn onmiddellik na die etiketnaam, geskei deur 'n spasie. Die kenmerkwaarde word aan die kenmerknaam geheg deur 'n = teken en omring deur aanhalingstekens.
- As u byvoorbeeld 'n deel van u teks rooi wil maak, kan u dit doen deur die etiket en 'n gepaste lettertipe kleurkenmerk te gebruik, soos hierdie: Hierdie teks is rooi.
- Baie van die effekte wat vroeër gereeld met HTML -tagkenmerke bereik is, soos die instelling van verskillende lettertipe kleure, word nou gewoonlik gedoen met CSS -kodering.
Stap 3. Eksperimenteer met geneste elemente
Met HTML kan u ook elemente binne ander elemente plaas om meer komplekse opmaak te skep. As u byvoorbeeld 'n paragraaf wil definieer en dan 'n deel van die teks in die paragraaf wil kursiveer, kan u dit so doen:
Ek hou van kodering!
Stap 4. Maak kennis met leë elemente
Sommige elemente in HTML het nie beide oop- en sluitmerke nodig nie. As u byvoorbeeld 'n prent invoeg, benodig u slegs 'n enkele "img" -merker met die naam van die etiket en enige ander nodige eienskappe (soos die prentlêernaam en enige alternatiewe teks wat u vir toeganklikheidsdoeleindes wil byvoeg). Byvoorbeeld:
Stap 5. Verken die basiese uitleg van 'n HTML -dokument
Om u HTML-gebaseerde webwerf behoorlik te laat funksioneer, moet u weet hoe u die hele bladsy moet formateer. Dit behels die definisie van waar u html -kode begin en eindig, asook om etikette te gebruik om te bepaal watter dele van die kode vertoon moet word, en watter is daar om verborge agtergrondinligting te verskaf. Byvoorbeeld:
- Gebruik die etiket om u bladsy as 'n HTML -dokument te definieer.
- Bevat vervolgens u hele bladsy binne die etikette om te bepaal waar u kode begin en eindig.
- Plaas enige inligting wat nie aan die kyker vertoon word nie, soos die bladsytitel, sleutelwoorde en u bladsybeskrywing, binne die etikette.
- Definieer die liggaam van u bladsy (dit wil sê enige teks en beelde wat u wil hê die kyker moet sien) met die etikette.
Metode 3 van 4: Maak kennis met CSS
Stap 1. Gebruik CSS om style toe te pas op u HTML -dokumente
CSS is 'n stylbladtaal waarmee u verskillende styl- en ontwerpelemente op u webwerf kan toepas. As u byvoorbeeld 'n spesifieke lettertipe of tekskleur selektief wil toepas op sommige van die tekselemente op u bladsy, kan u 'n CSS -lêer daarvoor skep. Dan kan u die CSS -lêer in u HTML -dokument plaas waar u wil.
-
As u byvoorbeeld wou hê dat 'n CSS -lêer al die paragraafelemente in u HTML -dokument groen moet maak, kan u 'n.css -lêer skep wat die lyne bevat:
- p {
- kleur: groen;
- }
- U sou dan die lêer stoor met 'n naam soos style.css.
- Om die stylblad op u HTML -dokument toe te pas, sou u dit as 'n leë skakelelement in die etikette invoeg. Byvoorbeeld:
Stap 2. Maak kennis met die elemente van 'n CSS -reëlstel
'N Individuele stuk CSS -kode word' reëlset 'genoem. Die reëlstel bevat die verskillende elemente wat bepaal wat u met u kode wil doen. Dit sluit in:
- Die keurder, wat die HTML -element definieer wat u wil styl. As u byvoorbeeld wil hê dat u reël paragraafelemente moet beïnvloed, begin u reëls met die letter "p".
- Die verklaring, wat die eienskappe definieer wat u wil styl (soos lettertipe kleur). Die verklaring is tussen krulhakies {}.
- Die eiendom, wat spesifiseer watter eienskap van die HTML -element u wil styl. Byvoorbeeld, binne die etiket kan u spesifiseer dat u die kleur van die teks wil styl.
- Die eiendomswaarde definieer spesifiek hoe u die eiendom wil verander (byvoorbeeld, as die eiendom lettertipe kleur het, is die eiendomswaarde "groen").
- U kan verskillende eiendomme binne 'n enkele verklaring verander.
Stap 3. Pas CSS toe op u teks om u stel mooi te laat lyk
CSS is handig om 'n verskeidenheid effekte op u teks toe te pas sonder om elke eiendom afsonderlik in HTML te kodeer. Eksperimenteer met die verandering van verskillende seteienskappe in CSS, insluitend:
- Lettertipe kleur
- Skrifgrootte
- Lettertipe -familie (bv. Die reeks lettertipes wat u in u teks wil gebruik)
- Teksbelyning
- Lyn hoogte
- Letterspasiëring
Stap 4. Eksperimenteer met bokse en ander CSS -uitleghulpmiddels
CSS is ook nuttig om aantreklike visuele elemente op u bladsy te voeg, soos teksblokkies en tabelle. U kan dit ook gebruik om die algehele uitleg van u bladsy te verander en te definieer waar die verskillende elemente relatief tot mekaar geplaas is.
U kan byvoorbeeld eienskappe soos die breedte en agtergrondkleur van 'n element definieer, 'n rand byvoeg of marges stel wat ruimte tussen die verskillende elemente op u bladsy sal skep
Metode 4 van 4: Werk met ander ontwerptale
Stap 1. Leer JavaScript as u interaktiewe elemente op u bladsye wil voeg
JavaScript is 'n uitstekende taal om te leer as u meer gevorderde funksies op u webwerwe wil voeg, soos animasies en opspringers. Neem 'n kursus of soek aanlyn -tutoriale oor hoe om in JavaScript te kodeer en die gekodeerde elemente in u webbladsye op te neem | met behulp van HTML.
Voordat u gemaklik kan voel met JavaScript, moet u vertroud wees met die basiese beginsels van die bou van bladsye in HTML en CSS
Stap 2. Maak kennis met jQuery om JavaScript -kodering makliker te maak
jQuery is 'n JavaScript-biblioteek wat Java-programmering kan vereenvoudig deur u toegang te gee tot 'n verskeidenheid vooraf gekodeerde JavaScript-elemente. jQuery is 'n uitstekende hulpmiddel as u reeds vertroud is met die basiese beginsels van JavaScript -kodering.
U het toegang tot die jQuery -biblioteek en baie ander waardevolle hulpbronne via jQuery.org, die webwerf van die jQuery Foundation
Stap 3. Bestudeer tale aan die bedienerkant as u belangstel in back-end-ontwikkeling
Alhoewel HTML, CSS en JavaScript ideaal is vir webontwerpers wat fokus op wat die gebruiker op die webwerf sien en doen, is tale aan die bediener nuttig as u meer belangstel in werk agter die skerms. As u meer wil leer oor back-end-ontwikkeling, fokus dan op die aanleer van tale soos Python, PHP en Ruby on Rails.
Hierdie tale is nuttig vir die bestuur en verwerking van data wat die gebruiker nie sien nie. PHP kan byvoorbeeld gebruik word om veilige gereedskap vir die skep van wagwoorde te bou op webwerwe wat 'n aanmelding benodig
Help lêers
HTML Cheat Sheet
CSS Cheat Sheet
