Webdesign voor kinderen Welkom bij Tuts + Town!

Welkom bij Tuts + Town, waar iedereen houdt van webdesign! In deze serie leren we alles over het ontwerpen en bouwen van een website. Om ons te helpen, gaan we samen een website maken.

Deze lessen (of tutorials) Geeft u een stapsgewijze handleiding voor het tot leven brengen van een website. Alle oefenbestanden worden aan het einde van elke les toegevoegd, zodat u uw eigen werk kunt vergelijken terwijl u verder gaat.

Dus kom alsjeblieft naar binnen, maak het je gemakkelijk en laten we iets maken voor de mensen van Tuts + Town!

Hoe werkt het web?

Laten we een stapje terug doen en nadenken over hoe het web werkt.

Wanneer twee computers met internet zijn verbonden (die in de onderstaande afbeelding als een gele lijn wordt weergegeven), kunnen ze met elkaar praten.

Een server (het blauwe vak) is een speciale computer die webpagina-bestanden bevat. Uw computer thuis of op school is geen server, omdat deze niet rechtstreeks is verbonden met internet. We maken verbinding met internet via een Internetprovider (ISP).

De inhoud van een site (al datgene waar een website over praat) is georganiseerd binnen een speciale reeks regels die computers begrijpen; een beetje zoals spreken in een geheime, gecodeerde taal, behalve dat we binnenkort ook op dit kleine geheim ingaan!

Hoe uw computer verbinding maakt met internet

Op deze foto de browser vraagt ​​om www.tutsplus.com te bekijken vanaf de server waar de bestanden van de site zich bevinden. De server stuurt de bestanden terug en de browser vertaalt deze om een ​​pagina op het scherm weer te geven. En dit gebeurt heel snel!

Het gaat allemaal over communicatie en delen informatie.

Vanwege dit alles, een site die je schrijft plaatselijk (op uw computer) kan niet worden gezien door andere mensen op een andere computer, totdat u de bestanden naar een server verplaatst. We zullen dit later goed bekijken.

De taak van een webontwerper

Het werk van een webontwerper is erg belangrijk. Alle dingen die in de bovenstaande afbeelding plaatsvinden, vinden om één reden plaats: om een ​​website te bekijken. Het is een taak van een webontwerper om te beslissen hoe deze website eruitziet en werkt, en zelfs andere dingen, zoals ervoor zorgen dat de website bruikbaar is voor gehandicapte bezoekers (op dezelfde manier als u een bezoeker naar Tuts + op dit moment).

De taak van een webdesigner

Ons project

In deze serie zullen we een website maken voor Tuts + Town. De stad heeft een plaats nodig waar toeristen handige informatie over de stad kunnen krijgen voordat ze deze bezoeken.

Hier is een voorbeeld van de website: 

Wat we zullen bouwen

Deze website bevat alle webontwerppunten waarover we meer te weten zullen komen. Het wordt een heel netjes eerste webontwerpproject voor je!

Schetsen en bouwen

Laten we nu een beetje praten over wat we nodig hebben om daar te komen.

Eerst zullen we onze site opstellen en dan opnemen wat we op de pagina willen hebben in een speciaal bestand. We zullen hier ook links toevoegen zodat bezoekers naar andere plaatsen kunnen gaan, zoals de winkelwebsites.

Schetsen is belangrijk!

styling

Nadat we het speciale bestand voor onze website hebben opgesteld en geschreven, moeten we het er goed uit laten zien. Dit is de sectie waar al onze kleur- en lay-outideeën (om te beslissen waar al deze dingen op het scherm zullen leven) tot leven zullen komen.

Hoe kunnen we onze site gebruiksvriendelijk maken? Wat voelen willen we dat onze kleuren geven? Waar moet alles op een smartphonescherm worden geplaatst? Hoe zit het met een volledig computerscherm? Wat doopvont ziet er het beste uit? Dit zijn allemaal dingen waar we over na moeten denken, maar maak je geen zorgen, het is een heel leuk proces en deze vragen komen vanzelf naar je toe, hoe meer websites je ontwerpt.

Reekskaart

Hieronder is een compleet roadmap voor de reis die we zullen maken om onze website te maken. Elk blok heeft een inleiding tot het onderwerp en wordt vervolgens opgesplitst in kleinere stukjes. 

Onze routekaart

Invoering

Je kunt aan de roze ster zien dat we het lezen Intro momenteel. We hebben nu een basisidee van hoe het web werkt, de taak van een webontwerper, en hebben een piek genomen in het project dat we gaan ontwerpen en samen bouwen.

Een website bouwen

Het volgende deel is waar we ideeën bedenken en beginnen met schetsen. Schetsen is een erg leuke manier om je gedachten over een ontwerp te verzamelen voordat je begint met coderen. Het kan een echte tijdbesparing zijn en ons helpen op schema te blijven.

We zullen dan praten over bestanden en de hulpmiddelen die we nodig hebben om aan de slag te gaan met de codering deel van onze website.

HTML

HyperText Markup Language (HTML) is die geheime (maar niet lang!) Taal die wordt gebruikt om ons tekstbestand te ordenen waarover we eerder kort hebben gesproken. Deze taal helpt onze browsers de websitebestanden te begrijpen en weer te geven.

Alles op onze website, en alle websites voor die kwestie, zal binnen HTML leven elementen. Elementen zijn stukjes van deze taal die een betekenis en helpen beschrijven alles wat we op de pagina plaatsen.

Maak je geen zorgen over wat deze code nu precies inhoudt, net zo lang als je weet dat elke website is gemaakt van een geschreven document.

CSS

Cascading Stylesheets, CSS, sta ons toe om de styling (kleuren, lettertypen, algemene gevoel) voor onze website in te stellen, waardoor het zo aantrekkelijk en zo gemakkelijk te gebruiken voor zijn bezoekers mogelijk wordt gemaakt.

Hoe CSS eruit ziet

CSS-indeling

CSS kan ons ook helpen om al onze stukken op de pagina te leggen.

Afbeeldingen

In dit deel van de reis zullen we snel praten over het type afbeelding dat op onze site zal worden opgenomen en hoe we het kunnen stylen. Er worden vier mooie afbeeldingen toegevoegd, wat vind je van hen??

Basisinformatie over het ontwerp

In dit deel zullen we kijken naar de "bouwstenen" van webdesign. We willen ervoor zorgen dat we iets maken dat mensen kunnen gebruiken en gemakkelijk kunnen gebruiken, en ervoor zorgen dat het er goed uitziet.

Typografie

Typografie is de kunst van het regelen van het type en een geweldige follow-up van onze nieuwe ontwerples, omdat deze het succes van onze website enorm kan vergroten of wegnemen.

Het eerste voorbeeld van typografie op onze site is helemaal bovenaan te vinden:

Kleur

Kleur is heel belangrijk en heel leuk. Kleur kan een site mooi en net zo goed maken betekenis, waarover we hier zullen praten.

Einde van de serie

We zullen deze lessenreeks afmaken door te leren hoe u uw websitebestanden op één van die speciale computers kunt krijgen, a server, dus al uw vrienden en familie kunnen het op internet zien. We zullen ook praten over waar je je studie met je nieuwe titel kunt volgen als "Webontwerper voor Tuts + Town".

Maar laten we ons daar niet al te veel zorgen over maken, we zijn er pas net!

Tot ziens!

In de volgende les zullen we meteen leren hoe we ons voorbereiden op het bouwen van een website met HTML. Ik kan niet wachten, zie je in de stad!