Websites met stijl

30. De sjablonen

In dit hoofdstuk

Een eigen website beginnen?

Hoe begin je met een eigen website?

Natuurlijk moet je eerst een idee hebben waarover die website moet gaan. Je verzamelt teksten en afbeeldingen voor je website.

Dan moet je nadenken over de vorm van de website, over vragen als:

Als je die vragen hebt beantwoord maak je een map "Mijn website', of hoe je die wilt noemen, met submappen voor de afbeeldingen en voor het stijlblad.

Dan maak je een html document met de naam index.html en een voorlopig leeg stijlblad 'stijlen.css' of hoe je het wilt noemen.

En dan kan je aan de slag met de bouw van html-document en stijlblad. Zo bouw je je website van de grond af op

Opmerking: Hoe je je website op het internet plaatst komt in hoofdstuk 33 aan de orde.
Maak je website eerst op de eigen computer helemaal naar je zin.

Templates

Je kan ook uitgaan van een bestaand ontwerp voor een website, om dat aan te passen aan jouw wensen. Dat is gemakkelijker dan helemaal van de grond af aan te beginnen.
Op internet vind je talloze website-sjablonen, websites met weinig tekst en een paar foto's, maar wel met de volledige opmaak, die speciaal zijn gemaakt om als startpunt te dienen bij het maken van een website.
Ze worden meestal aangeprezen onder de engelse naam templates. Google maar eens op free webtemplates of free website templates.

Om te beginnen kan je beter eerst aan de slag met de onderstaande sjablonen die ik heb gemaakt. Ze zijn niet zo fraai en uitgebreid als veel templates op internet, maar ook minder ingewikkeld. Je kunt er naar hartelust mee experimenteren.

Elf sjablonen

Er zijn 5 sjablonen (templates), elk in een 'witte' uitvoering (sjabllonn 1...5) en een 'paarse' uitvoering (sjabloon 1a-5a); daarnaast is er het sjabloon van de website van Terschelling die je in deze cursus hebt gemaakt. (Ik heb daar bijna alle tekstenen en foto's uit gehaald.)

Ik besteed aan het sjabloon terschelling, verder geen aandacht meer.Daarover gingen de vorige twintig hoofdstukken al.

sjabloon 1
sjabloon 1a
sjabloon 2
sjabloon 2a
sjabloon 3
sjabloon 3a
sjabloon 4
sjabloon 4a
sjabloon 5
sjabloon 5a
sjabloon Terschelling

Over de sjablonen

Over de html

sjabloon 1 en 3
Menu staat vóór de kopfoto (nav voor header)
Aside na main

<nav> </nav>
<header> </header>
<div#container>
<main> </main>
<aside> </aside>
</div><!-- einde div container -->
<footer> </footer>

sjabloon 2
Menu staat vóór de kopfoto (nav voor header))
Aside voor main

<nav> </nav>
<header> </header>
<div#container>
<aside> </aside>
<main> </main>
</div><!-- einde div container -->
<footer> </footer>

sjabloon 4
Menu staat vóór de kopfoto (nav voor header)
Aside voor én na main

<nav> </nav>
<header> </header>
<div#container>
<aside> </aside>
<main> </main>
<aside> </aside>
</div><!-- einde div container -->
<footer> </footer>

sjabloon 5
Menu staat na de kopfoto (nav achter header)
Header, menu, footer binnen div#container

<div#container>
<header> </header>
<nav> </nav>
<main> </main>
<aside> </aside>
<footer> </footer>
</div><!-- einde div container -->

Toelichting:

Over de stijlbladen

Overzicht van de eigenschappen van de sjablonen

sjabloon 1 sjabloon 2 sjabloon 3 sjabloon 4 sjabloon 5
aantal kolommen: 1 2 2 3 2
aside t.o.v. main: onder links rechts links en rechts rechts
menu t.o.v. header: boven boven boven boven onder
menu vast/scrollend: vast scrollt scrollt scrollt scrollt
div#container omvat: main en aside main en aside main en aside main en aside alles
link naar boven: afbeelding tekst (△) tekst (△) tekst (△) tekst (△)
titel absolute of static absolute static static static static
plaats titel in afb.: midden onder linksboven midden boven rechtsboven midden onder
afbeelding header op de achtergrond op de achtergrond op de achtergrond op de achtergrond op de achtergrond

Verder

Je kunt zelf ook combinaties van de verschillende sjablonen maken. Bijvoorbeeld sjabloon 1 met het 'driehoekje naar boven' van sjabloon 2.

In het volgende hoofdstuk staan suggesties hoe je de sjablonen kunt aanpassen.