Share
Velkommen til den andre leksjonen i vår Web Design for Kids-serie!
I denne leksjonen vil vi lære alt om noen ting vi må gjøre og verktøyene vi trenger før vi begynner å skrive koden for vår Tuts + Town-nettside; vi kommer dit, jeg lover! Ikke glem å stille spørsmål i kommentarfeltet nederst på denne siden.
Første ting er først, men la oss se nærmere på hva vi skal skape sammen!
Det er super nyttig å skissere noen ideer vi har i hodene våre før vi begynner å faktisk bygge dem. Det er en øvelse som kan spare oss mye tid når vi kommer til kodingsdelen.
Kanskje det som står i hodene våre ser bare ikke ut når det er på papir? Kanskje noen nye problemer og spørsmål kommer opp i vår skisse? Kanskje er vårt design bare for opptatt? Mange av disse problemene vil vise seg i våre skisser.
Det er OK å ikke like våre skisser først, det er akkurat det vi vil skje! Vi ønsker å få alt dette utarbeidet på papir først.
Vi trenger et nettsted for turister å besøke og lære om hvilke butikker og bedrifter byen vår tilbyr. Vi grupperer disse bedriftene sammen på en måte som er fornuftig, for eksempel "hoteller" innenfor en gruppe og "restauranter" i en annen. Vi vil ha koblinger til bedriftens egne nettsteder, slik at våre besøkende kan klikke på dem for å få flere detaljer.
Det er også noen bilder vi skal bruke for å gi en innbydende følelse for byen.
Her er en titt på skissen som førte til den fullt utviklede og fargede forhåndsvisningen av nettstedet:
Dette er den eksakte nettsiden vi skal skape fra bunnen av! Temmelig stilig.
For å skrive HTML-kode (alle de hemmelige språkene vi snakket om i den første leksjonen) trenger vi en tekstredigerer å skrive den inn.
Det er best å ikke bruke noe som Microsoft Word for dette, som et riktig kode tekstredigerer vil gjøre jobben vår lettere. EN kode redaktør vil forstå hva vi skriver og gjør all kode riktig farge, mens Microsoft Word er bedre for å skrive skolerapporter, for eksempel.
Det finnes flere gode, gratis kode redaktører som du kan laste ned fra nettet. Hvis du er usikker på hvordan du laster ned noe, eller ikke sikkert om du skulle, er det alltid best å spørre en voksen.
Bluefish er flott for datamaskiner som kjører Windows, mens Atom vil være en god passform for en Mac.
Vi hopper inn i hva denne teksten betyr i neste kurs, men her er en titt på hva du kan forvente å skrive.
Som vi snakket litt om allerede, er et nettsted bare en haug med filer. Disse filene må alle leve i samme mappe for at nettleseren skal kunne få dem.
Tuts + Town-nettstedet vil ha en HTML-fil (lagret med en .html filutvidelse på slutten), en CSS-fil (lagret med en .css filtypenavn på slutten), og fire bilder som vil bli lagret i en mappe kalt "bilder". Bildermappen vil leve i samme hovedmappe som HTML- og CSS-filene.
EN filutvidelse er gruppen av brev som kommer etter prikken i et filnavn, og forteller oss hva slags fil det er:
Som nevnt blir bildene våre lagret i en mappe som heter "bilder" innenfor vår hovednettmappe, slik:
På bildet ovenfor har vi et bilde som heter town.svg (the .svg utvidelse er bare en slags bilde) som vi har satt inn i en ekstra mappe kalt "bilder". Å gjøre dette bidrar til å holde ting ryddig:
Begge disse måtene å gjøre ting er riktige, men vi vil bruke ekstramapper, som bildet til høyre.
Vi ser vårt arbeid rett i nettleser, som den du bruker nå for å se denne Tuts + -siden!
Det er flere nettlesere tilgjengelig for gratis nedlasting hvis du ikke allerede har en, for eksempel Google Chrome og Firefox. Hvis du bruker en Mac-datamaskin, har du allerede Safari installert, hyggelig!
Vi skal bygge vår nettside direkte på våre datamaskiner og ikke internettet. Hvis du husker i vår første leksjon, forklarte vi at vi ikke kan se et nettsted på Internett hvis det ikke er på en server.
Bildet nedenfor viser hvordan et ferdig nettsted vil se ut som å bli sett på lokalt (ikke på internett) i en nettleser. I stedet for å se en webadresse som www.tutsplus.com ser vi nettstedets lokal adresse, som ser litt annerledes ut:
I denne leksjonen så vi på noen viktige ting som vil hjelpe oss med å gjøre oss klar til å skrive vår nettsidekode. Vi så på hvordan å forberede filer og noen verktøy som a tekstredigerer og a nettleser.
I vår neste leksjon hopper vi rett inn i kodingsdelen av nettstedet vårt! Vi organiserer (jeg vet, så mye organisering!) Og legg til litt kode i vår HTML-fil. Det er her moroa starter!
Se deg rundt i byen!
Accentsconagua