Med utvecklingen av så många programmerings-, stil- och markeringsspråk blir inlärning av webbdesign mer komplicerat än någonsin. Lyckligtvis finns det massor av verktyg som hjälper dig att komma igång. Leta efter några grundläggande resurser, som onlinehandledning eller en uppdaterad bok om webbdesign. När du är redo att börja, börja med att behärska grunderna i HTML och CSS. Sedan kan du börja utforska mer avancerade webbdesignspråk, som JavaScript!
Steg
Metod 1 av 4: Hitta resurser för webbdesign
Steg 1. Sök online efter webbdesignkurser och självstudier
Internet är fullt av detaljerad information om webbdesign, och mycket av det är fritt tillgängligt. Du kan börja med att ta några gratis onlinekurser på Udemy eller CodeCademy, eller gå med i ett kodningsgemenskap som freeCodeCamp. Du kan också hitta tutorials om webbdesign på YouTube.
- Om du vet exakt vad du letar efter, försök att göra en sökning med specifika termer (t.ex. "klassväljare i CSS -handledning").
- Om du är nybörjare utan webbdesignerfarenhet, börja med att lära dig grunderna för kodning i HTML och CSS.
Steg 2. Tänk på att ta en klass på ett lokalt college eller universitet
Om du går på högskola eller universitet, kontakta din skolas datavetenskapliga avdelning eller konsultera din kurskatalog för att ta reda på om det finns några webbdesignkurser. Om du inte går i skolan, kontrollera om några högskolor eller universitet nära dig erbjuder fortbildningskurser i webbdesign.
Vissa universitet erbjuder online webbdesign klasser som är öppna för alla som vill registrera sig. Kontrollera webbplatser som Coursera.org för att hitta gratis eller prisvärda webbdesignlektioner som undervisas av universitetsinstruktörer
Steg 3. Skaffa några webbdesignböcker från bokhandeln eller biblioteket
En bra bok om webbdesign kan vara en ovärderlig referens när du lär dig och använder ditt hantverk. Leta efter uppdaterade böcker om allmän webbdesign eller specifika kodningsformat och språk du vill lära dig.
Att läsa tidskrifter och blogginlägg om webbdesign är också ett bra sätt att lära sig nya tekniker, få inspiration och hänga med i de senaste trenderna
Steg 4. Ladda ner eller köp lite webbdesignprogram
Bra webbdesignprogram kan hjälpa dig att bygga webbplatser mer effektivt och effektivt, och är också bra för att hjälpa dig att lära dig ins och outs av att använda kodning, skript och andra viktiga designelement. Du kan ha nytta av att använda verktyg som:
- Grafiska designprogram, som Adobe Photoshop, GIMP eller Sketch.
- Webbplatsverktyg, till exempel WordPress, Chrome DevTools eller Adobe Dreamweaver.
- FTP -programvara för att överföra dina färdiga filer till din server.
Steg 5. Hitta några webbplatsmallar att spela med när du kommer igång
Det är inget fel med att använda mallar när du lär dig grunderna i webbdesign. Sök efter webbsidemallar du gillar och ta en närmare titt på koden för att få en uppfattning om hur designern satte ihop sidan. Du kan också experimentera med att ändra koden och lägga till dina egna element i mallen.
Sök efter gratis webbplatsmallar för att komma igång, eller experimentera med mallar som följer med din webbdesignprogramvara
Metod 2 av 4: Mastering HTML
Steg 1. Bekanta dig med grundläggande HTML -taggar
HTML är ett enkelt markeringsspråk som används för att formatera de grundläggande elementen på en webbplats. Du kan formatera olika delar av din webbplats med hjälp av taggar. Etiketter visas i vinkelparenteser före och efter varje element och ger instruktioner om hur elementet kommer att fungera på sidan. För att stänga taggen, sätt a / framför den sista taggen inuti de vinklade fästena.
- Till exempel om du vill att en del av din text ska vara djärv, skulle du omge elementet med taggen så här: Denna text är fet.
- Några vanliga taggar inkluderar (stycke), (ankare, som definierar länkad text) och (typsnitt, som kan hjälpa till att definiera olika attribut för texten, som storlek och färg).
- Andra taggar definierar de olika delarna av själva HTML -dokumentet. Till exempel används för att innehålla information om sidan som inte kommer att vara synlig för tittaren, till exempel nyckelord eller en sidbeskrivning som skulle visas i sökmotorresultat.
Steg 2. Lär dig att använda taggattribut
Vissa taggar behöver ytterligare information för att ange hur de ska fungera. Denna ytterligare information visas i öppningstaggen och kallas för ett "attribut". Attributnamnet visas omedelbart efter taggnamnet, åtskilt av ett mellanslag. Attributvärdet kopplas till attributnamnet med ett = -tecken och omges av citattecken.
- Om du till exempel vill göra en del av din text röd kan du göra det genom att använda taggen och ett lämpligt typsnittsfärgattribut, så här: Denna text är röd.
- Många av de effekter som en gång rutinmässigt uppnåddes med HTML -taggattribut, som att ställa in olika teckensnittsfärger, görs nu vanligtvis med CSS -kodning istället.
Steg 3. Experimentera med kapslade element
HTML låter dig också placera element i andra element för att skapa mer komplex formatering. Om du till exempel vill definiera ett stycke och sedan kursivera en del av texten i stycket, kan du göra det så här:
Jag älskar kodning!
Steg 4. Bekanta dig med tomma element
Vissa element i HTML behöver inte både öppna och stänga taggar. Om du till exempel sätter in en bild behöver du bara en enda "img" -tagg som innehåller taggnamnet och alla andra nödvändiga attribut (t.ex. bildfilens namn och eventuell alternativ text som du vill lägga till för tillgänglighetsändamål). Till exempel:
Steg 5. Utforska grundläggande layout för ett HTML -dokument
För att din HTML-baserade webbplats ska fungera korrekt måste du veta hur du formaterar hela sidan. Detta innebär att definiera var din html -kod börjar och slutar, samt att använda taggar för att avgöra vilka delar av koden som ska visas kontra vilka som finns för att ge dold bakgrundsinformation. Till exempel:
- Använd taggen för att definiera din sida som ett HTML -dokument.
- Innehåll sedan hela din sida i taggarna för att definiera var din kod börjar och slutar.
- Placera all information som inte visas för tittaren, till exempel sidtitel, sökord och sidbeskrivning, i taggarna.
- Definiera brödet på din sida (det vill säga all text och bilder som du vill att tittaren ska se) med taggarna.
Metod 3 av 4: Bekanta dig med CSS
Steg 1. Använd CSS för att tillämpa stilar på dina HTML -dokument
CSS är ett formatmallsspråk som låter dig använda olika stil- och designelement på din webbsida. Om du till exempel vill selektivt tillämpa ett specifikt typsnitt eller textfärg på några av textelementen på din sida kan du skapa en CSS -fil för att göra det. Sedan kan du infoga CSS -filen i ditt HTML -dokument var du vill.
-
Om du till exempel vill att en CSS -fil ska göra alla styckeelement i HTML -dokumentet gröna kan du skapa en.css -fil som innehåller raderna:
- p {
- färg: grön;
- }
- Du skulle sedan spara filen med ett namn som style.css.
- För att tillämpa formatmallen på ditt HTML -dokument, skulle du infoga det som ett tomt länkelement i taggarna. Till exempel:
Steg 2. Bekanta dig med elementen i en CSS -regeluppsättning
En enskild del av CSS -koden kallas en "regeluppsättning". Regeluppsättningen innehåller de olika elementen som definierar vad du vill att din kod ska göra. Dessa inkluderar:
- Väljaren, som definierar HTML -elementet du vill utforma. Om du till exempel vill att din regel ska påverka styckeelement, skulle du börja din regel med bokstaven "p".
- Deklarationen, som definierar de egenskaper du vill utforma (t.ex. teckensnittsfärg). Deklarationen finns inom lockiga parenteser {}.
- Egenskapen, som anger vilken egenskap för HTML -elementet du vill utforma. Till exempel inom etiketten kan du ange att du vill utforma textens färg.
- Egenskapsvärdet definierar specifikt hur du vill ändra egenskapen (t.ex. om egenskapen är teckensnittsfärg är egenskapens värde”grönt”).
- Du kan ändra flera olika egenskaper inom en enda deklaration.
Steg 3. Applicera CSS på din text för att din inställning ska se snygg ut
CSS är användbart för att tillämpa en mängd olika effekter på din text utan att behöva individuellt koda varje egendom i HTML. Experimentera med att ändra olika typer av egenskaper i CSS, inklusive:
- Fontfärg
- Textstorlek
- Teckensnittsfamilj (t.ex. det teckensnittsintervall du vill använda i din text)
- Textjustering
- Radavstånd
- Teckenavstånd
Steg 4. Experimentera med rutor och andra CSS -layoutverktyg
CSS är också användbart för att lägga till attraktiva visuella element på din sida, till exempel textrutor och tabeller. Dessutom kan du använda den för att ändra sidans övergripande layout och definiera var de olika elementen är placerade i förhållande till varandra.
Du kan till exempel definiera attribut som bredden och bakgrundsfärgen för ett element, lägga till en kant eller ange marginaler som skapar utrymme mellan de olika elementen på din sida
Metod 4 av 4: Arbeta med andra formspråk
Steg 1. Lär dig JavaScript om du vill lägga till interaktiva element på dina sidor
JavaScript är ett bra språk att lära sig om du är intresserad av att lägga till mer avancerade funktioner på dina webbplatser, till exempel animationer och popup -fönster. Gå en kurs eller leta efter onlinehandledning om hur du kodar i JavaScript och införlivar de kodade elementen i dina webbsidor | med HTML.
Innan du kan bli bekväm med JavaScript måste du känna till grunderna för att bygga sidor i HTML och CSS
Steg 2. Bekanta dig med jQuery för att göra JavaScript -kodning enklare
jQuery är ett JavaScript-bibliotek som kan förenkla Java-programmering genom att du får tillgång till en mängd förkodade JavaScript-element. jQuery är ett bra verktyg om du redan är bekant med grunderna i JavaScript -kodning.
Du kan komma åt jQuery -biblioteket och massor av andra värdefulla resurser via jQuery.org, webbplatsen för jQuery Foundation
Steg 3. Studera språk på serversidan om du är intresserad av back-end-utveckling
Även om HTML, CSS och JavaScript är perfekta för webbdesigners som fokuserar på vad användaren ser och gör på webbplatsen, är språk på serversidan användbart om du är mer intresserad av arbete bakom kulisserna. Om du vill lära dig mer om back-end-utveckling, fokusera på att lära dig språk som Python, PHP och Ruby on Rails.
Dessa språk är användbara för att hantera och bearbeta data som användaren inte ser. Till exempel kan PHP användas för att bygga säkra verktyg för att skapa lösenord på webbplatser som kräver inloggning
Hjälpfiler
HTML fuskblad
CSS fuskblad
