A volte per rendere un sito web più usabile ci piacerebbe creare una grafica carina e familiare per chi lo usa, e quindi molte volte vorremmo creare delle finestre che abbiano la grafica familiare del nostro OS, Windows in questo caso ma lo stesso sistema si adotta per gli altri OS basta cambiare le PNG, ecco uno screen shot del risultato finale (clicca per ingrandire):

Le caratteristiche che andremo a implementare: una finestra win-like a larghezza fissa e altezza variabile con colore di sfondo variabile e icone. Fate molta attenzione questo sistema non funziona con IE, devo ancora perfezionarlo.

Iniziamo subito con la grafica, di cosa abbiamo bisogno:

1. L’immagine di testata (clicca per ingrandire):
2. I bottoni minimizza, massimizza e chiudi:
3. Il contorno laterale (clicca per ingrandire):
4. La barra in fondo (clicca per ingrandire):

Ora che abbiamo la nostra grafica capite immediatamente che se volessimo una grafica Mac o Linux style basta cambiare le PNG, che sono a sfondo trasparente.

Ora non resta che comporre il nostro puzzle, quindi è ora di un po’ di codice:

<div style="position:absolute;background-color:white;">
 <div>
  <img src="images/controlPanelHeadmain.png"><img src="images/controlPanelHeadmin.png" border="0" /><img src="images/controlPanelHeadmax.png" border="0" /><img src="images/controlPanelHeadclose.png" border="0" />
 </div>
 <div style="background:url('images/controlPanelBody.png') repeat-y;background-position:center;padding:0;">
 </div>
 <div>
  <img src="images/controlPanelFooter.png">
 </div>
</div>

Queste poche righe di codice costituiscono lo scheletro della finestra vuota, andiamo a vedere in dettaglio.Il primo div racchiude tutta la finestra e decide il colore dello sfondo, e la posizione dell’intera finestra, ho voluto raccogliere tutti i div in uno solo più esterno così se per esempio volessimo utilizzare un libreria per rendere la finestra draggabile basterà indicare il div principale, o magari ce la potremmo scrivere noi ma forse tra qualche post.Il secondo div che incontriamo è come vedete costituito da tante immagini in sequenza, non è un’errore di formattazione è per fare in modo che la testata della finestra non abbia spazi tra il titolo e i bottoni.Il terzo div costituisce il corpo della finestra e al suo interno posizioneremo il codice necessario per inserire i bottoni, l’immagine delle colonnine è infatti sfondo del div, con l’opzione repeat-y che ci assicura che le barrette verrano replicate all’infinito verso il basso.L’ultimo div contiene semplicemente l’immagine della base.

Nell’immagine iniziale si nota come uno dei bottoni è reso più chiaro con il tipico effetto di windows quando si passa sopra un bottone, come lo realizziamo? Basta aggiungere ai tag img dei nostri bottoni questi due attributi:

onmouseover="this.style['opacity']=0.8;"
onmouseout="this.style['opacity']=1;"

Cosa fanno i due attributi? Molto semplice quando il mouse passa sopra il pulsante la sua opacità viene ridotta risultando più chiaro, quando il mouse invece si sposta l’opacità viene ripristinata. Facile no?Non ci è rimasto che aggiungere le icone alla finestra, un ottimo sito che vi consiglio se vi servono delle icone è Icon Archive, il modo migliore per aggiungere icone alla nostra finestra è utilizzare una tabella, se volete rendere le vostre icone draggabili usate dei div, e inserire le icone con la loro label uno di seguito all’altro, come in questo esempio:

<table>
 <tr></tr>
 <tr>
  <td></td>
  <td align="center" style="padding-left:10px;"><img src="images/icon.png" border="0" /><br><span class="label">Label</span></td>
  <td align="center" style="padding-left:10px;"><img src="images/icon.png" border="0" /><br><span class="label">Label</span></td>
  <td align="center" style="padding-left:10px;"><img src="images/icon.png" border="0" /><br><span class="label">Label</span></td>
  ...
  </tr>
  <tr>
  ...
  </tr>
</table>

Per rendere l’etichetta delle icone più piccola e leggibile dobbiamo anche aggiungere questo codice css:

.label{
 color: Black;
 font-style: italic;
 font-size: 8pt;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Ed il gioco è fatto.
So che il codice non è perfetto, però è sicuramente un buon inizio e magari col tempo apporterò anche qualche aggiornamento.

Enjoy!