Mini-guida: Creare un modello per il Menu principale – by tekno

Si dirà in seguito cos'è un modello e come può essere modificato per creare uno stile unico per il sito.

In questa sezione si userà il file mainmenu.tpl che si trova in /themes/(nomedeltuoskin)/templates.

Modelli, cosa sono? I modelli usati in Envolution sono un modo per l’utente di avere un controllo maggiore sul lato estetico della pagina. Esaminiamo un paio di cose prima di iniziare.

Variabili.

Le variabili sono ciò che caratterizza la pagina, cioè impostazioni che rendono unico il tuo sito.

Segue una lista delle variabili che verranno usate nel modello del menu principale, con la definizione delle funzioni di ciascuna.

$TITLE

Questa variabile imposta il nome scelto per il blocco del menu.

$CONTENT

Definisce testo/link che appariranno nel corpo del blocco.

$IMAGEPATH

E' definitaall’interno del tema stesso, nel file funcs.php, ma esula dagli scopi di questa guida, accettatela come percorso delle immagini del vostro tema.

$BGCOLOR(1-6)

I colori definiti nella configurazione colori di Encompass.

$SEPCOLOR

Il colore definito nel configuratore colori di Encompass.

$LEFTWIDTH

E' la larghezza de la colonna di sinistra come definita nel pannello di configurazione di Encompass.

Ora che le variabili sono state spiegate, diamo uno sguardo ad alcuni altri fattori che svolgono un ruolo diverso nella visualizzazione del sito

Cascading Style Sheets (CSS)

Cascading Style Sheets, o meglio chiamati CSS, sono un'altro importante pezzo del puzzle per l'aspetto delle tue pagine.

Guardando il file CSS nella cartella "Style" vedrai due file differenti, style.css e styleNN.css (Nota: c'è anche un file index.html che serve solamente ad impedire che qualcuno cerchi di visualizzare la lista di tutti i file nella tua cartella).

Questi due file servono per capire quale sarà l'aspetto della tua pagina. La ragione della presenza di due file deriva dalle differenze di visualizzazione tra browser, in particolar modo tra Netscape 4.x e i più recenti browser (IE, Mozilla, etc..).

Creiamo un nuovo set di stili solo per il blocco menu. Nei file degli stili, poichè è necessaria la modifica di entrambi i file styleNN.css e style.css, a meno che noi non volessimo mostrare le speciali proprietà del menu solo ai browser più nuovi, aggiungiamo qualche linea per creare una classe chiamata menu-title, più in evidenza, perchè contiene tutte lettere maiuscole ed è un po' più larga rispetto ai contenuti del menu.

.menu-title {

color: #FF3300;

font-variant: small-caps;

font-size: 16px;

font-weight: bold;

font-family: Arial;

text-align: right;

text-decoration: none;

}

Ora per gli elementi stessi del menu che saranno in buona parte dei link, dobbiamo creare delle definizioni addizionali, la classe menu-items. Primo dobbiamo definire come deve apparire il testo.

.menu-items {

color: #FFFF00;

font-size: 10px;

font-family: Arial;

text-align: right;

text-decoration: none;

}

Ora dobbiamo aggiungere poche linee su come vogliamo gestire la visualizzazione dei link

.menu-items A:link {

color: #FF9900

text-align: right;

text-decoration: none;

}

.menu-items A:hover {

color: #FF6600;

font-size: 12px;

text-align: right;

text-decoration: underline;

}

.menu-items A:visited {

color: #FF3300;

text-align: right;

text-decoration: line-through;

}

Non dobbiamo definire troppe cose perchè le proprietà non definite verranno ereditate dalla classe menu-items. (Nota: le proprietà del testo le abbiamo dovute definire perchè non c'erano nelle classi superiori).

Una volta create le definizioni dello stile della pagina siamo pronti per creare il vero modello del menu. Definiamo l’aspetto della tabella. Diciamo che vogliamo avere una tabella con delle strisce sul lato destro della tabella stessa.

Per creare il file del modello è sufficiente creare la tabella in HTML con delle piccole eccezioni che abbiamo descritto prima. Tanto per iniziare, mettiamo un commento per la chiarezza del codice

Iniziare la definizione del blocco con un commento è un buon modo per tornare indietro ed individuare eventuali errori quando si visualizza la pagina finale. Ora vogliamo settare una tabella che ci darà i nostri parametri

Così facendo, sarà più facile definire la dimensione complessiva del blocco stesso, nota inoltre che abbiamo usato la variabile $LEFTWIDTH all'interno delle parentesi quadre ?-- in modo da permettere al processore dei modelli di riconoscere l'html ed inserirvi la variabile che è stata definita da qualche altra parte. Dopo aver definito i parametri, costruiamo il vero aspetto della tabella stessa. Questo ci dà la tabella iniziale usando la variabile $BGCOLOR1, definita nel pannello di controllo di Encompass come bordo della pagina. Ora creiamo l'intestazione della tabella. Usiamo il tag span per applicare la nostra classe menu-title che avevamo creato prima, in modo che risalti un po'. E poi completiamo la riga di intestazione. Ora iniziamo a creare la parte di contenuto del blocco stesso. Poichè vogliamo che il blocco abbia una striscia lungo il lato sinistro aprire una nuova tabella per meglio definirne l'aspetto Questo ci permette di usare lo stesso colore del bordo come colore di sfondo per la tabella stessa. Qui usiamo $TITLE per definire l'intestazione della tabella che va all'inizio del blocco del menu. [-$TITLE-] Usiamo un file che contiene un pixel trasparente 1x1 chiamato spacer.gif e usiamo i tag HTML per aumentarne la dimensione fino ad arrivare alla larghezza che noi vogliamo per la striscia, in questo caso larga 25 pixel. Una volta ottenuta la striscia, andiamo avanti e occupiamoci dell'inserimento dei contenuti. [-$CONTENT-] Qui abbiamo usato il tag div per applicare la classe menu-items a tutti gli elementi della variabile $CONTENT. Così tutti gli elementi che noi impostiamo useranno le varie classi che abbiamo aggiunto al foglio di stile css. Fatta questa parte dobbiamo chiudere tutte le tabelle che abbiamo aperto. Poichè abbiamo aperto tre tabelle per fare il blocco, per far funzionare l'HTML correttamente in tutti i browser, bisogna chiudere le tre tabelle. Tabella 1 chiusa. Check.