Mentre l'html di cui è composta la pagina viene definito nel file
Main.Master,
quello per la definizione di ogni sezione che la pagina contiene viene definito nel file
SectionOutline.hmtl
E' possibile quindi modificare questo file per ottenere html personalizzato che possa
rispondere a particolari esigenze di layout.
Vediamo come è fatto l'html standard di una Sezione.
<div id="$section-id$" class="section $specific-section-class$">
<div class="section-top" />
<div class="innersection-breadcrumbs $show-hide-breadcrumbs-class$">
$page-breadcrumbs$
</div>
<div class="section-title $show-hide-title-class$">
<h2>$title$</h2>
</div>
<div class="section-body">$content$</div>
<div class="section-bottom" />
</div>
... e come verrà renderizzato per esempio per una sezione di tipo Links:
<div id="section-1234" class="section links">
<div class="section-top" />
<div class="innersection-breadcrumbs hidden">
$page-breadcrumbs$
</div>
<div class="section-title">
<h2>Titolo Sezione</h2>
</div>
<div class="section-body">
<ul>
<li><a target="_self" href="#"><span>Link1</span></a></li>
<li><a target="_self" href="#"><span>Link2</span></a></li>
<li><a target="_self" href="#"><span>Link3</span></a></li>
</ul>
</div>
<div class="section-bottom" />
</div>
E' possibile quindi creare stili personalizzati per ogni singola
sezione utilizzando come selettore
$section-id$
renderizzato (section-1234) e di conseguenza tutti i suoi sotto-tag.
Le macro-sostituzioni vengono effettuate in automatico dal sistema di generazione della pagina.
Alcune di esse servono per effettuare delle impostazioni, altre per renderizzare il contenuto.
Ecco in dettaglio le macro-sostituzioni effettuate per ogni sezione:
| $section-id$ |
Identificativo univoco di sezione; può servire per dare un aspetto
particolare ad una specifica sezione senza che altre della stessa tipologia
ne risentano (css: #section-1234 { ... })
|
| $specific-section-class$ |
Classe specifica per l'indicazione del tipo di sezione
(menu, html, links, articles, gallery, flash, ecc. ecc.)
|
| $show-hide-breadcrumbs-class$ |
Classe per visualizzare o nascondere le Breadcrums di sezione
|
| $page-breadcrumbs$ |
Contiene le
Breadcrumbs
della pagina se è stata impostata la loro visualizzazione
|
| $show-hide-title-class$ |
Classe per visualizzare o nascondere il titolo della sezione
|
| $title$ |
Contiene il titolo della Sezione
|
| $content$ |
Contiene l'html relativo al contenuto della sezione in funzione della tipologia stessa di sezione
|
L'eliminazione di uno o più selettori di macro-sostituzione possono causare
una errata o parziate renderizzazione dei contenuti delle sezioni.
Si può togliere per esempio
$section-id$
senza che la renderizzazione dei contenuti causi problemi; se invece viene tolta
$show-hide-title-class$
la renderizzazione della sezione diventa insensibile alle direttive
di visualizzazione impostate nella sezione stessa.
Si può invece aggiungere html per meglio definire la renderizzazione delle sezioni.
Un esempio potrebbe essere la necessità di definire dei layout fluidi,
dove anche le sezioni si adattano alle dimensioni della finestra del browser.
Torna in alto