Web Design  »  Articoli  »  Web design 

In questo articolo vedremo come sia possibile ottenere un header, ovvero un'intestazione, con uno sfondo casuale.

I modi possibili sono due: uno è lato client grazie a Javascript, l'altro è lato server, grazie a linguaggi come ASP o PHP. Li vedremo entrambi: per la versione lato server ho optato per PHP, ma lo script è così semplice che con un minimo di conoscenza vi sarà facile riadattarlo in qualsiasi altra tecnologia. Iniziamo subito.

Come procedere

Anzitutto, vediamo subito uno dei sue esempi che ho preparato. Si tratta della versione Javascript, ma la versione PHP è sostanzialmente identica. Provate a riaggiornare la pagina o a cliccare sul titolo Il logo qui e noterete che l'immagine di sfondo dell'intestazione cambia: lo stesso effetto potrà essere ovviamente ottenuto su tutte le pagine dei vostri siti: sia la versione Javascript che quella PHP necessiteranno dell'aggiunta di una sola riga nella sezione head della pagina. Vediamo come procedere.

La prima cosa da fare è disporre o realizzare una pagina con HTML e CSS. Ecco qui quella che ho preparato come base dell'esempio. Vediamo le parti essenziali, partendo dall'HTML:

<div id="header">
    <h1><a href="#">Il logo qui</a></h1>
</div>

Ora la parte importante del CSS ai fini della tecnica. L'header sarà largo 600 pixel e alto 200, e mostrerà il titolo (che in casi reali sarà il link che punta alla home page) in una data posizione:

div#header{position:relative;width:600px;height:200px}
div#header h1{position:absolute;top:30px;left: 30px}
div#header a{color: #FF5026;text-decoration: none}

Per consentire il posizionamento assoluto al suo interno, è importante dichiarare il posizionamento relativo dell'header, insieme alle due dimensioni. L'h1 viene posizionato assolutamente. Ovviamente potrete scegliere differenti coordinate, specificando top o bottom per la posizione verticale e left o right per quella orizzontale.

Infine, al titolo, che è anche un link, viene assegnato un colore e tolta la sottolineatura. È importante che il colore del testo abbia un buon contrasto nella posizione che occupa per tutte le immagini che vorremo usare.

Altri articoli

Altre guide

Altre newsletter