Share
Velkommen til Tuts + Town, hvor alle elsker webdesign! I denne serien vil vi lære alt om å designe og bygge et nettsted. For å hjelpe oss skal vi lage et nettsted sammen.
Disse leksjonene (eller tutorials) Vil gi deg en trinnvis veiledning for å bringe et nettsted til livs. Alle treningsfilene vil bli inkludert i slutten av hver leksjon, slik at du kan sammenligne ditt eget arbeid mens du går.
Så, kom inn, gjør deg komfortabel og la oss skape noe for folkene i Tuts + Town!
La oss ta et skritt tilbake og tenke på hvordan nettet fungerer.
Når to datamaskiner er koblet til Internett (som vises som en gul linje i bildet nedenfor), kan de snakke med hverandre.
En server (den blå boksen) er en spesiell datamaskin som inneholder nettsidelfiler. Datamaskinen hjemme eller på skolen er ikke en server, fordi den ikke er koblet direkte til Internett. Vi kobler til Internett via en Internett-leverandør (ISP).
Et nettsteds innhold (alt det som en nettside snakker om) er organisert i et spesielt sett med regler som datamaskiner forstår; som å snakke i et hemmelig kodet språk, bortsett fra at vi snart kommer inn på denne lille hemmeligheten også!
Hvordan datamaskinen din kobles til nettetPå dette bildet på nettleser Be om å se www.tutsplus.com fra serveren der nettstedets filer lever. Serveren sender filene tilbake, og nettleseren oversetter dem for å vise en side på skjermen. Og dette skjer veldig raskt!
Alt handler om kommunikasjon og deling informasjon.
På grunn av alt dette, et nettsted du skriver lokalt (på datamaskinen) kan ikke sees av andre personer på en annen datamaskin, til du flytter filene til en server. Vi ser på dette riktig senere.
En webdesigners jobb er veldig viktig. Alt som skjer i bildet ovenfor skjer for en grunn: å se et nettsted. En webdesigners jobb er å bestemme hvordan dette nettstedet ser ut og fungerer, og til og med andre ting, som å sørge for at nettstedet kan brukes til funksjonshemmede besøkende (på samme måte som du er en besøkende til Tuts + akkurat nå).
En webdesigners jobbI denne serien skal vi opprette et nettsted for Tuts + Town. Byen trenger et sted hvor turister kan få nyttig informasjon om byen før de besøker.
Her er en forhåndsvisning av nettstedet:
Hva vi skal byggeDette nettstedet vil inneholde alle webdesignpunkter vi skal lære om. Det vil være et veldig pent første webdesign prosjekt for deg!
La oss nå snakke litt om hva vi trenger for å komme dit.
Først skal vi utarbeide vårt nettsted og deretter ta med det vi vil ha på siden i en spesiell fil. Vi vil også legge til linker her for at de besøkende skal bli tatt til andre steder, for eksempel butikkwebsider.
Skisse er viktig!Etter at vi har skrevet opp og skrevet den spesielle filen til nettstedet vårt, må vi gjøre det bra. Dette er avsnittet der alle våre farge- og layoutideer (bestemmer hvor alt dette vil leve på skjermen), kommer til liv.
Hvordan kan vi gjøre nettstedet vårt enkelt å bruke? Hva føle ønsker vi at våre farger gir? Hvor skal alt plasseres på en smarttelefonskjerm? Hva med en full skjerm? Hva font vil se best ut? Dette er alle ting vi må tenke på, men ikke bekymre deg, det er en veldig morsom prosess, og disse spørsmålene kommer til deg selv, jo flere nettsteder du designer.
Nedenfor er en komplett veikart for reisen vi skal ta for å lage vår nettside. Hver blokk har en introduksjon til emnet og brytes deretter ned i mindre biter.
Vår veikartDu kan se av den rosa stjernen at vi leser Intro for øyeblikket. Vi har nå en grunnleggende ide om hvordan nettet fungerer, en webdesigners jobb, og har tatt en topp på prosjektet vi skal designe og bygge sammen.
Den neste delen er hvor vi tenker opp ideer og begynner å skissere. Skisse er en veldig morsom måte å samle tankene dine på et design før du starter kodingen. Det kan være en sanntidspakke og bidra til å holde oss på sporet.
Vi vil da snakke om filer og verktøyene vi trenger for å komme i gang med koding en del av vår nettside.
HyperText Markup Language (HTML) er det hemmelige (men ikke for lenge!) Språket som brukes til å organisere vår tekstfil som vi snakket kort om tidligere. Dette språket hjelper våre nettlesere til å forstå og vise nettsidene.
Alt på vår nettside, og alle nettsteder for den saks skyld, vil leve innenfor HTML elementer. Elementer er biter av dette språket som har a betydning og hjelp beskrive alt vi legger på siden.
Ikke bekymre deg for hva denne koden egentlig betyr for øyeblikket, så lenge du vet at hvert nettsted er laget av et skriftlig dokument.
Cascading stilark, CSS, la oss sette stilen (farger, skrifttyper, generell følelse) til nettstedet vårt, slik at det blir så attraktivt og så enkelt å bruke for sine besøkende som mulig.
Hva ser CSS ut?CSS kan også hjelpe oss med å legge alle brikkene ut på siden.
I denne delen av reisen vil vi raskt snakke om hvilken type bilde som skal inkluderes på nettstedet vårt, og hvordan du gjør noen styling til den. Det blir fire flotte bilder lagt til, hva synes du om dem?
I denne delen vil vi se på "byggeklossene" av webdesign. Vi vil sørge for at vi lager noe som folk vil bruke, og kan enkelt bruke, så vel som at det ser bra ut.
typografi er kunsten å ordne type og en flott oppfølging av vår nye designleksjon, da den kan legge til rette for eller ta bort suksessen til nettstedet vårt.
Det første eksempelet på typografi på vår side finner du øverst:
Farge er veldig viktig og morsom. Farge kan gjøre et nettsted pent, så vel som har betydning, som vi skal snakke om her.
Vi vil fullføre denne serien av leksjoner ved å lære hvordan du får webområdet ditt på en av de spesielle datamaskinene, a serveren, så alle dine venner og familie kan se det på internett. Vi vil også snakke om hvor du kan ta studiene med din nye tittel som "Web Designer for Tuts + Town".
Men la oss ikke bli for bekymret for det ennå, vi har bare kommet hit!
I neste leksjon hopper vi rett inn i å lære hvordan vi forbereder oss på å bygge et nettsted med HTML. Jeg kan ikke vente, se deg rundt i byen!
Accentsconagua