MENU
 
Home
Nieuwsbrief
GC in de media
SiteMap
 
Tips en Tricks
Excel
Word
Photoshop
PowerPoint
Surf Tips
Gmail
Android
iPad
Excel ClipTips
 
cursus Office 2016
Access
Excel
Outlook
PowerPoint
Word
 
cursus Office 2013
Excel
PowerPoint
Word
Nieuw in Excel 2013
Nieuw in Word 2013
Nieuw in PowerPoint 2013
 
cursus Office 2010
Access
Nieuw in Excel 2010
Excel automatiseren
Excel
OneNote
Outlook
PowerPoint
Word
 
cursus Office 2007
Access
Excel
Outlook
PowerPoint
Publisher
Visio
Word
 
cursus Office
2000-2002-2003-XP
Access
Excel
PowerPoint
Outlook
Word
 
cursus Photoshop
CC -3D
Animatie
CS6
CS5
CS4
CS2 - CS3
Lightroom 3
Elements 6
Mask Pro
Nik Collection
 
cursus Dreamweaver
CS3
 
cursus Illustrator
CS4
 
cursus Flash
CS4
 
cursus Fireworks
CS4
 
cursus Paint Shop Pro
X en X2
 
cursus Premiere
Elements 7-8
 
cursus Joomla
Joomla 1.5
 
Sociale Netwerk sites
Facebook
LinkedIn
Twitter
 
iPad
Apps
 
Diversen
Celtx
CSS
DropBox
Firefox 3.6
GIMP
Internet Explorer 9
LIME
Linux
OpenSUZE
PREZI
ProShow Producer
YouTube
 
cursus Google
Agenda
Analytics
Gmail
Zoeken
Picasa 3
SketchUp
Chrome
Street View
 
cursus Windows
Live Movie Maker
Windows 10
Windows 8
Windows 7
XP
Vista
 
cursus Office '97
Word
Excel
 
 
>

 

Cursus Dreamweaver   Index - vorige - volgende
       
Les 36 Het tabblad Lay-out (4)  
     
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).

style="display:inline-block;width:120px;height:90px" >
>
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.
 
 
Index - vorige - volgende

copyright © 2012 - gratiscursus.be

>