1 van 11 28-4-2010 12:25 We hebben nu de pagina met de links naar drie pagina's. En nogmaals: na iedere verandering waar je tevreden mee bent de pagina opslaan, of te wel Save.

2 van 11 28-4-2010 12:25 Je ziet nu bij pijl 1 Design staan dat betekend dat je in de Design-editor bent waar je direct kunt zien hoe de pagina er uitziet. Bij pijl twee staat Code. Als je daar op klikt dan kom je in de code-editor. zie onderstaande afbeelding.

3 van 11 28-4-2010 12:25 Wat je hier ziet is eigenlijk de motor van deze pagina. Het zijn de instructies die de pagina de structuur geven.

4 van 11 28-4-2010 12:25 De code in de zwarte rechthoeken is code die bij het maken van een nieuwe pagina standaard in de pagina word gezet. De groene code is de code van de tabel met de kleine tabel daar in die je zelf op de pagina hebt gezet. In de code-editor kan je code selecteren en veranderen, net als in een tekstprogramma. Om even het een en ander duidelijk te maken gaan we de randen of te wel de border rond de tabel en de cellen een ander kleur geven.

5 van 11 28-4-2010 12:25 Bij pijl 1 zie het woord table staan. Klik daar op. Klik dan op het grijze vlakje bij pijl 2 en dan komt er een kleurenkiezer en daar klik je op een kleur die je wilt hebben.

6 van 11 28-4-2010 12:25 Je ziet nu dat bij de pijl er een stukje code is bij gekomen. Er is het woord bordercolor bij gekomen met nog een stukje code dat de kleur voorstelt, in mijn geval is dat de code voor de kleur #FF0000, rood in mijn geval. Dat kan bij jouw anders zijn omdat je een andere kleur gekozen kan hebben. Klik nu op Design, links boven aan de pagina, en bekijk het resultaat. In mijn geval dus de kleur rood voor de randen van de tabel. Zie volgende afbeelding.

7 van 11 28-4-2010 12:25 Klik op Code en we zijn weer terug in de code editor. We gaan nu de achtergrondkleur van de kleine tabel met de links veranderen.

8 van 11 28-4-2010 12:25 Klik bij pijl 1 op table, dat is de code voor de tabel met de links. Klik dan op het grijze vlakje bij pijl 2, er staat Bg color, en klik op de kleur geel, dit is om het voorbeeld duidelijk te maken. Klik dan weer op Design om het voorbeeld te bekijken.

9 van 11 28-4-2010 12:25 We blijven in de design editor en gaan de achtergrondkleur van de kleine tabel veranderen in de design editor.

10 van 11 28-4-2010 12:25 Klik op de rand van de tabel bij pijl 1 zodat het er uit ziet als op de afbeelding. Klik dan bij pijl 2 op het gele vlakje, dat is de kleur die we in de code hebben gekozen, en kies een andere kleur. En het resultaat is direct te zien in de design editor. Ik heb een blauw kleur maar jij kan ook weer een andere kleur hebben als de kleur maar veranderd is.

11 van 11 28-4-2010 12:25 Wat we nu gedaan hebben geldt alleen maar voor deze pagina. Als je de kleuren wilt veranderen moet je de desbetreffende pagina die je wilt veranderen eerst openen en dan kun je hem bewerken. Nog even een tip: als je in de grote witte cel klikt en dan in de properties bij Bg op het grijze vlakje klikt, niet de Bg bij het tekstveld, en een kleur kiest dan verander de cel naar de achtergrondkleur die je gekozen hebt. Op deze manier verander je alleen de achtergronkleur van een cel. Ik zou zeggen: expirimenteer een beetje met de properties of te wel de eigenschappen.