Training voor Ontwikkelaars¶

Doel¶

Het doel van de training is het aanleren van de nieuwste technieken voor het bouwen van een website in TYPO3. Met behulp van deze training kun je snel ervaring opdoen met het systeem en komen alle facetten aan bod die je nodig hebt om een website met TYPO3 te bouwen.

In deze training proberen we een overzicht te geven van wat er mogelijk is, en zelfs dat is slechts een basis van wat er nog meer mogelijk is. TYPO3 is een compleet en complex systeem. Je moet dus enige tijd investeren om er mee overweg te kunnen.

Kennisniveau¶

Gemiddelde webdesigner met HTML/CSS achtergrond, niet noodzakelijkerwijs een webprogrammeur.

Om dit onderdeel van detrainingte kunnen voltooien, moet je goed kunnen werken met HTML en CSS. Je moet bovendien een werkende TYPO3-database hebben met het boomdiagram dat in een eerder hoofdstuk van dezetrainingis aangemaakt. Tenslotte kan het noodzakelijk zijn programmeerconcepten te beheersen voor een volledig begrip. Maar maak je geen zorgen - alles wat je moet doen, wordt je duidelijk verteld- bestudeer het materiaal aandachtig, en neem de tijd om de voorbeelden te begrijpen.

Installatie van de extension¶

Ga naar de Extension Manager, en importeer de extension vanuit de online repository:

Zoek de extension "automaketemplate", klik op het import icoon:

Als het gelukt is, is dit het resultaat:

Ga terug, selecteer "Available Extensions to Install" en installeer de extension:

Nadat je op de "Make updates" knop hebt gedrukt, ga je terug naar het template module en controleer je de Object Browser:

Deze extension zou een USER cObject moeten hebben toegevoegd aan het objectpad "plugin.tx_automaketemplate_pi1", zoals je hierboven kunt zien. Dit cObject kan nu door ons worden gebruikt in plaats van de FILE cObject om het template bestand van Raphaël te lezen en de HTML opmaak automatisch aan te passen en subpaden te corrigeren!

Configuratie van het Template Auto-parser¶

Net zoals voor elke extension waarover we iets willen weten, moeten we de handleiding voor de extension op typo3.org raadplegen.:underline:``Klik op deze link om de tabel met eigenschappen voor het cObject op te roepen **t <http://typo3.org/do c.0.html?&tx_extrepmgm_pi1[extUid]=154&tx_extrepmgm_pi1[tocEl]=501&cHa sh=2bbdf1c6ca>`_` .

Om heel duidelijk voor je te maken wat het Template Auto-parser doet, zal ik de output van de plugin invoegen als de enige content op de pagina, en zal ik ook het PAGE object "page" configureren om niet de gebruikelijke header en footer content als output te leveren.

Dit is het Setup veld template record content:

# Configuring the Auto-Parser:

plugin.tx_automaketemplate_pi1 {

# Read the template file:

content = FILE

content.file = fileadmin/template/main/template_1.html

# Here we define which elements in the HTML that

# should be wrapped in subpart-comments:

elements {

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

TD.all = 1

}

# Prefix all relative paths with this value:

relPathPrefix = fileadmin/template/main/

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.config.disableAllHeaderCode=1

page.10 =< plugin.tx_automaketemplate_pi1

Sla het template op en druk op frontend. Je zou precies moeten zien hoe de fileadmin/template/main/template_1.html er uit ziet:

Ja, en...? - denk je. Maar dit is al heel wat en als je naar de broncode kijkt, zul je zien waarom:

Zoals je ziet, zijn er hoofdzakelijk twee dingen gebeurd:

• Een groot aantal blokken in het template zijn automatisch omgeven door subparts! (1+2)
• Alle relatieve links/referenties worden voorafgegaan door de prefix "fileadmin/template/main/" (3)

Dit is omdat het template Auto-parser geconfigureerd is om met zulke “elementen” te werken:

...

elements {

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

TD.all = 1

}

...

("Elementen” zijn allemaal tags met een aparte tag aan het begin en aan het einde, bijv. de <td> tag. Tags zonder eind tag, bijv. <img>, moeten worden gedefinieerd door de "single property" van het template Auto-parser)

De configuratie van de elementen zegt dus dat

• a) het element <body> moet worden omgeven door de subpart marker "###DOCUMENT_BODY###"
• b) het element <head> moet worden omgeven door de subpart marker "###DOCUMENT_HEADER###". Verder dienen <title> bestanddelen te worden verwijderd. (We willen niet dat de <title> tag van het template van Raphaël wordt herhaald op onze TYPO3 pagina’s...)
• c) Alle gevonden <td> elementen moeten worden omgeven door markers - maar omdat er geen subpart marker waarde is gedefinieerd, worden alleen <td> tags met een "id" of "class" attribuut omgeven door markers en wel door een subpart marker die overeenkomt met de id/class waarde. Daarom zal de content binnenin de tag <td id="menu_1"> worden omgeven door de subpart markers "<!--###menu_1###-->...<!--###menu_1###-->".

Wat hebben we hier nu aan?

Het antwoord hierop is dat Raphaël met de Auto-parser templates kan maken die gebaseerd zijn op moderne CSS stijltechnieken met een bewust gebruik van id en class attributen in de HTML elementen, en tegelijkertijd functioneren die attributen als de “markers” die door TYPO3 worden gebruikt om delen van het template te vervangen door dynamische content! Gemakkelijk voor Raphaël (de ontwerper), minder gedoe voor Benoit (de ontwikkelaar) en goed voor de financiën van Picouto want er wordt minder tijd besteed aan conversies en handmatige codering van templates met subpart markers!

Resultaat¶

Het resultaat ziet er zo uit:

Je ziet dat de menu en content gedeeltes zijn vervangen door content van de TEXT cObjecten, die er alleen maar waren als voorbeeld!

De HTML broncode ziet er zo uit:

Het <head> bestanddeel is ingevoegd, zonder de <title> tag

Het <body> bestanddeel is ingevoegd, content vervanging is uitgevoerd

De ###header_1### en ###footer### subparts werden niet vervangen omdat ze helemaal niet waren gedefinieerd in het "temp.mainTemplate" TEMPLATE cObject! Dit is dus geen fout.

De ###menu_1### en ###content### subparts werden goed vervangen, zoals we hadden verwacht omdat in feite het "temp.mainTemplate" TEMPLATE cObject geconfigureerd was om dit te doen.

Samenvatting¶

TYPO3 haalt dus automatisch de <head> en <body> content uit het template van Raphaël, corrigeert relatieve paden naar afbeeldingen, links, formulieren en stylesheets, zorgt voor vervanging voor dynamische content en voegt ieder deel in het <head> en<body> bestanddeel van de output page van TYPO3 in.

We hebben nu een functionerende hoofdstructuur - we hoeven alleen nog maar wat dynamische content aan de menu en content delen toe te voegen! TypoScript cObjecten voor menu's en content elementen is het meest efficiënt hiervoor.

Menu objecten en bestanddeel status¶

Ten eerste is het HMENU object het object dat we gebruiken om menu’s te genereren. Dit object roept “menu objecten” van het type TMENU of GMENU of GMENU_LAYERS etc. aan voor elk menu niveau dat we willen (welke je gebruikt, hangt af van het soort menu waar je naar toe wil - tekstueel, grafisch, cascading lagen etc.).

Voor elk "menu object" (dat was bijv. een TMENU of GMENU), definieer je algemene eigenschappen voor het desbetreffende niveau en daarnaast bestanddeelspecifieke eigenschappen (bijv. breedte en hoogte van een GMENU grafisch bestanddeel). De bestanddeelspecifieke eigenschappen worden altijd gedefinieerd voor een specifieke status van het bestanddeel. De normale status (NO) moet altijd gedefinieerd zijn, maar daarnaast kunnen we bijv. een actieve status van het bestanddeel definiëren (ACT) - dit betekent "hoe moet het menu bestanddeel er uit zien als we op een gelijkwaardige pagina zijn of één eronder".

Het doel van deze training is echter niet om uitvoerig op het HMENU cObject in te gaan en alle aanverwante kwesties. Zie hiervoor:underline:``TypoScript by Example <http://typo3.org/doc.0.htm l?&tx_extrepmgm_pi1[extUid]=269&tx_extrepmgm_pi1[tocEl]=780&cHash=c746 a46653>`_` .

Bekijk nu de HTML broncode van het template van Raphaël:

Zoals je kunt zien, heeft hij een <div> tag voor elk menu bestanddeel gebruikt, ongeacht het niveau of de status. Het onderscheid wordt volledig bepaald door de waarde van het class attribuut! Dit is een slim ontwerp, omdat de HTML opmaak zó eenvoudig wordt dat Benoit zelfs nog meer tijd bespaart bij de implementatie! :-) En de volledige, visuele besturing vindt buiten TYPO3 plaats - in het CSS stylesheet.

Zie ook hoe Raphaël een ontwerp voor “actieve” menu bestanddelen heeft toegevoegd.

De implementatie van dit menu is heel eenvoudig. Het gaat als volgt:

Definieer eerst een tijdelijk object ergens bovenin het template record (vòòr de definitie van "temp.mainTemplate"):

# Menu 1 cObject

temp.menu_1 = HMENU

# First level menu-object, textual

temp.menu_1.1 = TMENU

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

# Enable active state and set properties:

ACT = 1

ACT.allWrap = <div class="menu1-level1-act"> | </div>

}

# Second level menu-object, textual

temp.menu_1.2 = TMENU

temp.menu_1.2 {

# Normal state properties

NO.allWrap = <div class="menu1-level2-no"> | </div>

# Enable active state and set properties:

ACT = 1

ACT.allWrap = <div class="menu1-level2-act"> | </div>

}

Je ziet hoe de rode regels de geselecteerde HTML opmaak bevatten, die dhr. Benoit van het template van dhr. Raphaël haalde. Nu is het met harde code opgenomen in het template record.

Het enige wat je nu nog hoeft te doen, is te zorgen dat het "menu_1" subpart van de "temp.mainTemplate" cObject verwijst naar dit object:

...

# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <body> tags

workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:

subparts.menu_1 < temp.menu_1

# Substitute the ###content### subpart with some example content:

subparts.content = TEXT

subparts.content.value = HELLO WORLD - CONTENT

...

(De rode regels geven de verandering weer!)

... en het resultaat spreekt voor zich:

De (onderstaande) paginastructuur zie je duidelijk terug in het bovenstaande menu!

En hoe gemakkelijk is het nu om het menu ontwerp te veranderen? Probeer maar eens het stylesheet in "fileadmin/template/main/res/stylesheet.css" te bewerken:

Je ziet het! Door deze benadering kun je de hoofdfactoren die de grafische vormgeving bepalen - het HTML template en stylesheet - buiten TYPO3 plaatsen zodat dhr. Raphaël, de HTML/CSS ontwerper, hier direct en buitengewoon gemakkelijk bij kan. En alles wat dhr. Benoit hoefde te doen, was binnen het template record een beetje te programmeren met TypoScript - hij configureerde gewoon de frontend engine zo dat deze de ontwerpen van Raphaël op de manier gebruikt die het beste past bij hun favoriete ontwikkelingsstijl!

We verwijzen je naar TypoScript aan de hand van Voorbeelden als je:underline:``meer wilt uitproberen met het HMenuobject en aanverwante zaken**f <http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[ extUid]=269&tx_extrepmgm_pi1[tocEl]=780&cHash=c746a46653>`_` .

Een content element¶

In de "List module", klik op het pagina-icoon van de pagina "License C", selecteer vervolgens "New" en klik dan, in het rechter frame, op de content wizard link:

Selecteer "Text with image to the right" en vervolgens de kolom "Normal":

Nadat je de content in het element hebt ingevoerd en opgeslagen, zou je ongeveer het volgende moeten zien:

We hebben nu dus een content element geplaatst op de pagina "License C":

Een statische template opnemen¶

Om het content element weer te geven, moeten we een statische template opnemen, dat alle honderden regels TypoScript code levert, die alles voor ons zullen doen. Dit wordt gedaan door het hele template record te bewerken.

Het eerste wat je echter moet doen is de extension "css_styled_content" installeren:

Je hoeft alleen maar op de "Install" knop te drukken, en op de "accept" knop op de volgende pagina.

(NB: Op het tijdstip van schrijven (januari 2004) is de "CSS styled content" plugin nog NIET af! Het staat in de topdrie van de prioriteitenlijst van Kasper, en de ontwikkeling ervan volgt onmiddellijk op de snowboard tour.)

Terug naar het template: Druk op deze link in de Template module:

Je zou dan moeten zien dat het "CSS Styled Content" statische bestand beschikbaar wordt in de box "Include Static (from extensions)":

Klik het aan, sla het template op en ga naar de Template Analyzer:

In de "Template Analyzer" zie je de hiërarchie van template records en statische templates die kunnen worden toegevoegd aan de huidige "main template record". Door de statische template mee te nemen in de selectie zal het gewoon worden meegenomen voordat de TypoScript code in de template record "NEW SITE" wordt aangemaakt. Dit betekent dat elk object dat binnen het "EXT:css_styled_content/....." statische template gedefinieerd is, gekopieerd kan worden en in het NEW SITE template record kan worden gebruikt. Dit zullen we nu doen omdat het opgenomen statische template een object, "styles.content.get", heeft dat een content object is dat alle content elementen van de "Normal" kolom van de huidige pagina selecteert:

Verander dus dit deel van de definitie van het "temp.mainTemplate" object in het template record:

...

# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <body> tags

workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:

subparts.menu_1 < temp.menu_1

# Substitute the ###content### subpart with some example content:

subparts.content < styles.content.get

...

Als je de frontend voor de pagina “Licence C” vernieuwt, zou je het volgende moeten zien:

In de HTML broncode zien we dit:

Zoals je ziet was de header van het content element opgemaakt in <h1> tags. Als je andere "Layout" types voor de header selecteert, wordt de weergave bijv. <h2> (voor Layout 2).

Elke regel bodytext is omgeven door <p> tags waarbij de class is ingesteld op "bodytext". Op deze manier kun je de stijl van de pagina content of content elementen in je stylesheet specifiek bepalen! Je ziet hoe slim Raphaël geweest is door de proef content in het template bestand zo te ontwerpen dat er <p class="bodytext"> tags worden gebruikt!

Ieder ingevoegd van element zal een <a> tag hebben waarvan de waarde van de naam is ingesteld op de "uid" van het content element. Dit zijn ankerpunten die in de URL kunnen worden gebruikt om direct naar een bepaalde positie op een pagina te gaan.

Dit is hoe het HMenuobject het level2 menu aanmaakt. Je ziet hoe de link automatisch naar de juiste pagina verwijst en dat er zelfs een extra onFocus handler is ingesteld.

De Objectboom?¶

Nu dan, door dit zogenaamde content element, "styles.content.get", te kopiëren, wat zijn we eigenlijk aan het toevoegen aan de objectboom? Laten we eens kijken met de Object Browser:

We zien twee interessante zaken:

Het objectpad "styles.content.get" had kennelijk een cObject van het type CONTENT. Afgaande op de attributen lijkt het een redelijke conclusie dat het records van de tabel "tt_content" selecteert, en dat deze per veld worden geordend, "sorting". Voor meer informatie:underline:``bekijk hier het CONTENT cObject **e <http://t ypo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=270&tx_extrepmgm_pi1[toc El]=356&cHash=9f3b5c6ba2>`_` .

Ten tweede werd er een geheel nieuw TLO (Toplevel Object) gedefinieerd- "tt_content". Het CONTENT cObject dat records selecteert van "tt_content" (#1) zal dit TLO (tevens gedefinieerd als een cObject) gebruiken als een defaultwaarde om elk gevonden record mee aan te maken!Zoals we zien is "tt_content" TLO gedefinieerd als een USER cObject waarbij een PHP functie van de "css_styled_content" extension wordt benut-wat me juist lijkt omdat dat de extension is die we hiervoor hebben geïnstalleerd! Om meer hierover te weten te komen moet je:underline:``de documentatie voor de "css_styled_content" extension <http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=170&c Hash=97866c2553>`_` raadplegen**.

Als je heel erg nieuwsgierig bent kun je ook in de class "tx_cssstyledcontent_pi1" kijken en de logica ervan bestuderen. Hier is een stukje van de functie "main" ():

function main($content,$conf) {

$this->conf = $conf;

// This value is the Content element Type - determines WHAT kind of element to render...

$CTypeValue = (string)$this->cObj->data["CType"];

$content="";

switch($CTypeValue) {

case "header":

$content = $this->getHeader().$this->render_subheader();

break;

case "bullets":

$content = $this->getHeader().$this->render_bullets();

break;

case "table":

$content = $this->getHeader().$this->render_table();

break;

case "text":

$content = $this->getHeader().$this->render_text();

break;

case "image":

$content = $this->getHeader().$this->render_image();

break;

case "textpic":

$content = $this->render_textpic();

break;

...

Betere template structuur¶

Het enige wat we nog moeten doen, is het template record wat beter organiseren. Alhoewel we de gebruikte hoeveelheid TypoScript tot een minimum hebben beperkt, is het makkelijk te zien dat een dergelijk template record heel snel groot en onhandig wordt. Dit kan worden opgelost door het te vervangen door een serie template records die worden opgenomen:

Ten eerste zou je een hele nieuwe pagina kunnen maken in de "root- level" van de paginaboom. Selecteer het type "sysFolder" (als in "opslagruimte voor elk database element dat je maar wilt") en noem het Template Storage.

Dan maak je als volgt drie template records aan:

Vink "Clear" nergens aan! Kopieer alleen de juiste "temp.xxxx" object definities van de "NEW SITE" template hierheen. In deze lijst is de volgorde onbelangrijk.

De volgende stap is om deze drie templates in de "NEW SITE" main template op te nemen. Bewerk dus de "NEW SITE" template:

De volgorde is nu wel belangrijk: het eerstgenoemde template wordt het eerste opgenomen en omdat het template record "ext: Main TEMPLATE cObject" kopieën maakt van bijv. het "temp.menu_1" object, moet het als laatste worden opgenomen.

Sla het template record op en bekijk de nieuwe structuur met de Template Analyzer:

Je ziet dat het statische template als eerste is opgenomen, dan de drie "basis templates" uit onze opslagmap en tenslotte het main template record. Je kunt van elk de titel aanklikken en er onder naar de content kijken.

Geef duidelijk aan welke delen dynamisch en welke statisch zijn¶

Dhr. Raphaël moet vooral begrijpen -waarschijnlijk met het hele webteam-welke delen van de pagina statische delen zijn en welke dynamisch. Statische delen zijn alle delen waar TYPO3 NIETS mee doet. Het is echter de bedoeling dat de dynamische delen wel worden vervangen door content afkomstig uit de databronnen van TYPO3.

Bij de identificatie van dynamische delen moet Raphaël op twee dingen letten:

• Het deel moet worden ingesloten door een enkelvoudig HTML element. Dit kan een <div> element, een <td> element of een <span> element zijn.
• Het insluitende element moet of een id- of een class attribuut bevatten, dat door de configuratie van de Template Auto-parser plugin kan worden gevonden en omgeven door subpart markers. Bijv. <td id="content"> voor de tabelcel waarin de content moet worden geplaatst.

Het geeft helemaal niet als er proef content in het template bestand blijft - dit wordt immers toch vervangen door dynamische content.

Vereenvoudig de HTML opmaak, gebruik CSS stylesheets¶

We bevinden ons nu in het jaar 2004 en het is echt tijd om afscheid te nemen van de <font> tag en bgcolor attributen en alles in een extern stylesheet te plaatsen. Met het oog op een CMS implementatie zorgt dit ervoor dat zo veel mogelijk externe technologie wordt gebruikt en CMS specifieke technologie (zoals TypoScript template records) slechts waar strikt noodzakelijk.

In dit onderdeel van de training is het level2 menu het beste voorbeeld:

<!-- Menu table cell: -->

<td id="menu_1">

<div class="menu1-level1-no"><a href="#">Menu item 1</a></div>

<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>

<div class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></div>

<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>

<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>

<div class="menu1-level2-act"><a href="#">Level 2 item (act)</a></div>

<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>

</td>

Laten we een enkelvoudig element bekijken (hierboven in rood). Een andere manier om dit te implementeren zou zijn:

<!-- Menu table cell: -->

<td id="menu_1">

<!-- Menu item level 1, begin -->

<table border="0" cellpadding="0" cellspacing="0" width="95%"><tr>

<td bgcolor="#eeeeee"><font face="verdana" size="2">

<a href="#" class="menu1-items">Menu item 1</a>

</font></td>

</tr>

<tr>

<td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td>

</tr>

</table>

<!-- Menu item level 1, end -->

...

</td>

Bedenk dat de definitie van het TMENUITEM object in het template record inhield dat de elementen door dit eenvoudige <div> bestanddeel worden omgeven:

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

...

... en ja hoor, je raadt het al, het bovenstaande betekent dat de elementen ongeveer door het volgende moeten worden omgeven:

temp.menu_1.1 {

# Normal state properties

NO.allWrap (

<table border="0" cellpadding="0" cellspacing="0" width="95%"><tr>

<td bgcolor="#eeeeee"><font face="verdana" size="2">

|

</font></td>

</tr>

<tr>

<td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td>

</tr>

</table>

)

...

En zelfs dat zou niet genoeg zijn: Je zou ook de class naam van de A tag met behulp van een andere eigenschap van het NO status object moeten toevoegen, en het "gray_dotted_line.gif" bestand zou als prefix het correcte bestandspad moeten krijgen - zoals bijvoorbeeld "fileadmin/template/main/".

Gebruik geen class attributen voor dynamische links¶

Veel ontwerpers zullen geneigd zijn te denken dat een class attribuut voor de <A> tag de beste HTML opmaak is om hun menu elementen en andere links te markeren. Voorbeeld:

<!-- Menu table cell: -->

<td id="menu_1">

<div><a href="#" class="menu1-level1-no">Menu item 1</a></div>

...

</td>

Dat klopt echter niet omdat juist de <A> tag automatisch wordt gegenereerd door TYPO3! Dus om dit te laten werken voor ons TMENUITEM zouden we extra TypoScript eigenschappen nodig hebben:

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div> |</div>

NO.ATagParams = class="menu1-level1-no"

...

Dit voegt meer complexe TypoScript eigenschappen toe en vermindert de flexibiliteit van het stylesheet. Als je bijvoorbeeld in dit geval wil vastleggen hoe de link van CSS wordt weergegeven, kun je het volgende gebruiken.

A.menu1-level1-no { color: navy; }

A.menu1-level1-no:hover { color: red; }

... maar dit kan weer niet als het <div> element er omheen wordt gebruikt omdat dat geen class- of id tag heeft! Als je echter de oorspronkelijke manier blijft gebruiken, waarbij het <a> element geen class attribuut heeft, maar het <div> element wel, dan zou je zowel de <div>-laag als alle links daarin kunnen vastleggen:

DIV.menu1-level1-no { padding: 2px 2px 2px 2px; }

DIV.menu1-level1-no A { color: navy; }

DIV.menu1-level1-no A:hover { color: red; }

Geen row/colspans!¶

Dit is waarschijnlijk de grootste bedreiging voor dynamische content - het gebruik van colspan als je een dynamisch object maakt! Dit is dus uitgesloten. Bestudeer bijvoorbeeld de volgende menu opzet:

<tr>

<!-- Menu table cell: -->

<td class="menu1-level1-no"><a href="#">Menu item 1</a></td>

<!-- Page Content Area table cell: -->

<td id="content" rowspan="7">

. . .

</td>

</tr>

<tr>

<td class="menu1-level1-no"><a href="#">Menu item 2</a></td>

</tr>

<tr>

<td class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></td>

</tr>

<tr>

<td class="menu1-level2-no"><a href="#">Level 2 item</a></td>

</tr>

<tr>

<td class="menu1-level2-no"><a href="#">Level 2 item</a></td>

</tr>

<tr>

<td class="menu1-level2-act"><a href="#">Level 2 item (act)</a></td>

</tr>

<tr>

<td class="menu1-level1-no"><a href="#">Menu item 2</a></td>

</tr>

Het is vrijwel onmogelijk dit in te voeren! Het eerste menu bestanddeel is in dezelfde tabelrij als de contentcel, de andere zes menu bestanddelen hebben aparte tabelrijen. Bovendien heeft de tabelcel met de content een colspan="7" attribuut nodig voor de verdeling over alle rijen van het menu!

Ontwerptechnisch gezien is dit duidelijk een heel slechte keuze:

de menu opmaak bevindt zich op verschillende punten in de HTML code

er is een afhankelijkheid tussen het colspan attribuut en het aantal menu bestanddelen (dat dynamisch is!)

Ontwerpers moeten zich dus verre houden van dit soort ontwerpen. In plaats daarvan moeten ontwerpers zoals dhr. Raphaël gemakkelijk te herhalen opmaak voor dynamische elementen leren. Dit zijn goede voorbeelden:

Bijvoorbeeld zoals in onze huidige template:

<!-- Menu table cell: -->

<td id="menu _1">

<div class="menu 1-level1-no"><a href="#">Menu item 1</a></div>

<div class="menu 1-level1-no"><a href="#">Menu item 2</a></div>

<div class="menu 1-level1-act"><a href="#">Menu item 3 (act)</a></div>

...

</td>

Alternatief met een tabel:

<!-- Menu table cell: -->

<td id="menu_1">

<table border="0" cellspacing="0" cellpadding="0">

<tr><td class="menu1-level1-no"><a href="#">Menu item 1</a></td></tr>

<tr><td class="menu1-level1-no"><a href="#">Menu item 2</a></td></tr>

<tr><td class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></td></tr>

...

</table>

</td>

We zouden nog ingewikkelder voorbeelden kunnen geven, zoals het eerdere voorbeeld waarbij elk element in een tabel werd bewerkt! Het gaat niet om de hoeveelheid HTML per bestanddeel -het gaat om de herhaalbaarheid van de opmaak !

Dhr. Raphaël moet dit soort zaken begrijpen, zodat dhr. Benoit geen uren kwijt is vanwege een gebrekkige HTML structuur - en uiteindelijk zou dhr. Picouto zelfs zo blij kunnen zijn met de snelheid van de ontwikkeling die wordt bereikt door de symbiotische samenwerking tussen Raphaël en Benoit, dat hij ze trakteert op lunch!