MakingSEO coded, Template CSS Gratuito con Consigli sulla Conversione PSD-to-HTML

29 settembre 2009
Freebie, Tutorial, Web Design
Questo articolo è stato scritto per il PV.M Garage da piervix
Commenti (19)»

Ho sperato (forse continuo a farlo) che qualche supereroe potesse dare una mano alla nostra economia, risollevandola da una crisi che oggi, aihmè, inizio a vivere anche io.
Speranza vane fino ad ora. Tant’è che si mescola agli altri l’insano pensiero che superpoteri e superoi non siano le giuste armi per combattere i mali di questa nostra “strana” società.
Io non posso di sicuro salvare il mondo, dannazione! Ma… ho codificato per voi il Template PSD MakingSEO. Continuando a leggere è possibile approfondire sulle tecniche utilizzate nel processo di conversione PSD-to-HTML e scaricare il template completo.

In precedenti tutorial pubblicati sul Garage si è già visto come procedere quando si intende convertire un design in PSD in una vera e propria pagina web. Per cui in questo post si esporrà una semplice panoramica sul codice. Gli articoli ai quali si è appena fatto riferimento sono i seguenti:

In basso trovi il link al risultato finale e il bottone per il download del pacchetto completo. Ricordo che tutti i file scaricabili in questo post sono rilasciati con Licenza Creative Common (CC 2.5 Attribuzione Italia) anche per uso commerciale.

Risultato Finale e Download

Qui puoi vedere una dimostrazione della pagina web creata e scaricare l’archivio che contiene tutte le sorgenti di makingSEO CSS Template.

Coding makingSEO

Si comincia partizionando il template in cinque sezioni: header, down-header, contents, sidebar and footer. Inoltre si aggiungono due div generali, main_container e container. Il primo per aggiungere il top-background e il secondo per limitare i vari segmenti della pagina web in 960 pixel.
makingSEO CSS Template

Ora è tempo di codificare.
Inserire nella directory principale “makingseo” la cartella “images” e i file “index.html”, “style.css” e “reset.css” (generalmente utilizzo il reset Yahoo! YUI Reset CSS, ma in questo caso ho deciso di testare il reset di Blueprint CSS Framework).

In basso il codice completo presente nel file “reset.css”, resta inteso che è sempre possibile ottimizare il codice di reset in base alle proprie esigenze.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.5;
}

table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

Passo 1 – Struttura Generale

Il markup per la struttura generale del layout (madificare “index.html”).

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>makingSEO - Improve Your Business | A free CSS Template | made in PV.M Garage</title>
<link href="reset.css" rel="stylesheet" type="text/css" /><!-- blueprint css reset -->
<link href="style.css" rel="stylesheet" type="text/css" /><!-- css style for makingSEO -->
</head>
<body>

<div id="main_container"><!-- for general background -->
<div class="container clearfix"><!-- to keep in 960 pixels the segments -->

  <div id="header"><!-- here we'll add logo and menu -->
  </div>

  <div id="down_header"><!-- here we'll add slogan, screenshot and call-to action button -->
  </div>

  <div class="contents"><!-- here we'll add the info boxes -->
  </div>

  <div class="sidebar"><!-- here some side informations -->
  </div>

</div><!-- end container -->

<div id="footer"><!-- here the footer -->
</div>

</div><!-- end main_container -->

</body>
</html>

Per riprodurre il background apprezzato nel template PSD utilizziamo la seguente immagine.
makingSEO CSS Template

Sotto le regole di stile CSS.

@charset "utf-8";
/* CSS Document */

body {
  background: #f5f5f5;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 12px;
  color: #666;
}

/* General */

:focus {
	outline: 0;
}

a {
  text-decoration: none;
}

ul {
	list-style-type:none;
	color: #fff;
}

/* Container */

#main_container {
  background: url("images/bck.jpg") repeat-x top; /* General Background */
}

.container {
  width: 960px; /* here the width for the segments */
  margin: auto;
}

.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

Passo 2 – Header con Logo e Menu

Ora c’è da aggiungere logo e menu nell’header. Le seguenti immagini sono quelle esportate dal documento photoshop utili nella realizzazione della pagina (x)html.
makingSEO CSS Template

Il codice (x)html completo dell’header.

<div id="header">
    <div class="logo">
      <h1><a href="#">makingSEO - Improve Your Business</a></h1>
    </div>
    <div class="menu">
      <ul>
        <li><a href="#">Services</a></li>
        <li><a href="#">Tools</a></li>
        <li><a href="#">Strategies</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>

E ora… lo stile.

/* Header */

#header {
  height: 156px;
}

.logo {
  float: left;
  background: url("images/light_head.png") no-repeat top left;
  height: 156px;
}

.logo h1 {
  text-indent: -9999px;
  margin-top: 40px;
}

.logo h1 a {
  display: block;
  background: url("images/logo.png") no-repeat top;
  width: 398px;
  height: 61px;
}

.menu ul {
  float: right;
  margin-top: 5px;
  padding-bottom: 10px;
  width: 377px;
  text-align: center;
  background: url("images/dashed_h.png") no-repeat bottom;
}

.menu ul li {
  display: inline;
  padding: 10px 10px 70px 10px;
  background: url("images/dashed_v.png") no-repeat top right;
  margin-left: -5px;
}

.menu ul li a {
  color: #fff;
  padding-bottom: 70px;
}

.menu ul li:hover {
  background: url("images/menu_hov.png") repeat-x top right;
}

Passo 3 – Slogan e Screenshot nel Down-Header

Inserire nel segmento Down-Header uno slogan diretto, uno screenshot di un caso di successo e un call-to-action button.
Di seguito le immagini utilizzate nella costruzione di questo segmento
makingSEO CSS Template

Il codice html per il Down-Header.

  <div id="down_header">
    <div class="d_h_left">
    </div>
    <div class="d_h_right">
      <span class="button"><a href="#"></a></span>
    </div>
  </div>

Lo stile per questo segmento.

/* Down Header */

#down_header {
   height: 320px;
   padding-top: 25px;
}

.d_h_left {
  float: left;
  width: 520px;
  height: 308px;
  margin-left: -14px;
  background: url("images/screenshot.png") repeat-x top left;
}

.d_h_right {
  float: right;
  width: 450px;
  height: 138px;
  margin: 16px 0 0 4px;
  background: url("images/slogan.png") no-repeat top left;
}

.button a {
  display: block;
  width: 324px;
  height: 70px;
  position: relative;
  top: 145px;
  left: 61px;
  background: url("images/call-but.png") no-repeat 0px -70px;
}

.button a:hover {
  background: url("images/call-but.png") no-repeat 0px 0px; /* CSS Sprites technique for the button*/
}

passo 4 – Contenuti

Questo è con tutta probabilità il cuore del layout: una griglia con quattro paragrafi informativi (con relative intestazioni) opportunamente impreziositi dall’uso di alcune icone.
makingSEO CSS Template

Modificare “index.php” aggiungendo le seguenti righe di codice…

<div class="contents">
    <div class="post_cont">
      <h1 class="top_left"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</p>
    </div>
    <div class="post_cont">
      <h1 class="top_right"><a href="#">In One Month You Could Be in the First Page of Google</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <span class="button_post_g"><a href="#"></a></span>
    </div>
    <div class="post_cont">
      <h1 class="down_left"><a href="#">Organize Your Business with our Experts</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    </div>
    <div class="post_cont">
      <h1 class="down_right"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <span class="button_post_o"><a href="#"></a></span>
    </div>
  </div>

… e il file “style.css” con le regole di stile riportate qui in basso.

/* Contents */

.contents {
  float: left;
  width: 690px;
}

.post_cont {
  width: 310px;
  float: left;
  margin: 0 30px 30px 0;
  background: url("images/dashed_v_g.png") no-repeat right;
  height: 300px;
}

.post_cont h1 a {
  padding-bottom: 0px;
  font-size: 14px;
  color: #424242;
  display: block;
}

.post_cont h1 a:hover {
  color: #d5943f;
}

.post_cont p {
  margin-left: 10px;
  padding: 15px 10px 30px 0;
  background: url("images/dashed_h_g.png") no-repeat top right;
}

h1.top_left a {
  background: url("images/ico_top_left.png") no-repeat left center;
  padding: 20px 5px 20px 85px;
}

h1.top_right a {
  background: url("images/ico_top_right.png") no-repeat left center;
  padding: 20px 5px 20px 70px;
}

h1.down_left a {
  background: url("images/ico_down_left.png") no-repeat left center;
  padding: 20px 5px 20px 72px;
}

h1.down_right a {
  background: url("images/ico_down_right.png") no-repeat left center;
  padding: 20px 5px 20px 72px;
}

span.button_post_g a, span.button_post_o a {
  display: block;
  width: 256px;
  height: 46px;
  position: relative;
  top: -10px;
  left: 83px;
}

span.button_post_g a {
  background: url("images/call-but-post.png") no-repeat right top;
}

span.button_post_o a {
  background: url("images/call-but-post_o.png") no-repeat right top;
}

Passo 5 – La Sidebar

Le informazioni di contorno alle attività della compagnia vengono riportate nella sidebar. Di seguito il codice html.

  <div class="sidebar">
    <div class="sidecont">
      <h2>Side Info</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="sidecont">
      <h2>Blog Posts</h2>
      <ul>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
      </ul>
    </div>
    <div class="sidecont">
      <h2>Working on...</h2>
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      <a href="#"><img src="images/img_side.jpg" alt="" /></a>
    </div>
  </div>

Aggiornare lo stile con le seguenti righe di codice.

/* Sidebar */

.sidebar {
  float: right;
  margin-top: -50px;
  width: 220px;
  background: #fff;
  border: 1px solid #dcdcdc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.sidecont {
  margin: 18px 10px;
  font-size: 11px;
}

.sidecont img {
  margin-top: 10px;
  border: 3px solid #bdbdbd;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.sidecont h2 {
  font-size: 18px;
}

.sidecont p, .sidecont ul li {
  padding-top: 7px;
}

.sidecont ul li a {
  display: block;
  font-weight: bold;
  color: #666;
}

.sidecont ul li a:hover {
  color: #d5943f;
}

.side_meta_info {
  color: #d5943f;
}

Passo 6 – Il Footer

Per concludere un footer accattivante.
makingSEO CSS Template

Non resta che finalizzare le operazioni di codifica con la realizzazione del footer.

<div id="footer">
  <div class="foot_info">
    <div class="foot_col_l_c">
      <h2>Our Tweets <a href="#">/ Follow Us</a></h2>
      <ul>
        <li><a href="#"><strong>@virtuosoblogger</strong> 400+ Beautifully Designed Twitter Icons http://ow.ly/oBb6</a></li>
        <li><a href="#"><strong>@bkmacdaddy</strong> Bit.ly lowers the bar on URL shortening - http://bit.ly/cMBAc</a></li>
        <li><a href="#"><strong>@gaksdesigns</strong> Retro Design and Typography http://bit.ly/1TRunk</a></li>
      </ul>
    </div>
    <div class="foot_col_l_c">
      <h2>Work in progress</h2>
      <ul class="foot_center">
        <li class="foot_ico_1"><a href="#">Sed ut perspiciatis unde omnis iste natus error sit </a></li>
        <li class="foot_ico_2"><a href="#">At enim ad minima veniam, quis nostrum</a></li>
        <li class="foot_ico_3"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui</a></li>
      </ul>
    </div>
    <div class="foot_right">
      <h2>Work in progress</h2>
      <ul>
        <li><a href="#"><img src="images/img1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img4.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
  <div id="credits">
    <p><a href="#">makingSEO</a> is released under a <a href="#"><em>Creative Common License</em></a> also for Commercial Use. We hope you'll support <a href="#">PV.M Garage</a>, it is an awesome place for sharing!</p>
  </div>
</div>

Le ultime regole di stile per il nostro template.

/* Footer */

#footer {
  background: url("images/bck_foot.jpg") repeat-x top; /* general background for footer */
}

.foot_info {
  margin: auto;
  width: 960px; /* keep in 960 pixels the footer contents */
}

.foot_col_l_c {
  width: 285px;
  float: left;
  margin: 20px 35px -30px 0px;
  padding: 0px 10px 0px 10px;
  height: 300px;
}

.foot_info h2 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 6px;
  padding: 8px 0px;
  background: url("images/dashed_f.png") no-repeat center bottom;
}

.foot_info h2 a {
  color: #306e8f;
  background: url("images/ico_foot.png") no-repeat top right;
  padding: 10px 45px 10px 0;
}

.foot_info h2 a:hover {
  color: #fff;
}

.foot_col_l_c ul li {
  padding: 8px 0px;
  background: url("images/dashed_f.png") no-repeat center bottom;
}

.foot_col_l_c ul li a {
  color: #fff;
  display: block;
}

.foot_col_l_c ul li a:hover {
  color: #c3dd6c;
}

ul.foot_center li a:hover { /* change hover color */
  color: #d5943f;
}

li.foot_ico_1 a {
  padding-right: 50px;
  margin-right: 11px;
  background: url("images/ico_foot_1.png") no-repeat center right;
}

li.foot_ico_2 a {
  padding-right: 50px;
  margin-right: 8px;
  background: url("images/ico_foot_2.png") no-repeat center right;
}

li.foot_ico_3 a {
  padding-right: 50px;
  margin-right: 12px;
  background: url("images/ico_foot_3.png") no-repeat center right;
}

.foot_right {
  width: 221px;
  float: right;
  margin-top: 20px;
}

.foot_right ul {
  background: url("images/foot_img_bck.png") no-repeat top left;
  margin-left: 5px;
}

.foot_right ul li {
  display: inline;
}

.foot_right img {
  border: 3px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 10px 20px 8px 0px;
}

#credits {
  clear: both;
  margin-bottom: 10px;
}

#credits p {
  width: 600px;
  text-align: center;
  margin: auto;
}

#credits p a {
  font-weight: bold;
  color: #666;
  width: 600px;
  text-align: center;
  margin: auto;
  font-size: 11px;
}

#credits p a:hover {
  border-bottom: 1px dotted #666;
}

Conclusioni

Si, questo layout è rilasciato con Licenza Creative Common anche per uso commerciale, per cui puoi utilizzare le informazioni contenute nel post a tuo piacimento ed in piena libertà. Se hai suggerimenti su come migliorare il template utilizza il form dei commenti per condividere le tue idee.

Il template è stato testato su IE8, Firefox 3.5, Opera e Safari. MakingSEO ha un codice XHTML valido per gli standard W3C.

Grazie!

Altri articoli interessanti:

19 Commenti

Lascia il tuo Commento
RSS Feed

Replica

Agostino
29 settembre 2009 alle 21:43
wewe grande pier grazie di questo tutorial… cmq prima che lo postassi avevo seguito il tutorial del psd e ho provato a coddarlo… http://menuanimatoskin.altervista.org/cleanlayout.html non ho capito perchè a me le immagini sono risultate così grandi ._.
cmq se puoi darmi dei consigli via e-mail o anche qui te ne sarei grato… =)
Replica

Igor
29 settembre 2009 alle 22:54
Splendido articolo come sempre, facile ed intuitivo nella lettura. Complementi. Ti dirò che mi incuriosisce molto perchè hai sviluppato alcuni elementi grafici interessanti (come la linea tratteggiata… non, mi ha colpito).
Non vedo l’ora di provarlo!
Replica

Igor
29 settembre 2009 alle 22:55
errata corrige

…non SO, mi ha colpito)
Replica

piervix
30 settembre 2009 alle 09:47
@Agostino: intanto grazie per il commento… appena avrò tempo darò una occhiata al codice e potrò dirti di più. Intanto puoi confrontarlo con quello che ho postato io. E’ ovvio che il mio codice è frutto del mio modo dio interpretare il design… non è assolutamente la via migliore; per cui sono sempre ben accetti consigli e suggerimenti.

@Igor: grazie, sei troppo gentile! ;)
Replica

Ghido
30 settembre 2009 alle 10:59
Molto bello, si potrebbe quasi quasi trasformare in un template per WordPress, adattandolo un poco :)
Replica

yeswebcan
30 settembre 2009 alle 13:09
Infatti io credevo fosse un tema wordpress.
Ricordo infatti che volevi fare un articolo sulla creazione di un tema wordpress… mi è saltato o non lo hai più fatto?
Replica

piervix
30 settembre 2009 alle 13:41
Grazie ragazzi! Il post (forse più di uno) sulla creazione di temi WP è in lavorazione, purtroppo ho le giornate pienissime in questo periodo e si procede a rilento… ma riuscirò a pubblicarli…

Grazie ancora per i commenti!
Replica

Francesco Ciabatta
30 settembre 2009 alle 18:50
Complimenti e sopratutto grazie per la condivisione!
Replica

anyone
1 ottobre 2009 alle 11:20
tanks
Replica

Igor
1 ottobre 2009 alle 14:35
Cmq, ciccio, fattelo dire: hai un ottimo gusto grafico. E non è gentilezza la mia… è una contatazione :)
Replica

Igor
1 ottobre 2009 alle 14:38
Volevo aggiungere una cosa (si lo so, scrivo a spizzichi e bocconi…). Tu usi molto le png per le immagini trasparenti, però non tutti i browser le supportano. Mi pare IE7? come mai non salvi in gif trasparenti?
Replica

piervix
1 ottobre 2009 alle 14:56
@Igor: Grazie ancora e tranquillo io sono uno di quelli che fa tutto a “spizzichi e bocconi”! ;)

Tornando a noi, IE7 supporta le png transparenti. Il problema si presenta con browser datati come IE6.

Le ragioni per le quali uso Portable Network Graphics e non le gif sono ben spiegate in questo articolo su W3C.org – http://www.w3.org/QA/Tips/png-gif -
Replica

Igor
1 ottobre 2009 alle 15:56
Ah ok, perchè m’è capitato di vedere il mio sito da un altro pc con IE (non so quale versione a questo punto) e l’immagine principale, quella del mio faccione tanto per intendersi, si vedeva con uno sfondo striato grigiastro…
Replica

Barby
2 ottobre 2009 alle 11:55
ottima risorsa!
…mi ci voleva proprio per tirarmi su di morale… la web agency dove lavoro sta x chiudere e tra un mese addio posto sicuro… ma la passione x il web continua ;-)
complimenti x il blog!!!
Replica

Michele.77
5 ottobre 2009 alle 15:50
Ho appena scoperto questo blog, che dire finalmente qualcosa in italiano allo stesso livello (contenuti e grafica) dei migliori blog di webdesign stranieri, complimenti!

PV.M Garage | Web Design Blog

MakingSEO coded, Template CSS Gratuito con Consigli sulla Conversione PSD-to-HTML

Risultato Finale e Download

Coding makingSEO

Passo 1 – Struttura Generale

Passo 2 – Header con Logo e Menu

Passo 3 – Slogan e Screenshot nel Down-Header

passo 4 – Contenuti

Passo 5 – La Sidebar

Passo 6 – Il Footer

Conclusioni

Altri articoli interessanti:

Autore: piervix

19 Commenti

Trackbacks

Leave your comment

Socialize with Us

Community News

Web Mag e Risorse

CSS Gallery

Archivio

Amici e Partner

Web Design Updates