Sistema per temi HTML in AutoTheme

Manuale di istruzione: Creazione del tema - Parte 1

Creare un tema pronto in HTML da un modello grafico

Autore: Adam Docherty (a.k.a. Lobos)
http://www.webvida.com

Curatore: Shawn McKenzie (a.k.a. AbraCadaver)
http://spidean.mckenzies.net

Traduzione: Gian Paolo Renello (a.k.a. AlterEgo)
http://www.renello.org

E’ vietata la distribuzione di questo documento
Potete scaricare questo documento sui seguenti siti web:
http://www.maxdevitalia.com http://www.maxsos.com

Indice

Introduzione.

Prepariamo un tema grafico.
Suddividere ed esportare

Preparare il codice HTML
Il Componente Header
Il ComponentE Body
Preparazione del blocco
Il ComponentE Footer

IL Componente Header
Leggiamo il Codice HTML
logoArea
headerNav
bannerArea
Diamogli una larghezza del 100%!

I Componenti BLOCCO
Leggiamo IL CODICE HTML

Il Componente Footer
Leggiamo il codice HTML

CSS Styles
Il Componente Header
I Componenti Blocco
Il Compoentne Footer

Sommario

Copyright

Introduzione

Questo manuale di istruzione si concentra sulla creazione di un tema AutoTheme da un modello grafico come quelli disponibili sui siti Spidean o Webvida. Benché tutti i modelli grafici siano differenti, questo manuale rappresenta un approccio generale applicabile a qualsiasi tema che voi possediate o che creiate da voi stessi.

Per questo manuale useremo Macromedia Fireworks MX (da ora in poi lo chiameremo FW) come editor di immagini. FW si integra ottimamente con Macromedia Dreamweaver MX (da ora DW), che è l’editor HTML utilizzato in questa presentazione. Alcuni preferiranno utilizzare Adobe PhotoShop e Adobe GoLive o altri programmi, ma i concetti di base espressi qui rimangono gli stessi.

I file HTML e le immagini grafiche utilizzate in questo manuale sono posti nella cartella files/. Il tema di lavoro è situato nella cartella themes/AT-Tutorial/.

Prepariamo un tema grafico

Le Slice rappresentano un modo valido per creare facilmente il layout di tabella e la struttura del vostro modello quando siete ancora alle prese con un editor di immagini, ma fate attenzione, a causa della natura dinamica delle informazioni che devono essere visualizzate nel tema, le slice possono a volte essere più di ostacolo che d’aiuto. Ho scoperto che il modo migliore per lavorare con un output sliced è quello di utilizzare un approccio passo passo partendo dall’alto (header) e via via andare verso il basso (footer). Questo procedimento rende più semplice la visualizzazione di quanto stiamo facendo e si ha anche un maggiore controllo su come vengono create le vostre celle nella tabella, cosa estremamente importante!

Quando create il progetto della vostra pagina dovete ricordarvi di pensare a come esso funzionerà quando sarà un tema; ad esempio le aree blocchi saranno in grado di espandersi e contrarsi verticalmente senza interrompere il layout? I disegnatori di temi più abili devono tener presente anche il movimento orizzontale. La cosa più importante è una solida competenza in HTML, tabelle, righe e celle – se non avete competenza su questo, cercate su Google qualche manuale. Non sottolineerò mai abbastanza quanto siano importanti le tabelle nel progetto di un tema!

Suddividere ed esportare

Aprite “template.png” con FW. Come potete notare ho già suddiviso le immagini. Il layout della vostra pagina può essere creato in molti altri modi, ma useremo questo come esempio. In sostanza ciò che farò adesso è mostrarvi come esportare le slice e come editare il codice HTML suddiviso risultante, in maniera tale che questo codice funzionerà come un tema.

Dal menu File, selezionate Esporta
Nel box di dialogo di Export, clicccate sul pulsante Opzioni
Nel box di dialogo di impostazione HTML, cliccate l’etichetta Tabella e assicuratevi che tutte le impostazioni siano le medesime della figura sotto. Questo viene fatto perché non vogliamo immagini spacer. Perché? Perché danno fastidio…
Cliccate OK
Ora tornate indietro nel dialogo di Esporta, navigate fino alla cartella che volete usare per il tema
Inserite il modello nel campo Nome file
Selezionate Inserisci immagini nella sottocartella
Cliccate Salva

Figura 1 – Box di dialogo Esporta

Figura 2 – Box dialogo Imposta HTML

Prepariamo il codice HTML

Se andate nella cartella dove avete esportato le slice troverete ora un file “template.htm” e una cartella chiamata “images”. Ora dunque esiste una pagina web che potete vedere semplicemente aprendo il file nel vostro browser. Non preoccupatevi dei bordi delle tabelle. E’ una caratteristica di FW e verrà facilmente corretta.

Prima ho detto che avremmo utilizzato un approccio a layer per creare il modello del tema. Ora partiamo da questo punto e quello che cercheremo di fare sarà semplificare al massimo il layout togliendo le tabelle e le celle non necessarie.

Il Componente Header

Aprite “template.htm” in DW.

La prima cosa da fare è correggere le tabelle.

Sostituite tutte le occorrenze di “undefined” con “0”

Eliminate tutte le occorrenze di align=”left” all’interno dei tag <table>

Ora ci concentreremo sull’header del modello e cercheremo di separare questa tabella dal resto del codice HTML per spostarla in alto. Guardiamo intanto il codice:

Il codice HTML in grassetto è quello che terremo e separeremo dalla tabella principale che contiene il layout di pagina; agendo in questo modo le cose diventano molto più facili perché l’header di un tema di solito contiene una struttura di layout complessa e vogliamo modificarla senza però buttare all’aria il resto della pagina.

Tagliate il codice in grassetto e incollatelo sopra il primo tag <table> nel vostro documento HTML. Ora salvate e guardatelo nel browser. Dovrebbe apparire esattamente come prima, ma ora è indipendente dal resto del modello. Inserite qualche tag di commento per mostrare dove comincia e dove finisce il vostro header:

 tabella header 

Limpido e chiaro! Un approccio di tipo modulare alla progettazione di modelli significa che potete sempre ritrovare facilmente il codice che state cercando e inoltre aiuta nella riutilizzazione del vostro documento-modello. Torneremo fra poco sull’header, ma prima creiamo gli altri componenti di layout del documento-modello.

Il Componente Body

Ora separiamo l’elemento body, che è la zona che conterrà tutti i vostri blocchi. Il processo è decisamente simile a quello visto sopra quindi cominciamo con le modifiche!

Ecco il codice. Partiamo dal primo tag <table> (sotto il componente header):

Di nuovo, taglieremo il codice in grassetto e lo incolleremo sopra il primo tag <table> (sotto il componente header).

Preparazione dei blocchi

Ora dobbiamo preparare i blocchi. Diamo uno sguardo al codice body, dove sono visualizzati i nostri blocchi:

<table border="0" cellpadding="0" cellspacing="0" width="778">
<tr>
<td><img name="leftBlocks" src="images/leftBlocks.jpg" width="155" height="634" border="0" alt=""></td>
<td><img name="mainContent" src="images/mainContent.jpg" width="623" height="634" border="0" alt=""></td>
</tr>
</table>

Qui è dove creeremo il nostro layout per i blocchi. Per prima cosa risolviamo la questione delle colonne che per il momento comprende: sinistra, centro, destra:

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

<td style="width:25%;vertical-align:top">
Left Blocks will be here
</td>



<td style="width:50%;vertical-align:top">
center blocks will be here
</td>



<td style="width:25%;vertical-align:top">
right blocks will be here
</td>


</tr>
</table>

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.

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.

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.

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:

<table border="0" cellpadding="0" cellspacing="0" width="778">
<tr>
<td><img name="logoArea" 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" width="462" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><img name="bannerArea" 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" width="20" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><img name="bannerR" src="images/bannerR.gif" width="20" height="98" border="0" alt=""></td>
</tr>
</table></td>
</tr>
</table>

Leggiamo il codice HTML

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).

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" 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.

bannerArea

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

<td><img name="bannerArea" src="images/bannerArea.jpg" width="462" height="98" border="0" alt=""></td>

con questo:

<td style="background-image:url(images/bannerArea.jpg);width:100%;height:98px;">
<a href="http:web-templates.webvida.com"><img src="images/banner.gif" width="468" height="60" border="0" alt=""></a>
</td>

Abbiamo anche aggiunto un banner come riferimento. Si trova nella cartella images del manuale.

Ora aggiungeremo un altro attributo di stile alla tabella della bannerArea. In tal modo il banner risulterà carino e centrato.

Nuovo codice:

<td style="background-image:url(images/bannerArea.jpg);width:100%;height:98px; padding-bottom:5px;">
<a href="http:web-templates.webvida.com"><img src="images/banner.gif" width="468" height="60" border="0" alt=""></a>
</td>

L’attributo di stile di riempimento (padding) è utile per posizionare elementi all’interno di una cella di tabella. Potete anche usare il riempimento-sinistra, destra, alto, o il semplice riempimento per tutti i lati.

Creiamo un’ampiezza 100%!

Nel disegnare un modello la cosa più difficile che dovrete cercare di fare (ma anche quella che dà maggior soddisfazione) è quella di dare al vostro layout un’ampiezza del 100%, con la capacità di adeguarsi dinamicamente alla risoluzione schermo dell’utente.

Se date uno sguardo a “bannerArea.jpg” e a “headerNav.jpg”, vedrete che le immagini possono ripetersi orizzontalmente in maniera continua (senza vederne le “cuciture”). Per far questo è necessario solamente che le immagini siano larghe 1 pixel . Controllate voi stessi! Modificate le vostre . Non vedrete alcun cambiamento!

Tutto quello di cui abbiamo bisogno per ora perché l’header sia largo il 100% è aggiungere qualche attributo di stile, come potete vedere scritto sotto in grassetto:

<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td><img name="logoArea" src="images/logoArea.jpg" width="296" height="139" border="0" alt=""></td>
<td style="width:100%"><table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td style="background-image:url(images/headerNav.jpg);width:100%;height:41px;">Header Navigation Content</td>
</tr>
<tr>
<td style="background-image:url(images/bannerArea.jpg);width:100%;height:98px;padding-bottom:5px;">
<a href="http:web-templates.webvida.com"><img src="images/banner.gif" width="468" height="60" border="0" alt=""></a>
</td>
</tr>
</table></td>
<td><table border="0" cellpadding="0" cellspacing="0" width="20">
<tr>
<td><img name="headerNavR" src="images/headerNavR.gif" width="20" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><img name="bannerR" src="images/bannerR.gif" width="20" height="98" border="0" alt=""></td>
</tr>
</table></td>
</tr>
</table>

Bene, ora il nostro header ha ampiezza100%! Ora aggiustiamo il banner in modo da allinearlo a destra e abbia dunque un aspetto assai migliore! Semplicemente aggiungete l’attributo di stile in grassetto alle righe dell’ HTML:

Facile! Potete osservare che stiamo utilizzando parecchio codice di stile qui al posto dei normali tag di attributo HTML. Utilizziamo questo sistema perché molti di queste etichette di attributo in HTML stanno diventando obsolete e non saranno disponibili ulteriormente negli standard futuri del W3C. Questo non accadrà subito, ma è meglio cominciare sin da ora ad utilizzare le tecniche dello stile CSS!

Componenti Blocco

Ora torniamo indietro al nostro FW. Aprite “blockTemplate.png” e dateci un’occhiata:

Abbiamo diviso questo blocco in 9 pezzi e ciò che ne risulterà sarà una tabella come quella qui sotto:

Questo significa che il nostro blocco potrà ridimensionarsi orizzontalmente e verticalmente.

Leggiamo l’ HTML

Diamo uno sguardo all’output di suddivisione prendendolo da FW:

Chiaro e semplice, non c’è molto da fare qui, ma dobbiamo dare la possibilità a questa tabella di ridimensionarsi orizzontalmente e verticalmente. Il codice che deve essere cambiato è quello in grassetto sopra. Sotto è quello che abbiamo fatto:

<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td><img name="bTLcorner" src="images/bTLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bTop.jpg);width:100%;height:12px;"></td>
<td><img name="bTRcorner" src="images/bTRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td style="background-image:url(images/bLeft.jpg);width:12px;height:100%;"></td>
<td style="background-color: #ffffff";>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
<td style="background-image:url(images/bRight.jpg);width:12px;height:100%;"></td>
</tr>
<tr>
<td><img name="bBLcorner" src="images/bBLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bBottom.jpg);width:100%;height:12px</td>
<td><img name="bBRcorner" src="images/bBRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
</table>

D’ora in avanti, indipendentemente dal contenuto presente, il blocco lo tratterà senza rovinare il proprio aspetto e possiamo dunque aggiungerlo al template principale. Potete creare ogni tipo di blocco. Ne riparleremo più avanti.

Aprite di nuovo il vostro “template.htm” e concentratevi sul componente body:

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

<td style="width:25%;vertical-align:top">
Left Blocks are here
</td>



<td style="width:50%;vertical-align:top">
Center Blocks are here.
</td>



<td style="width:25%;vertical-align:top">
Right Blocks are here
</td>


</tr>
</table>

Scommetto che non immaginate proprio dove piazzeremo i blocchi! Prendete l’intero blocco di codice della tabella e aggiungete come da istruzioni. Ecco l’esempio per la colonna di sinistra:

<td style="width:25%;vertical-align:top">

<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td><img name="bTLcorner" src="images/bTLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bTop.jpg);width:100%;height:12px;"></td>
<td><img name="bTRcorner" src="images/bTRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td style="background-image:url(images/bLeft.jpg);width:12px;height:100%;"></td>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
<td style="background-image:url(images/bRight.jpg);width:12px;height:100%;"></td>
</tr>
<tr>
<td><img name="bBLcorner" src="images/bBLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bBottom.jpg);width:100%;height:12px;"></td>
<td><img name="bBRcorner" src="images/bBRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
</table>

</td>

Facile! Ora fate le aggiunte a tutte le colonne. Aggiungetene due a ciascuna colonna.

Ora abbiamo un layout che funziona, ma penso che ci sarà ancora qualche buco fra i blocchi. Usiamo ancora CSS per questo. Aggiungiamo anche qualche riempimento alle colonne. Per prima la colonna di sinistra:

<td style="width:25%;vertical-align:top;padding-top:10px;">

Quindi la colonna centrale:

<td style="width:50%;vertical-align:top;padding:10px;padding-bottom:0px;">

Ed infine la colonna di destra:

<td style="width:25%;vertical-align:top;padding-top:10px;">

Ora che abbiamo “riempito” i vuoti fra le colonne, dobbiamo inserire un riempimento anche fra i blocchi. Avremmo dovuto fare questo prima visto che vogliamo solo cambiare un’istanza di blocco, ma queste cose capitano. Il codice aggiunto è in grassetto:

<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td><img name="bTLcorner" src="images/bTLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bTop.jpg);width:100%;height:12px;"></td>
<td><img name="bTRcorner" src="images/bTRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td style="background-image:url(images/bLeft.jpg);width:12px;height:100%;"></td>
<td style="background-color: #ffffff";>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
<td style="background-image:url(images/bRight.jpg);width:12px;height:100%;"></td>
</tr>
<tr>
<td><img name="bBLcorner" src="images/bBLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bBottom.jpg);width:100%;height:12px;"></td>
<td><img name="bBRcorner" src="images/bBRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"style="height:10px"></td>
</tr>
</table>

Lo estendiamo per 3 colonne. Bisogna fare questo altrimenti avrà l’ampiezza solo della prima colonna. Non è molto importante in realtà perché non potete comunque vederlo.

Il Componente Footer

Leggiamo l’ HTML

Potete utilizzare la stessa procedura dei blocchi per creare il footer. Funziona esattamente con gli stessi principi e non sto qui a dimostrarlo, visto che lo abbiamo già fatto prima. E’ sufficiente dire che il codice è disponibile in “footerTemplate.htm” e il layout in “footerTemplate.png”. Provate a farlo voi stessi usando come riferimento il metodo dei blocchi .

Stili CSS

Se non avete familiarità con gli stili, cercate qualche manuale in Google. Non sono difficilissimi da usare e vi guideremo per mano durante questa fase del manuale.

Per prima cosa aggiungeremo un foglio di stile al nostro modello. Per fare questo si deve modificare “template.htm”, aggiungendo il codice in grassetto fra i tag <head>:

<head>
<title>template.gif</title>
<meta http-equiv="Content-Type" content="text/html;">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

Aprite il file “style.css” nella cartella style.

Partiamo dal tag <body>. Se date uno sguardo a “template.htm”, vedrete che il tag a un colore di sfondo:

Spostiamo questo nel foglio di stile ed aggiungiamo un altro attributo che imposterà i margini della pagina a 0:

body {
margin: 0px;
background-color: #7f90a0;
}

Ora creiamo una classe globale che definirà gli stili per tutti quei caratteri (font) che non hanno una classe individuale. Questo è utile perché alcuni moduli hanno del testo che non ha una classe dichiarata. Inoltre se volete creare un tema multipiattaforma questo terrà conto dei moduli.

table {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #174674;}
table A:link {COLOR: #FF5500;FONT-SIZE: 11px;font-weight: bold; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;TEXT-DECORATION: underline;}
table A:visited {COLOR: #FF5500;FONT-SIZE: 11px;font-weight: bold; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;TEXT-DECORATION: underline;}
table A:hover {COLOR: #666666;FONT-SIZE: 11px;font-weight: bold; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;TEXT-DECORATION: underline;}
table A:active {COLOR: #666666;FONT-SIZE: 11px;font-weight: bold; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;TEXT-DECORATION: none;}

Ora lavoriamo dall’alto verso il basso (il nostro sperimentato e affidabile metodo) e impostiamo le classi per i diversi componenti e blocchi.

Il Componente Header

<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td><img name="logoArea" src="images/logoArea.jpg" width="296" height="139" border="0" alt=""></td>
<td style="width:100%"><table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td style="background-image:url(images/headerNav.jpg);width:100%;height:41px;">Header Navigation Content</td>
</tr>
<tr>
<td style="background-image:url(images/bannerArea.jpg);width:100%;height:98px;padding-bottom:5px;text-align:right;">
<a href="http:web-templates.webvida.com"><img src="images/banner.gif" width="455" height="60" border="0" alt=""></a>
</td>
</tr>
</table></td>
<td><table border="0" cellpadding="0" cellspacing="0" width="20">
<tr>
<td><img name="headerNavR" src="images/headerNavR.gif" width="20" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><img name="bannerR" src="images/bannerR.gif" width="20" height="98" border="0" alt=""></td>
</tr>
</table></td>
</tr>
</table>

Stiamo per spostare tutti gli attributi di stile nel foglio di stile per la barra di navigazione. La linea che vogliamo modificare è quella sopra in grassetto. cambiate questa linea di codice in:

<td class=”headernav”>Header Navigation Content</td>

Aggiungete queste classi al vostro foglio di stile:

.headernav {
background-image:url(images/headerNav.jpg);
width:100%;
height:41px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #ffffff;
}
.headernav A:link {
COLOR: #ffffff;
FONT-SIZE: 11px;
font-weight: bold;
FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
TEXT-DECORATION: underline;
}
.headernav A:visited {
COLOR: #ffffff;
FONT-SIZE: 11px;
font-weight: bold;
FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
TEXT-DECORATION: underline;
}
.headernav A:hover {
COLOR: #cccccc;
FONT-SIZE: 11px;
font-weight: bold;
FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
TEXT-DECORATION: underline;
}
.headernav A:active {
COLOR: #cccccc;
FONT-SIZE: 11px;
font-weight: bold;
FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
}

Ora potete controllare facilmente l’aspetto dei font e dei link nella barra di navigazione dell’header.

Componente Blocco

Ora facciamo lo stesso con i blocchi, ma prima diamo ai blocchi una classe titolo e una classe contenuto. Il codice aggiunto è in grassetto.

<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td><img name="bTLcorner" src="images/bTLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bTop.jpg);width:100%;height:12px;"></td>
<td><img name="bTRcorner" src="images/bTRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td style="background-image:url(images/bLeft.jpg);width:12px;height:100%;"></td>
<td style="background-color: #ffffff";>
<div class="block-title">Block Title</div>
<div class="block-content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</td>
<td style="background-image:url(images/bRight.jpg);width:12px;height:100%;"></td>
</tr>
<tr>
<td><img name="bBLcorner" src="images/bBLcorner.jpg" width="12" height="12" border="0" alt=""></td>
<td style="background-image:url(images/bBottom.jpg);width:100%;height:12px;"></td>
<td><img name="bBRcorner" src="images/bBRcorner.jpg" width="12" height="12" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"style="height:10px"></td>
</tr>
</table>

Ora potete creare le corrispondenti classi in “style.css”. Non intendo mostrarlo qui perché ci vuole troppo spazio. basta che diate uno sguardo a “style.css”. Ora non siete più costretti a una sola classe di stile per tutti i vostri blocchi. Potete creare una classe per ciascun blocco (esempio titolo blocco di sinistra, contenuto blocco di sinistra). State solo attenti a dichiarare la vostra classe nel template e a crearne una nel foglio di stile.

Il Componente Footer

Bene. o0ra create una classe per il footer: siete pronti? Provateci da soli! Potete vedre come funziona controllando “style.css”, “template.htm” e “footerTemplate.htm”.

Sommario

Questo manuale ha mostrato come prendere un modello grafico tipo quelli disponibili sui siti Spidean e Webvida, o altrove in Internet, e creare un tema pronto in HTML. La Seconda Parte di questo manuale mostrerà come utilizzare questo HTML e creare dei modelli HTML da usare con AutoTheme.

Copyright

Nessuna parte di questo documento può essere riprodotta, depositata in un sistema per successivi recuperi o trasmessa, in qualsiasi forma o con qualsiasi mezzo, elettronico, meccanico, registrandolo o in qualsiasi altro modo, senza il permesso scritto precedentemente rilasciato da Shawn McKenzie.

Il contenuto di questo documento è fornito per solo scopo informativo, è passibile di cambiamenti senza preavviso e non può essere considerato come un impegno da parte degli autori o del detentore del copyright. Gli autori e detentori del copyright non si assumono alcuna responsabilità per qualsivoglia errore o inaccuratezza che possa comparire nel contenuto informativo di questo documento.

Tutti i nomi e marchi sono proprietà delle rispettive società.