 |
Golive tutorial in italiano NAVIGAZIONE PRINCIPALE |
 |
Navigazione principale
Ora volete creare un menu basato sulle pagine in Typo3. Avrete notato che ho inserito dei commenti nel file template dal GoLive. Questa volta ho pensato di sostituire le cinque voci del menu sotto l'immagine con link alle pagine da Typo3. Devo però assicurarmi che ci saranno solo cinque voci!
Il codice HTML sarà visualizzato in questo modo:
<tr height="20">
<!--###MENU### start-->
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="whatsnew.html">what's new</a></center>
</td>
<td width="120" height="20" bgcolor="#2f2714" nowrap>
<center>
<a href="resources.html">resources</a></center>
</td>
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="calendar.html">calendar</a></center>
</td>
<td width="120" height="20" bgcolor="#2f2714" nowrap>
<center>
<a href="faq.html">FAQ</a></center>
</td>
<td width="120" height="20" bgcolor="black" nowrap>
<center>
<a href="contact.html">contact</a></center>
</td>
<!--###MENU### stop-->
</tr>
Come potete vedere ogni elemento del menu è inserito in una cella della tabella. Questo sostanzialmente significa che tutte le volte che creiamo un menu è necessario “avvolgere” ogni oggetto nella cella di una tabella. Proviamo ora a modificare il record template di Typo3 in questo modo:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/main.css
page.bodyTag = <body background="Images/tile_bkgrnd.gif">
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/tmplpage.html
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT < styles.content.get
subparts.MENU = HMENU
subparts.MENU.minItems = 5
subparts.MENU.maxItems = 5
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
allWrap = <td>|</td>
}
}
In questo modo è stato inserito un menu dal primo livello contenente 5 elementi avvolti in altrettante celle di una tabella. Apparirà in questo modo:
Confrontando con il codice HTML iniziale possiamo vedere che gli elementi sono avvolti in un codice più sofisticato. Possiamo quindi, in alternativa, scrivere così:
<td width="120" height="20" bgcolor="black" nowrap> | </td>
Notiamo però che anche il colore di background dell'oggetto è cambiato! Con Typo3 è possibile fare anche questo! E' una funzionalità chiamata “optionSplit”. Sfortunatamente è piuttosto complicata da utilizzare ma funziona e ci consente di definire in che modo debbano, ad esempio, essere avvolti il primo oggetto, gli ultimi due o gli oggetti nel mezzo.
La funzionalità base di optionSplit che ci serve utilizzare è quella che consente all'involucro di cambiare tutte le volte tra due scelte. In questo modo:
|*| <td width="120" height="20" bgcolor="black" nowrap> | </td> || <td width="120" height="20" bgcolor="#2f2714" nowrap> | </td> |*|
<center>-tags per tutti gli elementi ma in questo caso ho utilizzato un'altra proprietà del TMENUITEM-object (che è quello utilizzato qui. Guarda i riferimenti sul TypoScript).
Modificate quindi il record-template in questo modo:
subparts.MENU.1.NO {
allWrap = |*| <td width="120" height="20" bgcolor="black" nowrap> | </td> || <td width="120" height="20" bgcolor="#2f2714" nowrap> | </td> |*|
linkWrap = <center>|</center>
}
Ecco, perfetto! (Notate però che l'ultimo oggetto menu non è stato trovato fino a quando “...” è stato mostrato).
| |
 |
|
| 3 / 7 |
