Med udviklingen af så mange programmerings-, stil- og markupsprog bliver læring af webdesign mere kompliceret end nogensinde. Heldigvis er der masser af værktøjer til rådighed til at hjælpe dig i gang. Se efter et par grundlæggende ressourcer, f.eks. Online-selvstudier eller en opdateret bog om webdesign. Når du er klar til at begynde, skal du starte med at mestre det grundlæggende i HTML og CSS. Derefter kan du begynde at udforske mere avancerede webdesignsprog, som JavaScript!
Trin
Metode 1 af 4: Find webdesignressourcer
Trin 1. Check online for webdesign kurser og tutorials
Internettet er fyldt med detaljerede oplysninger om webdesign, og meget af det er frit tilgængeligt. Du kan starte med at tage nogle gratis online kurser om Udemy eller CodeCademy eller slutte dig til et kodningsfællesskab som freeCodeCamp. Du kan også finde tutorials om webdesignvideo på YouTube.
- Hvis du ved præcis, hvad du leder efter, kan du prøve at foretage en søgning ved hjælp af specifikke termer (f.eks. "Klassevælgere i CSS -vejledning").
- Hvis du er nybegynder uden webdesignerfaring, skal du starte med at lære om det grundlæggende ved kodning i HTML og CSS.
Trin 2. Se nærmere på at tage en klasse på et lokalt universitet eller universitet
Hvis du går på et universitet eller et universitet, skal du kontakte din skoles datalogiske afdeling eller konsultere dit kursuskatalog for at finde ud af, om der er tilgængelige webdesignkurser. Hvis du ikke går i skole, skal du kontrollere, om nogen gymnasier eller universiteter i nærheden af dig tilbyder efteruddannelse i webdesign.
Nogle universiteter tilbyder online webdesign klasser, der er åbne for alle, der ønsker at tilmelde sig. Tjek websteder som Coursera.org for at finde gratis eller overkommelige webdesignklasser undervist af universitetsinstruktører
Trin 3. Få nogle webdesignbøger fra boghandelen eller biblioteket
En god bog om webdesign kan være en uvurderlig reference, mens du lærer og anvender dit håndværk. Se efter opdaterede bøger om generelt webdesign eller specifikke kodningsformater og sprog, du gerne vil lære.
At læse blade og blogartikler om webdesign er også en god måde at lære nye teknikker på, få inspiration og følge med i de nyeste trends
Trin 4. Download eller køb noget webdesign -software
God webdesign -software kan hjælpe dig med at opbygge websteder mere effektivt og effektivt, og er også fantastisk til at hjælpe dig med at lære ind og ud af at anvende kodning, scripting og andre vigtige designelementer. Du kan have fordel af at bruge værktøjer som:
- Grafiske designprogrammer, f.eks. Adobe Photoshop, GIMP eller Sketch.
- Værktøjer til opbygning af websteder, såsom WordPress, Chrome DevTools eller Adobe Dreamweaver.
- FTP -software til overførsel af dine færdige filer til din server.
Trin 5. Find nogle webstedsskabeloner, du kan lege med, når du kommer i gang
Der er ikke noget galt med at bruge skabeloner, når du lærer det grundlæggende i webdesign. Søg efter de websideskabeloner, du kan lide, og kig nærmere på koden for at få en idé om, hvordan designeren sammensatte siden. Du kan også eksperimentere med at ændre koden og tilføje dine egne elementer til skabelonen.
Søg efter gratis webstedsskabeloner for at komme i gang, eller eksperimentér med skabeloner, der følger med dit webdesign -software
Metode 2 af 4: Mestring af HTML
Trin 1. Gør dig bekendt med grundlæggende HTML -tags
HTML er et simpelt markeringssprog, der bruges til at formatere de grundlæggende elementer på et websted. Du kan formatere forskellige elementer på dit websted ved hjælp af tags. Mærker vises i vinklede parenteser før og efter hvert element, og giver instruktioner om, hvordan elementet vil fungere på siden. For at lukke mærket skal du sætte a / foran det sidste mærke inde i de vinklede beslag.
- For eksempel hvis du vil have noget af din tekst til at være fremhævet, ville du omgive elementet med mærket, sådan her: Denne tekst er fed.
- Et par almindelige tags inkluderer (afsnit), (anker, der definerer linket tekst) og (skrifttype, som kan hjælpe med at definere forskellige attributter for teksten, f.eks. Størrelse og farve).
- Andre tags definerer de forskellige dele af selve HTML -dokumentet. For eksempel bruges til at indeholde oplysninger om siden, der ikke vil være synlig for seeren, f.eks. Søgeord eller en sidebeskrivelse, der vises i søgemaskineresultater.
Trin 2. Lær at bruge tagattributter
Nogle tags har brug for yderligere oplysninger for at angive, hvordan de skal fungere. Disse yderligere oplysninger vises i åbningstagget, og det kaldes en "attribut". Attributnavnet vises umiddelbart efter tagnavnet, adskilt af et mellemrum. Attributværdien er knyttet til attributnavnet med et = -tegn og omgivet af anførselstegn.
- For eksempel, hvis du ville gøre noget af din tekst rødt, kan du gøre det ved at bruge mærket og en passende skrifttypefarveattribut som denne: Denne tekst er rød.
- Mange af de effekter, der engang rutinemæssigt blev opnået med HTML -tagattributter, såsom indstilling af forskellige skrifttypefarver, udføres nu typisk med CSS -kodning i stedet.
Trin 3. Eksperimenter med indlejrede elementer
HTML giver dig også mulighed for at placere elementer i andre elementer for at skabe mere kompleks formatering. For eksempel, hvis du ville definere et afsnit og derefter kursivere noget af teksten i afsnittet, kan du gøre det sådan:
Jeg elsker kodning!
Trin 4. Bliv bekendt med tomme elementer
Nogle elementer i HTML behøver ikke både åbning og lukning af tags. For eksempel, hvis du indsætter et billede, skal du kun bruge et enkelt "img" -tag, der indeholder tagnavnet og andre nødvendige attributter (f.eks. Billedfilnavnet og eventuel alternativ tekst, du ønsker at tilføje med henblik på tilgængelighed). For eksempel:
Trin 5. Udforsk det grundlæggende layout af et HTML -dokument
For at dit HTML-baserede websted fungerer korrekt, skal du vide, hvordan du formaterer hele siden. Dette indebærer at definere, hvor din html -kode begynder og slutter, samt at bruge tags til at bestemme, hvilke dele af koden der skal vises kontra hvilke der er for at give skjulte baggrundsoplysninger. For eksempel:
- Brug tagget til at definere din side som et HTML -dokument.
- Indehold derefter hele din side i tagsne for at definere, hvor din kode begynder og slutter.
- Placer alle oplysninger, der ikke vises for fremviseren, f.eks. Sidetitel, søgeord og din sidebeskrivelse, inden for tags.
- Definer brødteksten på din side (dvs. enhver tekst og billeder, som du vil have seeren til at se) med mærkerne.
Metode 3 af 4: Lær at kende CSS
Trin 1. Brug CSS til at anvende typografier på dine HTML -dokumenter
CSS er et stylesheet -sprog, der giver dig mulighed for at anvende forskellige stil- og designelementer på din webside. Hvis du f.eks. Selektivt vil anvende en bestemt skrifttype eller tekstfarve på nogle af tekstelementerne på din side, kan du oprette en CSS -fil for at gøre det. Derefter kan du indsætte CSS -filen i dit HTML -dokument, hvor du vil.
-
Hvis du f.eks. Ville have en CSS -fil til at gøre alle afsnitselementerne i dit HTML -dokument grøn, kan du oprette en.css -fil, der indeholder linjerne:
- p {
- farve: grøn;
- }
- Du vil derefter gemme filen med et navn som style.css.
- Hvis du vil anvende typografiarket til dit HTML -dokument, skal du indsætte det som et tomt linkelement i tags. For eksempel:
Trin 2. Bliv fortrolig med elementerne i et CSS -regelsæt
Et individuelt stykke CSS -kode kaldes et "regelsæt". Regelsættet indeholder de forskellige elementer, der definerer, hvad du vil have din kode til at gøre. Disse omfatter:
- Vælgeren, der definerer det HTML -element, du vil style. Hvis du f.eks. Ønsker, at din regel skal påvirke afsnitselementer, starter du dit regelsæt med bogstavet "p".
- Erklæringen, som definerer de egenskaber, du gerne vil style (f.eks. Skrifttypefarve). Erklæringen findes inden for krøllede parenteser {}.
- Ejendommen, som angiver hvilken egenskab for HTML -elementet du vil style. For eksempel inden for mærket kan du angive, at du vil style tekstens farve.
- Ejendomsværdien definerer specifikt, hvordan du vil ændre ejendommen (f.eks. Hvis ejendommen er skrifttypefarve, ville ejendomsværdien være "grøn").
- Du kan ændre flere forskellige egenskaber inden for en enkelt erklæring.
Trin 3. Anvend CSS på din tekst for at få din typografi til at se pæn ud
CSS er nyttig til at anvende en række effekter på din tekst uden at skulle kode hver egenskab individuelt i HTML. Eksperimenter med at ændre forskellige typeregenskaber i CSS, herunder:
- Skrift farve
- Skriftstørrelse
- Skrifttypefamilie (f.eks. Det udvalg af skrifttyper, du vil bruge i din tekst)
- Tekstjustering
- Linjehøjde
- Brevafstand
Trin 4. Eksperimenter med kasser og andre CSS -layoutværktøjer
CSS er også nyttig til at tilføje attraktive visuelle elementer til din side, f.eks. Tekstbokse og tabeller. Derudover kan du bruge den til at ændre det overordnede layout på din side og definere, hvor de forskellige elementer er placeret i forhold til hinanden.
For eksempel kan du definere attributter som bredden og baggrundsfarven på et element, tilføje en kant eller angive margener, der skaber mellemrum mellem de forskellige elementer på din side
Metode 4 af 4: Arbejde med andre designsprog
Trin 1. Lær JavaScript, hvis du vil tilføje interaktive elementer til dine sider
JavaScript er et godt sprog at lære, hvis du er interesseret i at tilføje mere avancerede funktioner til dine websteder, f.eks. Animationer og popups. Tag et kursus, eller kig efter online tutorials om, hvordan du koder i JavaScript og inkorporerer de kodede elementer i dine websider | ved hjælp af HTML.
Inden du kan blive fortrolig med JavaScript, skal du kende det grundlæggende ved at bygge sider i HTML og CSS
Trin 2. Gør dig fortrolig med jQuery for at gøre JavaScript -kodning lettere
jQuery er et JavaScript-bibliotek, der kan forenkle Java-programmering ved at give dig adgang til en række forudkodede JavaScript-elementer. jQuery er et godt værktøj, hvis du allerede kender det grundlæggende i JavaScript -kodning.
Du kan få adgang til jQuery -biblioteket og masser af andre værdifulde ressourcer via jQuery.org, webstedet for jQuery Foundation
Trin 3. Undersøg sprog på serversiden, hvis du er interesseret i back-end-udvikling
Selvom HTML, CSS og JavaScript er ideelle til webdesignere, der fokuserer på, hvad brugeren ser og gør på webstedet, er sprog på serversiden nyttige, hvis du er mere interesseret i arbejde bag kulisserne. Hvis du vil lære om back-end-udvikling, skal du fokusere på at lære sprog som Python, PHP og Ruby on Rails.
Disse sprog er nyttige til håndtering og behandling af data, som brugeren ikke kan se. For eksempel kan PHP bruges til at bygge sikre værktøjer til oprettelse af adgangskoder på websteder, der kræver et login
Hjælp filer
HTML snydeblad
CSS snydeblad
