Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Kids
Webdesign

Webdesign för barn: Välkommen till Tuts+by!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Swedish (Svenska) translation by Erland Lewin (you can also view the original English article)

Välkommen till Tuts+by, där alla älskar webdesign! I den här serien kommer vi att lära oss allt om att formge och bygga en websajt. För hjälpa oss kommer vi att bygga en websida tillsammans.

De här lektionerna (eller tutorials) kommer att ge dig en guide över hur du skapar en websajt steg för steg. Alla övningsfiler kommer att finnas i slutet av varje lektion, så att du kan jämföra med det du gör medans du håller på.

Välkomen, kom in och känn dig som hemma, och låt os skapa något för människorna i Tuts+by!

Hur funkar webben?

Låt oss ta ett steg tillbaka och fundera över hur webben fungerar.

När två datorer är kopplade till Internet (den gula linjen i bilden nedan) så kan dom prata med varandra.

En server (den blå lådan) är en speciell dator som innehåller filerna för websidorna. Din dator, hemma eller i skolan, är inte en server eftersom den inte är kopplad direkt till Internet. Vi kopplar upp oss till Internet genom internetleverantör (ISP).

En sajts innehåll (allt som en websida pratar om) är organiserat med en speciell uppsättning regler som datorer förstår; ungefär som att prata på ett hemligt kodspråk. Men vi kommer snart att känna till hemligheten!

Hur din dator ansluter till webben

I den här bilden ber webläsaren att få visa www.tutsplus.com från servern där sajtens filer bor. Serven skickar tillbaka filerna, och webläsaren översätter dom för att visa en sida på skärmen. Allt det här går väldigt snabbt!

Det handlar om att kommunicera och dela information.

På grund av detta så kan en sajt som du skriver lokalt (på din dator) inte ses av andra människor på andra datorer förrän du flyttar filerna till en server. Vi kommer att titta närmare på det här senare.

En webdesigners jobb

En webdesigners jobb är mycket viktigt. Allt som händer på bilden ovan sker av en enda anledning: att visa en websida. En webdesigners jobb är att bestämma hur websidan ser ut och fungerar, och till och med annat som att se till att websidan är tillgänglig för personer med funktionsnedsättningar (precis som du är en besökare på Tuts+ just nu).

En webdesigners jobb

Vårt projekt

I den här serien kommer vi att skapa en websida för Tuts+by. Byn behöver ett ställe där turister kan få praktisk information om byn innan dom besöker den.

Här är en förhandsvisning av websidan:

Vad vi kommer att bygga

Den här websidan kommer att använda alla delar av webdesign som vi kommer att lära oss. Det blir ett häftigt första webdesignprojekt för dig!

Att skissa och bygga

Låt oss prata lite om vad vi behöver för att nå dit.

Först kommer vi att skissa vår sajt, och sedan inkludera det vi vill ha på sidan i en speciell fil. Vi kommer också att lägga till länkar som tar besökarna till andra ställen, som affärernas websidor.

Det är viktigt att skissa!

Stil

När vi har skissat och skrivit den speciella filen för vår websida så kommer vi att behöva snygga till den. Det här är den del där alla våra idéer om färg och layout (att bestämma var allt kommer att bo på skärmen) kommer att få liv.

Hur kan vi göra sidan lättanvänd? Vilken känsla vill vi att färgerna ska ge? Var ska allt placeras på en mobiltelefons skärm? Hur blir det på en datorskärm? Vilket typsnitt kommer att vara snyggast? Allt det här behöver vi tänka på, men oroa dig inte, det är en kul process och de här frågorna kommer att komma naturligt ju fler websajter du formger.

Karta över serien

Nedan är en fullständig karta över resan vi kommer att göra för att skapa vår websajt. Varje block har en inledning till ämnet och bryts sen ner i mindre delar.

Vår karta

Inledning

Den rosa stjärnan visar att vi just nu läser Intro (Inledningen). Nu har du en grundläggande bild av hur webben fungerar, en webdesigners jobb, och har kikat på projektet som vi kommer att formge och bygga tillsammans.

Att bygga en websajt

I nästa del kommer vi att komma på idéer och börja skissa. Att skissa är ett riktigt kul sätt att samla dina tankar om en design innan du börjar koda. Det kan spara mycket tid och se till att vi håller oss fokuserade.

Vi kommer sen att prata om filer och verktygen vi behöver för att börja kodningsdelen av vår websajt.

HTML

HyperText Markup Language (HTML) är det hemliga (men inte så länge till!) språket som används för att organisera vår textfil som vi nämnde tidigare. Det här språket hjälper våra webläsare att förstå och visa websajtens filer.

Allt på vår websajt, och på alla websajter för den delen kommer att bo i HTML-element. Element är bitar av språket som har en betydelse och hjälper till att beskriva allt vi placerar på sidan.

Oroa dig inte om vad koden faktiskt betyder just nu, så länge du vet att varje websida kommer från ett skrivet dokument.

CSS

Cascading Stylesheets, CSS, låter oss formge (bestämma färger, typsnitt och känslan) får vår websajt, vilket gör den så snygg och lättanvänd som möjligt för våra besökare.

Hur CSS ser ut

Layout med CSS

CSS kan också hjälpa oss att lägga ut alla våra delar på sidan.

Bilder

I den här delen av resan kommer vi kort att prata om vilken sorts bilder som kommer att finnas på vår sajt, och hur vi kan formge den. Det kommer att finnas fyra underbara bilder, vad tycker du om dom?

Our images

Grundläggande Formgivning

I den här delen kommer vi att titta på webdesignens byggblock. Vi vill vara säkra på att vi gör något som folk kommer att använda, kan använda enkelt, och se till att det är snyggt.

Typografi

Typografi är konsten att visa text, och är en suverän uppföljning till vår nya designlektion. Den kan verkligen påverka om vår sajt är framgångsrik.

Första exemplet på typografi på vår sajt finns längst upp:

Heading

Färg

Färg är mycket viktigt och väldigt roligt. Färg kan göra en sajt snygg, och ge den betydelse - det kommer vi att prata om här.

Seriens slut

Vi kommer att avsluta den här lektionsserien genom att lära oss hur du flyttar din websajts filer till en sådan där speciell dator, en server, så att din familj och alla dina vänner kan se den på Internet. Vi kommer också att prata om vad du kan göra med dina kunskaper med din nya titel som "Tuts+bys webdesigner".

Men låt oss inte oroa oss om det än, vi har ju precis kommit hit!

Ses snart!

I nästa lektion kommer vi att direkt dyka in i att lära oss om hur vi förbereder oss för att bygga en websajt med HTML. Jag kan inte vänta, vi ses i byn!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.