Voor wanneer je begint met kaders maken, is een standaard tabel het simpelste om mee te beginnen. Voor een uitgebreide uitleg over tabellen kun je op deze site terecht. Deze informatie zal ik hier niet nogmaals uitleggen.

Voor het RPG'en willen we graag een kader waarbij je aan de boven- of onderkant een afbeelding hebt daaronder/-boven een mooie uitgelijnde tekst. Een voorbeeldje van een kader op deze manier welke we in dit lesje gaan maken:

KLIK HIER:

We beginnen met een simpele tabel met 2 rijen onder elkaar. Dat geeft de code

Code:

[table cellpadding=0 cellspacing=0 border=0 bgcolor=#xxx]
[tr]
[td] [/td]
[/tr][tr]
[td] [/td]
[/tr]
[/table]

Zoals je kan zien heb ik bij de eerste 'table' tag al attributen toegevoegd. Deze zorgen voor de opmaak van de tabel. Bij de xxx komt de kleurcode van de achtergrond te staan.

Nu pakken we de afbeelding die we willen gebruiken en plaatsen we deze in een bewerkingsprogramma. Paint is prima voor bijsnijden en de grote aanpassen, maar voor het mooier opmaken heb je wel een beter programma nodig (GIMP is gratis te downloaden). In dit geval heb ik de afbeelding bijgesneden en verkleind. Vervolgens kies ik een kleur uit de (in dit geval) bovenkant van de afbeelding uit waarin deze kan overlopen. In dit geval was het f3f7f6 de lichte blauwe kleur boven het paard. Om de afbeelding mooi te laten overlopen pak ik de gum in het bewerkingsprogramma en gum ik de bovenkant van de afbeelding bij, zodat er geen lelijke streep meer te zien is (als je naar zwart oid laat overlopen kun je ook meer weggummen waardoor je een wazige overgang krijgt). Let hierbij op dat de gum op zacht staat (dus wazig) en dat je dit op een transparante achtergrond doet. Je slaat deze afbeelding op als .PNG, zodat het transparante er blijft. Ook kun je op deze afbeelding eventueel tekst plaatsen of de afbeelding bewerken. Maar dit is eigen keus en afhankelijk van hoe je de kader wil hebben.

Deze afbeelding dien je te uploaden ergens op internet. De afbeelding plaats je (in dit geval) tussen de onderste ['td] ['/td] tags. Bij de xxx vul je de kleur in die je uitgekozen had waarin je uit wil lopen.

KLIK HIER:

De tekst is niet zoals we dat willen dus moet we de bovenste 'td' tags aanpassen. Plaats eerst een 'align=center' in de bovenste TD tag als:

Code:

[tr]
[td align=center] [/td]
[/tr]

Alles in die rij/kolom wordt nu gecentreerd.

Om een blok voor de tekst te maken kun je een nieuwe tabel invoeren met 1 kolom/rij (dus 1 TR/TD tag blokje), maar je kunt ook gebruik maken van 'DIV's'. Een DIV geeft aan wat er met dat stukje van de pagina moet gebeuren. Met DIV's kun je een stijl toevoegen aan alles wat zich binnen deze tags bevindt. Een platte div is <'div> <'/div>. Als we style="" toevoegen kunnen we tussen de "" de opmaak van het bericht plaatsen. Er zijn heel veel zaken die je toe kunt voegen, maar voor deze kader gebruiken we de volgende: width: 500px; text-align: justify. Dit geeft aan dat de breedte 500 pixels moet worden en dat de tekst uitgelijnd wordt. Hierdoor kun je gewoon door blijven typen zonder te enteren en de kader zal niet uitrekken. Het uitlijnen is een questie van smaak, je kunt ook normale uitlijning gebruiken en deze 'align' weglaten. Je kunt tussen deze "" ook de opmaak van de letters (font, size, color) zetten in html code, maar dit kun je hier op het forum ook met de knoppen boven je typvlak doen. Deze DIV plaatsen we in de tabel waar de tekst moet komen. Dus:

Code:

[table cellpadding=0 cellspacing=0 border=0 bgcolor=#f3f7f6]
[tr]
[td align=center]<div style='width: 500px; text-align: justify'>[color=#2b292c][size=12][font=times]
De tekst komt hier te staan.
[/font][/size]</div>[/td]
[/tr][tr]
[td]PLAATJE HIER[/td]
[/tr]
[/table]

Voor dit geval had ik al een mooie tekstkleur gevonden (kun je uit de originele afbeelding halen zodat het mooi bij elkaar past) en heb ik opmaak font/size toegevoegd.

Je kader is nu af!

Je kunt met deze tabel manier uiteraard ook een platte, niet bewerkte afbeelding toevoegen. Ook kun je de afbeelding aan de bovenkant zetten of een extra rij toevoegen waardoor je een boven en een onder afbeelding kan plaatsen (of een extra kolom waar je een mooie titel tekst in kan plaatsen). Dit kun je zelf uitzoeken wat voor jouw afbeelding het mooiste staat.

Met tabellen kun je ook een afbeelding NAAST een tekstvlak plaatsen ipv boven of onder. Hiervoor moet je de tabellen/kolommen anders coderen (tr en td tags). De opmaak doe je vervolgens hetzelfde als hierboven uitgelegd staat.

klik hier:

Vergeet niet altijd je tags af te sluiten! Na een opening tussen [ en ] volgt altijd later een sluiting tussen [ / en ]