1

White Folio
Creato il : 24 settembre 2010 Da: Sara Presenti per Your Inspiration Web [http://www.yourinspirationweb.com] Contact Info: sara@mascaradesign.it

Struttura xhtml
Il template composto da una singola pagina html suddivisa in quattro sezioni: la home page, una pagina descrittiva da me denominata about, una pagina contenente una gallery fotografica e una pagina di contatto con un modulo contatti integrato e pronto alluso.

Home page

Sostituire il logo
Il logo inserito nel tema si trova nella cartella images (logo.gif) e pu essere sostituito direttamente in questa cartella oppure modificando il percorso o il nome dellimmagine nella seguente linea di codice: <img src="images/logo.gif" alt="logo" />

Aggiungere i link alle icone dei social network

Le icone dei social posizionati a destra del menu di navigazione possono linkare ai rispettivi profili su twitter, ad una eventuale funzione rss e ad un indirizzo e-mail. Anche le singole icone possono essere modificate, sempre sostituendo le immagini (images/icons) o modificando il nome o il percorso delle immagini nelle seguenti linee di codice:
<a href="http://indirizzoprofilotwitter.it"><img src="images/icons/twitter.gif" alt="Read my tweets" /></a>

Settare lo slider
Per impostare lo slider in modo corretto occorre seguire questi step: 1- Inserire le immagini che vuoi visualizzare nello slider nella cartella images 2- Aprire il file madrid.xml e modificare i percorsi/nomi delle immagini da caricare nello slider. I percorsi devono sempre essere specificati in modo assoluto, per esempio: http://www.indirizzotuosito.it/images/001.jpg

3- Nella pagina index.htm sostituire i percorsi assoluti dei tre file (swfobject.js, imagerotator.swf e madrid.xml) impostati nel tema di esempio con i percorsi del nuovo sito:

Esempio: http://www.indirizzotuosito.it/imagerotator.swf 4- Sempre nel file index.htm settare le dimensioni delle immagini da inserire nello slider, come segnato nella seguente immagine:

La prima misura (940) riguarda la larghezza, la seconda (368) laltezza. 5- Il tipo di animazione impostato nel tema di tipo blocks; tuttavia questo tipo di player permette di scegliere tra diversi effetti animati (fade, bgfade, blocks, bubbles, circles, flash, fluids, lines o slowfade) tutti molto originali e diversi tra loro. Per modificare questo effetto, nella pagina index.html sostituire il parametro contrassegnato nel seguente screenshot con uno degli altri effetti disponibili.

Per maggiori info sulle potenzialit e sulle caratteristiche del flash player Image Rotator ti rimando allapposita pagina di documentazione.

About

La pagina about suddivisa in due sezioni: a destra vengono visualizzati in modo dinamico gli ultimi messaggi pubblicati su twitter, a sinistra un breve testo descrittivo. Entrambe le sezioni possono essere modificate con estrema semplicit.

Settare gli ultimi tweets

Nella sezione di destra della pagina about possibile: 1- Modificare il titolo della sezione (nellattuale tema il titolo Short news); 2- Impostare laccount di Twitter da collegare alla sezione (nellattuale tema YIW); 3- Impostare il numero di tweets che si vuole visualizzare (nellattuale tema 5)

Modificare la descrizione
Nella sezione di sinistra della pagina about possibile modificare: 1- Il titolo della sezione (nellattuale tema About); 2- Il testo di descrizione allinterno dei paragrafi;

La classe leftAbout ha come immagine di sfondo lillustrazione della ragazza con la nuvoletta nera, e un bordo destro che funge da separatore per le due sezioni: .leftAbout {float:left;width:640px;background:url(../images/me.jpg) no-repeat bottom right;border-right:1px solid #b1b1b1;} Al paragrafo stato inoltre assegnato un padding per far si che il testo non si accavalli con limmagine. .leftAbout p {padding:0 280px 0 0;} Rimuovere o sostituire limmagine di sfondo molto semplice, basta modificare limmagine nella cartella images o modificare il codice nelle linee sopra riportate.

Modificare gli skills

Gli skills sono inseriti allinterno di un elenco puntato, modificabile direttamente da codice:

Portfolio

Nel portfolio ho integrato il Javascript Gallerific che permette di visualizzare alcune thumbnail a sinistra e a destra lingrandimento delle immagini inserite nelle thumbnail. Lo script molto pulito ed elegante e di facile personalizzazione. Le immagini da modificare sono nella cartella images/portfolio, mentre le modifiche da apportare al codice della pagina solo le seguenti:

1- Lintera sezione che integra una thumbnail e la relativa immagine ingrandita compresa allinterno del tag <li>, nel caso volessi aggiungere un nuovo lavoro devi copiare e incollare lintera sezione evidenziata dal bordo rosso. 2- In questa riga puoi modificare il percorso dellimmagine grande; 3- In questa riga puoi modificare il percorso della thumbnail; 4- Qua puoi inserire il titolo relativo allimmagine; 5- Qua puoi inserire un breve testo descrittivo relativo allimmagine.

Modificare i testimonials
Ogni testimonianza inserita allinterno di un paragrafo con una classe quote che gli inserisce delle virgolette grafiche a destra e un bordo tratteggiato in altro. Queste impostazioni possono essere modificate tramite foglio di stile:
.quote {background:url(../images/quote.gif) no-repeat top left; padding: 20px 0 0 60px; border-top:1px dashed #b1b1b1;}

Nella pagina index.htm possibile modificare quanto segue:

1- Il titolo della sezione (nellattuale tema testimonials); 2- I testi allinterno dei singoli paragrafi.

Contatti

Nella pagina contatti ho inserito un modulo contatti a sinistra e una sezione laterale contenente alcune informazioni di contatto (socials, recapito telefonico, ecc.)

Settare il modulo contatti

Il modulo contatti gi funzionante, con un controllo errori in Javascript nei campi nome, e-mail e cognome. Per impostare il tuo indirizzo e-mail, apri il file config.php allinterno della cartella contact_form e sostituisci lattuale indirizzo e-mail con quello a cui vuoi associare il modulo contatti.

Modificare le informazioni di contatto

Le diverse informazioni di contatto possono essere modificate agendo direttamente sulle seguenti righe di codice:

10

Conclusioni
Ti ringrazio per aver scaricato questo tema. Puoi usarlo liberamente per i tuoi progetti, personali e non; se preferisci puoi rimuovere il copyright posto nel footer, anche se ci piacerebbe che tu lo lasciassi, per una forma di cortesia verso Your Inspiration Web, che si propone di rilasciare periodicamente risorse di qualit come quella che hai appena scaricato. Se hai problemi nella personalizzazione del template o per maggiori informazioni ti invito a contattarmi allindirizzo e-mail indicato nella prima pagina del seguente manuale.

11