In questo CODE-IT abbiamo diviso in quattro parti la costruzione di una semplice homepage con un layout piuttosto pulito. Nell'esempio saranno mostrati tre link ad azioni utili a interagire con Skype. L'attenzione sara' concentrata su come questa pagina e' stata realizzata in modo che chiunque possa comprendere come si scrivono e come si utilizzano i file css.

La parte piu' corposa e' quella iniziale. Dopo aver deciso il layout che vogliamo applicare alla nostra pagina, dovremo inserire nell'html tanti layer con tag div quante sono le zone che vogliamo disegnare nel nostro foglio. I div saranno caratterizzati perlopiu' da attributi id e class. Assoceremo delle caratteristiche a ogni div in modo da poterli descrivere nel file css. Scegliere se associare un attributo id o class a un elemento e' semplice. Possiamo pensare a una regola generale per cui, gli elementi identificati da un class sono caratteristiche che tornano piu' volte nel nostro documento, pertanto li descriveremo una volta sola nel file css, per caratterizzarli tutti. Gli elementi contrassegnati da un id invece sono strutture che necessitano di essere identificate in maniera univoca, ad esempio un header e' univoco, delle colonne, invece, sono classi, in quanto tornano piu' volte nella stessa pagina.

#main{/* descrizione di un div con id=main (# indica id) */

border:1px solid white;
background:#252527;
width:750px;/*dimensione del div: larghezza */
height:600px;/*dimensione del div: altezza */
margin:0px auto;/*posizionamento automatico 
				al centro della pagina. Funziona con
				ie7,ff,safari,chrome,opera
				in ie6 bisogna specificare esplicitamente
				di quanti pixel vogliamo distanziare il nostro
				div da destra a sinistra, per  collocarlo al
				centro*/

}

Gli elementi del file css all'inizio sono piu' corposi rispetto a quelli che vedremo in seguito. Questo perche' oltre ai div e ad altre caratteristiche, vengono normalmente descritti gli elementi generici della pagina. In questo esempio vediamo che il file comincia con la descrizione generica della pagina attraverso l'elemento body. Subito sotto vediamo la descrizione di ogni elemento di tipo ancora identificato dal tag 'a'.

body{
	background:#141416;/* colore di sfondo  della pagina */
	overflow:hidden;/* nascondo la barra di scorrimento */
	color:#fff;/* colore delle scritte nella pagina */
	font-style:Helvetica;/* stile delle scritte della pagina */
	font-size:20px;/* dimensione nelle scritte della pagina */

}


a{

	color:#cFcFEF;/* colore dei link */
	font-size:14px;/* dimnesione dei font dei link */
	text-decoration:none;/* il valore 'none' indica 
							di non mettere  la sottolineatura
							standard al link*/
}

a:hover{/* il valore hover indica come si deve comportare la
		scritta del link al passaggio (hover) del mouse su
		di essa*/

	color:#cFcFEF;/* colore della scritta on mouse over */
	border-top:1px solid #efefef/* un effetto di bordatura 
						superiore (border-top)
						grande 1px e con una linea continua 
						(solid) di colore grigio chiaro
						(#efefef) */
}

Nell'esempio che potete scaricare, associato a questo video, troverete quattro file css, uno per ogni parte in cui abbiamo suddiviso la composizione della nostra pagina. In particolare nel primo troverete la descrizione di ogni attributo che compone un file css. Possiamo notare ad esempio come venga descritto il tag anchor in modo che sia scritto con un font e un colore particolari e che quando il mouse passa sopra al link, questo presenta una bordatura superiore. In questo modo abbiamo personalizzato un effetto di rollover per la nostra home.

Andando avanti e passando alla seconda parte della nostra costruzione, vediamo come si sia scelto di suddividere in tre colonne la zona centrale della nostra pagina, inoltre si e' creata un'immagine che abbiamo inserito come intestazione della nostra home.

<div id="header">
		<img src="img/logo.png">
	</div>

Quando non si esplicita nessun attributo float all'interno della descrizione di un elemento div in un file css, questi vengono posti uno sotto all'altro in sequenza. Se si desidera collocare uno accanto all'altro due div, allora bisogna lavorare sulla caratteristica float del primo in modo che accanto a questi si ponga il secondo. Per far cio' basta porre uguale a left l'attributo float. Avendo tre colonne con le medesime caratteristiche, abbiamo scelto di descrivere queste peculiarita' con un elemento class che abbiamo chiamato column e abbiamo associato il class uguale a column ai div che identificano la prima, la seconda e la terza colonna.

.column{/* . indica un class=column*/
width:30%;
border-left:1px solid white;
border-right:1px solid white;
height:200px;
float:left;/*questa caratteristica pone uno accanto all'altro i div di classe column*/
}

<div class="column">
				first column
			</div>
			<div class="column">
				second column
			</div>
			<div class="column">
				third column
			</div>

Nella terza fase del nostro progetto andremo a descrivere i link che saranno scritti in ognuna delle tre colonne. I tre link saranno tre tag a con un attributo href che anziche' puntare a una pagina o a un url come siamo sempre stati abituati a fare, punteranno a un protocollo skype che conterra' in se' la descrizione dell'azione e dello username a cui vogliamo indirizzare le nostre chiamate.

skype:nunzio.fiore?add
skype:nunzio.fiore?chat
skype:nunzio.fiore?call

La quarta parte e' leggermente piu' complessa, ma comunque semplice da seguire. Abbiamo creato un file javascript che abbiamo chiamato c10 punto js. All'interno di questo file abbiamo inserito tre funzioni. Queste funzioni ci servono per descrivere il comportamento della pagina quando andiamo con il mouse sopra a un div con il link a skype, ovvero a ogni evento di mouseover; oppure per descrivere il comportamento della pagina quando usciamo da tale zona, ad ogni evento di mouseout, o infine quando viene cliccato un link in modo da comporre dinamicamente i protocolli skype di cui abbiamo parlato prima, componendo cio' che e' scritto all'interno del campo di testo e l'azione che vogliamo associare a ognuna delle icone.

Con i framework che abbiamo visto nei code it delle ultime settimane sarebbe stato molto piu' semplice e rapido descrivere il nostro javascript, associandolo a tutti gli elementi di classe column e cose del genere. Abbiamo scelto pero' di mostrare cosa c'e' dietro a questi framework e scrivere il codice javascript pulito che serve a puntare ad ogni elemento della pagina o ad associare a un elemento gli eventi un comportamento a fronte di un evento onclick o onmouseover o onmouseout.

La nostra pagina risulta cosi' descritta nei minimi particolari dal file css. Abbiamo visto come sia semplice descrivere le dimensioni, la localizzazione all'interno della pagina, i colori e i caratteri di ogni layer div della pagina. Cosi' come i div anche tutti gli altri elementi della nostra home possono essere descritti e personalizzati attraverso il nostro codice css. Utilizzare i css e' molto utile in quanto scorporiamo completamente la parte di modellazione da quella di logica della nostra pagina e utilizzando quindi lo stesso file html, ma differenti fogli di stile, possiamo rappresentare gli stessi contenuti in molteplici forme senza riscrivere il nostro codice html o javascript.