Een checklist invoegen in je pagina

Transcriptie

1 Een checklist invoegen in je pagina Een checklist bestaat uit 2 onderdelen, een tabel en een checkbox. Als eerste moet er een tabel gemaakt worden zodat de checkbox in de tabel kan worden ingevoegd. Ook kan er een foto geplaatst worden in de tabel. a. Een tabel maken Ga naar je eigen pagina en klik op edit Je komt dan op onderstaande pagina, klik op tekst (rode vak). Om een tabel op je website te krijgen is enige kennis van de html- taal nodig. Een tabel die zich automatisch aan het schermformaat aanpast ziet er in html- taal zo uit: <table border="1" width="100%"> <tbody> <td>a</td> <td>b</td> <td>c</td> <td>1</td> <td>2</td> <td>3</td> </tbody> </table> Plak het bovenstaande stukje op je site (wanneer je in het tabblad tekst zit). Hoe ziet dit er dan uit op je site?

2 Links zie je hoe de tabel eruit ziet wanneer je weer op wysiwyg klikt, rechts zie je hoe het eruit ziet voor de bezoekers van de site. Hoe maak je nou een extra rij of een extra kolom? Of hoe haal je een rij of kolom weg? In de afbeelding is de rij in het rood omkaderd. Waar staat dit in de html- code? <table border="1" width="100%"> <tbody> <td>a</td> <td>b</td> <td>c</td> <td>1</td> <td>2</td> <td>3</td> PLAK HIER </tbody> </table> Als je goed kijkt herhaald het stukje rode tekst zich steeds weer opnieuw. Om een extra rij in te voegen kopieer je dit stukje tekst en plak je waar de tekst plak hier hierboven staat.

3 Om een rij weg te halen verwijder je dit stukje rode tekst. In de afbeelding is de kolom in het rood omkaderd. Waar staat dit in de html- code? <table border="1" width="100%"> <tbody> <td>a</td> <td>b</td> <td>c</td> PLAK HIER <td>1</td> <td>2</td> <td>3</td> PLAK HIER </tbody> </table> Als je goed kijkt herhaald het stukje rode tekst zich steeds weer opnieuw. Om een extra kolom in te voegen kopieer je dit stukje tekst en plak je waar de tekst plak hier hierboven staat. Dit moet op beide plekken. Om een kolom weg te halen verwijder je dit stukje rode tekst. b. Een afbeelding invoegen Ga terug naar wysiwyg, ga in de cel steen waar je een foto wil invoegen en klik nu op media toevoegen.

4 Standaard opent de volgende pagina in de mediabibliotheek (hier staan de eerder gebruikte foto s). Om nieuwe foto s te uploaden klik je op bestanden uploaden. Wanneer je een foto wil gebruiken die je al eerder geüpload hebt klik je op mediabibliotheek. Je kan nu een foto naar deze pagina slepen of zoeken op je computer ( bestanden selecteren ). Je foto verschijnt nu in de mediabibliotheek.

5 1. Je kan de foto verwijderen. 2. Zorg dat je altijd werkt in media toevoegen. 3. Dit is het webadres van je foto (hoef je niks mee te doen). 4. Hoe wil je je foto noemen?. 5. Deze tekst komt onder je foto te staan.

6 6. Wat je hier invult krijg de bezoeker niet te zien. 7. Wil je hem links, in het midden of rechts hebben in je cel? 8. Als hier geklikt wordt, waar ga je dan heen? Meestal kies je hier voor geen. 9. Hier kan je een keuze maken hoe groot je de afbeelding wil zien. 10. Als alles goed is ingevuld klik je op in pagina invoegen. In onderstaande afbeelding zijn er 3 plaatjes ingevoegd in de 3 cellen in de eerste rij. Er is gekozen voor thumbnails (die keuze maak jij zelf). De eerste rij is nu gevuld. In de volgende rij wil je nu een checkbox hebben. c. Een checkbox invoegen Ook dit is weer een stukje html- code die we gaan gebruiken. <form><input name="vehicle" type="checkbox" value="naam" /> Naam</form> Ga in de cel staan waar je de checkbox wil hebben en klik op tekst. In het voorbeeld staat er een 1 in de eerste cel, deze laten we even staan zodat we de plek waar de checkbox moet komen te staan makkelijk kunnen vinden.

7 Je ziet dat de html- code van je tabel al flink wat ingewikkelder is geworden omdat er nu al foto s in staan. We gaan op zoek naar de plek waar de nummers 1,2 en 3 uit het voorbeeld staan. Op de plek waar nummer 1 staat gaan we de html- code voor een checkbox plakken <form><input name="vehicle" type="checkbox" value="naam" /> Naam</form>

8 Deze handeling herhaal op alle plekken waar een checkbox moet komen te staan. Hoe ziet dit er dan uit? Klik op wysiwyg. In het rode kader zie je nu een checkbox met naam er achter. Hier kan je typen wat jij wil. Uiteindelijk ziet je checklist er dan uit zoals in onderstaande afbeelding.

9