- PDF Gratis download

Maat: px

Weergave met pagina beginnen:

Download ""

Pepijn van den Broek
5 jaren geleden
Aantal bezoeken:

1 1 van :45 In deze les gaan we de pagina wat meer opmaken en gebruiken daar twee afbeeldingen voor die je kunt downloaden in het menu links bij les 24. We openen index.html en we zorgen dat we in design mode zijn. We gaan een tabel in de editable region plaatsen. We hebben een region die Grote_cel heet op de index.html pagina, als het goed is staat hij er nog. Als deze region er niet staat dan raad ik aan om les 23 nog een keer door te nemen. We gaan van de volgende situatie uit en hebben dus de index.html pagina in de editor van Dreamweaver. Bij de pijl staat dus de region en we klikken 1 keer in het witte vlakje van de region zodat de cursor daar in knippert. We gaan nu een tabel plaatsen in de region en doen dat door naar Insert te gaan boven in het menu zie pijl 1 en dan op Table klikken bij pijl 2

2 van 7 28-5-2010 12:45 Dan heb je nu het volgende scherm voor je.

3 waar Table width staat vul je 700 in. De rest laat je zo en dan klik je op ok.

2 2 van :45 Dan heb je nu het volgende scherm voor je. Bij pijl 1 waar Rows staat vul je 4 in, bij pijl 2 waar Columns staat vul je drie in en bij pijl 3 waar Table width staat vul je 700 in. De rest laat je zo en dan klik je op ok. Dan heb je onderstaand scherm voor je waar je kunt zien dat je een tabel in de region hebt geplaatst. Deze tabel bestaat uit 3 kolommen en 4 rijen.

3 van 7 28-5-2010 12:45 De afbeeldingen die in het zipfile zitten moeten we nog uitpakken. Als je de afbeeldingen hebt uitgepakt dan heb je twee afbeeldingen genaamd 2wolven.gif en weblog.jpg.

3 3 van :45 De afbeeldingen die in het zipfile zitten moeten we nog uitpakken. Als je de afbeeldingen hebt uitgepakt dan heb je twee afbeeldingen genaamd 2wolven.gif en weblog.jpg. Deze afbeeldingen zet je in de map images van je website. Als dat allemaal gebeurd is dan gaan we de afbeelding 2wolven.gif in de tabel plaatsen. Dit doen we door het plaatje uit de Dreamweaver verkenner te slepen naar de tabel en in de juiste cel los te laten. Het werkt als volgd: Open de map images in de Dreamweaver verkenner aan de linkse kant en zoek de afbeelding 2wolven.gif op. Ga hier met de muiscursor op staan en houd de linker muisknop ingedrukt. Sleep dan de afbeelding naar de tabel, je ziet dat de cursor veranderd is in een pijl met vierkantje eraan dat op een blaadje papier lijkt. Laat de muisknop los als je in de linker bovenste cel van de tabel staat. Dan krijg je een klein dialoogvenster te zien zoals onderstaande scherm en hier klik je op ok

4 van 7 28-5-2010 12:45 Als dit gelukt is ziet de pagina er nu zo uit als onderstaande scherm.

4 4 van :45 Als dit gelukt is ziet de pagina er nu zo uit als onderstaande scherm. Sla de pagina op. Nu zie je dat de cellen verschillen van grootte. Dit kunnen we veranderen door de randen te slepen.

5 van 7 28-5-2010 12:45 Ga met de muiscursor op de rand staan bij de pijl en je ziet de cursor veranderen in twee verticale streepjes met

Als je iets over de afbeelding sleept zie je dat de rand toch niet verder gaat dan de rand van de afbeelding.

5 5 van :45 Ga met de muiscursor op de rand staan bij de pijl en je ziet de cursor veranderen in twee verticale streepjes met pijltjes. Houd de muisknop ingedrukt en sleep de rand net iets over de rechter rand van de afbeelding en laat de muisknop los. Als je iets over de afbeelding sleept zie je dat de rand toch niet verder gaat dan de rand van de afbeelding. En zie dat de rand van de cel mooi aansluit op de afbeelding. Zie onderstaande scherm. Probeer nu de pagina verder op te maken met de afbeelding weblog.jpg zoals onderstaande afbeelding.

6 van 7 28-5-2010 12:45 Als je de randen van de

6 6 van :45 Als je de randen van de tabel en de cellen wilt verwijderen klik je op de tabel en vul je bij Border 0 in en druk je op enter. Zie onderstaande scherm. Dan heb je het volgende scherm

7 van 7 28-5-2010 12:45 Als je nu de pagina in de brouwser bekijkt zul je zien dat de tabel geen randen heeft In Dreamweaver wordt dat weergegeven doordat de randen als stippellijn zichtbaar zijn.

7 7 van :45 Als je nu de pagina in de brouwser bekijkt zul je zien dat de tabel geen randen heeft In Dreamweaver wordt dat weergegeven doordat de randen als stippellijn zichtbaar zijn. En de plaatjes blijven op hun plek staan. Je kunt de border weer op 1 zetten als je wilt. Wat ik duidelijk wil maken is dat je met een tabel wederom je pagina aardig kunt opmaken. Hoe je dit verder wilt uitbreiden hangt van je eigen creativiteit af maar zie dit als een basis om verder te experimenteren. Bij vragen kun je me altijd mailen

Vergelijkbare documenten

1 van 7 28-4-2010 12:17 Hier zijn we gebleven in les 14. Ik vergeet het belangrijkste elke maal te vertellen. Na dat je wijzigingen in je pagina hebt gemaakt is het verstandig om de pagina te saven of