JouwWeb op school

Websites leren maken met de website-builder

Nooit een website gemaakt?

Geen probleem! Het is gemakkelijk te leren! Op deze pagina wordt JouwWeb stap voor stap uitgelegd. Bekijk om te beginnen de onderstaande introductie video.

Wat ga je leren?

Met de instructies op deze pagina kun je websites leren maken met JouwWeb. Onder de instructies staan opdrachten en tips om je te helpen bij het maken van een top website.

1. Beginnen met JouwWeb

1.1 Naam bedenken?

Bedenk een naam voor de website die je gaat maken. (Lees Tip 1 voor hulp bij het bedenken van een goede naam).

Naam bedenken

Een goede (merk)naam/titel voldoet vaak aan een aantal van de onderstaande punten.

  1. Eenvoudig (b.v. Nike, Sprite)
  2. Duidelijk (b.v. Facebook, Burger king)
  3. Uniek (b.v. Duo penotti, tomtom)
  4. Web-vriendelijk (Controleer hier of de naam al in gebruik is)

Als je een persoonlijke website maakt kan je eigen naam onderdeel uitmaken van de titel.

1.2 Account aanmaken

Klik hier om www.JouwWeb.nl/?ref=school te openen. Typ in de blauwe vakken de titel, email en wachtwoord (Je kan een bestaand of nieuw emailadres en wachtwoord gebruiken). Klik vervolgens op "Aan de slag" om te registreren.

1.3 Design kiezen

Plaats de muis boven het gewenste design en klik vervolgens op "Start nu" om het design te kiezen.

1.4 Gratis of betaald

Kies het "Gratis" pakket als de website voor een school opdracht bedoeld is. Kies "Pro" of "Business" als je gebruik wil maken van de betaalopties.

2. Inhoud aanpassen

2.1 Website opbouw

Iedere JouwWeb pagina bestaat uit drie delen:

  • Banner: De bovenkant van je pagina, vaak met een afbeelding.
  • Body: Het midden van de pagina (sleep hier straks de elementen naar toe).
  • Footer: De onderkant van de pagina.

    • 2.2 De banner

    Klik op de banner afbeelding en vervolgens op "bewerken" om de banner aan te passen. Kies in het linker menu voor "Titel" om een titel in de banner te plaatsen.

    Kies een andere achtergrond afbeelding door op "+ Nieuwe afbeelding" te klikken.

    Pas vervolgens het formaat van de banner aan. Klik (ingedrukt houden) en versleep het ronde icoontje met de twee pijlen om de hoogte aan te passen.

    Klik na het aanpassen van de banner op "Opslaan".

    Nieuwe afbeelding zoeken en toevoegen

    Open google door hier te klikken. Klik vervolgens op "Images/afbeeldingen" en zoek naar afbeeldingen voor de banner.

    Klik boven de gevonden afbeeldingen op "Tools" en vervolgens op "Usage rights" of "Gebruiksrechten". Kies voor de optie "Labeled for reuse" of "Gelabeld voor hergebruik". Dit betekent dat je toestemming hebt om de gevonden afbeeldingen te hergebruiken.

    Kies een afbeelding uit en klik met de "rechtermuisknop" op de afbeelding en daarna op "opslaan als" om de afbeelding op te slaan.

    Open nu de JouwWeb pagina en klik op "+ Extra afbeelding" en vervolgens op "upload" en "Upload een afbeelding" om de zojuist opgeslagen afbeelding toe te voegen. Rond de opdracht af door op "Opslaan" te klikken.

    2.3 De editor

    Aan de linkerkant van de pagina staat een navigatiebalk met elementen. Dit is de "Editor". Sleep de "kop", "tekst" en "afbeelding" elementen naar de body (het midden) van de pagina.

    Tekst schrijven

    Gebruik de titel en tekst elementen om een korte inleiding over de website te schrijven.

    1. Schrijf in de tekst wie je bent, wat het doel van de (website)pagina is en wat er (later) allemaal op de website te vinden is.
    2. Geef de tekst een titel en subtitel(s) door het formaat van de titels aan te passen. (Hiermee benadruk je het belang van de titel. Groot is vaak belangrijker).
    3. Verwerk zoekwoorden (belangrijke woorden) in de tekst. Dit zijn woorden waarmee de pagina via een zoekmachnine (b.v. google) gevonden kan worden.
    4. Controleer hier welke zoekwoorden het meeste voorkomen in je tekst. (Kopieer en plak je tekst in het tekstveld, klik op "plain text" en daarna op "submit").
    5. Pas waar nodig de tekst aan om belangrijke woorden vaker terug te laten komen (Het is belangrijk niet te overdrijven zoekmachines hebben dit door).

    2.4 Pagina's aanmaken

    Klik in het menu bovenaan het scherm op "pagina's". Druk op "+ Nieuwe pagina" om een pagina aan de website toe te voegen.

    Geef de pagina een naam en druk daarna op "Opslaan". De pagina is nu aangemaakt.

    Sleep de pagina een stukje naar rechts om er een sub-pagina van te maken. Open en bewerk de pagina door op de naam te klikken.

    Website pagina's

    Teken een flowchart van je website. Een flowchart is een schematische weergave van het verloop op je website.

    Voeg de pagina's uit je flowchart vervolgens toe aan de website.

    3. Structuur

    3.1 Kolommen

    Voeg het element "kolommen" toe aan de pagina. Sleep "titel", "tekst" en "afbeelding" elementen in de verschillende kolommen.

    3.2 Witruimte

    Plaats nog een "kolommen" element met daarin nog een "titel", "tekst" en "afbeelding".

    Sleep vervolgens het "witruimte" element tussen de twee "kolommen" elementen om ze meer (wit)ruimte te geven.

    3.3 Lijnen

    Plaats het "lijn" element tussen de twee "kolommen" elementen op de pagina om aan te geven dat het losse onderdelen zijn.

    4. Design

    4.1 Design editor

    Klik in het menu bovenaan het scherm op "Design". Er verschijnt links een menu waarmee kleuren en lettertypes aangepast kunnen worden.

    4.2 Kleuren

    Klik in het menu op de gekleurde rondjes en kies andere kleuren voor de website onderdelen. Klik vervolgens op "Opslaan" om de kleuren te behouden.

    Kleuren combineren

    Een veel gebruikte regel bij het combineren van kleuren op websites is de 60/30/10 regel.

    • 60%: Dit is meestal de achtergrondkleur en komt terug op ongeveer zestig procent van de webste. Vaak is dit wit of zwart.
    • 30%: Dit is meestal de hoofdkleur. Deze kleur is meestal te zien op ongeveer dertig procent van de pagina.
    • 10%: De laatste tien procent is bedoeld voor de accentkleur. Deze kleur trekt vaak de aandacht naar belangrijke onderdelen, bijvoorbeeld een button.

    4.3 Tekstopmaak

    Klik na het aanpassen van de kleuren op "Tekstopmaak" Kies een ander lettertype voor "Algemene tekst" uit het dropdown menu. Doe hetzelfde voor "Koptekst" en klik daarna weer op "Opslaan".

    Lettertype combinaties

    Het kan lastig zijn om bij elkaar passende lettertypes te vinden. Klik hier om mogelijke lettertype combinaties te bekijken.

    4.4 Contrast

    Klik op "Editor". "Bewerk" nogmaals de banner. Klik in het banner menu op de witte cirkel naast "Donkere achtergrond". Bekijk of de titel beter leesbaar is. zo ja? Laat dan de donkere achtergrond staan. Klik vervolgens op "Opslaan"

    Contrast

    Contrast is de tegenstelling tussen tussen licht en donker. Een goed contrast maakt tekst beter leesbaar. Controleer of alle titels en teksten goed te lezen zijn.

    5. Testen en publiceren

    5.1 Testen

    Open het editor menu en klik op het telefoon icoontje onderaan het menu. Bekijk de verschillende pagina's van je website op mobiel formaat (Controleer eventueel ook de computer versie van je website door in hetzelfde menu op het meest linkse icoontje te klikken).

    Testen

    Controleer de volgende zaken in de mobiele weergave:

    • Staat alles nog in logische volgorde?
    • Is de tekst overal nog goed te lezen?
    • Zijn de afbeeldingen en iconen nog duidelijk zichtbaar?
    • Zijn de knoppen groot genoeg om ze met een vinger in te drukken?

    5.2 Publiceren

    Om de pagina te delen met de rest van de wereld moet hij gepubliceerd worden. Klik daarvoor op "Publiceer" en type de naam van de website in het tekstveld.

    Open nu je website door op de link te klikken. Deel de link met je docent zodat deze de website kan bekijken.

    Deel de website met je vrienden op Facebook of Twitter om je eerste bezoekers te verwelkomen!

    6. Media

    6.1 Delen

    Nu de website gepubliceerd is en gedeeld op Facebook of twitter kun je bezoekers krijgen op de website. Plaats nu via de "Editor" het "Social - Delen" element. Hiermee kunnen je bezoekers de website ook delen.

    Klik op het zojuist geplaatste "Social - Delen" element en vervolgens op "Knoppen" in het grijze menu dat verschijnt. Verwijder de sociale media die niet gebruikt worden.

    6.2 Contact

    Sleep het "Formulier" element naar de pagina. Hiermee kunnen bezoekers contact opnemen en vragen stellen over je website.

    Helemaal klaar?

    Probeer de "video", "kaart", "reacties" en "tabel" elementen eens uit, misschien kun je de website nog beter maken! Wil je graag van de betaalfuncties gebruik maken upgrade dan naar pro of neem gerust contact met ons op voor je vraag.