MOS Template 101

Questo tutorial è una guida passo a passo su come creare in template per Mambo.
I software utilizzati in questo tutorial sono Photoshop 7, Dreamweaver MX, e Mambo Stand Alone
Server disponibile a questo indirizzo http://mosforge.net/projects/msas/ grazie a mambosolutions.com
Prendetevi una bella tazzona di caffè e cominciamo!
Prima di tutto alcune note importanti!
Per favore leggile bene, ti saranno di aiuto per comprendere meglio quello di cui andremo a parlare, e
capire se questo tutorial è quello di cui hai bisogno.
Cosa ci si aspetta da questo tutorial?
Questo tutorial è realizzato giusto per fare un template funzionante, non ha la pretesa di essere un codice
professionale!
Non ti insegnerà ad essere un grande designer…
Non è un codice con css, html, xml validati…
E’ una bassa e sporca maniera di fare un template funzionante
Se stai cercando delle scorciatoie e modi veloci per fare le cose questo tutorial non fa per te.
Cerca di capire!
Non sono omniscente; francamente non ho mai incontrato nessuno che lo fosse.
Se riscontri degli errori, segnalameli e li correggerò, non ti innervosire, sono un essere umano dopo tutto.
Tieni a mente che ognuno ha il suo modo di fare le cose, faro del mio meglio per rendere questo tutorial
comprensibile a tutti, tuttavia cerca di lasciar perdere le cose che già sai
Non posso sapere tutto, o mostrare tutto (non perché non voglio ma è imposibile)
Non essere impaziente, se dimentico di puntualizzare qualcosa, ricordamelo e lo indicherò
Se ritieni che stia commettendo qualche errore, o se sai fare qualcosa in un modo più semplice, fammelo
sapere, farò i cambiamenti necessari menzionando il tuo aiuto.
Prima di iniziare!
Il primo passo è quello di pianificare, le decisioni sono la chiave fondamentale nella progettazione,
concentrati su quello che desideri fare e non distaccarti da esso.
I colori sono l’aspetto principale di ogni template, averne troppi pochi potrebbe rendere il sito statico e
non attraente, averne troppi potrebbe renderlo troppo confuso per l’utente, e potrebbe essere dura per i
tuoi stessi occhi.
Decidi cosa pensi sia meglio utilizzare come immagine.
Pensa a quali potranno essere i tuoi visitatori:
I visitatori sono le persone sulle quali ti devi concentrare, non su quello che tu pensi, ma su cosa loro
pensano. Fai delle scelte accurate, guarda ai siti simili come tematiche a quello che stai per realizzare,
scriviti le idee su un pezzo di carta, ti sarà sicuramente di aiuto per focalizzare le idee.
Ho visto molti bei progetti rovinarsi perchè i designer avevano iniziato ad uscire dal progetto iniziale,
aggiungendo pezzi quà e là, un’idea è buona fintanto che continua ad essere parte del tuo progetto
originario. Una volta che hai perso il fuoco dal progetto originario sarà ancora più facile
perderloutilizzando Photoshop, con tutte le potenzialità che ha, gli effetti ecc… li vorresti utilizzare tutti,
vero? … Sbagliato, è la peggior cosa che potrebbe accadere iniziando la fase creativa
Non sto dicendo che essere creativi è sbagliato, ma un design troppo creativo potrebbe essere un
fallimento.
Come funziona?
In questo tutorial ti guiderò passo a passo come meglio posso, ma sei tu a dover prendere le decisioni da
solo, e provare un pò da solo, questa guida contiene istruzioni passo a passo e tu sei incoraggiato a fare
modifiche quando lo desideri, sei qui per imparare e non per seguire.
Un’altra cosa importante è che devi essere paziente, ed avere un pò di comprensione con il tuo PC. Le
cose spesso non lavorano come ci si aspetta da loro… non sbattere la testa sulla tastiera e non
gridare, non ti porta a niente, solo prova e riprova sinchè non raggiungi il risultato desiderato.
Ho detto abbastanza, spero che tu faccia del tuo meglio.
Se ti trovi in difficoltà, hai dei problemi, usa il forum, sarò felice di rispondeti.
Mi farebbe anche piacere poter vedere le tue creazioni una volta che le hai finite, registrati sul forum e
indica il tuo sito.
Aiuta gli altri mostrando il tuo lavoro!
OK iniziamo.
La prima cosa da fare è avere la grafica per il template, quindi apriamo il nostro Photoshop ed iniziamo.
Suppongo voi conosciate un po’ Photoshop, quindi sapete già dove trovare cose come layers, colori
swatches etc., se non li trovate la maggior parte sono sotto la voce del menu Window (il menu in alto),
selezionateli e compariranno sullo schermo accanto all’area di lavoro.
Suggerimento!
La maggior parte degli strumenti in Photoshop possono essere raggiunti per mezzo delle
scorciatoie tastiera, per spiegare come funziona quando vedete qualcosa come questo (Ctrl +
Alt + Shift + N) ciò significa che dovete tenere premuto il tasto Ctrl, e tenendo premuto Ctrl
dovete premete e tener premuto Alt, che tenendo premuto Ctrl e Alt, dovete premere Shift e
tenendo premuto Ctrl, Alt e Shift dovete premere N…
Sì sembra confusionario ma non preoccupatevi vi abituerete, oppure continuare ad usare il
vecchio click del mouse, le scorciatoie tastiera servono per risparmiarvi tempo.
Cominceremo creando un nuovo documento.
I uso di solito 760pix di larghezza (che risulta chiaro e ben visibile nella maggio parte degli schermi
800x600) il template sul quale lavoreremo avrà larghezza variabile, questo significa che si allargherà alla
risoluzione dello schermo dell’utente ma non potrà essere più piccolo di 760pix.
L’altezza non è importante, per avere un’area di lavoro comoda io userò 600pix.
Creiamo un nuovo file, andate su File > Nuovo (Ctrl + N)
Ok ora abbiamo una pagina Bianca è ora di fare qualche magia.
Prima di tutto inserirò delle linee guida che mi aiuteranno nel processo creativo, come sapete un sito
base di mambo consiste in: intestazione [header], moduli di sinistra [left], moduli di destra [right],
contenuto principale [main content] e piè di pagina [footer].
creerò le mia linee guida perchè abbiano un’altezza dell’intestazione di 180px, una larghezza di 150px per
i moduli di destra e sinistra, e 30px per il piè di pagina.
per creare le linee guida andate sul tool di spostamento (V)
ora cliccate sul righello e tenendo premuto trascinate verso giù o a destra, creerete così una nuova linea
guida.
Se non vedete i righelli in alto e a sinistra del vostro documento, andate nel menu View - > Linee Guida
(Ctrl + R)
Ok, ora il mio concetto base sul layout assomiglia a questo.
Non dovete per forza creare le linee guida, ma è mia opinione che rendono il processo creativo più
efficiente e solido, per non dire più facile.
Suggerimento!
Finche disegnati le linee guida possono infastidire, per nasconderle andate su menu View ->
(Ctrl + H)
Ora può essere un buon momento per salvare, non potrò mai dire abbastanza volte che il salvataggio è
MOLTO importante, quindi fate vostra l’abitudine di salvare spesso i vostri, vi ricorderò di salvare anche
nel corso della guida, ma fatelo da soli e prendetela come buona usanza.
Per salvare andate nel menu File -> Salva (Ctrl + S)
Pronti a partire? Allora iniziamo.
E' tempo di decidere, decidiamo quale tipo di immagine inserire,
decidiamo la struttura del sito, questo renderà il lavoro più facile,
gather tutti i materiali, es. stock photos, icone ecc.
Cominciamo la parte divertente.
Di solito inizio con l'header e lavoro da questo,
secondo me l'header è la parte più importante del sito, nella maggior parte dei casi ne è la parte più
visibile.
Ok cominciamo creando un nuovo set di livelli, questo permettera di gestire il disegno in modo un po' più
organizzato e sarà più facile trovare le cose, quando si disegnano layout complessi.
Per fare un nuovo set vai su Livello > Nuovo > Set Livelli
o clicca sull'icona Crea un Nuovo Set in basso tra i tool Livelli.
Se non vedi il set Tool Livelli vai su Finestra > Livelli così apparirà. ok? Bene, creiamo un nuovo set
livelli, chiamiamolo header, per cambiare il nome del set basta fare doppio click sul nome e scriverne uno
nuovo.
Il menu del tuo livello apparirà circa così:
ora dobbiamo creare un livello all'interno del set, selezionando prima il set cliccando sulla freccia blu alla
sinistra del nome, dovrebbe essere rivolta verso il basso quando è selezionata.
Ora vai su Livello > Nuovo > Livello (Shift + Ctrl + N) il tuo nuovo livello appare così,
dagli un nome e lascia il resto com'è
Ok ora abbiamo un set e un livello, andiamo alla parte magica, seleziona il tuo livello appena
creato,quando è selezionato sarà evidenziato, poi prendi lo Strumento Selzione Rettangolare (M)
con il tuo strumento, seleziona la porzione header del template
Ok ora decidiamo alcune combinazioni di colori, farò header in modo che sfumi dal verde chiaro al bianco,
per fare questo seleziona i colori, fallo cliccando sui colori così
Così appare il menu colore:
Non scendo nei dettagli sul colore in questo tutorial, ci sono troppe combinazioni e modi di selezionare un
colore, per ora ci atterremo ai colori base, sicuramente hai impostati i Colori per il Web,
allora puoi usare la barra colore, e colorare thumbnails to set the color you’re after.
Hai bisogno di selezionare due colori, Foreground e Background, per avere la sfumatura dal verde al
bianco, imposta per il foreground il verde e per il background il bianco, così
Fatto? Ora prendiamo lo strumento Gradiente
ora trascina il tuo strumento dal basso della selezione, assicurati che sia una linea dritta
NB!
Per costringere i tuoi movimenti ad essere dritti, tieni premuto il tasto (Shift) mentre scorri.
Una volta fatto dovresti avere qualcosa del genere
Belo vero? ok mettiamo un po' di pepe e mettiamo dei quadrati bianchi sopra, per farlo usiamo la
tecnica pattern
per fare questo cominciamo facendo un nuovo documento (Ctrl + N) con le seguenti proprietà
sul tuo docuemtno seleziona bianco come colore
(o qualunque colore hai selezionato come background quando hai fatto la sfumatura all'header)
zoomma il più possibile, così puoi vedere il tuo docuemtno, (lo strumento zoom è la lente (Z)) poi
seleziona lo strumento Penna (B)
imposta lo strumento a 1px
per impostarlo guarda supra e vedrai le opzioni
ora mettiamo un quadrato al centro dell'area così
ora mettiamolo in un pattern, per farlo vai su Edit > Definisci Pattern, dagli un nome e clicca ok.
Fatto questo, chiudi il docuemnto, (non occorre salvarlo) e torna al tu template.
Ok mettiamo il pattern nello sfondo dell'header, facciamolo selezionando il livello poi vai su Edit > Fill, poi
seleziona il pattern appena fatto (white_square nel mio caso)
puoi giocare con le impostazioni, con il blending mode e opacità,
io non spiegherò le differenze tra tutti i blending modes, perchè richiede troppo tempo. Io uso il blend
normale, opacità al 50% ecco l'effetto
ora puoi deselezionare l'area, fai Seleziona > Deseleziona (Ctrl + D)
ora salva il tuo lavoro File > Salva(Ctrl + S)
Ok lasciamo la parte dell'header per ora, ci torneremo più tardi.
Comincerò creando un nuovo set di livelli chiamato left
poi al suo interno un livello chiamato left_back, perciò il menu livelli ora appare così
Suggerimento!
puoi spostare i livelli o i set di livelli cliccando e tenendo cliccata la cartella o l’icona,
poi spostare in alto o in basso nella posizione desiderata, lo stesso per spostare i livelli
all’interno dei set.
Ora che abbiamo un nuovo set di livelli usiamoli, selezioniamo il livello left_back
poi prendiamo lo strumento Selezione rettagolare (M), e selezioniamo la porzione sinistra usando le linee
guida per aiutarci
Appare così:
Suggerimento!
Usa le impostazioni Snap per fare selezioni più facili, le trovi in Visualizza > Snap (Ctrl + Shift
+ ;)
se hai lo Snap abilitato tutte le selezioni e gli spostamenti will snap al punto più vicino, che
puoi impostare usando Visualizza> Snap > Impostazioni
Ora passiamo a riempire l’ area con un colore, seleziona il tuto colore in modo che sia prioritario,
Io scelgo il grigio chiaro
Ora prendi lo Strumento Secchiello (G)
Assicurati di avere il livello giusto selezionato e clicca all’interno dell’area selezioanta,
una volta fatto questo dovresti vedere qualcosa del genere
Ora vai avanti e deselezionalo Select > Deselect (D)
Io aggiungerò un livello di stile, giusto per darci un po’ di tono
Gli Stili sono uno strumento molto potente, sono anche molto complessi e prendono molto tempo al
webmaster, perciò sperimentiamoli così sai cosa fanno.
Ok, aggiungiamo un stile al bordo al nostro livello, selezionando il livello (left_back)
poi cliccando sul bottone Stile Livello, e selezioniamo Bordo dalla lista
Sto usando le impostazioni riportate qui sotto, ma tu puoi sperimentarne altre
Appare bene adesso, ma c’è ancora la possibilità di migliorare, aggiungerò un altro livello al left set, (Ctrl
+ Shift + N)
Chiamerò il mio livello (dark_sq)
Ora prendiamo lo strumento selezione rettangolare e selezioniamo l’area da riempire, poi selezioniamo il
colore, e riempiamolo.
poi se scegli di aggiungere uno stile a quel livello, io ho fatto un rettangolo verticale a destra del mio
livello (left_back), poi ho aggiunto un bordo bianco da 1px, ecco il risultato
dovresti avere quello che ti serve, vai avanti e salva (Ctrl + S)
Sembra andar bene così profondo vero?
ora potresti voler utilizzare quello che abbiamo fatto all’interno del template,
ma non sembra essere molto attraente per ora.
OK allora torniamo al gruppo di livelli della testata, per farlo basta premere la piccolo freccia accanto alla
cartella,
questa operazione ci aprirà il livello
ora creaiamo un nuovo livello in quel gruppo, io l’ho chiamato (nav _bar)
Userò quell livello per mostrare il pathway nel template
Ora che abbiamo creato il nuovo livello è giunto il momento di riempirlo in qualche modo, iniziamo a
prendere lo strumento selezione e selezioniamo un’area
per quanto il pathway sia alto, puoi utilizzare le linee guida per aiutarti, questo è il mio risultato
Ora selezioniamo un colore di riemimento, io ho scelto di fare una sfumatura, così ho scelto due colori
Lo sfumerò dal bianco all’arancione in modo che il colore in primo piano sia bianco e quello di sfondo sia
arancione
Ora selezionare lo strumento riempimento (G)
Suggerimento!
per passare ad uno strumento diverso all’interno della stesso menu tenere premuto (Shift)
e premere la lettera corrisponente sulla tastiera
per esempio (Shift + G) passerà dal riempimento piatto a quello sfumato.
Con lo strumento gradiente selezionato trascinarlo dall’alto al basso nell’area selezionata
Ora è possible deselezionare l’area Selezione > Deseleziona (Ctrl + D)
ora aggiungiamo uno spessore al livello (nav_bar),
per compiere questa operazione selezionare il livello e premere il pulsante per aggiungere uno stile al
livello ( F in un cerchio nella parte bassa del menu dei livelli)
selezionare lo stile desiderato dalla lista, nel mio caso ho scelto spessore ma sei incoraggiato a
sperimentare nuove soluzioni
Utilizzo uno spessore di 1px, di colore grigio (lo stesso del livello dark_sq)
dopo ciò dovrò allineare alcuni elementi perchè la barra sembra spostata,
devo spostarla di 1px verso l’alto (la larghezza del mio spessore) in modo da allinearla bene.
Il modo più semplice per spostare gli oggetti in spazi ridotti è l’utilizzo del nudging, per spostare la barra
più in alto di 1px selezionare lo strumento sposta (V)
e premi la freccia in alto sulla tastiera.
Suggerimento!
con lo strumento sposta selezionato e premendo i tasti freccia puoi muovere gli elementi (I
livelli selezionati o i gruppi) di 1px in tutte le direzioni
Questo è il risultato, non male vero?
Bene, diamo un pò di vita al nostro template, verifichiamo di avere abbastanza caffé e
procediamo. Non dimenticarti di salvare (Ctrl + S)
Io ho scelto una sempre popolare farfalla per il mio progetto; voi potete scegliere diversamente; questo è
lasciato alla vostra discrezione.
Ok, cominciamo a lavorare su un’immagine (o almeno su una parte di essa) nella vostra intestazione.
Qui arriva la parte difficile: voi avete bisogno della foto di qualcosa, ma non avete un bummer?
Io ho un vasto assortimento di cd di foto, che ho acquistato negli anni, così per me è semplice ottenere le
immagini di cui ho bisogno, ma guardiamo in faccia la realtà, voi non comprerete assortimenti di foto a
meno che non facciate a living designing stuff?
Buoni assortimenti di foto costano un sacco di soldi, così noi useremo quelli gratuiti.
Secondo me uno dei migliori assortimenti di gallerie fotografiche è stock.xchng http://www.sxc.hu,
che è il sito da cui ho preso l’immagine della farfallla che ho ascelto di usare.
Potete ottenerla andando qui: http://sxc.hu/browse.phtml?f=view&id=141508
(attenzione! Per avere l’immagine a grandezza naturale è necessario un account, quindi registratevi, è
semplice e gratuito).
Ok, ora che avete la foto, vorrete inserirla nel vostro progetto, quindi aprite l’immagine in Photoshop:
File > Apri (Ctrl + O)
Come potete vedere alcune foto sono abbastanza grandi; la farfalla, per esempio, è
1147 x 1001 pixels, troppo grande. Io ridurrò la grandezza ad una larghezza di 400px selezionando
Immagine > Dimensione Immagine
c
Ok, ora dobbiamo portare la foto nel nostro template: prima selezionate l’intera area andando su
Selezione > Tutto (Ctrl + A), poi copiatela andando su Modifica > Copia (Ctrl +C). Ora potete chiudere
(non è necessario salvare) e tornare indietro al template. Create un altro livello, e chiamatelo logo.
Assicuratevi che sia in cima al menù e che sia selezionato; il vostro menù dovrebbe apparire più o meno
come questo.
Ora incollate l’immagine della vostra farfalla, andando su Modifica > Incolla (Ctrl + V):
bene, ora che abbiamo un’immagine dobbiamo eliminare tutte le cose non necessarie, così da rimanere
soltanto con la farfalla. Ci sono molti modi di fare questo: potete usare le maschere, la gomma, ecc.
Io userò lo Strumento Lazo Magnetico, per selezionarla e poi eliminare il resto.
Prendete il lazo, e cominciate a selezionare il contorno della vostra farfalla: cliccate da qualche parte sul
bordo e trascinate lo strumento tutto intorno alla farfalla, tenendovi vicino al margine, e lasciando fare al
lazo il proprio lavoro; esso si chiuderà automaticamente; se non dovesse farlo cliccate nel punto che la
calamita non ha auto catturato: è abbastanza semplice, si tratta solo di capirlo.
La mia selezione appare così:
Ok, ora per eliminare tutto ad eccezione della farfalla, invertite la selezione andando su Selezione >
Inversa (Shift + Ctrl + I); una volta fatto questo cliccate su Cancella, poi andate su Selezione >
Deseleziona (Ctrl + D). Bingo! Qui c’è la vostra farfalla! Ora dobbiamo sistemare la grandezza e la
posizione; io metterò la mia nell’angolo in alto a sinistra, voi dove volete.
Ok, per spostare gli oggetti intorno, tutto quello che dovete fare è selezionare lo strumento Sposta,
selezionare il livello che volete spostare e tenendo premuto il pulsante sinistro del mouse trascinarlo dove
volete.
Per ridimensionare un livello o un insieme di livelli, prima selezionatelo/i, poi andate su Modifica >
Trasformazione libera (Ctrl +T): lo strumento trasforma vi consentirà di ridimensionarlo/i e ruotarlo/i.
Per ridimensionare cliccate su un angolo della sua selezione e trascinatelo dentro o fuori.
Per ridimensionare qualcosa e mantenere le sue proporzioni tenete premuto Shift mentre ridimensionate.
Se non lo fate.. rischiate di distorcere l’immagine.
Ora, usando gli strumenti Sposta e Trasforma ridimensionate e spostate la vostra farfalla dove vi piace di
più; la mia è così:
Ora aggiungerò un po’ di stili:
Ombra esterna, Ombra interna, Bagliore esterno con le seguenti impostazioni:
Dovreste provare a sperimentare stili diversi per ottenere il risultato che volete, o potete anche lasciarla
semplicemente com’è; il mio risultato finale è questo:
Ora potrebbe essere una buona cosa salvare (Ctrl + S)
Ok, realizziamo un veloce logo; non farò niente di particolare; questo tutorial sta andando per le lunghe;
aggiungerò semplicemente del testo con lo strumento Testo Orizzontale (T).
Poi selezionate il carattere, la grandezza e il colore usando il menu in alto
Poi cliccate nel punto dove volete che appaia il testo e digitate; dopo che avete fatto questo cliccate sul
segno di spunta in alto
than I have set the blending mode to Difference so that some of the white squares are visible on the text
and I have set the blending mode of my butterfly layer to Hard Light
Poi io ho settato le Opzioni di Fusione a “Differenza” così che alcuni riquadri bianchi siano visibili sul testo
e l’opzione di fusione del livello della mia farfalla a “Luce intensa”.
Il risultato finale dovrebbe apparire così:
Ok, adesso salviamo (Ctrl + S) e passiamo ad un’altra parte del template
Ok abbiamo bisogno di qualcosa alla destra del template, così i moduli avranno un posto dove andare.
Farò una semplice forma, niente di che, voglio che ad occhio sia costante,
comincio con il creare un nuovo set di livelli, poi creo un nuovo livello, il mio l'ho chiamato (right_bck).
Il mio livello ora appare così
ok scegliamo lo Strumento Polygonal Lasso (L) e, usando le giude per aiutarci, facciamo la selezione
(forma)
premere il tasto shift per costringere il suo moto ad andar dritto e 45 deg. linee,
ecco la selezione che ho fatto, notare il leggero angolo a 45° in alto,
potresti fare un rettangolo se vuoi, io volevo solo più dettagli
ok ora che hai un'area definita, assicurati di avere il livello di destra selezionato,
poi prendi lo Strumento Paint Bucket (G) e riempilo con il colore che desideri.
Una volta fatto, puoi deselezionare (Ctrl +D) e aggiungere uno Stile al Bordo,
io uso 1px grigio scuro. Una volta fatto il risultato è questo
ora sarebbe una buona idea salvare (Ctrl + S), qualcuno direbbe che sta andando sempre meglio
ma abbiamo ancora bisogno di un footer a destra? ok facciamo un altro set di livelli, chiamamolo footer, e
in esso creiamo un altro layer (footer_bck)
ora prendiamo lo Strumento Rectangular Marquee (M) e selezioniamo un'area per il nostro footer,
facciamolo alto quanto vogliamo, poi riempiamolo con un colore solido o un gradiente, la scelta sta a te.
Io ho usato il gradiente con bianco e arancione, come il mio livello (nav_bar),
poi ci ho aggiunto un bordo da 1px grigio scuro, ecco il risultato
Ok ora appare come un template, ma voglio aggiungere ancora un po' di dettagli, prima di passare alla
parte del taglio, perciò andiamo avanti e salviamo (Ctrl +S).
Dunque alcuni potrebbero pensare che il template sia già fatto, potrebbe essere così,
potremmo fare in resto con il css più avanti, ma voglio aggiungerci alcuni dettagli.
Cominciamo con il creare un nuovo livello nel nostro set left e chiamiamolo (mod_bck)
questo sarà il background dei titoli dei moduli (e.g. Menu Principale, Login Form etc.)
Ora prendiamo lo Strumento Rectangular Marquee (M)
e selezioniamo un'area rettangolare alta quanto vogliamo, sul lato sinistro così
Ora decidiamo cosa farne, io ho scelto di aggiungere un gradiente dal verde al bianco,
così riprende l'header, tu puoi scegliere diversamente un colore solido o nulla, se vuoi un gradiente basta
impostare i colori davanti e dietro,
poi prendi lo Strumento Gradient (G) e riempi il tuo livello (mod_bcsk). Nel mio caso ecco la selezione,
nota che ho cominciato un po' sopra alla selezione e ho continuato un po' sotto,
una volta
fatto questo, deseleziona (Ctrl + D). Ecco cosa ottieni
Sì, so che sembra un po' fuori di luogo così com’è, ma sono sicuro che hai dato uno sguardo al template,
e non era così giusto? Bene, faremo il resto quando arriviamo alla parte di codificazione del tutorial,
perciò andiamo avanti e salviamo (Ctrl + S)
Ok ora ciò di cui abbiamo bisogno è un'area per il nostro contenuto principale, giusto? Sebbene
potremmo lasciarlo com’è, mi sembra abbastanza buono, ci darei un tocco in più, dopo tutti sei qui per
imparare!
Ok, iniziamo creando un nuovo gruppo di livelli
Gli darò un mio nome (main_cnt), quindi creeremo un nuovo livello all'interno del gruppo, il mio sarà
(cnt_bck)
ora prendiamo lo Strumento Rectangular Marquee e selezioniamo l'area di contenuti principale
quindi lo riempiamo di un colore uniforme o con un gradiente, scegliete quello che ritenete idoneo, io
prenderò un gradiente, dal bianco ad un grigio chiaro, qui vedete come il tutto compare alla fine
carino no?, bene è già sufficiente per essere un template ma aspettate, gli aggiungiamo un'altra piccola
cosa, |dato che abbiamo quella farfalla lì ne metteremo un'altra in basso alla pagina; ok andiamo avanti
dopo aver salvato il nostro lavoro (Ctrl + S)
Ora avremo bisogno di una variazione della farfalla da mettere in basso dell'area dei contenuti,
quindi andiamo avanti e prendiamo una @ sxc http://sxc.hu/browse.phtml?f=view&id=139603
L'avete?, bene, allora apriamola in Photoshop, quindi ridimensioniamola affinchè abbia una larghezza di
400
quindi prendete il vostro Strumento Rectangular Marquee e selezioniamolo all'incirca come in questo caso
quindi copiatela Edit > Copy (Ctrl +C), ora chiudete questo documento e ritornate al template
una volta lì incollate la vostra farfalla nell'insieme livelli (main_cnt)
Ora utilizzado lo Strumento Magnetic Lasso contornate la farfalla di modo da poter cancellare qualsiasi
altra cosa, allo stesso modo in cui abbiamo fatto per la farfalla nell'intestazione, e se non vi ricordate
come fare, semplicemente rivedete un po' i vostri passaggi, ok questo è quello che otteniamo
Quanto grande è? Bene utilizzando lo strumento Free Transform la ridimensioniamo e la sposteremo
per poi spostarla nella posizione in cui deve stare, qui vedete il mio risultato
ok ora diamogli un po' di stile, gli aggiungerò un po' di outer glow (incandescenza esterna) per
enfatizzarla un po'
Ora imposterò la modalità Blending suHard Light, e sposterò il livello di riempimento a 25%
di modo che la farfalla sia in qualche modo trasparente, questo perchè avremo bisogno di scriverci sopra
in molti casi, e sarà logico poter vedere il testo (contenuto) sopra di essa.
Ora apparirà una cosa del genere
Ok non perdiamo tempo, quindi andiamo avanti e salviamo (Ctrl + S)
Ok, cercherò di spiegarvi la procedura di slicing (sezionamento, N.d.T.), ci sono molti modi differenti di
suddividere un'immagine di Photoshop ma per questo tutorial tratteremo solo le basi, di modo che
possiate avere un'idea di cosa esso fa; per questo particolare template useremo solamente 12 immagini,
(sì ho detto 12) date un'occhiata allo screenshot
guardate i differenti colori con i numeri corrispondenti, essi sono semplicemente le parti del nostro
documento che utilizzeremo per costruire il template, quindi dovremo esportali in un formato gestibile via
web come .gif, .png o .jpg; adesso dunque entrano in gioco il cosidetto slicing, utilizzeremo gli slice per
selezionare la parti di cui necessitiamo e che dovranno essere quindi salvate per il web, quindi Photoshop
creerà le immagini necessarie per noi.
Ok facciamolo, spiegherò tutto; per prima cosa dovremo impostare le guidelinea per aiutarci nella parte
dello slicing, quindi avremo bisogno di creare lo stesso slice, proseguiamo ed impostiamo la nostra prima
guidalinea dalla parte sinistra del template di modo da evidenziarla, il tutto (il bordo grigio scuro) in
questo modo
quindi facciamo lo stesso per ottenere il logo (farfalla e testo), quindi proseguiamo con la barra di
navigazione, di modo che sia tutto separato nei propri rettangoli in questo modo
ora avremo bisogno della parte verde gradiente della nostra intestazione, ma dato che abbiamo quei
riquadri bianchi su di esso, un nostro template avrà una larghezza variabile, e quindi questa parte
necessiterà di blocchi ripetuti, esistono in Photoshop degli strumenti speciali per la suddivisione ma non li
tratteremo in questo tutorial, quindi utilizzeremo lo screenshot per avere una guida, studiatelo com'è
fatto e fate lo stesso
ora avremo bisogno di una per separare la parte destra dal resto, fatela in modo che essa evidenzi il
bordo in grigio scuro
quindi impostiamo alcune guide per lo sfondo del modulo titolo in questo modo
ora impostiamo due ulteriori guide orizzontali di modo che possiate facilmente selezionare, nella parte
destra e sinistra
quindi un'ulteriore per il footer, fatela in modo che sia appena oltre il bordo esterno del contorno più
scuro
ok, ora abbiamo impostato 3 guide principali, una per ripulire la farfalla in basso e una nel mezzo, di
modo da essere in grado di selezionare la barra di navigazione, lo sfondo principale, edla patre in basso
(footer).
Ora con tutte le vostre guidelinea prendete il vostro Strumento Slice (K)
quindi disegnate tutte le parti necessarie, assicuratevi di avere lo snap impostato su ON: View > Snap
(Shift + Ctrl + ; ) una volta fatto questo dovrete avere qualcosa del genere (da notare che ho nascosto le
guide e le sezioni auto generate, di modo che possiate vedere meglio)
Ok il prossimo passaggio dovrà essere quello di nominare le sezioni, non è strettamente necessario ma
può rendervi la vita più semplice per capire di quale immagine si tratta quando passeremo la parte di
codifica, io, presonalmente, preferisco fare così, e dato che abbiamo solamente 12 immagini non è un
gran lavoro, quindi se avete deciso di fare questo prendete il vostro Strumento Slice Select (K)
quindi un doppio click sul numero di slice (sezioni), quindi apriremo un nuovo menu, in cui avrete la
possibilità di nominarlo facendo in modo che i nomi non abbiano spazi ma casomai il carattere di
underscore (sottolineatura, N.d.t.)
Ok ora che avete rinominato le sezioni, potrebbe essere un buon momento per salvare (Ctrl +S)
Ok ora andiamo avanti e salviamo per il web,
Avendo più funzioni, Photoshop offre un ordine esteso di attrezzi, impostazioni diverse di
colore, e scelte innumerevoli, ma questo non è compreso nel tutorial, io sto usando solo una
gif a 256 colori, e dal momento che ho solamente alcune immagini, la grandezza totale sarà
probabilmente di circa 100kb
Ok per salvare per il web vai su File > Salva per Web (Alt + Shift + Ctrl + S) , questo ti La porterà
ad un altro menu, usa le impostazioni che ho messo (nota: la gif a 256 colori non è incluso
nell’impostazione standard) perciò dovrai fare a mano
ok una volta fatto tutto con le impostazioni di colore, salva in qualche posto in cui lo puoi trovare
facilmente, Photoshop produrrà tutti gli archivi necessari, un archivio di html ed una cartella
(images di defualt)
Per ora ciò conclude questa parte del tutorial, noi abbiamo tutte le grafiche, adesso è ora di
metterle tutte insieme per fare una maschera, perciò per ora chiudiamo Photoshop e
cominciamo.
Prima di cominciare a mettere insieme la nostra maschera, abbiamo bisogno di un modo di guardare al
processo di disegno. Ci sono due modi per questo, uno sarebbe farlo su un server remoto, il secondo
sarebbe avere una copia locale installata e usarla per lo sviluppo. Io preferisco fare localmente il mio
lavoro di disegno e poi caricarlo sul server ed è quello che farò in questo tutorial.
Ok pronto? Cominciamo con l'installazione una copia di uno Strumento meraviglioso di Mambo Stand
Alone Server creato da www.mambosolutions.com ne puoi trovare una copia su
http://mosforge.net/projects/msas / questo ti permetterà di far andare localmente mambo.
ok ora che abbiamo installato MSAS, lo mettiamo sul disco C in una cartella di MSAS. Ora avviamo
Dreamweaver ed arriviamo a lui. Ecco un screenshot di come apare la mia area di lavoro
Il tuo molto probabilmente è diverso dal mio, ognuno ha il proprio metodo, io non posso insegnarti come
sistemare la tua area di lavoro o le preferenze, questi sarebbero temi estremamente estesi, perciò dovrai
trovarti il tuo sistema, io non posso dirti quali scorciatoie usare, come ho cambiato le mie preferenze e
probabilmente non saranno uguali alla tue impostazioni, così se hai difficoltà, nel trovare le cose, ti
suggerirei di leggere un po' della documentazione inclusa, se non sai dov'è, premi F1 sulla tua tastiera :
-)
Ok, cominciamo con le basi, cominciamo col creare un nuovo luogo (se non ne hai ancora uno)
Ecco come… vai su Sito > Nuovo Sito nel menu di Definizione del sito, scegli Basic poi dai un nome al
sito, io lo chiamo my_template, poi clicca su Avanti, scegli sì per la tecnologia server e PHP MySql. Vai
Avanti. Qui scelgi la prima opzione “Eseguendo modifiche e prove localmente”, poi scegli una cartella per
immagazzinare i tuoi file, preferibilmente nella stessa cartella in cui hai salvato il file di Photoshop e le
immagini tagliate, ti renderà la vita più semplice. Per la root vai su http://localhost/mambo45 a meno
che tu non abbia cambiato qualche cosa in MSAS. Clicca su Avanti, qui scelgi Sì, voglio utilizzare un
server remoto e vai avanti.
Scegli come connetterti al server remoto, io sto scegliendo Locale/Rete, poi ho bisogno puntare a dove
carico i miei file, se vuoi puoi puntare alla tua installazione di mambo, cartelle del template, nel mio caso
è C:MSASdiskwwwwmambo45templates
Se stai facendo da remoto, seleziona FTP e compila con il tuo Server e le informazioni del tuo login, per la
cartella usa il tuo /mambo_instal_dir/templates/
(es. /public_html/demo/templates/ or /httpdocs/demo/templates/) una volta fatto clicca su Avanti
seleziona No per il check in e out,
(è utile solamente se hai bisogno di monitorare quello che stai facendo tu o il tuo dev team) clicca su
Avanti, ora riguarda le tue informazioni e clicca su Fine se ti sembra tutto corretto.
Bene, così ora abbiamo il sito, cominciamo a farne lo scheletro del template. Avrai bisogo di una cartella
che avrà lo stesso nome del tuo template, poi in essa avrai bisogno di due cartelle (css) e (iamges)
Sul menu del tuo sito, vai su File> Nuova Cartella e dalle il nome del tuo template (my_template)
poi in essa crea un'altra cartella, la chiami css,
poi puoi trascinare le immagini della cartella nella cartella (my_template), o copiarle, poi creare 2 nuovi
file nella directory principale
vai su File> Nuovo e creane uno chiamato templateDetails.xml, ed index.php,
poi fanne un altro all'interno della cartella css chiamato template_css.css
quando fatto tutto la tua struttura apparire così
Ok ora noi abbiamo la nostra struttura base e tutte le immagini, possiamo iniziare con il
codice.
Prima di tutto prendi questo codice e inseriscilo nel file templateDetails.xml
Il codice è abbastanza chiaro, modificalo in base alle tue esigenze
Suggerimento!
i nomi dei file devono essere inseriti in questo file se si desidera distribuire il template o lo si
vuole installare con l’installer, assicurati che I file corrispondano a quelli delle immagini che
stai utilizzando
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
<name>my_template</name>
<creationDate>06/20/2004</creationDate>
<author>allmambo Crew</author>
<copyright>GPL</copyright>
<authorEmail>[email protected]</authorEmail>
<authorUrl>www.allmambo.com</authorUrl>
<version>1.0</version>
<description>template used in the MOS Template 101
tutorial</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/butterfly.gif</filename>
<filename>images/designed_by.gif</filename>
<filename>images/footer_bck.gif</filename>
<filename>images/left_bck.gif</filename>
<filename>images/logo.gif</filename>
<filename>images/main_bck.gif</filename>
<filename>images/mod_title.gif</filename>
<filename>images/path_left.gif</filename>
<filename>images/path_right.gif</filename>
<filename>images/path_var.gif</filename>
<filename>images/powered_by.gif</filename>
<filename>images/right_bck.gif</filename>
<filename>images/top_left.gif</filename>
<filename>images/top_var.gif</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
Ed ora il codice del css,
prendi il codice sottostante ed incollalo nel tuo file template_css.css
body, html {
margin:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
height: 100%;
}
tbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
/* Default MOS Class Settings
****************************/
td.pathway {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding-top: 1px;
padding-left: 0px;
}
a.pathway:link, a.pathway:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a.pathway:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
background-color: transparent;
}
/* Main Menu Styles
*********************/
a.mainlevel:link, a.mainlevel:visited {
color: #666666;
text-align: left;
font-weight: bold;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #EBEC9C;
padding-left: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
}
a.mainlevel:hover {
color: #FFFFFF;
text-align: left;
background-color: #000000;
width: 98%;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
a.mainmenu:link, a.mainmenu:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a.mainmenu:hover, {
color: #666666;
text-align: left;
}
a.sublevel:link, a.sublevel:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
a.sublevel:hover {
color: #666666;
text-align: left;
}
/* Module Styles
****************/
table.moduletable {
width: 100%;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
table.moduletable th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000000;
text-align : center;
background-image: url(../images/mod_title.gif);
height: 27px;
padding-top: 8px;
}
table.moduletable td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
}
/* Polls Style
**************/
.poll {
color : #666666;
line-height : 12px;
font-weight: bold;
}
/* Sections Style
*****************/
.sectiontableheader {
background-color : #CCCCCC;
color : #000000;
font-weight : bold;
font-size: 11px;
line-height: 13px;
}
.sectiontableentry1 {
font-size: 11px;
background-color : #E4E4E4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.sectiontableentry2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color : #DADADA;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.pagenav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a.pagenav:link, a.pagenav:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a.pagenav:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color
: #000000;
text-decoration : none;
background-color: #99CC00;
}
.small {
font-size : 11px;
color : #666666;
}
.smalldark {
font-size : 11px;
color : #333333;
text-decoration : none;
}
.createdate {
font-size : 10px;
color : #666666;
text-decoration : none;
font-weight : medium;
}
.modifydate {
font-size : 10px;
color : #666666;
text-decoration : none;
font-weight : medium;
}
/* Content Styles
*****************/
.contentpane {
font-size: 11px;
color: #000000;
}
.contentpaneopen {
font-size: 11px;
color: #000000;
}
.contentheading, .componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #FF6633;
text-align : left;
line-height: 16px;
padding-left: 20px;
}
.category {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a.category:link, a.category:visited {
color
: #333333;
font-weight
: bold;
}
a.category:hover {
color
: #000000;
text-decoration : none;
background-color: #99CC00;
}
/* Form Styles
****************/
form { /* borrowed from mambosolutions.com -- to fix empty space issues
*/
display:inline;
margin: 0px;
padding: 0px;
}
.button {
font-family
font-style
font-size
: Arial, Helvetica, sans-serif;
: normal;
: 10px;
font-weight
background-color
color
border
:
:
:
:
bold;
#F0F0F0;
#000000;
1px solid #000000;
.inputbox {
font-family
font-size
color
background-color
border
}
:
:
:
:
:
Verdana, Arial, Helvetica, sans-serif;
10px;
#000000;
#F0F0F0;
1px solid #000000;
}
/* Links
*********/
a:link, a:visited {
font-size
: 11px;
color
: #333333;
text-decoration : none;
}
a:hover {
color
: #000000;
text-decoration : none;
background-color: #99CC00;
}
/* For content item titles that are hyperlink instead of Read On
****************************************************************/
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color
: #000000;
text-decoration : none;
background-color: #99CC00;
}
.description {
font-size: 11px;
color: #000000;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #ffae00;
border-left: outset 2px #ff9900;
border-right: outset 2px #808080;
border-top: outset 2px #ff9900;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.offtab {
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.tabheading {
background-color: #ffae00;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
/* for modifying {moscode} output.
.moscode {
background-color: #f0f0f0;
}
Don't set the colour! */
/* Text passed with mosmsg url parameter */
.message {
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
ora prendi il codice sottostante ed inseriscilo nel tuo file index.php
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is
not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo ; ?></title>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>"
/>
<?php include ("includes/metadata.php"); // include keywords, and such
if (0) {
include ("editor/editor.php");
initEditor();
}
?>
<link href="<?php echo http://www.allmambo.com;?>
/templates/my_template/css/template_css.css" rel="stylesheet"
type="text/css" />
</head>
<body>
</body>
</html>
Fatto? perfetto, ora possiamo inserire alcune cose all’interno del file index.php,
Per prima cosa assicurati di aver selezionato index.php, vai nel menù di inserimento,
Window > Insert (Ctrl + F2) e premi il bottone di inserimento di una tabella, così
ora dovresti vedere un menù come questo, inserisci le stesse cose che ho scritto io,
Sto scegliendo una larghezza di 95% cosicchè la pagina non sia completamente riempita, puoi scegliere
differentemente.
Poi con la tabella selezionata, lo sarà di default, se non lo è seleziona uno dei bordi,next with the table
selected, it will be by default, apri il pannello delle proprietà, io ho il mio in fondo alla pagina Window >
Properties (Ctrl + F2) e imposta la tabella in modo che compaia centrata
ora seleziona la cella sinistra della tabella che abbiamo creato
ora vai nel menù di inserimento e premi sul bottone Inserisci Immagine
quindi inserisci l’immagine top left, o come l’hai chiamata,
usa Relativo a: Documento
ora, con la cella ancora selezionata, imposta la larghezza della cella alla stessa dimensione dell’immagine,
nel mio caso 151 px, scrivi 151, l’altezza puoi lasciarla vuota
ora seleziona la cella destra, nel pannello delle proprietà seleziona Vert Top, che vuol dire allinea tutto ciò
che sta dentro in alto.
fatto questo inserire al suo interno due tabelle entrambe di 100%, la prima di due colonne, la terza di 3
colonne in modo che il vostro layout sia così
ora inserire l’immagine del logo nella tabella in alto nella cella di sinistra, poi impostare la larghezza di
quella cella con la stessa larghezza dell’immagine, che nel mio caso, è di 297 px.
ora creare il background della cella di destra, per fare ciò selezionare la cella e nel pannello delle
proprietà selezionare la cella Bg background UR, e selezionare l’immagine desiderata, nel mio caso si
chiama top_var.gif,
fatto tutto dovrebbe apparire qualcosa simile a questa immagine
la prossima cosa da fare è l’immafine per il pathway, se fai qualcosa simile a quello che ho fatto io con
Photoshop dovresti avere 3 immagini, sinistra, variabile (qualcosa che possa essere allungato) e destra.
Andiamo avanti e mettiamole dove devono essere messe, ricordati di assegnare un valore alla larghezza
delle celle che si desidera rimangano sempre alla stessa larghezza all’interno della pagina, questo è molto
importante se si desidera che il template non sembri tutto rotto e scomposto.
Aggiungere altre due tabelle alla pagina, entrambe di 95% e centrate, con 3 colonne, ona sarà la tabella
del contenuto, l’altra sarà per il footer (o piè di pagina).
Creare la prima tabella in modo che le celle siano posizionate in alto al centro, ed inserire la larghezza
fissa per la spalla sinistra e per quella destra, creare la larghezza identica a quella del background, le mie
sono entrambe di 151 px, la cella centrale rimarrà vuota (nessun valore vuol dire che la cella verrà
ridimensionata in modo da adattarsi alla larghezza della finestra del browser)
La tabella del footer non è un grande problema poichè gli inserirò due immagini, una per il powered by e
l’altra per il made by sulla sinistra e sulla destra così ho bisogno di 3 colonne, potresti averne bisogno
solo di una, dipende da quello che desideri fare in esso
Alla fine dovresti avere qualcosa di simile a questo
ora inseriamo le immagini di sfondo per le celle di sinistra e di destra, poi inseriamo le immagini del
footer nelle loro posizioni e mettiamo lo sfondo desiderato alla cella
Al termien di queste operazioni si dovrebbe avere qualcosa di simile a questo
Prima di inserire il contenuto di MOS all’interno della pagina dobbiamo eseguire ancora alcune operazioni
Prima di tutto dobbiamo inserire le class del css alla cella centrale del contenuto
per fare questa operazioen bisogna dividere lo schermo tra codice e immagine
questo ci consentirà di vedere sia il codice che la pagina, quando si seleziona la cella nell’immagine, il
codice viene selezionato, aggiungere questo codice nella vista del codice <td> tag, (class=”content”)
in modo che il codice appaia così
<td class=”content”>
ora che abbiamo fatto questo inseriamo un’altra tabella nella cella del content, la creo di larghezza 98%
con una colonna ed una riga e deve essere impostata in modo da essere allineata al top, poi aggiungere
la class alla tabella (class=”content”) deve trovarsi nel tag <table> tag così
<table width="98%" border="0" cellspacing="0" cellpadding="0" class="content">
assicurati di aver selezionato la tabella giusta :-)
ora selezionare l’intera tabella in cui i moduli destra, sinistra e contenuto sono inseriti e assegnargli la
class (class=”100”) in modo che il codic esia così <table width="95%" border="0"
align="center" cellpadding="0" cellspacing="0" class="100">
Ora che abbiamo la struttura di base è arrivato il momento di riempirla con i contenuti, ma prima di
cominciare aggiungiamo delle class al file css, ti ricordi che le abbiamo definite per le celle dei contenuti e
per le tabelle?
Ora è arrivato il momento di aggiungerle nel template_css.css, andiamo avanti ed apriamolo.
Una volta aperto aggiungiamo queste tre righe di codice.
table.100 {
height: 1%;
}
table.content {
background-image: url(../images/butterfly.gif);
background-repeat: no-repeat;
background-position: right bottom;
height: 100%;
padding-top: 20px;
}
td.content {
background-image: url(../images/main_bck.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
La prima table.100 ha l’altezza di 1%, è necessario che la tabella abbia un valore dell’altezza definito
perchè ci serve per allineare la farfalla
table.content conterrà l’immagine della farfalla che voglio inserire in fondo a ciascuna pagina, così è
necessario associare l’immagine corretta che, nel mio caso, è butterfly.gif,
il tag height 100% è necessario affinchè la farfalla si trovi in fondo alla pagina, a meno che il contenuto
superi la lunghezza della pagina.
td.content contiene l’immagine di sfondo, nel mio caso si tratta di main_bck.gif, è impostato per trovarsi
in fondo alla pagina e ripetersi solo sull’asse x (orizzontalmente)
Una volta apportate le modifiche è possibile salvare il file template_css.css.
Fatto? perfetto, passiamo ad aggiungere i tag dei contenuti all’interno del template, iniziamo ad andare
nella cella destra dove i moduli di sinistra dovranno essere caricati e scriviamo:
<?php mosLoadModules ( 'left' ); ?>
<?php mosLoadModules ( 'user1' ); ?>
il codice completo dovrà essere così:
<td width="151" background="images/left_bck.gif">
<?php mosLoadModules ( 'left' ); ?>
<?php mosLoadModules ( 'user1' ); ?>
</td>
Poi aggiungere queste due stringhe nella colonna di destra, dove dovranno essere caricati i moduli di
destra
<?php mosLoadModules ( 'right' ); ?>
<?php mosLoadModules ( 'user2' ); ?>
l’intero codice sarà questo:
<td width="151" background="images/right_bck.gif">
<?php mosLoadModules ( 'right' ); ?>
<?php mosLoadModules ( 'user2' ); ?>
</td>
Fatto? Perfetto, dobbiamo inserire ancora un paio di cose ed abbiamo terminato, il path, ed il contenuto;
esistono molti altri tag per MOS ma noi utilizzeremo solo quelli di base in questo tutorial.
Aggiungi questa stringa nella cella del path, nota che ho inserito anche una class per farlo
<?php include "pathway.php"; ?>
l’intero codice apparirà così
<td background="images/path_var.gif" class="path">
<?php include "pathway.php"; ?>
</td>
Ora inseriamo il tag mainbody, all’interno della tabella contenuti
<?php include_once ("mainbody.php"); ?>
fatto ciò il codie dovrà essere così
<td valign="top">
<?php include_once ("../mainbody.php"); ?>
</td>
Questo è ciò che caricherà all’interno del vostro template i contenutit, prima che tu possa fare
un’anteprima del tuo template c’è ancora una cosa che è necessario fare,
Prima di tutto è necessario inserire alcune informazioni ai path delle immagini, in modo che MOS possa
trovare le immagini del template, a seconda di dove esse si trovano.
Per fare ciò verificare che index.php sia selezionato nel menù del sito e poi andare in Edit > Find and
Replace (Ctrl + F)
che aprirà questo menù
utilizzare queste impostazioni e la ricerca deve aver impostato
images/
Da sostituire con:
<?php echo $mosConfig_live_site;?>/templates/my_template/images/
Assicurati che (my_template) sia il nome della cartella che stai utilizzando per il tuo template.
una volta che tutte le impostazioni sono state corrette premi il bottone sostituisci tutti e salva il file.
Ora sei pronto per vedere il tuo template funzionante, puoi caricare il tuo template sul tuo server locale o
remoto e fare la preview.
E’ più o meno tutto, il resto consiste nel modificare il CSS per adattarsi al meglio al tuo template, con I
colori, le dimensioni ed i menu che desideri.
Esiste anche un altro tutorial che puoi trovare qui HERE
Per qualsiasi domanda non preoccuparti e falle,Iusa il forums,
Se trovi errori, o qualcosa che non è stato spiegato a sufficienza, fammelo sapere che sistemerò.
Puoi scaricare il template ed i file di Photoshop nell’area download.
Spero che tu abbia trovato utile questo tutorial e ti sia divertito quanto mi sia divertito io a
scriverlo :-)
Buona fortuna e buona progettazione di template; la comunitò di Mambo non ne avrà mai
abbastanza.
Se ritieni che questo tutorial ti sia stato di aiuto e meriti qualche riconoscimento, prendi in
considerazione l’ipotesi di una piccola donazione.