D - Website maken - 3*

• Informatiekunde
• Middelbare school
• havo, vwo
• Leerjaar 1

Website maken - 3 punten

Er gaat geen dag voorbij dat jij niet meerdere websites gebruikt!

Wat voor doelen van websites kan je bedenken?

Je staat bij het bezoeken van een website vast niet altijd stil bij hoe veel werk het maken én onderhouden van een website kan zijn!

Begrippen

• Een website op het internet is bereikbaar via een domeinnaam.
• Bedrijven die webruimte aanbieden noemen we een webhost of hosting provider.

De naam is belangrijk

Zoekmachines

Herkenbaarheid

Juiste spelling

Professioneel

Een goede domeinnaam is makkelijk te

onthouden en sluit goed aan bij het onderwerp van de website

Extensies

Een domein extensie is het achterste gedeelte van een domeinnaam, de letters achter de “punt”. Vaak staan deze letters voor de afkorting van een land. 

Welke domeinnaam extensies ken jij al?

SIDN - stichting internet domeinregistratie Nederland

HTML

 Als je een website wilt maken, is het wel handig om te weten wat je eigenlijk doet. Alle websites zijn gemaakt met een opmaaktaal voor het internet. Dat is HTML. Met deze taal beschrijf je wat er op je website te zien is, waar de plaatjes staan, hoe de tekst is ingedeeld, etc.

CMS

Het kost tijd om HTML goed te leren. Als je minder tijd hebt, gebruik je een CMS.  Een CMS bestaat uit kant en klare stukken HTML die je in je website kunt plaatsen zoals jij dat wilt. In een CMS kies je meestal een thema. Dit thema is de vormgeving van je website

Wat is in het volgende adres een domeinnaam. http://wehkamp.nl

1. .nl
2. wehkamp.nl
3. http://
4. wehkamp

Wat is in het volgende adres de "extensie" http://relatie.planet.nl

1. http://
2. .nl
3. relatie.planet.
4. relatie.planet.nl

Als er gebruik wordt gemaakt van een subdomein dan ziet dat er zo uit

1. http://subdomein.domeinnaam.nl
2. http://domeinnaam.nl/subdomein
3. http://domeinnaam.subdomein.nl
4. http://subdomein.nl/domeinnaam

Het menu van
deze site staat?

1. verticaal
2. horizontaal

Moet je per se kunnen programmeren
om je eigen website te maken?

1. Nee
2. Ja
3. Ik weet het niet
4. Ligt aan je computer

In dit keuze onderwerp ga jij leren zelf een website te maken in Wix!

Denk hier bij aan de belangrijkste vraag:

Wat wil je bezoeker?

Bekijk de website van het RML. Wat zou je aan deze website veranderen?

Jouw website

Je mag zelf een onderwerp verzinnen van de website die je gaat bouwen. Denk na wat je wil maken. Wil je jezelf presenteren, een website maken over jouw hobby of interesse, een nieuwssite, iets verkopen of iets anders?

Leg hier uit wat voor website je gaat bouwen. Wat is het doel, de doelgroep en de inhoud?

Bedenk een domeinnaam die hierbij zou passen en schrijf die hier op. Waarom is een goede domeinnaam belangrijk?

Domeinnaam checken op beschikbaarheid

https://www.mijndomein.nl/url-check

Zoek de domeinnaam op die jij graag zou willen. Is deze nog beschikbaar? En hoeveel kost dat per jaar?

Wix

We gaan een website maken met Wix. In de rest van deze LessonUp gaan we dat stap voor stap doen. 

Op de volgende 6 dia's staan er eerst nog wat instructiefilmpjes. Je kan deze van tevoren bekijken, of ze nu eerst overslaan en later als een bron gebruiken als het je niet lukt met de instructies in deze LessonUp.

Instructie materiaal

In deze video wordt in vogelvlucht verschillende functionaliteiten van getoond. 

Instructie materiaal

In deze WIX turorial behandelen ze hoe om te gaan met tekst.

Instructie materiaal

In deze WIX turorial behandelen ze hoe om te gaan met afbeeldingen.

Instructie materiaal

In deze WIX turorial behandelen ze hoe om te gaan met het menu (dl 1).

Instructie materiaal

In deze WIX turorial behandelen ze hoe om te gaan met het menu (dl 2).

Instructie materiaal

In deze WIX turorial behandelen ze het plaatsen en instellen van een Social bar

Aan de slag!

• Ga naar nl.wix.com
• Klik op 'Aan de slag'
• Registreer je met je schoolmail 
• Schrijf je wachtwoord ergens op!
• Klik op 'Beginnen'
• Ga naar de volgende dia!

Type website

Je hebt eerder bedacht wat het doel en de inhoud van je website wordt. Wix kan je verschillende thema's geven (maakt gebruik van CMS) afhankelijk van welke soort website. Kies een thema uit, of zoek op jouw eigen thema.

Webshop - je wil iets verkopen

Portfolio - je presenteert jezelf of iets wat je hebt gemaakt

Blog - je schrijft verhalen

Evenement - je gaat iets organiseren

Website ontwerpen

• Voer de (domein)naam in die je bedacht hebt voor je website 
• Je komt nu op het dashboard terecht
• Klik op 'website ontwerpen'
• Klik op 'Volgende' (je hoeft niks in te vullen)
• Kies een thema dat bij jouw website past
• Kies het ontwerp dat jij het mooist vindt
• Geen pagina's toevoegen aan je website (klik op 'Volgende')
• Klik op 'Je website ontwerpen' 

Hier schakel je tussen de verschillende pagina's van je website

Hier schakel je tussen de desktop (laptop/pc) en mobiele versie van je website. Wij werken met de desktop versie.

Op dit adres (URL) kun je de website vinden

Als je hier klikt gaat de website 'live'. Alles wat je tot nu toe hebt is via de URL zichtbaar

Wix slaat automatisch je voortgang op, als je dit aanklikt gebeurt dat niet meer

Ongedaan maken, in- en uitzoomen

Door hier te klikken zie je hoe jouw website er voor een bezoeker uitziet

Klik op de hotspots (+) om de verschillende functies van het lint te leren kennen

Koptekst

In deze balk staat de naam van je website en het menu (horizontaal). Klik op 'Snel bewerken' om de koptekst aan te passen. Als je ergens dubbelklikt kun je dingen als de kleur en het lettertype aanpassen. 

Wijzig de kleuren en het lettertype zodat het is zoals jij het graag wil!

Onderdeel

Onder je koptekst staan onderdelen. Op je 'Homepage' is dit meestal algemene informatie over je website. Wix maakt standaard een aantal onderdelen aan, je kan deze wijzigen, verwijderen of nieuwe toevoegen.

Op de volgende dia kun je zien wat de opties zijn.

Klik op hotspots (+)

Klik hier om het onderdeel op dezelfde manier te bewerken als de koptekst

Klik hier als je boven dit onderdeel nog een nieuw onderdeel wil toevoegen

Hier kan je de naam van het onderdeel aanpassen

Onderdeel bewerken, indeling veranderen, onderdeel verwijderen, enz.

Afbeelding wijzigen

• Zoek via Google de afbeelding die je wil gebruiken, klik met je rechter muisknop en sla de afbeelding op op een locatie die je terug kan vinden (OneDrive)
  
• De afbeelding kan je wijzigen door erop dubbel te klikken of op 'Snel bewerken' te klikken en dan de achtergrond aan te passen.
• Klik op 'Afbeelding', '+ Media uploaden' en dan 'Upload van je computer' en selecteer vervolgens de afbeelding die jij hebt gekozen

Onderdelen

Je gaat nu de onderdelen van je homepage aanpassen aan jouw website. Wijzig weer de kleuren en lettertypen naar jouw voorkeur, verwijder/verander onderdelen en voeg eigen afbeeldingen in. 

Er zijn een aantal eisen:

• Je schrijft een algemeen stukje over je website
• Je voegt een eigen (dus niet van Wix) afbeelding in
• Je behoudt het onderste onderdeel en zet daar je naam, leerlingnummer en klas in

Onderdelen

Als je klaar bent met schrijven en het invoegen van afbeeldingen, zie je soms dat een onderdeel meer of minder ruimte heeft dan nodig. Selecteer 1 van de onderdelen en gebruik de pijltjes op de balk om het onderdeel groter of kleiner te maken.

Voettekst

In de voettekst staat meestal nog een keer de titel van de website en de contactinformatie van de maker. 

Pas de tekst aan zodat jouw naam, leerlingnummer en klas daar staat en pas ook weer de kleur en het lettertype aan.

Pagina's

Een website bestaat over het algemeen uit meerdere pagina's en soms subpagina's. In de volgende stap ga je pagina's toevoegen aan je website. In de meeste gevallen heeft Wix er zelf al tenminste 1 gemaakt, maar je kan dit ook zelf doen.

Klik linksbovenaan op 'Pagina: Home' en ga 
naar de tweede pagina die Wix heeft gemaakt, 
of maak deze zelf via 'Pagina's beheren'.

Indeling

Verander via 'Snel bewerken' en dan 'Indeling' de indeling van je pagina zodat deze het beste past bij wat je hier wil presenteren. 

Inhoud

Schrijf nu de inhoud van je pagina. Op je homepage staat algemene informatie, op deze pagina ga je dieper in op het onderwerp van je website. 

- Voeg een eigen afbeelding in

- Verwijder onderdelen of pas ze aan

- Wijzig de kleuren en lettertypen

Subpagina

Een subpagina wordt meestal bereikt vanuit een normale pagina en gaat dieper in op een van de onderwerpen op die pagina. 

Maak via 'Pagina's beheren' weer een nieuwe pagina aan en maak dit via de drie puntjes rechts een subpagina. Je ziet dat de pagina nu een stukje naar rechts schuift.

Link

Selecteer op je gewone pagina het woord/tekstvak of de afbeelding die verwijst naar je subpagina en klik op het 'Link' icoontje.

Link

Koppel de link vervolgens naar de subpagina die je hebt gemaakt. 

Linkerbalk (klik op hotspots)

Elementen invoegen: knop (met link eronder), strook (met kleur/plaatje), galerij (met foto's), video (YouTube), social media balk (met links eronder).

Onderdeel toevoegen op je pagina 

Overzicht website

Thema en kleuren aanpassen

Media invoegen

Subpagina

Geef nu je subpagina verder vorm:

• Schrijf de informatie die je op je subpagina wil presenteren
• Voeg tenminste één eigen afbeelding in
• Gebruik de linkerbalk om tenminste twee elementen (knop/ strook/ galerij/ video/ social media) in te voegen, zorg dat je deze elementen ook aanpast aan jouw website.

Afronding

• Klik rechts bovenin op 'Voorbeeld' en controleer of je website goed werkt: staat alles op de goede plek, werken alle knoppen, enzovoorts.
• Klik vervolgens op 'Publiceren', je website is nu live!
• Klik binnen 'Publiceren' op 'Website bekijken' en kopieer de URL van je website, die lever je in deze LessonUp in.
• Je kan voor dit onderwerp 3 keuzepunten verdienen!

Checklist

Voordat je je website inlevert, controleer je nog even of alles compleet is:

• Homepage: koptekst met titel website en menu, algemeen stukje over website, eigen afbeelding, voettekst met naam, klas en leerlingnummer
• Pagina: eigen indeling, eigen geschreven stukje, eigen afbeelding, onderdelen en kleur/lettertype gewijzigd/aangepast
• Subpagina: link vanaf je pagina naar subpagina, eigen geschreven stukje, eigen afbeelding ingevoegd, twee elementen ingevoegd en aangepast

Alles in orde? Dan lever je de URL op de volgende dia in!

Kopieer hier de URL van de website die je hebt gemaakt, zodat je docent deze kan beoordelen.