Il contenuto è re su Internet, ma cattiva progettazione pagina web può rovinare l'esperienza e si allontanano i lettori. L'elemento più visibile è lo sfondo. Può essere un colore solido, un'immagine ripetizione o una fotografia a colori. È possibile utilizzare tutti e tre.

istruzione

La scelta del tipo appropriato di immagine

1 Elencare le immagini sul suo sito web sito web riporta alla mente. Se il sito utilizza un logo o un avatar, usarlo come punto di partenza per l'elenco.

2 Prendere in considerazione il contenuto e il loro utilizzo. Uno sfondo può influenzare i tempi di caricamento e l'affaticamento degli occhi. I tempi di caricamento dovrebbero essere veloce, e l'affaticamento degli occhi devono essere ridotti al minimo.

3 Creare, commissione o la ricerca di eventuali immagini di sfondo. Rispettare i diritti d'autore. Mai dare per scontato che le immagini su Internet sono legali per l'uso.

4 Prova le tue immagini preferite, font e colori. Questo vi aiuterà a trovare la migliore combinazione per il sito.

Preparazione della immagine di sfondo

5 Ridimensionare l'immagine. Molti computer hanno una risoluzione dello schermo di 1024x768. Se si prevede di utilizzare una singola immagine, fissa, che tenere a mente le dimensioni.

6 Mettere i più importanti elementi visivi sul lato sinistro. I più piccoli risoluzioni e dimensioni delle finestre saranno ritagliare lo sfondo dal lato destro.

7 Salvare il file come JPG o PNG. JPG funziona meglio per le fotografie e PNG per le illustrazioni.

8 Mantenere la dimensione del file dell'immagine sotto i 100 KB. Che manterrà il rendering tempo verso il basso per la pagina.

La scrittura del Cascading Style Sheet (CSS)

9 Impostare un colore di sfondo. Tipo: body {background-color: # FF0000;}

I colori possono essere specificati anche da un nome, body {background-color: red;}, o RGB, {background-color: rgb (255,0,0);}.

10 Impostare un'immagine di sfondo. Tipo: body {background-image: url ( 'myimage.jpg');}

Per impostazione predefinita, le piastrelle di immagine in tutte le direzioni.

11 Impostare come le piastrelle di immagine. Tipo: body {background-image: url ( 'myimage.jpg'); background-repeat: repeat-x; }

"Repeat-x" imposta la piastrellatura solo orizzontale. Utilizzare "repeat-y" per il rivestimento verticale.

12 Creare un'immagine non ripetibile che scorre con la pagina. Tipo: body {background-image: url ( 'myimage.jpg'); background-repeat: no-repeat; }

13 Fissare l'immagine in modo testo scorre su di esso. Tipo: body {background-image: url ( 'myimage.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

Consigli e avvertenze

• Quando si lavora con le immagini, avviare grandi dimensioni. Immagini sempre può essere ridotto ma non ingrandite. Dettagli può anche essere tirato da immagini di grandi dimensioni da utilizzare come elementi decorativi sul sito per fare una esperienza di progettazione più coesa.
• Immagini in CSS sono relative al file CSS.
• CSS può essere salvato in un file css a parte, mettere in cima alla pagina web nell'intestazione o scritta come stili inline. Un file separato funziona meglio quando un sito web ha più pagine.