Web Design: Inserire Un Immagine Autoscalabile

Chi vuole creare un sito, deve tenere conto di molti fattori, uno dei quali è la scelta della grafica.

Da qualche tempo a questa parte ho notato che sono sempre di più i siti che adottano, al posto di lavori di grafica come le sfumature o i pattern, una foto come background.

Se ci pensiamo bene, in effetti, una bella foto cattura molto di più l’attenzione, e aumenta la voglia di visitare il sito. Una bella immagine parla chiaro: da sola rende infatti l’idea dello scopo del sito.

Sicuramente viene da pensare che a questo punto il lavoro del Web Designer potrebbe venire annullato … non è così. L’immagine aiuta molto, ma il tocco di un grafico sull’immagine stessa serve proprio a concludere in bellezza il lavoro.

Ho inserito degli esempi per farti capire bene quale può essere il risultato finale. Dopo questi ti invito a seguire i miei suggerimenti su come inserire una immagine di sfondo autoscalabile.

come abbiamo detto prima per cambiare l’aspetto di una pagina è sufficiente aggiungere un‘immagine di sfondo a tutto schermo.

Il problema è scalare l’immagine affinche si adatti a qualsiasi risoluzione. Questa tecnica illustra come aggiungere un’immagine a un tag div e rendere entrambi scalabili Con Dreamweaver.

seleziona l’immagine desiderata, che deve avere dimensioni e proporzioni simili alla risoluzione maggiore che si puo avere.

Imposta tutti i margini della pagina su zero (Elabora>Proprietà di pagina>aspetto) per assicurarci che non vengano mostrati spazi vuoti.

Ora crea un tag div(inserisci>oggetti layout>tag div>nuova regola CSS), seleziona id come tipo di selettore, assegnagli un nome e premi ok.

Seleziona elementi di pagina e imposta altezza e larghezza del tag su 100%. Ora inserisci l’immagine nel tag div e imposta larghezza e altezza su 100%. Salva la pagina e visualizza un’anteprima.

Per popolare la pagina usa i tag div AP, che consente ai designer di rimuovere i tag sopra la parte superiore dell’immagine.

Autore: Maxselmi Diaz di creativebubbles.net