1. Prepariamo un tema grafico

2. Suddividere ed esportare

3. Prepariamo il codice HTML

4. Il Componente Header

5. Il Componente Body

6. Preparazione del blocco

7. Il Componente Footer

8. il componente Header

9. Leggiamo il codice HTML

10. logo Area

11. headerNav

12. bannerArea

13. Diamogli una largezza del 100%

14. I componenti BLOCCO

15. Leggiamo il codice HTM

16. il Componente Footer

17. Leggiamo il codice HTML

18. CSS Styles

19. Il Componente Blocco

20. Il Componente Footer

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

1 ) 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!

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

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

4) 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:

<­!-- Inizio Header --> tabella header <­!-- Fine 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.

5) 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):

6) Preparazione dei blocchi

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