 |
come utente registrato avrai vantaggi come downloads gratuiti, possibilitŕ di commentare articoli e intervenire sul forum, in base alle opzioni ed alla configurazione di questo sito.
|
Forum MAXdev
Manuali e guide
|
  Manuale di istruzione: Creazione del tema - Parte 1
Sistema per temi HTML in AutoThemeManuale di istruzione: Creazione del tema - Parte 1Creare un tema pronto in HTML da un modello grafico Autore: Adam Docherty (a.k.a. Lobos) Curatore: Shawn McKenzie (a.k.a. AbraCadaver)
E’ vietata la distribuzione di questo documento Indice Prepariamo un tema grafico. Preparare il codice HTML IL Componente Header I Componenti BLOCCO Il Componente Footer CSS Styles
IntroduzioneQuesto 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 graficoLe 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 esportareAprite “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.
Figura 1 – Box di dialogo Esporta Figura 2 – Box dialogo Imposta HTML Prepariamo il codice HTMLSe 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 HeaderAprite “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. Il Componente BodyOra 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 blocchiOra dobbiamo preparare i blocchi. Diamo uno sguardo al codice body, dove sono visualizzati i nostri blocchi:
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:
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 FooterOra 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 HeaderAdesso 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:
Leggiamo il codice HTMLlogoAreaQuesta 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). headerNavQuesta 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:
con questo:
Avete notate che la larghezza č 100%? Ci torneremo sopra dopo. bannerAreaQuesta zona contiene il banner preso dal sistema banner proprio del CMS. Sostituite questo codice:
con questo:
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:
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:
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 BloccoOra 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’ HTMLDiamo 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:
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:
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:
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:
Quindi la colonna centrale:
Ed infine la colonna di destra:
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:
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 FooterLeggiamo l’ HTMLPotete 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 CSSSe 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>:
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:
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.
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
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:
Aggiungete queste classi al vostro foglio di stile:
Ora potete controllare facilmente l’aspetto dei font e dei link nella barra di navigazione dell’header. Componente BloccoOra facciamo lo stesso con i blocchi, ma prima diamo ai blocchi una classe titolo e una classe contenuto. Il codice aggiunto č in grassetto.
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 FooterBene. o0ra create una classe per il footer: siete pronti? Provateci da soli! Potete vedre come funziona controllando “style.css”, “template.htm” e “footerTemplate.htm”. SommarioQuesto 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.
CopyrightCopyright © 2004 Shawn McKenzie. Tutti i diritti riservati. 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ŕ. |
