MAXdev Italia - MAXdev il CMS per professionisti

Non sei ancora registrato? Puoi farlo adesso!. Come utente registrato avrai diversi vantaggi come la gestione dei temi grafici, la possibilità di inviare notizie e commenti.

MAXdev, ritorno alle origini. Incendio server farm di Aruba.it MAXdev 2.0 MAXpm Modulo alterpath versione beta

Home page

Tutorial Grafica

Manuale di istruzione: Creazione del tema - Parte 1

Mostra la posizione di questa pagina nella mappa

Manuale di istruzione: Creazione del tema - Parte 1

Potete farlo complicato quanto volete, ma per far ciò dovete possedere una buona conoscenza delle tabelle e del loro funzionamento. Per il momento ci concentreremo su un semplice layout a 3 colonne. Notate che ho usato % per definire le larghezze delle colonne. Questo significa che manterranno il loro aspetto senza tener conto della risoluzione dello schermo.

7) Il Componente Footer

Ora tutto quello che dobbiamo fare è separare il componente footer, cosa facile perché dobbiamo solamente togliere un po’ di tag inutili dal codice HTML originale.

Il Componente Footer
<table border="0" cellpadding="0" cellspacing="0" width="778"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td><img name="footerArea" src="images/footerArea.jpg" mce_src="images/footerArea.jpg" width="778" height="119" border="0" alt=""></td> </tr> </table>

Cancellate il codice in grassetto. Ora abbiamo una solida base sulla quale possiamo costruire il nostro tema, semplice da leggere e semplicissima da maneggiare. Se volete vedere il prodotto finito, aprite “template.htm” incluso in questo manuale

8) Il Componente Header

Adesso dobbiamo impostare il nostro header per renderlo in grado di visualizzare l’output del CMS.

Figura 3 – Immagine dell’header

Come visto nell’immagine sopra, il nostro header è diviso in 3 aree principali, quelle scritte in grassetto qui sotto:

Composizione Header
<!-- Begin Header Component--> <table border="0" cellpadding="0" cellspacing="0" width="778"> <tr> <td><img name="logoArea" src="images/logoArea.jpg" mce_src="images/logoArea.jpg" width="296" height="139" border="0" alt=""></td> <td><table border="0" cellpadding="0" cellspacing="0" width="462"> <tr> <td><img name="headerNav" src="images/headerNav.jpg" mce_src="images/headerNav.jpg" width="462" height="41" border="0" alt=""></td> </tr> <tr> <td><img name="bannerArea" src="images/bannerArea.jpg" mce_src="images/bannerArea.jpg" width="462" height="98" border="0" alt=""></td> </tr> </table></td> <td><table border="0" cellpadding="0" cellspacing="0" width="20"> <tr> <td><img name="headerNavR" src="images/headerNavR.gif" mce_src="images/headerNavR.gif" width="20" height="41" border="0" alt=""></td> </tr> <tr> <td><img name="bannerR" src="images/bannerR.gif" mce_src="images/bannerR.gif" width="20" height="98" border="0" alt=""></td> </tr> </table></td> </tr> </table> <!-- End Header Component-->

9) Leggiamo il codice HTML

10) logoArea

Questa zona conterrà il logo del sito, specifico del tema. C’è un sistema per impostare questa dal pannello di amministrazione del CMS, ma preferisco lasciarlo vuoto per permettere all’utente finale di inserire il proprio logo, in quanto allora diventa più semplice per lui fare in modo che il logo possa adattarsi senza problemi nel tema.

Il codice HTML per questa area è in grassetto e non dobbiamo fare più nulla con esso (forse qualcuno vorrà attivare su questo un link alla homepage del suo sito)

11) headerNav

Questa zona conterrà una barra per la login dell’utente insieme ad alcuni link visibili una volta che l’utente si sia loggato. Abbiamo bisogno di cambiare un poco il codice per permettergli di mantenere i dati. Per prima cosa dobbiamo creare un’immagine “headerNav.jpg” che diventi lo sfondo della cella di tabella <td>. Questo si fa facilmente con gli stili CSS, per cui basta rimpiazzare questo codice:

<td><img name="headerNav" src="images/headerNav.jpg" mce_src="images/headerNav.jpg" width="462" height="41" border="0" alt=""></td>

con questo:

<td style="background-image:url(images/headerNav.jpg);width:100%;height:41px;">Header Navigation Content</td>

Avete notate che la larghezza è 100%? Ci torneremo sopra dopo.

12) bannerArea

Questa zona contiene il banner preso dal sistema banner proprio del CMS. Sostituite questo codice:

Pagina: 2/6 $Pagina sucessiva\$

Home page

Tutorial Grafica

Manuale di istruzione: Creazione del tema - Parte 1