Share
Välkommen till Tuts + Town, där alla älskar webbdesign! I denna serie lär vi oss allt om att designa och bygga en webbplats. För att hjälpa oss ska vi göra en hemsida tillsammans.
Dessa lektioner (eller Handledningar) Kommer att ge dig en stegvis guide för att få en webbplats till liv. Alla träningsfiler kommer att finnas med i slutet av varje lektion, så du kan jämföra ditt eget arbete när du går.
Så snälla kom in, gör dig bekväm och låt oss skapa något för Tuts + Towns folk!
Låt oss ta ett steg tillbaka och tänka på hur webben fungerar.
När två datorer är anslutna till Internet (som visas som en gul linje i bilden nedan) kan de prata med varandra.
En server (den blå rutan) är en speciell dator som innehåller webbsidor. Din dator hemma eller skolan är inte en server, eftersom den inte är ansluten direkt till Internet. Vi ansluter till Internet via en Internetleverantör (ISP).
En webbplats innehåll (allt som en webbplats talar om) är organiserad inom en särskild uppsättning regler som datorer förstår; typ av som att tala i ett hemligt kodat språk, förutom att vi snart kommer in på denna lilla hemlighet också!
Hur datorn ansluts till webbenPå den här bilden browser ber att se www.tutsplus.com från servern där webbplatsens filer lever. Servern skickar filerna tillbaka och webbläsaren översätter dem för att visa en sida på skärmen. Och det här händer mycket snabbt!
Allt handlar om kommunikation och delning information.
På grund av allt detta, en webbplats du skriver lokalt (på din dator) kan inte ses av andra personer på en annan dator, tills du flyttar filerna till en server. Vi tittar på det här rätt senare.
En webbdesigners jobb är väldigt viktigt. Alla saker som händer på bilden ovan händer av en anledning: att se en webbplats. En webbdesigners jobb är att bestämma hur den här webbplatsen ser ut och fungerar, och även andra saker, som att se till att webbplatsen är användbar för funktionshindrade besökare (på samma sätt som du är en besökare till Tuts + just nu).
En webbdesigners jobbI denna serie skapar vi en webbplats för Tuts + Town. Staden behöver en plats där turister kan få praktisk information om staden innan de besöker.
Här är en förhandsvisning av webbplatsen:
Vad vi ska byggaDenna webbplats kommer att innehålla alla webbdesignpunkter vi ska lära oss om. Det kommer att bli ett riktigt snyggt första webbdesignprojekt för dig!
Låt oss nu prata lite om vad vi behöver komma dit.
Först ska vi utarbeta vår webbplats och sedan inkludera vad vi vill ha på sidan i en speciell fil. Vi lägger också till länkar här för att besökarna ska tas till andra platser, till exempel butikswebbplatser.
Skissning är viktig!När vi har ritat och skriv den speciella filen för vår hemsida måste vi se till att den ser bra ut. Det här är det avsnitt där alla våra färg- och layoutidéer (bestämmer var alla dessa saker kommer att leva på skärmen) kommer till liv.
Hur kan vi göra vår webbplats lätt att använda? Vad känna vill vi att våra färger ska ge? Var ska allt läggas på en smarttelefon skärm? Vad sägs om en hel datorskärm? Vad font kommer att se bäst ut? Det här är allt vi behöver tänka på, men oroa dig inte, det är en väldigt rolig process och de här frågorna kommer naturligtvis till dig, ju fler webbplatser du designar.
Nedan är en komplett färdplan för resan vi tar för att skapa vår hemsida. Varje block har en introduktion till ämnet och bryts sedan ner i mindre bitar.
Vår färdplanDu kan se den rosa stjärnan som vi läser Intro just nu. Vi har nu en grundläggande uppfattning om hur webben fungerar, en webbdesigners jobb och har tagit en topp i projektet vi ska designa och bygga tillsammans.
Nästa del är där vi tänker på idéer och börjar skissera. Skissning är ett riktigt roligt sätt att samla dina tankar om en design innan du börjar kodning. Det kan vara en realtidssparare och hjälpa oss att hålla oss på rätt spår.
Vi kommer då att prata om filer och de verktyg vi behöver för att komma igång med kodning en del av vår hemsida.
HyperText Markup Language (HTML) är det hemliga (men inte för långt!) Språket som används för att organisera vår textfil som vi talade kort om tidigare. Detta språk hjälper våra webbläsare att förstå och visa webbplatsfilerna.
Allt på vår hemsida och alla webbplatser för den delen kommer att leva inom HTML element. Element är bitar av detta språk som har a menande och hjälp beskriva allt vi lägger på sidan.
Oroa dig inte för vad den här koden faktiskt betyder för tillfället, så länge du vet att varje webbplats är gjord av ett skriftligt dokument.
Cascading Styleheets, CSS, tillåta oss att ställa in styling (färger, typsnitt, övergripande känsla) för vår hemsida, vilket gör det så attraktivt och så enkelt att använda för sina besökare som möjligt.
Vad CSS ser utCSS kan också hjälpa oss att lägga alla våra bitar ut på sidan.
I den här delen av resan kommer vi snabbt att prata om vilken typ av bild som kommer att inkluderas på vår webbplats och hur man gör en stil för den. Det kommer att finnas fyra underbara bilder tillagda, vad tycker du om dem?
I den här delen kommer vi att titta på "byggstenarna" av webbdesign. Vi vill se till att vi gör något som folk kommer att använda, och kan enkelt använda, liksom se till att det ser bra ut.
Typografi är konsten att arrangera typ och en bra uppföljning till vår nya designlektion, eftersom den väsentligt kan lägga till eller ta bort vår webbplatss framgång.
Det första exemplet på typografi på vår webbplats finns längst upp:
Färg är mycket viktig och jättekul. Färg kan göra en webbplats vacker, liksom ha menande, som vi kommer att prata om här.
Vi kommer att avsluta denna serie av lektioner genom att lära dig hur du får dina webbfiler på en av de speciella datorerna, a server, så alla dina vänner och familj kan se den på Internet. Vi kommer också att prata om var du kan ta dina studier med din nya titel som "Web Designer for Tuts + Town".
Men låt oss inte bli alltför oroliga för det ännu, vi har bara kommit hit!
I nästa lektion hoppar vi direkt in i hur vi förbereder oss för att bygga en webbplats med HTML. Jag kan inte vänta, se dig runt i stan!
Accentsconagua