Il World Wide Web Consortium ha approvato un insieme di standard di progettazione che governano come pagine Web vengono presentati agli utenti Web. Queste regole sono note come Cascading Styles Sheets (CSS). Molti Web designer ora utilizzare i CSS per stile e lay out loro elementi di codice di Hyper Text Markup Language (HTML). Tuttavia, questo non è sempre il caso. Nel passato web designer utilizzato basato su tabella regole HTML per disporre il loro contenuto. Ora, per sfruttare gli standard CSS, Web designer deve tirare i contenuti come immagini dal layout basato su tabella e posizionare il contenuto utilizzando le regole CSS.

Istruzioni

1

Creare una nuova regola CSS per elemento wrapper di immagine. Questo è l'elemento div HTML che conterrà l'immagine. Ai fini di questa esercitazione il div è dato l'identità di "imageDIVWrapper", ma può essere un nome qualcos'altro se necessario.

imageDIVWrapper {} 2

Assegnare l'immagine a div. Questa operazione viene eseguita impostando la proprietà immagine di sfondo del div. Potete anche scrivere una regola di background-repeat ripete l'immagine lungo sia l'asse orizzontale o verticale, se lo si desidera. In questo caso la proprietà background-repeat è impostata a "no-repeat".

imageDIVWrapper () {

immagine di sfondo: URL(yourImage.gif);

background-repeat: no-repeat; }

3

Stabilire l'altezza e la larghezza del wrapper div. Questo esempio imposta la proprietà width e height del div a 50 pixel di larghezza e 100 pixel di altezza.

imageDIVWrapper () {

immagine di sfondo: URL(yourImage.gif);

Larghezza: 50px;

Height: 100px;}

4

Impostare la proprietà position e margine. La proprietà position indica al browser dove posizionare i div. In questo caso il div è posizionato utilizzando la proprietà float e viene spostato a sinistra. La proprietà margin stabilisce un margine tra questo div e altri divs. Se l'immagine è un'immagine di più parti che dovrà essere posizionata a filo contro un'altra parte dell'immagine, il margine deve essere impostato a zero pixel. In questo esempio, il margine è collocato a cinque pixel.

imageDIVWrapper () {

immagine di sfondo: URL(yourImage.gif);

background-repeat: no-repeat;

Larghezza: 50px;

Altezza: 50px;

float: left;

margin: 5px;}

5

Creare l'elemento div all'interno del codice HTML. Posizionare l'elemento div all'interno del documento HTML dove si desidera che l'immagine venga visualizzata.

< div id = "imageDIVWrapper" >< / div >