Tabellen in Adobe Dreamweaver

Tabellen in Dreamweaver

Philip De Vos

1 SO Fra Inf TtoKahosl Campus WaasAcademiejaar 2006 – 2007

10

Philip De Vos Basiscursus Dreamweaver – Tabellen www.philip-de-vos.be

Inhoud

Inhoud..................................................................................................................................2Tabellen in Dreamweaver.....................................................................................................3

1. Inleiding......................................................................................................................32. Tabel invoegen...........................................................................................................33. HTML-code van een tabel...........................................................................................54. Tabeleigenschappen...................................................................................................65. Kolom-, rij,- celeigenschappen....................................................................................76. Tabellen opmaken......................................................................................................87. Syntheseoefening.......................................................................................................98. Trefwoordenlijst........................................................................................................10

10


Tabellen in Dreamweaver

1. Inleiding Met tabellen in Dreamweaver is het mogelijk om afbeeldingen, tekst, links en dergelijke op een overzichtelijke en stijlvolle manier aan de bezoeker van de website te laten zien.Deze cursus zal u een weg wijzen in het invoegen, opmaken, en het nuttig gebruik van tabellen in Dreamweaver. Voor deze cursus is Macromedia Dreamweaver 2004 gebruikt, maar de eerstkomende versies zullen hier niet veel van verschillen.

2. Tabel invoegen

Klik in het menu Insert op Table. Een nieuw venster wordt geopend

In dit venster zie je een aantal eigenschappen die je kan veranderen.

Rows: Het aantal rijen van de tabel (horizontaal); Columns: Het aantal kolommen in je tabel (verticaal); Table width: De breedte van de tabel, dit is te definiëren in procenten of pixels,

hier is een duidelijk verschil!

10


Als je procenten kiest, dan zal de tabel zich aanpassen aan het venster, als de surfer de site in een klein venster bekijkt, dan zal die in verhouding even groot zijn als in een groot venster. Kies je pixels, dan blijft de tabel altijd even groot, en is er een kans dat de tabel bij sommige bezoekers buiten het venster valt!

Voorbeeld in een klein venster

Voorbeeld in een groot venster

Border Thickness: De dikte van de randen van de tabel (waarde 0 voor een onzichtbare rand);

Cell padding: De afstand tussen de celrand en de celinhoud;

Cell spacing: De afstand tussen de celranden van verschillende celranden van verschillende cellen en tussen celrand en buitenrand;

Header: Je kan kiezen uit verschillende mogelijkheden. De opgelichte delen (kolommen en of rijen) in dat venstertje zullen automatisch gecentreerd en vet worden geplaatst.

70%

30%

10


3. HTML-code van een tabel In dit gedeelte bespreken we welke HTMLcode er gegenereerd wordt wanneer er een tabel ingevoegd wordt.

<table></table>: Begin en einde van de tabel; <tr></tr>: een tabelrij (table row); <td></td>: deze tag geeft een cel aan (table data); <th></th>: opgemaakte cel (table data) om een rij-of kolomkop aan te geven

(table header); : deze code zorgt voor een harde spatie, zodat er inhoud in de cel staat en

de cel niet “in elkaar valt”; scope: wordt enkel gebruikt bij een opgemaakte cel (table header) en geeft aan of

het gaat om een kolom (col) of rij (row).

Als je een cel, een rij, een kolom of de gehele tabel wil selecteren en de eigenschappen van deze cel wil bekijken of veranderen, kan je in de statusbalk onderaan klikken op de desbetreffende tag.

Opgelet: Je kan enkel de tags selecteren als de cursor in één van de cellen staat.

<table width="100%" height="47" border="1" cellpadding="1" cellspacing="0"> <tr> <th scope="row">Kolom 1 rij 1</th> <td>Kolom 2 rij 1</td> </tr> <tr> <th scope="row">Kolom 1 rij 2</th> <td> </td> </tr></table>

10


4. Tabeleigenschappen

Klik in de statusbalk op de tag <table>, zo selecteer je de hele tabel en kan je de eigenschappen ervan aanpassen.

Opgelet: Indien het onderste gedeelte niet zichtbaar is, klik dan op het pijltje rechtsonder.

Een aantal eigenschappen hebben we reeds behandelt, toch zijn er nog een aantal die we nog niet van naderbij bekeken hebben.

Table Id: Stel een unieke naam in, handig als je verschillende tabellen op 1 pagina hebt staan;

Heigth (H): De hoogte van de tabel, in procenten of in pixels; Align: Kies hier of de tabel gecentreerd, links of rechts

uitgelijnd moet worden; Class: Indien je een css-stijl hebt gemaakt voor tabellen, kan je

deze hier toepassen. Kies none indien je geen stijl hebt gemaakt; Bg color: Klik op het pijltje om een achtergrondkleur te kiezen

voor de hele tabel. Je kan eventueel ook zelf een hexadecimale waarde invoeren;

Bg Image: Een achtergrond kiezen voor de hele tabel. Kleinere achtergronden worden automatisch herhaald tot de hele tabel “gevuld” is;Bv:

Brdr color: Kies de kleur van de buitenrand van de tabel. De binnenranden worden automatisch in dezelfde kleur gezet, maar door een cel of rij te selecteren kan je die nog apart aanpassen;

Met de nevenstaande symbooltjes kan je (respectievelijk van links naar rechts) de breedte wissen, zodat deze aangepast wordt aan de inhoud;de breedte converteren naar pixels; de breedte converteren naar procenten.Hetzelfde geldt voor de hoogte, maar dat zijn dan de symbooltjes die daar onder staan.

10


5. Kolom-, rij ,- celeigenschappen We hebben net de eigenschappen van een tabel besproken, voor cellen en kolommen zijn er ook nog een aantal specifieke eigenschappen die aangepast kunnen worden.We selecteren een cel door er met je cursor in te staan.

Meerdere cellen kun je selecteren door in een cel te staan, je linkermuisknop ingedrukt te houden en te slepen tot je het gewenst aantal cellen hebt geselecteerd.

Cellen die niet aan elkaar grenzen kan je niet met deze manier selecteren, daarvoor heb je de Ctrl-toets op je toetsenbord.

Klik in een cel, houdt Ctrl ingedrukt, en klik op een paar andere cellen. Laat Ctrl los om te eindigen.

Deze eigenschappen zijn beschikbaar

Horz: Horizontale uitlijning van de inhoud van de cellen; Vert: Verticale uitlijning van de inhoud van de cellen; No wrap: Wrap zorgt ervoor dat de tekst afgebroken wordt, zodat

de maten van de tabel gehandhaafd worden; Door op dit symbool te klikken, opent er een nieuw venster waar je kan kiezen

of de geselecteerde cellen moet gesplitst worden in kolommen of rijen; Een klik op dit symbool zorgt ervoor dat de geselecteerde cellen

samengevoegd worden tot één cel.

10


6. Tabellen opmaken In dit deeltje leer je hoe je een tabel een simpele voorgedefinieerde opmaak kan geven. In Dreamweaver is er een functie ingebouwd die toelaat een mooie en eenvoudige tabel te creëren.

Klik in het menu Commands op Format Table. Een nieuw venster zal geopend worden.

Ik denk dat de meeste opties zichzelf wel zullen uitwijzen. Probeer eens uit, er is een voorbeeldje om na te kijken of het wel zo zal zijn zoals jij het wil.

De optie “Apply all attributes to TD tags instead of TR tags” laat je best uitgevinkt. Deze eigenschap zal alle kleuren en dergelijke toepassen op de individuele cellen in plaats van op de rijen. Zo is het makkelijk om aparte cellen achteraf te bewerken.

Opgelet: Als je deze optie aanvinkt, zal de code van de tabel aanzienlijk groeien.

10


7. Syntheseoefening Maak deze webpagina zo goed mogelijk na:

Vergroot:

10


8. Trefwoordenlijst

&

.........................................................................5<table></table>...........................................................5<td></td>....................................................................5<th></th>....................................................................5<tr></tr>......................................................................5

A

Afgebroken..................................................................7Align.............................................................................6

B

Bg color........................................................................6Bg Image......................................................................6Border Thickness.........................................................4Brdr color.....................................................................6Buitenrand...............................................................4, 6

C

Cel........................................................................5, 6, 7Celeigenschappen.......................................................7Cell padding.................................................................4Cell spacing..................................................................4Class.............................................................................6Columns.......................................................................3Converteren.................................................................6Ctrl-toets......................................................................7

G

Gesplitst.......................................................................7

H

Header.........................................................................4Heigth (H)....................................................................6Horz.............................................................................7HTML-code..............................................................2, 5

I

Insert...........................................................................3

K

Kolom..........................................................................5

N

No wrap.......................................................... Zie wrap

O

Opmaken.............................................................2, 3, 8

P

Pixels....................................................................3, 4, 6Procenten............................................................3, 4, 6

R

Rij.....................................................................2, 5, 6, 7Rows............................................................................3

S

Samengevoegd............................................................7Scope...........................................................................5

T

tabel.....................................................2, 3, 4, 5, 6, 7, 8Table Id........................................................................6Table width..................................................................3

V

Vert..............................................................................7Voorgedefinieerde opmaak........................................8

W

Wrap............................................................................7

Documents

Tabellen in Adobe Dreamweaver