Inserire uno skin cliccabile sul sito
Inserire uno skin cliccabile sul sito, pubblicità sullo sfondo di una pagina web

In questo breve tutorial vedremo come creare una pubblicità cliccabile posizionata sull'intero sfondo di una pagina web

Scritto da: Stefano Cassone
Pagina 1 di 1

Tra le tendenze di Web Advertising degli ultimi anni è l'utilizzo di uno formato pubblicitario speciale, che si estende sull'intero sfondo di una pagina web. Lo skin cliccabile è di grande effetto, lo avrete sicuramente visto sui principali portali di informazione.

Non è nulla di straordinario, si tratta solamente di un'immagine fissa di sfondo creata ad-hoc in base al layout del sito che la ospita, che presenta la particolarità di poterci cliccare sopra e di conseguenza aprire il sito pubblicizzato in una nuova finestra.

Vediamo come creare un'immagine di sfondo cliccabile.

Step 1

Per prima cosa dobbiamo conoscere bene le dimensioni del contenitore del nostro sito, ossia la larghezza effettiva della nostra pagina web.

Supposto che la larghezza è di 1000px e che la classe css di riferimento si chiama .larghezza_sito avremo un html di base pari al listato seguente:

HTML DI BASE

< body >
    
    
Contenuto del sito
< /body >

ed un css di questo tipo

CSS DI BASE


    

Segue in basso  ▼

Step 2

A questo punto dobbiamo andare ad inserire nella struttura presentata nel listato precedente alcuni elementi html e css che consentono di implementare lo skin cliccabile.

  1. Lo sfondo come background del body e le relative proprietà css
  2. un'immagine chiamata blank.gif, trasparente da 1px x 1px (vedi css seguente)
  3. Il tag HTML del collegamento ipertestuale
  4. un DIV per fare in modo che il tag "a" creato non vada sempre in primo piano

HTML

< body style="background: url(/images/skinGaudium.gif) no-repeat fixed center top #f3560f;">
    
    
Il mio contenuto
< /body>

ecco il css finale

CSS


    

Nella fotogallery di questo articolo potete trovare alcuni modelli di sfondi che sono stati utilizzati su alcuni portali. Vi suggerisco di guardarli per capire con quali criteri / misure sono stati creati.

Buon lavoro!

Ti è piaciuto l'articolo? Ricevine altri comodamente via mail
GALLERIA FOTOGRAFICA
Articoli consigliati

Ottenere le dimensioni di una TV

Un praticissimo wizard per avere subito un'idea di quali possano essere le dimensioni di una TV. Comodo per chi vuole conoscere le misure di una TV a partire dalla diagonale.

Speciale Prestiti Online

Quali sono le migliori offerte? Cosa bisogna sapere prima di richiedere un prestito personale? Cerchiamo di spiegare come stanno le cose ...

Speciale Conti Correnti

Quali conti online scegliere? Puri o multicanale? Abbiamo identificato le migliori condizioni offerte dalle principali banche ...

Test velocita' ADSL

Esegui gratuitamente i migliori test per monitorare la velocità della tua connessione ADSL

Guadagnare con Internet

Guadagnare in Internet ? E' possibile. Con un po' di pazienza e fortuna, si possono avere apprezzabili risultati ..
TOP 10 articoli #01/17
Sitemap