Share
Welkom bij de tweede les in onze serie Web Design for Kids!
In deze les zullen we alles leren over enkele dingen die we moeten doen en de hulpmiddelen die we nodig hebben voordat we beginnen met het schrijven van de code voor onze Tuts + Town-website; we komen er, dat beloof ik! Vergeet ook niet om vragen te stellen in het commentaarveld onderaan deze pagina.
Het eerste is echter de eerste keer, laten we eens kijken naar wat we samen precies gaan maken!
Het is superhandig om ideeën die we in ons hoofd hebben te schetsen voordat we ze daadwerkelijk gaan bouwen. Het is een oefening die ons veel tijd kan besparen als we bij het codeergedeelte komen.
Misschien ziet wat er in onze hoofden zit er niet goed uit als het eenmaal op papier is? Misschien komen er nieuwe problemen en vragen naar voren in onze schets? Misschien is ons ontwerp gewoon te druk? Veel van deze problemen zullen zich in onze schetsen voordoen.
Haar OK om onze schetsen in eerste instantie niet leuk te vinden, dat is precies wat we willen bereiken! We willen dit eerst allemaal op papier laten komen.
We hebben een website nodig voor toeristen om te bezoeken en om meer te weten te komen over welke winkels en bedrijven onze stad biedt. We groeperen deze bedrijven op een manier die logisch is, zoals 'hotels' binnen de ene groep en 'restaurants' in een andere. We willen links hebben naar de eigen websites van het bedrijf, zodat onze bezoekers erop kunnen klikken om meer informatie te krijgen.
Er zijn ook enkele afbeeldingen die we zullen gebruiken om de stad een gastvrije sfeer te geven.
Hier is een blik op de schets die leidde tot de volledig ontworpen en gekleurde preview van de site:
Dit is de exacte website die we gaan maken helemaal opnieuw! Best netjes.
Om HTML-code te schrijven (al die geheime taal dingen waar we in de eerste les over gesproken hebben) hebben we een teksteditor om het in te typen.
Het is het beste om zoiets als Microsoft Word niet als een goed te gebruiken code teksteditor zal ons werk veel gemakkelijker maken. EEN codebewerker zal begrijpen wat we typen en alle code de juiste kleuren geven, terwijl Microsoft Word beter is voor het schrijven van schoolrapporten, bijvoorbeeld.
Er zijn verschillende goede, gratis code-editors die u van internet kunt downloaden. Als u niet zeker weet hoe u iets moet downloaden, of niet zeker weet wat u moet doen, is het altijd het beste om een volwassene te vragen.
Bluefish is geweldig voor computers met Windows, terwijl Atom geschikt is voor een Mac.
We zullen ingaan op wat deze tekst betekent in de volgende cursus, maar hier is een kijkje in wat u kunt verwachten te typen.
Zoals we al een beetje over gesproken hebben, is een website slechts een aantal bestanden. Deze bestanden moeten allemaal in dezelfde map staan zodat de browser ze kan ophalen.
De website van Tuts + Town heeft een HTML-bestand (opgeslagen met een .html bestandsextensie aan het einde), een CSS-bestand (opgeslagen met een .css bestandsextensie aan het einde) en vier afbeeldingen die worden opgeslagen in een map met de naam "afbeeldingen". De map met afbeeldingen staat in dezelfde hoofdmap als de HTML- en CSS-bestanden.
EEN bestandsextensie is de groep letters achter de punt in een bestandsnaam, die ons vertelt wat voor soort bestand het is:
Zoals gezegd, onze afbeeldingen worden opgeslagen in een map met de naam "images" binnen onze hoofdsitemap, zoals deze:
In de afbeelding hierboven hebben we een afbeelding met de naam town.svg (de .svg extensie is slechts een soort afbeelding) die we in een extra map met de naam "afbeeldingen" hebben gezet. Door dit te doen, blijven dingen netjes:
Beide manieren om dingen te doen zijn correct, maar we zullen mappen met extra's gebruiken, zoals de afbeelding rechts.
We zullen ons werk goed zien in de browser, zoals degene die je nu gebruikt om deze Tuts + -pagina te bekijken!
Er zijn verschillende browsers beschikbaar om gratis te downloaden als je er nog geen hebt, zoals Google Chrome en Firefox. Als je een Mac-computer gebruikt, heb je Safari al geïnstalleerd, leuk!
We gaan onze website direct bouwen op onze computers en niet het internet. Als je het ons herinnert in onze eerste les, hebben we uitgelegd dat we geen website op internet kunnen zien als deze niet op een server staat.
De onderstaande afbeelding laat zien wat een voltooide website eruitziet als lokaal bekeken (niet op het internet) in een browser. In plaats van een webadres te zien zoals www.tutsplus.com, zien we de site lokaal adres, dat er een beetje anders uitziet:
In deze les hebben we gekeken naar enkele belangrijke dingen die ons helpen ons voor te bereiden op het schrijven van de code van onze website. We hebben gekeken naar hoe je bestanden moet voorbereiden en wat gereedschap zoals een teksteditor en een browser.
In onze volgende les zullen we meteen in het codeergedeelte van onze website springen! We organiseren (ik weet het, zo veel organiseren!) En voegen code toe aan ons HTML-bestand. Dit is waar het plezier begint!
Ik zie je in de stad!
Accentsconagua