Dreamweaver - CS3

Les 36: Het tabblad Lay-out (4)

36/58 Lessen 

Lay-outtabel tekenen

Twee andere opties die we vinden onder het tabblad “Lay-out” in de werkbalk “Invoegen”, zijn de knoppen “Lay-outtabel tekenen” en “Lay-outcel tekenen”.

Dit komt eigenlijk overeen met het invoeren van tabellen op de “normale” manier, alleen teken we hier onze tabel en de cellen zelf.
Het eerste wat je moet doen is de tabel tekenen.
Klik hiervoor de knop “Lay-outtabel tekenen” in het tabblad “Lay-out”.
Klik en sleep in het document op de plaats waar je de tabel wil invoegen.
In dit voorbeeld ga ik en tabel tekenen rond de overtrekafbeelding die we in de vorige les hadden ingevoegd.

Vervolgens tekenen we de verschillende cellen in onze tabel. Je hoeft enkel een cel te tekenen waar er inhoud in komt. Lege cellen hoef je niet te tekenen.

Dus klik de knop “Lay-outcel tekenen” in het tabblad “Lay-out”, en teken een cel voor de titel, één voor het logo, één voor de afbeelding, en één voor de tekst onder de afbeelding.

De grootte van de cellen kan je steeds aanpassen door de cel te selecteren, en te klikken en te slepen met de blokjes aan de rand van de cel.
De positie van een cel kan je wijzigen door de cel te selecteren, en te klikken en te slepen met de rand van de tabel.

Gegevens toevoegen aan een cel gebeurd op dezelfde manier als in een “normale” tabel.
Plaats de cursor in de tabel, en begin te typen voor tekst. Om een afbeelding in een tabel te plaatsen sleep je deze uit het deelvenster “Bestanden” in de cel.

Wanneer een cel is geselecteerd kan je hiervan de eigenschappen aanpassen in het eigenschappenvenster.

Automatisch uitrekken

Wanneer we de pagina nu bekijken in de Browser zien we dat deze tabel een vaste waarde heeft.
Om deze nu de breedte van de tabel aan te passen aan de breedte het browservenster selecteer je eerst de cel die je wil uitrekken, met andere woorden, die variabel is ten overstaan van de breedte van het browservenster, en klik je het vakje “Automatisch uitrekken” in het eigenschappenvenster.

Dit opent het dialoogvenster “Spacer-afbeelding kiezen”.
Hier hebben we drie opties:
De eerste maakt een spacer-afbeelding.
De tweede maakt gebruik van een reeds bestaande spacer-afbeelding.
En de derde maakt geen gebruik van een spacer-afbeelding.

Laat me eerst eens uitleggen wat een spacer-afbeelding in.
Een spacer-afbeelding is een onzichtbare afbeelding die ervoor zorgt dat de breedte van een cel wordt gewaarborgd.

Omdat ik er zo geen heb kies ik voor de eerste optie “Maak een spacer-afbeeldingsbestand”, en sla dit op in de map “images”.
Mocht je er al één hebben, kan je kiezen voor de tweede optie.
En mocht je er geen willen, voor de derde optie.
Let er wel op wanneer je kiest voor de derde optie, oudere Browsers deze cellen waar niks staat, zal invouwen.

Klik de knop OK.

Zoals je zult zien zal deze cel nu zijn uitgerokken, en wanneer je kijkt onderaan de pagina zie je dat de cellen met gegevens niet meer juist uitgelijnd staan tegenover de titelcel.

Bekijk de pagina in de Browser (klik de F12 toets op je toetsenbord).
Afhankelijk van hoe groot of klein je nu het browservenster maakt zal de afbeelding en de tekst eronder niet meer in het midden worden uitgelijnd van de pagina.
Hoe kunnen we dit oplossen?

Eerst voor de afbeelding.
Selecteer de cel waarin deze zich bevindt.
Klik en sleep met de blokjes aan de linker en rechterzijde aan de rand van de cel tot deze cel dezelfde breedte heeft dan de breedte van de tabel.
Met de cel nog steeds geselecteerd klik je het naar benedenwijzend pijltje naast het vak “Horz”, en kies je “Midden” uit het drop-downmenu.
Dit zal de afbeelding centreren in de tabel.

Bekijk even het resultaat in je Browser.

Voor de onderstaande tekst moeten we een andere oplossing zoeken.
Mochten we kiezen voor dezelfde oplossing, zou de tekst zich centreren en zich verspreiden over de hele afmeting van het Browservenster.
Dus gaan we deze tekst eerst in een eigen tabel plaatsen.
Selecteer eerst de tekst, en klik Ctrl+C op je toetsenbord (dit kopieert de tekst).
Klik de Deleteknop op je toetsenbord (dit verwijdert de tekst).
Selecteer de onderste rij van de tabel.
Klik de knop “Cellen samenvoegen” in het eigenschappenvenster.
In het vak “Horz” kies je de optie “Midden” (dit zal de inhoud van de cel centreren).

Plaats de cursor nu in de onderste rij, en klik de knop “Invoegen” in de menubalk.
Kies “Tabel” in het drop-downmenu.
Geef het aantal rijen en kolommen in, plus een breedte voor je tabel. In dit geval heb ik genoeg aan 1 kolom en 1 rij, met een breedte van 350 pixels.
Klik de knop OK.
Plaats de cursor in de nieuwe zojuist aangemaakte tabel, en klik Ctrl+V op je toetsenbord.
Dit zal de eerder gekopieerde tekst plakken.

Bekijk de pagina in je Browser en je zult zien dat, hoe groot of klein je het browservenster ook mag maken, de afbeelding met daaronder de tekst, netjes in het midden van de pagina blijven staan.

Formidabel U hebt Les 36 voltooid START VOLGENDE LES