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: förberedelser för att bygga en websajt.

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

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

Välkommen till den andra lektionen i vår serie Webdesign för barn!

I den här lektionen kommer vi att lära oss allt om några saker vi behöver göra, och verktygen vi behöver innan vi börjar skriva kod för vår websajt för Tuts+by; men vi kommer dit, jag lovar! Glöm inte att fråga om du undrar över något i kommentarsområdet längst ner på den här sidan.

En sak i taget, nu ska vi ta en närmare titt på exakt vad vi kommer att skapa tillsammans!

Att skissa

Det är enormt värdefullt att skissa idéerna som vi har i våra huvuden innan vi faktiskt börjar bygga dom. Det är en övning som kan bespara oss mycket tid när vi kommer till kodningsdelen.

Det som finns i våra huvuden kanske inte ser rätt ut när det är på papper? Nya problem och frågor kanske dyker upp i vår skiss? Vår design kanske helt enkelt är för plottrig? Många av de här problemen kommer att visa sig i våra skisser.

Det är OK att inte gilla våra skisser till en början, det är precis det vi vill ska hända! Vi vill arbeta igenom allt det här på papper först.

Att skissa Tuts+bys websajt

Vi behöver en webbsajt som turister kan besöka och där dom kan lära sig vilka butiker och företag vår by erbjuder. Vi kommer att gruppera de här företagen tillsammans på ett logiskt sätt, som hotell i en grupp, och restauranger i en annan. Vi kommer att vilja ha länkar till företagens egna webbsajter, så att våra besökare kan klicka sig vidare till dom för att få mer information.

Det finns också några bilder som vi kommer att använda för att få byn att kännas välkomnande.

Här kan du se skissen som ledde till den färdigdesignade och färgade förhandsvisningen av sajten:

Det är precis den webbsajt som vi kommer att skapa från grunden! Ganska coolt.

Editorer

För att skriva HTML-kod (det hemliga språket vi pratade om i första lektionen) så behöver vi en texteditor för att skriva in det.

Det är bäst att inte använda något som Microsoft Word för det här; en riktig kodeditor kommer att göra vårt jobb mycket enklare. En kodeditor kommer att förstå vad vi skriver, och ge koden rätt färger, medans Microsoft Word är bättre för att skriva till exempel skoluppsatser.

Det finns flera bra, gratis kodeditorer som du kan ladda ner från webben. Om du är osäker på hur du kan ladda ner något, eller om du är osäker på om du borde, så är det alltid bäst att fråga en vuxen.

Bluefish är jättebra för datorer med Windows, och Atom kommer att passa bra på en Mac.

Vi kommer att dyka in i vad den här texten betyder i nästa lektion, men här är en förhandstitt på vad du kan förväntas skriva.

Filer, filer, filer

Som vi nämnt tidigare, så är en webbsajt bara en hög med filer. Alla filerna måste finnas i samma mapp för att webbläsaren ska hitta dom.

Tuts+bys webbsajt kommer att ha en HTML-fil (sparad med filändelsen .html), en CSS-fil (sparad med filändelsen .css), och fyra bilder som kommer att sparas i en mapp som heter "images" (bilder). Bilderna kommer att finnas i samma huvudmapp som HTML och CSS-filerna.

En filändelse är en grupp bokstäver som kommer efter punkten i filnamnet, och berättar vilken sorts fil det är:

Som vi nämnde, så kommer våra bilder att sparas i en mapp som heter "images" inom vår huvudmapp, så här:

I bilden ovan har vi en bild som heter town.svg (.svg-ändelsen betyder att det är en sorts bild) som vi har lagt i en extra mapp som heter "images". Att göra så här håller ordning på filerna.

Båda dom här sätten går, men vi kommer att använda extra mappar, som bilden till höger.

Webbläsare

Vi kommer att se vårt arbete till höger i webbläsaren, som den du använder just nu för att läsa den här Tuts+by-sidan!

Det finns flera webbläsare som man kan ladda ner gratis om du inte redan har en, som t.ex. Google Chrome och Firefox. Om du använder en Mac så har du redan Safari installerat, bra!

Inte på Webben, än

Vi kommer att bygga websajten direkt på vår dator, och inte på Internet. Om du kommer ihåg så förklarade vi i vår första lektion att vi inte kan se en webbsida på Internet om den inte finns på en server.

Bilden nedan visar hur en färdig webbsajt skulle se ut om man tittade på den lokalt (inte på Internet) i en webbläsare. I stället för att se en webbadress som www.tutsplus.com, så skulle vi se sajtens lokala adress, som ser lite annorlunda ut:

Bra jobbat!

I den här lektionen har vi gått igenom några viktiga saker som kommer förbereda oss för att skriva koden för vår webbsajt.  Vi har tittat på hur man förbereder filer, och några verktyg som en texteditor och en webbläsare.

I nästa lektion kommer vi att dyka direkt in i kodningsdelen av vår websajt! Vi kommer att organisera (jag vet, så mycket organiserande!) och lägga till kod till vår HTML-fil. Det är här det roliga börjar!

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.