Als je snel een eigen website maken wilt,
dan ben je al een heel eind op weg als je één van mijn
kant-en-klare modellen als basis neemt.
Op deze instructiepagina leg ik je uit hoe je de website-ontwerpen gebruikt,
en hoe je ze aanpast aan je eigen wensen.
Maar voordat je ook maar iets kunt doen, moet je eerst het zip-bestand dat je hebt gedownload uitpakken op je eigen computer.
Dat doe je bijvoorbeeld met het programma WinZip.
Heb je dit programma niet op je computer staan,
dan kun je het gratis downloaden (klik daarvoor op de link in de voorgaande zin).
Een ander unzip-programma dat je kunt gebruiken is 7-Zip.
Is WinZip (of 7-Zip) eenmaal op je computer geïnstalleerd, dan kun je gezipte bestanden,
eenvoudig 'unzippen' door erop te dubbelklikken en de aanwijzingen op je beeldscherm op te volgen.
De bestanden die bij elk model horen pak je op die manier uit in een map op je computer.
Nu kun je het basismodel dat je hebt gedownload eens goed gaan bekijken. In elke modellenmap vind je grofweg dezelfde bestanden: zes html-bestanden, waaronder een bestand dat 'index.html' heet, een bestand dat 'basis.css' heet. (Alleen model 7 bevat wat meer html-bestanden omdat dit een model is met een ingebouwd drop-downmenu. Ook bevat dit model twee css-bestanden in plaats van één: 'basis1.css' en 'basis2.css'.) Ten slotte bevat elk model een paar afbeeldingen.
Het beste is als je nu eerst een aparte map aanmaakt voor je eigen website.
Daarin sla je kopieën op van alle bestanden die je vindt in de map van het model dat je gekozen hebt.
Open de map van het model dat je hebt gekozen
en kopieer alle bestanden die je daarin ziet staan naar je eigen map.
Zo blijven de originele bestanden intact en kun je altijd opnieuw beginnen.
Zoek nu in je eigen map het bestand 'index.html' op (dit is je homepage).
Open het, gewoon door erop te dubbelklikken.
Je internetbrowser wordt opgestart (Internet Explorer of Mozilla Firefox waarschijnlijk)
en je homepage verschijnt.
Natuurlijk wil je nog het een en ander aan deze homepage veranderen voordat je hem op internet zet.
Hierna lees je hoe je dat moet doen.
NB: wat je alleen niet mag veranderen is de copyright-regel helemaal onderaan de webpagina.
Je mag hem ook niet verwijderen. Dat is de enige voorwaarde die ik stel aan het gebruik van deze gratis modellen.
Wil je de link toch graag verwijderen, dan kan dat alleen als je een donatie aan Mijn-eigen-website.nl doet.
Als je veranderingen wilt aanbrengen in de homepage,
dan moet je het homepage-bestand (dat is het bestand met de naam 'index.html') openen in Kladblok
(of een andere eenvoudige teksteditor als HTML-Kit of Notepad++); maar gebruik géén Word om html-bestanden aan te passen).
Klik daarvoor met je rechtermuisknop op dit bestand en kies voor: Openen met –
en klik dan op Kladblok. (NB: Andersom kan ook: dus eerst Kladblok openen, dan klikken op 'Bestand - Openen', en
daarna het bewuste bestand opzoeken op je computer, aanklikken en openen.)
Verander om te beginnen de titel.
In een van de eerste regels van het document staat de volgende tekst:
<title>Type hier de titel van je pagina</title>.
Vervang de woorden tussen de <title>-codes door iets anders ('Pauls homepage' bijvoorbeeld) en sla op.
Als je nu het bestand opnieuw opent in je internetbrowser,
zie je helemaal bovenaan in de blauwe balk deze nieuwe titel staan.
Wijzig nu iets in de tekst zelf.
Dus open 'index.html' nog een keer in Kladblok
en vervang enkele woorden door je eigen naam.
Sla weer op en als je de homepage hierna opnieuw oproept in je browser,
zie je dat ook deze verandering is doorgevoerd.
Maar niet alle veranderingen in de homepage kun je op deze manier voor elkaar krijgen.
Voor sommige veranderingen (zoals veranderingen in de gebruikte kleuren) zul je het bestand 'basis.css' moeten openen
(of – als je model 07 hebt gekozen – een van de bestanden 'basis1.css' of 'basis2.css').
[Nog even over model 07: dit model kent twee versies: een versie met een horizontale menubalk en twee kolommen daaronder,
en een versie met een verticale menubalk en twee kolommen ernaast (dus eigenlijk een 3-koloms-versie).
Als je de versie met de horizontale menubalk het mooiste
vindt, dan open je het bestand 'basis1.css' en ga je daarin de veranderingen aanbrengen die je wenst.
Vind je de versie met de verticale menubalk het mooiste, dan moet je eerst in alle html-bestanden
van dit model de regel <link rel="stylesheet" href="basis1.css" type="text/css" media="screen" />
(de elfde regel van boven) vervangen door: <link rel="stylesheet" href="basis2.css" type="text/css" media="screen" />]
Het css-bestand van elk model zie je in dezelfde map staan als het bestand 'index.html'.
Dit bestand kun je openen door erop te dubbelklikken – het wordt dan geopend in Kladblok.
Vervang bijvoorbeeld 'color: white;' door 'color: red;' en sla het bestand weer op.
Open nu de homepage weer in je browser (door erop te dubbelklikken) en kijk wat er veranderd is.
Er bestaan ook speciale 'HTML-editors' om html- en css-bestanden mee te bewerken. Je kunt er wat sneller en gemakkelijker html-codes mee invoeren en ze werken vaak met kleuren om het geheel wat overzichtelijker te maken (in een bestand dat je geopend hebt met Kladblok is alle tekst gewoon zwart). Ik werk zelf graag met HTML Kit, een gratis html-editor.
| Kleurnamen in html aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, grey, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen. |
Ben je tevreden met de layout van het model dat je gekozen hebt, maar wil je graag andere basiskleuren? Dat is heel eenvoudig, want alle kleuren in de modellen zijn aangegeven met behulp van kleurnamen. Als je die kleurnamen vervangt door andere, kun je in één keer een website maken in een heel andere kleurencombinatie. De kleurnamen die je kunt gebruiken, vind je in het kader hiernaast.
De kleur die ik in model I gebruikt heb voor de balken links en boven en voor de kleur van de koppen, is 'firebrick'. Wil je een andere kleur, dan moet je overal waar je 'firebrick' ziet staan in beide bestanden (dus zowel in 'index.html' als in 'basis.css'), dit woord vervangen door de naam van een andere kleur ('deepskyblue' bijvoorbeeld).
Model 02 is opgebouwd uit een aantal verticale gekleurde strepen bovenaan (respectievelijk 'fuchsia', 'aqua', 'blue', 'lime' en 'red'), en een 'fuchsia'-kleurige kolom links. De tekstkleur van de knoppen in de navigatiebalk is 'blue' en de (tekst)koppen zijn in 'blue' en 'red'. Deze kleuren kun je veranderen door de bestanden 'index.html' en 'basis.html' van model 02 te openen en de namen van deze kleuren te veranderen door de namen van de kleuren van je eigen keuze.
Model 03 is een beetje een ander verhaal.
De kleurenbalk aan de rechter- en linkerkant zijn bij dit model in werkelijkheid afbeeldingen.
In de map van model 03 vind je drie kleurencombinaties: oranje/geel, groen/blauw en paars/rood.
Als je de standaardcombinatie van oranje/geel wilt veranderen, ga je als volgt te werk:
je opent het bestand 'basis.css' van dit model en zoekt de tekst
'geeloranje.jpg' op.
Deze tekst vervang je door de kleurencombinatie van jouw keuze.
Dus als je de groen/blauwe combinatie wilt, dan maak je hiervan: 'groenblauw.jpg' (of,
als je paars/rood mooier vindt: 'paarsrood.jpg').
Nu moet je nog de kleur van de koppen ('darkorange' en 'brown') en die van de tekst in de knoppenbalk ('darkorange')
vervangen door kleuren van je eigen keuze.
Ten slotte wil je waarschijnlijk de lijn onder de woorden 'Jouw eigen website' nog een andere kleur geven.
Hiervoor moet je het bestand 'index.html' openen en de kleurnaam 'gold' vervangen door een kleurnaam van je eigen keuze.
In model 04 heb ik de kleuren 'blue' en 'crimson' gebruikt. Wil je zelf andere kleuren gebruiken, open dan het bestand 'basis.css' van dit model en vervang de namen van deze kleuren door namen van andere kleuren (kies daarvoor weer uit het lijstje hiernaast).
In model 05 heb ik gewerkt met de kleuren 'midnightblue' (achtergrond en paragraafkoppen), 'lightslategrey' (donkergrijze rand en kleur van de horizontale balk), 'lightgrey' (achtgrondkleur van de tekst), en 'maroon' (hoofdstukkopje). Om deze kleuren te veranderen, vervang je ze in het bestand basis.css' door andere kleuren uit het lijstje hiernaast
Model 06 is een model met 3 kolommen. De achtergrond van het model als geheel is 'purple' en de kolommen aan weerszijden van het hoofdvak hebben de achtergrondkleur 'lightgrey'. De donkere streep aan de bovenkant van de drie kolommen heeft de kleur 'lightslategrey'. Voor de grootste kop heb ik verder ook de kleur 'purple' gebruikt en voor de iets kleinere kop 'midnightblue'. De knoppen aan de linkerkant veranderen van kleur als je er met je muis overheen gaat: ze krijgen dan de achtergrondkleur 'lightslategrey' en de tekst verandert van 'midnightblue' in 'purple'.
Model 07 heeft twee versies (een 2-koloms en een 3-kolomsversie, maar de gebruikte kleuren zijn in beide versies hetzelfde. De achtergrond is de kleur 'gainsboro' (een soort lichtgrijs), de menubalk is 'firebrick' en de kleur die verschijnt als je met je muis over de menuknoppen gaat, is 'cornflowerblue'. Ook voor de paragraafkoppen zijn dezelfde kleuren gebruikt.
Je hebt inmiddels al een stuk verder met je eigen homepage:
je hebt een basismodel uitgezocht, de kleuren misschien aangepast,
en nu leg ik je uit hoe je de standaardtekst op de homepage verandert.
Op de homepage staat nonsense-tekst,
die er alleen maar even is neergezet zodat je een idee hebt hoe een pagina gevuld met tekst eruit komt te zien.
Om de tekst te veranderen, moet je eerst het bestand 'index.html' openen in je teksteditor
(Kladblok of Notepad++ bijvoorbeeld).
Dit doe je door met je rechtermuisknop op dit bestand te klikken en te kiezen voor: Openen met,
en vervolgens Kladblok of Notepad++ te selecteren.
Ook kun je een HTML-editor gebruiken als je dat liever doet.
Heb je de 'index.html' eenmaal geopend, selecteer dan een stukje nonsense-tekst en vervang dat door je eigen tekst.
Wil je koppen gebruiken, zet die dan tussen de codes <h1> en <h2>,
net zoals dat is gedaan in de nonsense-tekst.
In de nonsense-tekst staat 'Morbi aliquam mi quis volutpat' tussen de codes <h1> en </h1>.
De iets kleinere kop (Duis consectus) staat tussen de codes <h2> en </h2> Eenvoudig hè?
Om woorden cursief te zetten, gebruik je de code <em>: <em>
deze tekst komt cursief te staan</em>
en wil je vet, dan gebruik je de code <strong>:
<strong>zo zet je woorden vet</strong>.
Om witregels in te voegen gebruik je de code <br />. Elke keer dat je deze code gebruikt,
wordt er een nieuwe regel begonnen.
Dus voor een witregel moet je de code twee keer achter elkaar gebruiken: <br /><br />;
In de modellen 01, 04 en 05 staan vrij grote afbeeldingen links bovenaan in je scherm; in model 06 staat die afbeelding in de kolom aan de rechterkant.
Wil je op die plaats een andere afbeelding hebben staan, open dan het bestand 'basis.css'
en ga op zoek naar de volgende code: background-image: url(lelie.gif); (model 01) of
background-image: url(schelpen.gif); (modellen 04 en 05).
Haal deze code weg of vervang 'lelie.gif' of 'schelpen.gif' door de bestandsnaam van een afbeelding van jouw eigen keuze.
[In model 06 staat deze afbeelding in het bestand 'index.html', zoek naar een stukje code dat begint met
<img alt="schelpen" src="schelpen.gif" height="135".]
Model 07 heeft een grote, langwerpige afbeelding van een bollenveld bovenaan.
Wil je op deze plaats een andere afbeelding neerzetten, dan zoek je in het css-bestand (basis1.css of basis2.css) de volgende code op:
background-image: url(bollenveld.jpg);.
Vervang 'bollenveld.jpg' door de bestandsnaam van een andere afbeelding uit die map ('zee.jpg', 'woestijn.jpg' of 'bliksem.jpg'),
sla het bestand op en je website ziet er ineens heel anders uit!
Een van je eigen afbeeldingen gebruiken kan natuurlijk ook. Deze afbeelding moet dan 896 pixels breed zijn, en 174 pixels hoog,
anders past hij niet.
In elk model heb ik bovendien in de laatste alinea een kleine afbeelding geplaatst.
De code hiervoor staat in het bestand 'index.html'. De code ziet er zo uit:
<img alt="roos" src="roos.gif" height="50" width="50" align="left">.
(Bij sommige modellen staat er 'lelie' of 'schelpen' in plaats van 'roos',
maar verder is de code bij alle modellen dezelfde.)
Je kunt met behulp van deze code heel gemakkelijk je eigen afbeeldingen plaatsen.
(Wil je geen afbeelding op deze plaats hebben, dan haal je deze code gewoon weg natuurlijk.)
Wil je de afbeelding aan de rechterkant hebben staan, dan verander je de waarde 'left' in 'right'.
Wil je dat de afbeelding groter wordt weergegeven, verander dan de waardes bij 'height' en 'width'.
Maar maak hem niet groter dan 135 x 135 pixels, want dat zijn de afmetingen van de originele afbeelding.
Verkleinen kan wel, maar vergroten wordt niet mooi.
Wil je een andere afbeelding plaatsen, zet die dan ook in je website-map (bij de andere bestanden)
en vervang 'roos.gif' door de naam van je eigen afbeelding
(NB: let op de extensie – misschien is jouw bestand wel een jpg- of een png-bestand).
Zorg ervoor dat de naam van jouw afbeelding geen spaties bevat
(spaties in een bestandsnaam willen nog wel eens problemen opleveren).
Pas verder de waardes voor 'height' en 'width' aan, want natuurlijk is niet elke afbeelding even groot.
Hoe groot een afbeelding precies is, kun je heel gemakkelijk zien in Verkenner:
je gaat gewoon met je muis even boven de naam van de afbeelding staan,
en er verschijnt vanzelf een klein schermpje met de afmetingen ervan.
Als je de afbeelding wilt verplaatsen naar een andere plaats op de pagina, verplaats dan de code in zijn geheel.
Knip het hele stuk code eruit (dus: <img alt="roos" src="roos.gif" height="50" width="50" align="left">)
en zet het op een andere plaats neer.
Sla het bestand op, open het in je browser door erop te dubbelklikken en kijk wat er gebeurd is.
Beweeg je in je browser over de afbeelding heen met je muis,
dan verschijnt er de tekst 'roos' (of 'lelie', of 'schelpen').
Wil je dat hier iets anders komt te staan,
verander dan in de code alt="roos" het woord 'roos' door je eigen omschrijving.
Tip:
Een wereld aan leuke animaties voor je website vind je op
Animation Factory.
Voor clipart en foto's kun je goed terecht op Clipart.com.
Begint je homepage al ergens op te lijken?
Waarschijnlijk is er nog één ding dat je wilt veranderen,
en dat is de knoppenbalk links in je scherm (bij de modellen 04 en 05 staat deze bovenaan in je scherm).
In de knoppenbalk vind je, behalve de knop 'home',
de knoppen 'wie zijn wij', 'hobby's', 'foto's', 'links' en 'contact'.
Als je op een van deze knoppen klikt, verschijnt er een andere pagina op je scherm.
(Elke pagina bevat dezelfde tekst; alleen aan de kop kun je zien op welke pagina je bent.)
Wil je één van de knoppen veranderen, dan doe je dat zo:
Open het bestand index.html in je teksteditor of html-editor. Vrij bovenaan in dit bestand zie je de volgende code staan
(nb: de code in model 07 ziet er iets anders uit vanwege het drop-downmenu in dit model):
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
<li><a href="hobbys.html">Hobby's</a></li>
<li><a href="fotos.html">Foto's</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Als je bijvoorbeeld de knop 'Wie zijn wij' wilt veranderen in 'Muziek, dan
verander je op de vierde regel van deze code
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
in:
<li><a href="muziek.html">Muziek</a></li>
(Natuurlijk moet je dan ook nog de naam van het bestand 'wiezijnwij.html' veranderen in 'muziek.html',
anders zal deze link niet werken!)
Wil je nóg meer knoppen (en pagina's) toevoegen, dan ga je als volgt te werk:
Je opent weer het bestand 'index.html' in je teksteditor
(Kladblok of Notepad++ bijvoorbeeld) of in een html-editor.
Vervolgens kies je voor Bestand – Opslaan als... en je slaat het bestand op onder een andere naam
('producten.html' bijvoorbeeld of 'overmij.html').
Gebruik geen spaties, aanhalingstekens, komma's e.d. in de naam van je nieuwe pagina.
Een liggend streepje kan wel (bijvoorbeeld 'over-mij.html'),
maar noem je nieuwe pagina niet 'kado's.html' of iets anders met een of ander raar teken erin.
Heb je je bestand een andere naam gegeven en opgeslagen, dan moet je nu alleen de tekst van de nieuwe pagina nog veranderen
(er staat natuurlijk nog steeds hetzelfde op als op de homepage) en afbeeldingen toevoegen of weghalen.
Verder wil je waarschijnlijk nog een knop aan je navigatiebalk toevoegen.
Open eerst het bestand 'index.html' weer in je teksteditor of html-editor.
Zoek nu naar het volgende stukje code:
<li><a href="contact.html">contact</a></li>.
Dit stukje code is de laatste knop in je knoppenbalk.
Kopieer dit stukje tekst en plak het eronder.
Vervang daarna 'contact.html' door de naam van je nieuwe pagina en het woord 'contact'
door de tekst die de nieuwe knop moet krijgen.
Doe dit op alle pagina's (je knoppenbalk komt tenslotte op al je pagina's terug).
Wil je een knop in zijn geheel weghalen,
dan verwijder je gewoon het hele stuk code met de naam van de desbetreffende knop.
(Vergeet ook hier natuurlijk niet de knoppenbalk op al je andere pagina's ook aan te passen;
niet alleen de knoppenbalk die op je homepage staat.)
De laatste stap van een website maken, is het uploaden van je pagina's naar de server (computernetwerk) van een webhosting bedrijf.
Want als je je webpagina's op je eigen computer laat staan, kan niemand ze zien.
Om je pagina's dus voor iedereen zichtbaar te maken, moet je webruimte kopen bij zo'n webhosting bedrijf.
Daar zijn er talloze van, en het kan dan ook moeilijk zijn een keus te maken.
Mijn site is gehost bij
Alphamegahosting.com,
waar ik een First Class hostingpakket heb.
Dit pakket is niet duur, zeker niet als je per jaar betaalt,
en het biedt je ook alle ruimte om te groeien met je website.
Een andere hostingprovider waarmee ik ervaring heb, is
One.com.
Bij deze provider heb ik een wat kleinere site gehost.
Zeker wat ondersteuning betreft vind ik ze wat minder dan Alphamegahosting,
maar als de prijs je voornaamste beslissingspunt is, dan is dit een aanrader.
Ik raad je alleen niet te kiezen voor gratis webhosting.
Daaraan kleven een aantal nadelen, waar ik op een van mijn andere webpagina's meer over vertel
(zie
nadelen van gratis web hosting).
Nu moet je alleen nog je
webpagina's uploaden
naar de server van je webhost. Klik op de link om te lezen hoe je dat precies doet.
Tip: Heb je vragen over het werken met mijn modellen, kijk dan even op de vragenpagina's