Share
Välkommen till den andra lektionen i vår webbdesign för barns serie!
I denna lektion kommer vi att lära oss allt om några saker vi behöver göra och de verktyg vi behöver innan vi börjar skriva koden för vår webbplats Tuts + Town. vi kommer dit, jag lovar! Glöm inte att ställa några frågor i kommentarfältet längst ner på den här sidan.
Första saken är först men vi får se närmare på vad vi ska skapa tillsammans!
Det är super användbart att skissera några idéer vi har i våra huvuden innan vi börjar bygga dem. Det är en övning som kan spara oss mycket tid när vi kommer till kodningsdelen.
Kanske är det som står i huvudet bara inte rätt när det är på papper? Kanske kommer några nya problem och frågor upp i vår skiss? Kanske är vår design bara för upptagen? Många av dessa problem kommer att visa sig i våra skisser.
Dess ok att inte som våra skisser först, det är precis vad vi vill hända! Vi vill få allt detta utarbetat på papper först.
Vi behöver en webbplats för turister att besöka och lära oss om vilka butiker och företag vår stad erbjuder. Vi grupperar dessa företag tillsammans på ett sätt som är meningsfullt, till exempel "hotell" inom en grupp och "restauranger" i en annan. Vi vill ha länkar till företagets egna webbplatser, så våra besökare kan klicka på dem för att få mer information.
Det finns också några bilder vi ska använda för att ge en välkomnande känsla för staden.
Här är en titt på skissen som ledde till den fullständigt utformade och färgade förhandsvisningen av webbplatsen:
Detta är den exakta hemsidan som vi ska skapa från början! Ganska snyggt.
För att skriva HTML-kod (alla de hemliga språkämnena vi pratade om i den första lektionen) behöver vi en textredigerare att skriva in den.
Det är bäst att inte använda något som Microsoft Word för detta, som ett korrekt koda textredigerare kommer att göra vårt jobb mycket enklare. en kodredigerare kommer att förstå vad vi skriver och gör hela koden rätt färger, medan Microsoft Word är bättre för att skriva skolrapporter, till exempel.
Det finns flera bra, gratis kodredigerare som du kan ladda ner från webben. Om du är osäker på hur du laddar ner något, eller inte säkert om du borde, är det alltid bäst att fråga en vuxen.
Bluefish är utmärkt för datorer som kör Windows, medan Atom kommer att vara en bra passform för en Mac.
Vi hoppar in i vad den här texten betyder i nästa kurs, men här är en titt på vad du kan förvänta dig att skriva.
Som vi pratat lite om redan är en webbplats bara en massa filer. Dessa filer måste alla lever i samma mapp för att webbläsaren ska få dem.
Tuts + Town-webbplatsen kommer att ha en HTML-fil (sparad med en .html filtillägg i slutet), en CSS-fil (sparad med en .css filtillägg i slutet) och fyra bilder som sparas i en mapp med namnet "bilder". Bildermappen kommer att leva i samma huvudmapp som HTML- och CSS-filerna.
en filtillägg är den grupp av bokstäver som kommer efter pricken i ett filnamn och berättar vilken typ av fil det är:
Som nämnts sparas våra bilder i en mapp med namnet "bilder" inom vår huvudsakliga webbplatsmapp, så här:
På bilden ovan har vi en bild som heter town.svg (the .svg förlängning är bara en sorts bild) som vi har lagt i en extra mapp som heter "bilder". Att göra detta hjälper till att hålla sakerna städa:
Båda dessa sätt att göra saker är korrekta, men vi kommer att använda extras-mappar, som bilden till höger.
Vi ser vårt arbete direkt i browser, som den du använder nu för att se denna Tuts + sida!
Det finns flera webbläsare tillgängliga för gratis nedladdning om du inte redan har en, till exempel Google Chrome och Firefox. Om du använder en Mac-dator har du redan Safari installerat, trevligt!
Vi ska bygga vår hemsida direkt på våra datorer och inte Internet. Om du kommer ihåg i vår första lektion förklarade vi att vi inte kan se en webbplats på Internet om den inte finns på en server.
Bilden nedan visar hur en färdig webbplats skulle se ut att ses på lokalt (inte på Internet) i en webbläsare. I stället för att se en webbadress som www.tutsplus.com ser vi webbplatsens lokal adress, som ser lite annorlunda ut:
I den här lektionen tittade vi på några viktiga saker som hjälper oss att göra oss redo att skriva vår hemsida kod. Vi tittade på hur man förbereder filer och några verktyg som a textredigerare och a browser.
I vår nästa lektion hoppar vi direkt in i kodningsdelen av vår hemsida! Vi organiserar (jag vet, så mycket att organisera!) Och lägga till en kod i vår HTML-fil. Här börjar kulan!
Vi ses runt om i staden!
Accentsconagua