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"

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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&agrave; 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
Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Da Psd a…
  2. 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…
  3. 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…