DesignSchool Coded, guida per realizzare un semplice layout (X)HTML/CSS
- 19 maggio 2009
- Tutorial, Web Design
- Questo articolo è stato scritto per il PV.M Garage da piervix
- Commenti (29)»
In un articolo precedente è stato presentato un semplice template PSD in stile blog che aveva come soggetto una fittizia scuola di design.
In questo post si descrivono, invece, le diverse operazioni necessarie per trasformare l’idea grafica in una vera e propria home-page. E’ ovvio che entrambe le realizzazioni (e conseguenti descrizioni) sono puramente dimostrative e affrontano le problematiche basilari per la creazione di una pagina web.
Il template che ci si accinge a trasformare in una web-page (X)HMTL/CSS è Design School ed è visibile nell’immagine in basso.
Fase preliminare, Sketch e Struttura Base
Prima di mettere mano al codice è buona prassi riportare su un foglio lo schema semplificato della pagina in modo da puntualizzare le diverse sezioni. Da una prima analisi si è scelto di dividere il layout in header, sidebar, down-header, news-container e footer.
Schema layout base
Nell’immagine seguente è ben visibile lo schema base applicato al template, quelli evidenziati sono i “contenitori” principali della struttura generale della home-page.
File sorgenti
Si crea una nuova cartella, nel nostro caso è stata nominata “designschool”, e al suo interno si generano ex-novo i file index.html e style.css. Le immagini saranno poi inserite nella cartella “images”.
Si è scelto di creare a priori i file in quanto saranno modificati singolarmente con un editor testuale (per l’esempio si è utilizzato PdPad).
Dichiarazione tipo documento
Una volta creato il nuovo file .html è importante preparare in modo ottimale il documento inserendo la dichiarazione sulla versione di (X)HTML utilizzata con relativi riferimenti, il tag <head> (all’interno del quale sono evidenziati il titolo e i diversi meta-tag) e specificando i tag <body> e <html>. In questa fase si dichiara anche la posizione del foglio di stile CSS dove precisare le diverse regole.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DesignSchool | A free CSS Template | made in PV.M Garage</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
Background
Scegliere opportunamente l’immagine di background è un’operazione molto delicata. Nel caso in esame è evidente che c’è la possibilità di creare una back-image ripetibile contenente lo sfondo per l’header e il gradiente per il corpo della pagina.
Bisogna fare attenzione nel selezionare dal PSD la porzione di back che ci interessa. In primo luogo c’è da accertarsi che la parte di selezionata sia reiterabile, focalizzando l’attenzione sui triangolini inclinati, poi c’è da verificare di aver incluso il gradiente che sfuma completamente nel bianco (#fff colore di sfondo del body).
Si noti che per salvare l’immagine da Photoshop si utilizza l’opzione File–>Salva per Web e dispositivi scegliendo il formato opprotuna tra jpg e png
Proprietà CSS per il body
A questo punto avendo a disposizione la nostra immagine (opportunamente salvata nella cartella “images”) si apre con l’editor di testo anche il file di stile e si procede attribuendo le regole al body. Oltre al background è utile inserire anche informazioni relative ai font e ai colori.
body {
background: #fff url("images/bck_top.jpg") repeat-x top;
font-family: Georgia,Verdana, Arial,"Helvetica";
font-size: 12px;
color: #333;
}
Il risultato di questa dichiarazione è visibile nell’immagine seguente. E’ evidente l’utilità che deriva nell’utilizzare il valore repeat-x alla proprietà background sia in termini di velocità di caricamento che di adattabilità della pagina a diverse risoluzioni e browser.
Main Container e divisione layout
A questo punto all’interno dei tag <body> </body> andremo ad inserire la struttura della nostra pagina web per come è stata divisa inizialmente.
Perché un Main Container?
Il div con id=”main_container” andrà a contenere tutte le altre parti, escluso il footer. Questo è utile per definire posizione e larghezza generale. Nel CSS si attribuiscono le seguenti proprietà:
#main_container {
margin: auto;
width: 950px;
}
Impostazione layout
Gli elementi da inserire all’interno del Main Container sono header, sidebar, down-header e container.
<body> <div id="main_container"><!--start main cont--> <div id="header"><!--start header--> </div><!--end header--> <div id="down_head"><!--start down head--> </div><!--end down head--> <div id="sidebar"><!--start sidebar--> </div><!--end sidebar--> <div id="container"><!--start container--> </div><!--end container--> </div><!--end main cont--> </body>
Header
L’intestazione è composta dal logo e da un secondo spazio nel quale mettere in evidenza dei contenuti importanti.
In questo caso le immagini verranno salvate in formato png mantenendo la trasparenza (File–<Salva per Web e dispositivi, selezionare png-24 e spuntare la voce trasparenza)
Coding Header
Una volta che si hanno le immagini a disposizione si aggiornano l’index e il file di stile come riportato in basso.
<div id="header"><!--start header-->
<div id="logo">
<a href="#"><img src="images/logo.png" alt="Logo" /></a>
</div>
<div id="side_head">
<a href="#"><img src="images/head_side.png" alt="Logo" /></a>
</div>
</div><!--end header-->
Di seguito riportiamo le dichiarazione per il CSS.
/*HEADER*/
#header {
margin: auto;
width: 800px;
}
#logo {
margin-top: 50px;
float: left;
}
#side_head {
float: right;
margin-top: 21px;
}
/*HEADER END*/
Down Header
La parte posizionata appena sotto l’intestazione è suddivisa in tre box: login-box, menù e advertisement-box.
Coding Down Header
Si è scelto di utilizzare una unica back-image e sfruttare le propietà css per il posizionamento delle diverse parti.
.
Le aggiunte da apportare al file HTML sono ripertate di seguito.
<div id="down_head"><!--start down head-->
<div id="menu"><!--start menu-->
<ul>
<li><a href="#" class="sprites"></a></li>
<li><a href="#" class="sprites1"></a></li>
<li><a href="#" class="sprites1"></a></li>
<li><a href="#" class="sprites1"></a></li>
</ul>
</div><!--end menu-->
<div id="adv"><!--start adv block-->
<img src="images/adv.jpg" alt="Advertise" />
</div><!--end adv block-->
<div id="login"><!--start login form-->
<form action="" method="get">
<span class="login_text">UserName............</span><input type="text" class="login_field" value="" name="username" size="30" />
<span class="login_text">............Password</span><input type="text" class="login_field" value="" name="password" size="30" />
</form><!--end login form-->
</div>
</div><!--end down head-->
Queste invece le propriete di stile dei vari elementi.
/*DOWN HEAD*/
#down_head {
background: url(images/down_head.jpg) no-repeat;
float: right;
margin-top: 1px;
width: 670px;
height: 272px;
}
#down_head_right {
float: right;
border: 1px solid #000;
}
#menu {
float: right;
margin: 10px 25px 0 0;
}
#menu ul li {
float: left;
display: inline;
margin-left: 30px;
}
.sprites {
background: url(images/home.jpg) no-repeat -67px 0px;
display:block;
width: 67px;
height: 43px;
}
.sprites:hover {
background-position: 0px 0;
}
.sprites1 {
background: url(images/page.jpg) no-repeat -67px 0px;
display:block;
width: 67px;
height: 43px;
}
.sprites1:hover {
background-position: 0px 0px;
}
#adv {
position:relative;
top: 63px;
right: 18px;
float: right;
}
#login {
position: relative;
top: 100px;
left: 20px;
float: left;
width: 250px;
}
.login_text {
font-size: 18px;
}
.login_field {
margin-bottom: 10px;
font-size: 14px;
color: #666;
width: 210px;
}
/*DOWN HEAD END*/
CSS Sprites
Da un’attenta analisi del file stile ci si imbatte nella proprietà background-position. Questa proprietà ci è molto utile per l’utilizzo di una tecnica ormai diffusissima che evidenzia il passaggio del mouse su di un link (hover). La tecnica in questione consiste nella creazione di una immagine doppia contenente sia la parte di default che quella da visualizzare al passaggio del mouse.
Grazie alle proprietà width, height, display e background(-position) è possibile realizzare un menù accattivante con poche righe di codice e assolutamente reattivo.
Ecco l’esempio esplicativo.
Ottenuto con le seguenti regole css:
.sprites {
background: url(images/home.jpg) no-repeat -67px 0px;
display:block;
width: 67px;
height: 43px;
}
.sprites:hover {
background-position: 0px 0;
}
Sidebar
Nel realizzare la sidebar siamo costretti a utilizzare due elementi div “vuoti”. Infatti per inserire i round corner previsti nel design iniziale si utilizzano tre back-image: la prima per il top, la seconda ripetibile per la parte centrale e l’ultima per il bottom.
Anche in questo caso le immagini sono salvate in png con la trasparenza attiva.
Coding Sidebar
La situazione è molto più chiara se si osserva il codice per la realizzazione della sidebar. Gli elementi div con id=”sidebar_top” e id=”sidebar_bottom” sono quelli vuoti, mentre quello con id=”sidebar_middle” è dove si inseriscono le liste dei diversi menù.
<div id="sidebar"><!--start sidebar-->
<div id="sidebar_top">
</div>
<div id="sidebar_middle">
<h1>I Nostri Corsi</h1>
<ul>
<li><a href="#">(X)HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Adobe Photoshop</a></li>
<li><a href="#">Adobe Illustrator</a></li>
<li><a href="#">Adobe InDesign</a></li>
<li><a href="#">Gimp</a></li>
<li><a href="#">InkScape</a></li>
<li><a href="#">Web Marketing</a></li>
<li><a href="#">Search Engine Optimization</a></li>
</ul>
<h1>Le nostre sedi</h1>
<ul>
<li><a href="#">Gondor</a></li>
<li><a href="#">La contea</a></li>
<li><a href="#">Gran Burrone</a></li>
<li><a href="#">Rohan</a></li>
<li><a href="#">Mordor</a></li>
<li><a href="#">Bosco Atro</a></li>
</ul>
<h1>Servizi</h1>
<ul>
<li><a href="#">E-leraning</a></li>
<li><a href="#">Video Conferenze</a></li>
<li><a href="#">Tutor accademici</a></li>
<li><a href="#">Esami in sede</a></li>
</ul>
<a href="#" title="Materiale Didattico"><img src="images/download.png" alt="Materiale Didattico" /></a>
</div>
<div id="sidebar_bottom">
</div>
</div><!--end sidebar-->
Si noti l’utilizzo del tag h1, è la prima volta che compare nella costruzione del layout dell’esempio, ne approfittiamo per definire lo stile delle intestazioni testuali e dei link.
h1,h2 {
color: #333;
font-weight: bold;
}
h1 {
font-size: 24px;
line-height: 34px;
}
h2 {
font-size: 18px;
line-height: 34px;
}
h3 {
color: #666;
font-size: 18px;
line-height: 34px;
}
a:link {
color: #a20303;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #ac4545;
}
a:hover {
text-decoration: underline;
color: #ff0000;
}
a:active {
text-decoration: none;
color: #309DCF;
}
Per quanto riguarda la sidebar avremo invece la seguente situazione.
/*SIDEBAR*/
#sidebar {
float: left;
margin-top: 10px;
}
#sidebar_top {
width: 268px;
height: 16px;
background: url(images/sidebar_top.png) no-repeat;
}
#sidebar_middle {
width: 268px;
background: url(images/sidebar_middle.png) repeat-y;
padding-left: 10px;
}
#sidebar_bottom {
width: 268px;
height: 23px;
background: url(images/sidebar_bottom.png) no-repeat;
}
#sidebar_middle h1 {
color: #a20303;
font-size: 20px;
line-height: 26px;
margin: 0 15px 3px 0;
padding-left: 5px;
}
#sidebar_middle ul {
padding-bottom: 25px;
}
#sidebar_middle ul li {
font-size: 14px;
font-style: italic;
line-height: 18px;
padding: 5px 0 2px 15px;
border-bottom: 1px solid #ccc;
margin: 0 45px 0 20px;
}
#sidebar_middle ul li a {
color: #666;
text-decoration: none;
}
#sidebar_middle ul li a:hover {
color: #a20303;
text-decoration: none;
}
/*SIDEBAR END*/
Container e footer
Il container è la parte dove vengono messe in evidenza news e aggiornamenti vari. E’ stato realizzato in modo molto semplice seguendo le regole base per una buona visualizzazione del testo.
Anche il footer mantiene una certa essenzialità e richiama le linee dell’header con una back-image estrapolata seguendo le regole viste in precedenza.
Coding Container
Ecco il markup valido per la costruzione del container.
<div id="container"><!--start container-->
<h1 class="top_title">Ultime notizie dalla sede</h1>
<div class="post">
<h1 class="news_title">Lorem Ipsum Sit Amet</h1>
<p>testo d'esempio
<br /><span class="read_more"><a href="#">leggi tutto...</a></span></p>
</div>
<div class="post">
<h1 class="news_title">Cicero</h1>
<p>testo d'esempio
<br /><span class="read_more"><a href="#">leggi tutto...</a></span></p>
</div>
</div><!--end container-->
Le rispettive proprietà di stile sono riportate in basso.
/*CONTAINER*/
#container {
float: left;
width: 650px;
min-height: 400px;
background: url(images/bck_cont.jpg) no-repeat center top;
padding-top: 15px;
padding-left: 15px;
}
.post {
padding-bottom: 15px;
background: url(images/news_sep.png) no-repeat center bottom;
}
h1.top_title {
color: #a20303;
line-height: 28px;
margin: 0 15px 10px 0;
}
h1.news_title {
padding-left: 20px;
font-weight: normal;
}
#container p {
font-size: 14px;
line-height: 18px;
padding-left: 20px;
margin: 10px 0 30px 0;
}
.read_more {
float: right;
margin-top: 10px;
}
/*END CONTAINER*
Coding Footer
Il footer è l’unico elemento che sta al di fuori del main container. Questo ci permette di utilizzare una immagine di background seguendo lo stesso principio utilizzato per il body.
<div id="footer"><!--start footer--> <div id="footercont"> <p>© <b>DESIGN SCHOOL</b> 2009 all right reaserved<br />a <a href="http://www.pvmgarage.com">PV.M GARAGE PRODUCTION</a></p> </div> </div><!--end footer-->
In basso si riportano le regole di stile per il footer.
/*FOOTER*/
#footer {
clear: both;
height: 136px;
background: url(images/bck_bot.jpg) repeat-x bottom;
color: #ccc;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Georgia, Arial;
}
#footercont {
text-align: center;
padding-top: 85px;
}
#footer a {
color: #ccc;
text-decoration: underline;
font-weight: bold;
}
/*END FOOTER*/
Testing, IEfix, Validation
Una volta terminato il template si procede verificando la corretta visualizzazione del design nei diversi browser (Firefox, Chrome, IE7, Safari, Opera, etc…).
Nel caso in cui qualcosa non dovesse andare per il verso giusto esistono i commenti condizionali che sono in grado di far riconoscere determinati fogli di stile esclusivamente ad un particolare browser. Nel nostro esempio, visualizzando l’index con IE7, si nota un posizionamento sbagliato del background dell’elemento down-header. Procediamo pertanto inserendo nell’head della pagina il seguente commento che rimanda IE7 al foglio di stile ie7.css, il quale contiene la soluzione a questo piccolo problema di visualizzazione.
<head> ... <!--[if IE 7]> <link href="iefix/ie7.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>
Terminata questa ulteriore fase non resta che validare il markup e lo stile del template qui.
E-Commerce Web Design: Problematiche, Esempi e Pratiche Migliori
Gennaio 2010, Utili Segnalibri per Collezionare il Meglio del Web
35+ Nuovi Siti Web Con Un Efficace Uso Delle Texture
Raccolta Di Handwritten Font Per I Tuoi Prossimi Progetti Di Grafica
Una Collezione di 45 Font Industriali
55 Font Gratuiti per Lavori di Grafica Unici e Originali
Creare Un Layout Con Elementi 3D Utilizzando Solo CSS3
Una Toolbar Semplice e Accattivante per il tuo Sito Web con CSS3 e jQuery
MakingSEO coded, Template CSS Gratuito con Consigli sulla Conversione PSD-to-HTML
Ottimo Tutorial, dovresti anche includere il fix per i png per internet explorer < 7 [ http://homepage.ntlworld.com/bobosola/index.htm ] *correggimi se mi sbaglio*.
E ho un piccolo problema di visualizzazione in safari 4 e Firefox su Mac OS:
http://img.skitch.com/20090519-p5mm99qnhfrj45b8wkf7e1cq73.jpg
La larghezza del box dell’immagine è di 244px, la div #login è posizionata left:20px; quindi rimangono 224px utili. Ho impostato la larghezza delle form a 204px e si è sistemato.
#login {
position: relative;
top: 100px;
left: 20px;
float: left;
width: 224px;
}
.login_text {
font-size: 18px;
width: 204px;
}
:D
Disclaimer: se ho detto cazzate, è colpa dell’ora XDD
ps. Sembra esserci un piccolo bug nei commenti, la div .comcont non si estende per tutta l’altezza del commento
http://img.skitch.com/20090519-gikwhfx7nm16ft6rxsatk1r2jy.jpg
Scusa il rompipallesimo ®
@Gianmarco Simone: grazie per la segnalazione del bug, ora la div .comcont dovrebbe estendersi per tutta l’altezza del commento.
Per quanto riguarda il fix per i png in IE6, credo che sia opportuno smettere di continuare a risolvere problemi per un browser rilasciato per la prima volta il 27 agosto 2001. Ho deciso di non preoccuparmi più di questo fardello. Poi ognuno fa le proprie scelte, ad ogni modo con una ricerca rapida su google “ie6 png fix” si trovano molti script che eliminano il bug.
Invece per quanto riguarda il problema della larghezza del box login, attento al fatto che è l’attributo size del tag input a determinarne l’estensione in assenza di specifiche css.
Comunque per risolvere l’errore di visualizzazione che hai riscontrato su Mac la proprietà width va aggiunta alla classe .login_field e non a .login_text per evitare di nascondere testo in scrittura.
Grazie ancora per le segnalazioni consapevoli ed opportune.
Sì, mi sono appena accorto di aver scritto male, l’ho applicata anche io al form (e comunque non avevo pensato al fatto che si adatti al parametro size).
Comunque, ti appoggio tantissimo sul non supportare più i vecchi IE, è ora che la gente si aggiorni, sono del parere che supportare i vecchi browser sia solo un fastidio, ma era giusto per completezza :D
Grazie a te per la risposta, è sempre un piacere scambiare opinioni su ciò che ci piace :D
thanks. great post…
Ciao Pier! Questa volta ti sei superato! Un articolo formidabile, molto importante per i newbies nel mondo del Web Development. Davvero ben spiegato e molto facile da seguire e leggere.Sei un grande!
Per ora aggiungo a delicious, ma appena ho tempo mi seguo tutto il tutorial ;). Ciao!
Eccoloooooooooooooo ahahahhaha finalmente :) :) quello che ti avevo richiesto!! seguirò il tutorial e ti farò sapere eventuali problemi!!
Grazie per gli apprezzamenti ragazzi, se avete idee su come migliorare il codice e il layout in generale sparate pure!
Grazie piervix, questo è uno dei pochi tutorial in italiano fatti come si deve! Grande Lavoro, veramente!
Complimenti! RSS aggiunto ;)
Ma è splendido! lo provo subito, anche perchè sto cercando di imparare a fare siti tableless e questo potrebbe essere un ottimo inizio!
@Igor: grazie! Fammi sapere se la guida ti è stata utile…
Beh, accidenti, utilissima! è spiegato benissimo e poi, così passo passo, si capisce davvero molto bene. Credo proprio che inizierò subito a cimentarmi con un sito al quale sto lavorando… ci sarà qualche smadonnamento, ma credo faccia parte del mio mestiere. Grazie mille.
@Igor: beh gli “smadonnamenti” per me sono all’ordine del giorno. Ti dirò di più: quando faccio un programmino di lavoro inserisco sempre una mezz’oretta dedicata ad inveire contro lo schermo del computer! Giusto per sfogarmi… ;)
Eccomi quà, Pier… come immaginavo ho bisogno del tuo aiuto. Sto incrementando il mio sito con una index diversa, creata con i css proprio grazie a questo tuo tutorial. La pagina la puoi vedere in anteprima all’indirizzo http://www.igortrovato.com/prova/index.html
Ci sono alcune cose che vorrei chiederti se hai tempo di rispondermi. Intanto devo ancora vedere se quel form inserito riesco a farlo funzionare… mah…
Cmq la parte che non riesco a sistemare è il footer, che come vedi mi crea quella specie di cornice bianca e non me la estende a tutta pagina come l’header… margin e padding sono a zero, quindi evidentemente becca qualche impostazione da qualche parte ma non riesco a capire dove.
La seconda cosa che vorrei chiederti è come faccio a far visualizzare le lettere accentate che, come vedi, mi sostituisce con dei quadratini (stesso problema su Safari)? Tra l’altro ho notato che proprio su Safari il form dove poter scrivere la richiesta è scalabile manualmente! come posso fare per evitarlo?
Grazie davvero x il tuo tempo!
Igor
@Igor: intanto complimenti per la grafica e l’idea generale, mi piace davvero molto.
Allora appena posso mi faccio una guardata al codice. Se vuoi puoi mandarmi l’archivio via mail (pier.made@gmail.com), ci smanetto un po’ e saprò dirti sicuramente di più.
Per i caratteri la prima cosa che mi viene in mente è se hai usato la giusta codifica (è diventa è)… ma potrebbe essere altro… non so.
Ad ogni modo a tua completa disposizione, mandami le sorgenti senza problemi…
Ti ringrazio. Sicuramente ci saranno molti errori e, soprattutto, ridondanze inutili… tieni presente che è il mio primo lavoro completamente con i css… :)
Grazie davvero.
ottima guida!!! grazie mille… sono alle prime armi con i layout quindi se ho dei problemi posso chiedere aiutodirettamente a te?
ah cmq bellissimo sito… =)
@Agostino: assolutamente si. Grazie!
pier ho un problema… quando vado a fare la sidebar, seguo passo per passo il tutorial, ma non mi visualizza le immagini e le scritte sono sotto al down_head… inoltre intorno al banner appare una cornice che non ho messo… puoi aiutarmi? il sito è questo: http://menuanimatoskin.altervista.org/codice_base_HTML.html T.T
Ciao! volevo sapere come posso dividere in tre parti uguali il FOOTER. E’ possibile? mi potresti dare una mano please? grazie molto utile questo sito.. CIAO!
@Luca: ciao, grazie per il commento.
Dipende tutto da come intendi dividere il tuo footer, comunque ti riporto qua in basso un articolo che potrebbe esserti utile.
How to distribute elements horizontally using CSS – http://woorkup.com/2009/10/07/how-to-distribute-elements-horizontally-using-css/
Grazie ancora, un saluto!
sei un genio! grazie per il link! ciao