ontwerper

Terug naar Inleiding
Terug naar Extra

Word zelf een website ontwerper!

Laatst aangepast op 21/08/2006

Je droomt ervan, zelf een website maken! Maar... je weet echt niet hoe het moet!
Wist je dat een website maken niet veel moeilijker is dan een briefje schrijven met een tekstverwerker?
Verbaasd? En toch is het waar!

Het begin:
Eerst en vooral moet je een onderwerp hebben. Dat kan werkelijk alles zijn: je hobby, je werk, je familie, je hond of kat, en ga zo maar verder. Bedenk eens wat je er allemaal kan over vermelden.
Een goede raad is eerst eens alles op het oude vertrouwde papier te zetten. Wat tekst, en vooral, de structuur van je site.
Die structuur is van zeer groot belang want, voor je het weet zie je door het bos de bomen niet meer staan.
Na een tijdje, en veel werk, begin je die site van jou al vanbuiten te kennen, en zal je de structuur uit het hoofd kennen.
Wat je ook kan bedenken is welke "Links" of "Koppelingen" je wil en kan maken.
Maak je een site over je hobby, en je hobby is voetbal, dan kan je bijvoorbeeld een link leggen naar de Belgische Voetbal Bond. Om je maar een voorbeeld te geven.
Bedenk voor de naam van je pagina's een duidelijke naam, zodat je later ook nog weet wat er in die pagina staat.
Je noemt je pagina bijvoorbeeld "spelregels" en niet "pagina 5". De naam "spelregels" laat direct een belletje rinkelen wat er in die pagina te lezen valt.
Eens je zover bent is het natuurlijk de bedoeling dat je alles gaat uitwerken.
Dan begint het, dan is het menens.

En verder:
Dan moet je eraan beginnen.
Je begint misschien met de eerste pagina.
Deze geef je steeds de naam "index" !!! Ongeacht hoe die eruit ziet of wat er in te lezen valt. Doe je dit niet, dan zal je website uiteindelijk nooit bezocht kunnen worden. Dit komt omdat een browser na het intikken van het internet adres automatisch zoekt naar een pagina met de naam "index", vindt hij die niet, dan zal er geen pagina kunnen geopend worden. En dat zou toch spijtig zijn hé!
En dan, nu heb je een programma nodig om dit alles te kunnen maken.
Er zijn er verschillende op de markt, de ene al wat duurder dan de andere. Van Front page, Dreamwaver en Swisshmax heb je vast al gehoord.
Zijn grafische toestanden niet aan jou besteed en wil je een degelijk alternatief (vergelijkbaar met Front page) voor de creatie van je site, dan raden we je NVU (lees" : 'n view ") aan.
Het voordeel van dit programma is dat het ook in het Nederlands beschikbaar is en dat kan wel eens handig zijn als je even in de help-pagina's van het programma moet duiken. Ook een handigheidje is de ingebouwde FTP-functie. Zo heb je geen apart programma nodig om uiteindelijk je site op het internet te plaatsen.
Bouw rustig je website uit en sla die (best in een aparte map) op, op je harde schijf.
Dit is altijd makkelijk om nadien een aanpassing te doen.

Waar vind ik NVU?
Je vindt NVU in een Nederlandse versie hier.
Volg de gebruikelijke installatie en je kan het programma openen en aan de slag gaan.

Hoe kom ik aan web ruimte?
Bij de Belgische internet aanbieders (Telenet, Belgacom) heb je waarschijnlijk al gratis web ruimte. Je moet die alleen laten activeren. Voor de manier hoe verwijzen we je verder naar de site van je internet aanbieder.
Je weet dan ook meteen wat je internet adres zal worden.

De voorbereiding:
Wanneer je NVU de eerste keer start zal je gegevens moeten invullen.zoals je internet adres en FTP server. Deze gegevens heb je normaal van je internet aanbieder gekregen bij de activatie van je internetverbinding. Heb je die niet of weet je die niet meer, dan is een eenvoudig mailtje naar de Helpdesk een begin.

Je eerste pagina:
Spannend! Niet? Tot voor kort kon je alleen maar surfen en nu ben je op weg naar je eerste pagina op het internet waar miljoenen mensen naar kunnen kijken en genieten van jouw eigen creatie.
Goed, onze eerste pagina staat voor ons klaar. Maar er staat nog niets op, en dat gaan we nu veranderen:
Helemaal bovenaan zie je de menu's die je gewend bent van een tekstverwerker, en ze hebben zo ongeveer de identieke werking.
Daaronder zie je de werkbalk met allerlei knoppen en functies.
Deze zijn de belangrijkste werktuigen voor je site, tenzij je pure en onvervalste HTML wil toevoegen, maar daar houden we ons nog niet mee bezig. Hoewel, we komen er straks wel even op terug.

De opmaak:
Onze pagina staat voor ons, maagdelijk wit nog.
Wil je daar verandering in brengen dan klik je
>Bovenaan op "Opmaak"
>Dan op "Paginakleuren en achtergrond"
>Kleur het bolletje "Aangepaste kleuren gebruiken"
>Klik op het vierkantje achter "Achtergrond"
>Kies een kleur die als achtergrond wil instellen.
>Bevestig met "OK"
De kleur is ingesteld en de achtergrond kleurt nu in de kleur die jij wil.

Je kan nu met de tekst beginnen. Je kan je bezoeker direct de links naar de verschillende pagina's aanbieden of hem eerst verwelkomen.en via één klik op bijvoorbeeld het woordje "Hier" naar het keuzemenu leiden.
We gaan ervan uit dat je voor het tweede kiest.
Je typt bijvoorbeeld de tekst: "Welkom op mijn eerste site" en "Klik hier om verder te gaan."
Je moet nu de tekst een beetje bewerken, wat groter maken, een ander kleurtje geven,...
Dit kan je allemaal via "Opmaak" die we eerder al gebruikten voor de paginakleur.
Selecteer de tekst die je wil bewerken en bewerk die dan via het menu ""Opmaak".
(tip: je kan ook via de werkbalk werken met de twee A's, de B, de I en de U, net als in een tekstverwerker.)
Maak zo gans de pagina zoals je wil dat die eruit komt te zien.

Een "Link" of "Koppeling" maken:
Tof is het dat iemand je eerste pagina kan zien, maar het is natuurlijk de bedoeling dat men ook de rest van je website kan bekijken. Dat gaat niet zomaar, daarvoor heb je een "Link" of "Koppeling" nodig.
Hoe maak je zo'n koppeling?
We hebben in de eerste pagina het volgende geschreven: "Klik hier om verder te gaan."
In ons voorbeeld is het dus de bedoeling dat als men op het woordje "hier" klikt, dat men dan naar de volgende pagina gaat.
We gaan er van uit dat je tweede pagina "begin" noemt.
Werkwijze:
>Selecteer het woordje "hier"
>Klik dan op de gouden knop (in de nieuwste versie is deze knop in de vorm van een paperclip) bovenaan met "Koppeling"
>Voer in het invul vak je koppelinglokatie in. (In ons voorbeeld is dat "begin.html")
Je merkt dat je hier de naam invult met daarachter een punt en de extensie html.
>Bevestig met op "OK" te klikken.

Een koppeling naar een andere website plaatste:
Hiervoor ga je op de zelfde manier te werk als een gewone koppeling binnen jouw eigen site.
Wat je wel anders moet doen is de tekst die je invult in het kadertje.
Wil je bijvoorbeeld een koppeling maken naar deze site dan noteer je hier: "http://www.deroscha.be"
Let wel dat je de http:// niet vergeet, anders werkt het niet.
Nu kan het zijn dat de bezoeker naar deze website die je hebt opgegeven doorklikt en op die manier de weg naar jouw site kwijt is. Dat wil je zeker niet.
Je kan ervoor zorgen dat de link naar een andere website in een nieuw Browservenster opent.
Hiervoor klik je in het venster van de koppeling de optie 'Meer Eigenschappen' aan.
Nu vink je het vakje in het gedeelte 'Doel' aan en kiest vervolgens voor 'In Een Nieuw Venster' (staat normaal standaard voor je klaar.)
Bevestig natuurlijk ook je opdracht met 'OK'.

Een koppeling naar mijn mail adres:
Natuurlijk wil je ook dat mensen je kunnen schrijven. Dat kan je eenvouwdig door een koppeling te plaatsen zoals je reeds gezien hebt hier boven.
Selecteer de tekst en klik op de koppeling-knop.
Vul nu in het vak het volgende in: "mailto:jouwmailadres". Jouwmailadres vervang je uiteraard door jouw e-mail adres.

Bravo, je eerste pagina is af.

Nu moet je de pagina nog opslaan op je harde schijf.
>Klik op "Bestand" (links bovenaan)
>Klik op "Opslaan als"
>Geef een bestandsnaam op, voor je eerste pagina is dat steeds de naam "index".(zonder de extensie .html)
>Kies een map of lokatie waar je de pagina wil opslaan.
>Klik op "Opslaan"
Zo, je eerste pagina staat veilig op je harde schijf bewaard.

Je eerste pagina on-line zetten:
Je pagina staat nu wel op de harde schijf van je pc, maar nog niet op het internet, en dat is nu juist het opzet van heel de zaak.
Je hebt je eerste pagina al de naam "index" gegeven en dat maakt het nu voor ons iets makkelijker.
Je ziet boven een gouden knop staan met "Publiceren".
Klik hierop en er verschijnt een kadertje.
Je zal zien dat de gegevens allemaal al ingevuld zijn voor jou.
Klik gewoon onderaan het kadertje op "Publiceren".
Er verschijnt nog even een klein kadertje en het wonder is geschied.
Je pagina staat op het internet.

Doe nu verder voor al die andere pagina's, het princiepen blijft hetzelfde.

Hoe kom ik te weten hoeveel bezoekers ik heb?
Dit kan je doen door een teller op je site te plaatsen.
Hiervoor duiken we in de HTML Bron. Dit is het gedeelte waar je kan zien hoe je pagina eruit ziet in de universele schrijftaal voor webpagina's. Geen paniek, een teller plaatsen is niet zo moeilijk.
Telenet biedt je een gratis teller aan. Je kan die invoegen in de HTML Bron.
Hoe doe je dat?
>Klik onder het venster waar je tekst staat op het grijze vakje "<HTML>Bron."
>Zet de cursor op het einde van de tekst die je ziet staan. Helemaal op het einde van de pagina dus.
>Tip nu de volgende tekst: "<IMG SRC="http://users.telenet.be/cgi-bin/yaac/yaac?User-id">"
Het user-id (rode tekst) vervang je natuurlijk door je gebruikersnaam die je van telenet hebt gekregen. Die begint meestal met een letter t of een letter a.
>Keer terug naar de normale weergave van je pagina door op het balkje "Normaal" te klikken (links van de plaats waar je ook <HTML>Bron hebt gevonden.)
Je zal zien dat de teller nu op je pagina staat.
Plaats de teller best in de <HTML>Bron van je index, omdat daar alle bezoekers moeten passeren om je site te kunnen zien.
Meer info over de bezoekersteller van telenet vind je op http://www.telenet.be/nl/klantendienst/internet/internetten/eigenwebsite/teller/indexteller.php
Een andere gratis teller vind je op de site van Belstat.
Deze teller biedt je meer mogelijkheden. Hiermee kan je van dag tot dag zien hoeveel bezoekers je gehad hebt en waar die zoal vandaan komen. Plak de html-code die je krijgt in de html-bron van je webpagina('s) zoals je reeds gezien hebt hierboven.
Tip: Om te verhinderen dat je de ganse tekst van de html moet overtypen, met het risico op fouten, kan je die code ook copiëren en plakken. Dit doe je door de code te selecteren en dan de toetsencombinatie Ctrl+C te gebruiken; Ga dan naar de HTML bron van je pagina en plaats de cursor ergens best onderaan. Gebruik dan de toetsencombinatie Ctrl+V, en de code is geplakt.
Misschien heeft Belgacom ook een gratis bezoekersteller, maar daar kan je best eens een kijkje nemen op hen site.
Het staat je natuurlijk vrij om een andere teller op je site te plaatsen, maar deze leek ons het eenvoudigst.
Waar je deze tellers vindt kan je lezen op onze linkpagina PC Internet

Nog enkele tips:
>Gebruik steeds een duidelijk lettertype
>Zorg ervoor dat je letters groot genoeg zijn.
>Zorg voor voldoende contrast tussen de letters en hun achtergrond.
>Zorg dat je niet te veel tekst onderlijnt. Bezoekers van je website zouden kunnen denken dat het een koppeling is.
>Houd je aan de regels die opgelegd worden. (Geen Rascisme, pedofilie, en dergelijke.) Dat zal je wel duidelijk zijn zeker?

Veel succes!!!

Veel gestelde vragen: