Da Psd a Xhtml: come trasformare il layout in XHTML+CSS?
Nella prima parte di questo articolo abbiamo visto come esportare, utilizzando lo strumento “sezioni” di Photoshop, i vari componenti del nostro layout “YIW Corporate“. Oggi ti “sporcherai le mani” con il codice: vedremo come realizzare il markup per tale layout, e il CSS associato.
Bando alle chiacchiere: cominciamo!
Il markup
Una volta terminata l’esportazione di tutti gli elementi dal file sorgente (nel nostro caso un file PSD realizzato con Photoshop) è tempo di pensare al markup che sarà la spina dorsale del nostro layout. Come spesso ricordato negli articoli di YIW, il contenuto di una pagina deve essere (almeno inizialmente) tenuto separato dall’aspetto visuale. Solo una volta definito, si potranno apportare aggiunte e modifiche per adattare il lavoro alla grafica.
Iniziamo, come al solito, con un documento vuoto, a cui colleghiamo un file CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/base.css" /> <title>YIW Corporate - Your Inspiration Web</title> </head> <body id="body-home"> <!-- qui il nostro contenuto --> </body> </html>
Partiamo dall’header del nostro layout: il logo sarà l’intestazione di massimo livello, mentre la navigazione la renderemo una lista non ordinata:
... <h1 id="logo"><a href=".">YIW financial</a></h1> <ul id="top_nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partner</a></li> <li><a href="#">Customer</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Affiliate</a></li> </ul> ...
Passiamo alla parte centrale: un semplice paragrafo servirà allo scopo di pubblicizzare la nostra azienda:
... <p>We are a young financial agency. Ti offriamo qualità fiducia e garanzie per un business innovativo e moderno. Your Inspiration Corporate, tutto intorno a te.</p> ...
Tocca ora al contenuto principale della nostra home page: la presentazione dei prodotti. Ci sono diversi approcci possibili: io ritengo che sia significativo utilizzare una lista (perché stiamo presentando appunto una lista di prodotti):
... <ul id="content"> <li> <h2>Conto <span>YourInspiration</span></h2> <img src="img/contoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" /> <p>Il conto bancoYourInspiration ...</p> </li> <li> <h2>Prestiti <span>YourInspiration</span></h2> <img src="img/prestitoYIW.jpg" width="300" height="116" alt="Il prestito Your Inspiration" /> <p>Pensionati, dipendenti statali ma anche disoccupati...</p> </li> <li> <h2>Mutui <span>YourInspiration</span></h2> <img src="img/mutuoYIW.jpg" width="300" height="116" alt="Il mutuo Your Inspiration" /> <p>Il mutuo Your Inspiration...</p> </li> </ul> ...
Una cosa interessante da notare è che gli elementi nella lista (titolo-immagine-descrizione) non rispettano l’ordine visuale (immagine-titolo-descrizione), giusto per ribadire che si ha la flessibilità, con i CSS (e un po’ di pazienza), di modificare l’ordine predefinito del browser a proprio piacimento.
Il footer sarà rappresentato da due semplici paragrafi:
... <p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p> <p>Terms and conditions - Privacy policy - Contact us</p> ...
Aggiungendo dei div per rafforzare le divisioni tra le varie sezioni, ecco il nostro markup di partenza, senza alcuno stile applicato:
... <body id="body-home"> <div id="nav-outer"> <h1 id="logo"><a href=".">YIW financial</a></h1> <ul id="top_nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partner</a></li> <li><a href="#">Customer</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Affiliate</a></li> </ul> </div> <div id="featured"> <p>We are a young financial agency. Ti offriamo qualità fiducia e garanzie per un business innovativo e moderno. Your Inspiration Corporate, tutto intorno a te.</p> </div> <ul id="content"> <li> <h2>Conto <span>YourInspiration</span></h2> <img src="img/contoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" /> <p>Il conto bancoYourInspiration ...</p> </li> <li> <h2>Prestiti <span>YourInspiration</span></h2> <img src="img/prestitoYIW.jpg" width="300" height="116" alt="Il prestito Your Inspiration" /> <p>Pensionati, dipendenti statali ma anche disoccupati...</p> </li> <li> <h2>Mutui <span>YourInspiration</span></h2> <img src="img/mutuoYIW.jpg" width="300" height="116" alt="Il mutuo Your Inspiration" /> <p>Il mutuo Your Inspiration...</p> </li> </ul> <div id="footer"> <p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p> <p>Terms and conditions - Privacy policy - Contact us</p> </div>
Stili: diamo una forma ai contenuti
Ora non resta che applicare i CSS a questo markup, per realizzare il nostro layout. Per questo progetto utilizzeremo 960 grid system, dato che Sara ha progettato tutto il layout seguendo la griglia messa a disposizione da questo framewwork. Come già spiegato da Nando nel suo articolo su 960gs, dobbiamo scaricare il framework dal sito ufficiale, e collegare i vari file CSS al nostro progetto, in modo da avere una solida base da cui partire.
Innanzitutto, applichiamo alcuni stili di default per il layout, come il font ed il colore dei link:
...
body{font:100%/1.5 "Trebuchet MS", sans-serif;}
h1{font-size:150%;}
h2{font-size:135%;}
h3{font-size:110%;}
a:link, a:visited {
color:#DF9615;
text-decoration:none;
}
...
Ora sistemiamo la struttura del layout, seguendo la griglia: utilizzeremo quella formata da 12 colonne, quindi dovremo aggiungere la classe “container_12” agli elementi che costituiscono lo scheletro del nostro layout. Sicuramente il logo e la lista di navigazione dovranno estendersi per tutta la larghezza; anche alla lista dei prodotti dovrà essere aggiunta la classe. Per quanto riguarda il div “featured” e “footer“, purtroppo dovremo aggiungere un div, poiché gli sfondi ripetuti si estendono ben oltre i 960 pixel della larghezza standard della griglia. Dunque il nostro markup si trasforma così:
<div id="nav-outer"> <h1 id="logo" class="container_12"><a href=".">YIW financial</a></h1> <ul id="top_nav" class="container_12"> <li><a href="#" id="home">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partner</a></li> <li><a href="#">Customer</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Affiliate</a></li> </ul> </div> <div id="featured"> <div id="slogan" class="container_12"> <div id="slogan-inner"> <p>We are a <em>young</em> financial agency. <br />Ti offriamo qualità fiducia e garanzie per un business innovativo e moderno. <br /><em>Your Inspiration Corporate</em>, tutto intorno a te.</p> </div> </div> </div> <ul id="content" class="container_12"> <!-- elementi della lista --> </ul> <div id="footer-outer"> <div id="footer" class="container_12"> <p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p> <p>Terms and conditions - Privacy policy - Contact us</p> </div> </div>
Il prossimo passo è quello di aggiungere le classi agli elementi della lista contententi i prodotti della società: dato che sono tre elementi affiancati, e abbiamo scelto una griglia di dodici colonne, ogni elemento dovrà essere largo quattro colonne. Questo effetto è ottenuto aggiungendo la classe “grid_4” agli elementi:
... <ul id="content" class="container_12"> <li class="grid_4 alpha"> <h2>Conto <span>YourInspiration</span></h2> <img src="img/contoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" /> <p>Il conto bancoYourInspiration ti permette di risparmiare il <strong>10% sul canone annuo</strong> e di fruttare subito lo <strong>0,5%</strong> del deposito. Flessibile, conveniente e stabile: scopri le nostre condizioni.</p> </li> <li class="grid_4"> <h2>Prestiti <span>YourInspiration</span></h2> <img src="img/prestitoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" /> <p>Pensionati, dipendenti statali ma anche disoccupati, studenti e casalinghe. I prestiti Your Inspiration ti regalano indipendenza economica e libertà finanziaria con <strong>rate a partire da soli 45 euro</strong>.</p> </li> <li class="grid_4 omega"> <h2>Mutui <span>YourInspiration</span></h2> <img src="img/mutuoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" /> <p>Il mutuo Your Inspiration a tasso agevolato offre numerosi <strong>incentivi per le giovani coppie</strong> e per chi ha finalmente scelto di investire su un immobile. <a href="#">Richiedi ora un consulto gratuito</a> e senza impegno.</p> </li> </ul> ...
Come puoi notare, ho aggiunto anche le classi “alpha” e “omega” per caratterizzare il primo e l’ultimo elemento, in modo da azzerare rispettivamente il margine sinistro ed il margine destro. Abbiamo ora terminato le modifiche al markup: il nostro layout comincia a prendere forma, ma ci sono ancora molte cose da sistemare. Iniziamo dalla testata.
Header
Cominciamo col nascondere il testo del titolo, sostituendo il logo dell’azienda:
...
#logo{
background: transparent url("../img/logo.png") 0 0 no-repeat;
height:114px; /* altezza dell'immagine da sostituire */
text-indent:-999em; /* nasconde il testo */
}
...
Ottenendo questo risultato. Come puoi notare il logo, che dovrebbe essere un link alla home del sito, non viene visualizzato come tale, poiché abbiamo nascosto il testo, che rappresentava l’estensione del link. Per questo, dobbiamo definire manualmente una larghezza e un’altezza:
...
#logo a:link, #logo a:visited {
display:block;
height:114px; /* larghezza dell'immagine logo */
width:380px; /* altezza dell'immagine logo */
}
...
Rendendo in questo modo cliccabile tutta la superficie del logo.
Passiamo ora a sistemare i link del menu: la prima cosa da fare è rendere la lista orizzontale:
#top_nav li {
float:left;
}
Come puoi vedere il paragrafo inferiore viene ad affiancarsi ai link. Per eliminare questo sgradevole effetto aggiungiamo la classe “clearfix” alla lista dei link nel markup, in questo modo:
... </div> <ul id="content" class="container_12 clearfix"> ...
E fissiamo un’altezza per tale elemento: ho deciso di impostarla a 42 pixel poiché tale è l’altezza del gradiente che andremo a inserire in seguito:
...
#top_nav {
height:42px;
}
...
Non resta ora che applicare gli stili per i singoli link:
#top_nav a:link, #top_nav a:visited {
color:#354B52;
display:block;
font-size: 90%;
height:27px;
line-height:27px;
margin: 0 25px;
text-align: center;
width:69px;
}
Abbiamo impostato colori e grandezza del font, e i margini. Le regole più importanti di questo gruppo sono quelle che fissano la larghezza e l’altezza (ricavate dalle dimensioni dell’immagine di sfondo per i link selezionati) e la dimensione della ‘line-height’: questa viene impostata allo stesso valore dell’altezza, facendo si che il testo sia centrato anche verticalmente.
Non resta adesso che inserire lo sfondo e l’header può dirsi completato:
#nav-outer{
background: #f3f3f0 url("../img/bg_top_nav.png") 0 0 repeat-x;
}
Questo è il risultato intermedio.
Sezione “featured”
Il prossimo passo è quello di realizzare la sezione intermedia, contenente il paragrafo di presentazione e la foto del team. Questa sezione può essere realizzata in più modi, alcuni più semplici altri più sperimentali. Discutendone in redazione, ad esempio, è stata proposta la realizzazione di un’unica immagine di sfondo molto lunga e poi posizionare il paragrafo opportunamente. Per questo esempio, però, ho pensato di presentare una realizzazione più “sperimentale”, utilizzando più immagini ed il posizionamento relativo.
Intanto, le immagini di cui avremo bisogno sono due: una che sarà ripetuta orizzontalmente, e quella con il team che verrà posizionata a destra del paragrafo introduttivo. Iniziamo col posizionare la prima immagine, come sfondo del div “#featured“:
#featured {
background:#FFF url("../img/bg_featured.png") 0 0 repeat-x;
margin-bottom:24px;
overflow: hidden;
}
Passiamo poi a modificare l’aspetto e la formattazione del paragrafo, cambiando il colore predefinito, la dimensione e la larghezza:
#slogan-inner p{
color: #FFF;
font-size: 130%;
width:458px;
}
#slogan-inner p>em{
color:#FBC508;
font-style:normal;
}
Passiamo ora alla parte “sperimentale” di questo layout, ovvero il posizionamento dell’immagine del team. La cosa più semplice è porla come background al div “#slogan“:
#slogan {
background:transparent url("../img/gente.png") 0px 0 no-repeat;
height:256px;
}
Questo è il risultato ottenuto: come puoi vedere, ci sono problemi nell’allineamento dell’immagine e del paragrafo, che vi si sovrappone. Per ovviare a questo inconveniente, occorrerebbe “spingere” a destra il div “#slogan“: questo effetto si può ottenere utilizzando il posizionamento relativo. Quindi il blocco precedente diventerà:
#slogan {
background:transparent url("../img/gente.png") 0px 0 no-repeat;
height:256px;
left:200px; /* sposta a destra il div di 200 pixel */
position:relative;
}
Abbiamo dunque spostato tutto il div “#slogan” a destra di 200 pixel: così facendo, però, anche il paragrafo è stato spostato. Dobbiamo rimettere “a posto” questo elemento. Il ragionamento alla base è lo stesso, solamente che ora dobbiamo riportare 200 pixel a sinistra il div “#slogan-inner“:
#slogan-inner {
left:-200px;
margin:0 auto;
padding-top:71px;
position:relative;
}
Questa volta abbiamo utilizzato un valore negativo di 200 pixel, per ripristinare il corretto posizionamento del paragrafo, aggiungendo allo stesso tempo delle regole per i margini e per il padding.
Contenuto principale e il footer
Non resta che occuparci delle descrizioni dei tre prodotti: dato che abbiamo utilizzato le classi di 960gs per realizzare le colonne, non dobbiamo che riposizionare le immagini. Ti ricordo che nel layout originale si trovano prima del titolo, mentre nel markup noi le abbiamo posizionate dopo per rispettare l’ordine semantico. La soluzione è molto semplice: impostiamo la proprietà “position:absolute” per le immagini, e spostandole in alto: in questo modo vengono estratte dal flusso della pagina e vanno a coprire il testo, che quindi dovrà essere spostato in basso tramite padding. In codice:
...
#content{
margin-bottom: 25px;
position:relative; /* fissa il contenitore come limite per gli elementi
posizionati assolutamente */
}
#content > li > img {
position: absolute; /* posiziona le immagini in modo assoluto */
top: 0; /* le fa combaciare con il limite superiore del div #content */
}
#content h2 {
margin-top: 146px; /* sposta il titolo e il contenuto in basso di 146pixel
che è l'altezza dell'immagine. */
}
...
A queste proprietà, vanno aggiunte quelle per modificare l’aspetto visivo, diventando quindi:
#content{
color:#354B52;
margin-bottom: 25px;
position:relative;
}
#content > li > img {
position: absolute;
top: 0;
}
#content h2 {
color:#B8CAD0;
letter-spacing:-1px;
margin-top: 146px;
text-transform: uppercase; /* trasforma il titolo in maiuscolo */
}
#content h2 > span {
color:#407587;
}
L’ultimo passo da compiere è quello di aggiungere lo sfondo al footer, e centrare il testo:
...
#footer-outer {
background-color:#407587;
clear: both;
}
#footer {
color: #FFF;
font-size:90%;
padding: 10px 0;
text-align:center;
}
A questo punto possiamo dire di aver ultimato il nostro layout.
Conclusioni
In questi due articoli ho voluto mostrare un po’ il modo di ragionare che ci può essere alla base della costruzione di un layout partendo da un file psd. Chiaramente, come ho già ripetuto molte volte, non esiste IL metodo migliore. Un punto importante, secondo me, è il fatto che dallo stesso layout grafico, sviluppatori diversi possono ottenere un buon risultato seguendo strade diverse, applicando metodologie più o meno all’avanguardia, o strani hack dal codice oscuro.
Credo che sia il bello di questo lavoro: le possibilità di miglioramento sono pressocché illimitate, e sta agli sviluppatori rendere diverso ogni coding piuttosto che adagiarsi sulle tecniche già imparate e consolidate. Innovare è la parola d’ordine secondo me. E noi, che viviamo in questo media cangiante che è il Web, non possiamo che essere innovatori in prima linea.
Download
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
17 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Da Psd a Xhtml: ... -
Come convertire un layout XHTML in un template Joomla? | Your Inspiration Web
[...] spiega come sezionare ed esportare il layout; sempre Giustino ha successivamente trasformato il psd in layout XHTML e CSS. Se ... -
Da Psd a Xhtml: come trasformare il layout in XHTML+CSS? |… | Esperto SEO
[...] Mutui YourInspiration Il mutuo Your Inspiration a tasso agevolato offre numerosi …More here: Da Psd a Xhtml: come trasformare ...
Grande Just!
Domani lo montiamo su Joomla.
Grazie Maurizio, e complimenti a te per l’ottimo lavoro ;)
Questo framework 360 cambia veramente il modo di concepire un layout in css, facendo diminuire di molto i div presenti nella pagina xhtml.
Dovrei approfondire di + questo framework.
Ciao Donald, e benvenuto :)
Il framework 960 è veramente un mezzo comodo e flessibile per creare i propri layout, anche per chi, come me, è un po’ più smanettone e non si accontenta delle classi fornite di base.
Se in futuro lo utilizzerai, ci aspettiamo di vedere i tuoi lavori però ;)
960 :-)
Articolo ben fatto e soprattutto con un linguaggio e una resa finale chiara e ben comprensibile, complimenti.
Come voi avete fatto in questo tutorial, consiglio vivamente di usare un framework (960 o altro), in quanto una volta che avete capito il suo meccanismo, avrete una maggiore velocità di esecuzione rispetto agli standard.
Grazie per i complimenti GaSe.
Concordo con te: la velocità di coding incrementa esponenzialmente. Tu lo utilizzi per tutti i tuoi progetti, oppure per qualcuno hai trovato difficoltà nell’integrazione?
sono rimasto “fuori dal giro” del web-design per molti anni e dovendo tornare per necessità al web mi sto rendendo conto che sono cambiate tantissime cose.
Tutti qusti concetti mi saranno utili per rinnovare le mie conoscenze anche se mi spaventa il fatto di dover cominciare tutto daccapo.
Grazie per tutti i preziosi consigli presenti su YIW !
Ciao Mauro e benvenuto su YIW.
Grazie per i complimenti e ti auguro tutto il meglio per il tuo ritorno in questo fantastico mondo ;)
Just
Ottimo lavoro anche dal punto di vista didattico per mostrare gradualmente la realizzazione in corso d’opera.. avrai fatto una faticaccia a ricostruire tutto il collegamento logico :)
Domanda io condivido in toto quanto affermato dall’autore di http://www.yourinspirationweb.com/2009/09/27/come-trasformare-un-psd-in-xhtml-e-css-senza-perderci-la-ragione/
quando dice
“il contenuto testuale del sito venga inserito prima di ogni altra cosa”
C’è qualche soluzione per fare in modo che la parte content sia vista dai motori di ricerca prima del menù senza ovviamente compromettere la visualizzazione di
http://www.yourinspirationweb.com/example/your-inspiration-corporate/
ciao francesco, lavorando con le proprietà relative al posizionamento degli elementi (position) puoi spostare qualsiasi elemento dal flusso del documento e riposizionarlo dove preferisci. per fare questo però devi avere un’ottima conoscenza dei fogli di stile, non è roba molto semplice.
Ciao Nando. si.. è quello che sto cercando di caprie e fare :)
Forse potrebbe essere una buona cosa se l’autore di questo articolo in futuro integrasse una modifica per spostare prima di ogni cosa i contenuti
Condivido anch’io l’utilizzo del framework 960. Permette anche ai grafici di fare un lavoro meglio bilanciato.
Qualche anno fa mi hanno insegnato come costruire una pagine web e come pubblicarla. Nel mio piccolo ho costruito il sito della scuola lavorando con frontpage e con il programma ftp. Ho notato che sono rimasta indietro e vorrei dare una veste grafica al sito più gradevole. E’ possibile trasformare il sito in css? premetto che di fogli di stile non capisco niente, come posso fare per dare al sito un aspetto più aggiornato?
un’insegnante webmaster piccola piccola….. camilla