*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 6

*

Stile e Bellezza

Idealmente la pagina analizzata nelle pagine precedenti è pronta per essere usata, ma sebbene sia una pagina leggerissima e molto semplice, è anche graficamente poco appetibile, quindi passiamo a produrre una pagina più bella e lo faremo con un uso molto limitato di immagini e con la sola magia dei CSS.

L'immagine di sottofondo

Cominceremo dal titolo dove inseriremo un immagine di sfondo come quella visibile qui sopra e dove apporteremo altre significative modifiche che illustreremo accuratamente:


h1{margin: 0;
heigth: 80px; [I]
background: #fff url(sfondo-titolo.jpg) right no-repeat; [II]
padding: 5px 0 5px 25px;
border: 1px solid #369;
color: #369;
}

#sottotitolo{font-size: 80%;
font-family: verdana,arial,sans-serif;
font-weight: normal;
color: #69c;
margin-left: 10px;
}

#sottotitolo:before,#sottotitolo:after{content : "::"; [III]
}

  1. Dato riguardante l'altezza dell'elemento titolo espressa in pixel, questo per evitare che l'immagine venisse tagliata.
  2. Indica i valori abbinati all'attributo "background". Come si vede è una dichiarazione cumulativa nella quale sono inseriti ben quattro valori relativi al colore dello sfondo (#fff), all'immagine di sfondo (url(sfondo-titolo.jpg) ), alla posizione dell'immagine di sfondo (right) ed alla ripetizione dell'immagine nell'ambito dell'elemento ospitante (no-repeat).
  3. Mostra l'inserimento e l'uso degli pseudo-elementi a fini estetico-presentazionali. I quattro puntini presenti prima e dopo la scritta "Un sito di esempio" non sono effettivamente presenti nel testo, ma sono aggiunti dal CSS.

Naturalmente si potrà anche osservare che sono cambiati aspetti cromatici e testuali che portano a questo risultato, decisamente più carino.

Passiamo quindi al menu che modificheremo graficamente con l'uso di una immagine di sottofondo come quella illustrata qui sotto.

Immagine di sottofondo del menu

Il CSS che gestisce l'intero apparato, compresi i links è stato modificato come si vede nel box sottostante :

#menu{margin : 2px 0;
padding : 3px;
background : #f5f5f5 url(sfondo-menu.jpg);
border : 1px solid #369;
text-align : center;
font-size : 90%;
color : #369;
}

#menu a:link,#menu a:visited{color : #039;
padding : 0 3px;
text-decoration : none;
font-weight : bold;
}

#menu a:hover{color : #900;
text-decoration : none;
}

#menu a:active{color : #fff;
background : #369;
text-decoration : none;
}

Come si vede sono sparite le sottolineature dei links (text-decoration : none), è comparsa l'immagine di sottofondo (url(sfondo-menu.jpg) ) e ci sono state modificazioni a carico dei vari aspetti dei links come potete osservare in questa pagina, un menu un pò più carino.

Concentriamoci quindi sulla colonna destra dove viene alloggiato il contenuto grafico/testuale della pagina. Possiamo aumentare il margine del contenitore interno in modo da avere un effetto grafico tipo cornice, porteremo il bordo del contenitore a linea continua ed inseriremo dentro al contenitore altri box con contenuti presentati in modo molto differente.
Poiché la realizzazione di questa parte richiede interventi sia a livello della struttura che a livello del CSS, passiamo alla pagina successiva

<< Precedente | Indice | Successiva >>

[ 1 ] Elementi Flottanti
Gli elementi flottanti sono quegli elementi che vengono disgiunti dal normale flusso sintattico. Se in una pagina ci sono 5 elementi di blocco (<>, <> principalmente) di cui non è stata specificata la collocazione, questi si disporranno uno sopra l'altro in ordine di apparizione per cui il primo elemento presente nel codice, verrà seguito dal secondo, poi dal terzo e così via. Qualora si vogliano affiancare due elementi di blocco, è necessario che i due elementi che si debbono affiancare, vengano disgiunti dalla sequenza informativa.
Nel foglio di stile va dichiarato espressamente che i due elementi siano disgiunti con l'attributo "float" ed un valore relativo alle necessità.
Questa disgiunzione fa si che l'elemento successivo all'ultimo disgiunto, si collochi subito dopo quest'ultimo, in qualunque posizione si trovi.
Questo determina alterazioni grafiche importanti da correggere con l'attributo "clear".


[ 2 ] Pseudo-elementi
Gli pseudo-elementi non sono veri e propri elementi ma sono dei selettori aggiuntivi che si applicano ad un elemento per determinare modificazioni presentazionali precise. Ci sono diversi pseudo-elementi il cui impiego favorisce la leggerezza del codice xhtml e l'aggiunta di effetti grafici carini e interessanti. Sono pseudo-elementi i seguenti :
→ elemento:first-line che determina caratteristiche grafiche precise per la sola prima riga di testo di un elemento
→ elemento:first-letter che determina caratteristiche grafiche precise per la sola prima lettera del testo di un elemento
→ elemento:before che determina l'inserimento di un contenuto prima di un elemento
→ elemento:after che determina l'inserimento di un contenuto dopo un elemento
questi due ultimi pseudo-elementi sono stati implementati nella seconda versione dei CSS e vecchi browser potrebbero non supportarli.

Linux Guide | Torna in alto