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 (Ctr

l + 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>[e-mail]</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 : Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;

font-weight : bold;
background-color : #F0F0F0;
color : #000000;
border : 1px solid #000000;
}

.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 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. Don't set the colour! */
.moscode {
background-color:

#f0f0f0;

}

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