Microsoft Expression Web consente di sviluppare rapidamente pagine Web. Tramite Cascading Style Sheets (CSS) in Expression Web, si possa stilizzare il contenuto all'interno della pagina web. Lavoro di div come blocchetti di costruzione in CSS, consentendo di personalizzare come vengono posizionati gli elementi. È possibile aggiungere un'immagine di sfondo di un DIV e inserire testo, immagini o altro contenuto all'interno di esso. Poiché è possibile anche lo stile del tag DIV e immagine, è possibile centrare un'immagine all'interno di un'altra immagine in Expression Web.

Istruzioni

1

Aprire il file HTML che si desidera modificare in Microsoft Expression Web.

2

Fare clic sulla scheda "Codice" nella parte inferiore dello schermo per passare alla visualizzazione codice.

3

Aggiungere il seguente codice CSS tra i tag < HEAD > del codice HTML. Crea uno stile che centra l'immagine più piccola all'interno dell'immagine più grande ma non centrale l'immagine più grande:

< style type = "text/css" >

<!-

Body {auto margin: 0;}

bgImage {

background-image:URL("largerImage.jpg");

Larghezza: 600px;

Altezza: 450px;

}

IMG {

text-align: center;

display: block;

}

-->

< / stile >

4

Aggiungere il seguente codice CSS tra i tag < HEAD > del codice HTML. Crea uno stile che centra l'immagine più grande sia l'immagine più piccola all'interno di esso:

< style type = "text/css" >

<!-

Body {auto margin: 0;}

bgImage {

background-image:URL("largerImage.jpg");

Larghezza: 600px;

Altezza: 450px;

auto di margin: 0;

}

IMG {

auto di margin: 0;

display: block;

}

-->

< / stile >

5

Sostituire "largerImage.jpg" con il nome di ingrandire l'immagine sullo sfondo. Sostituire l'altezza e la larghezza con le dimensioni effettive che si desidera utilizzare.

6

Scorrere fino al tag < BODY > e aggiungere il seguente codice dove si desidera visualizzare l'immagine seconda. Aggiungi ' < div id = "bgImage" >' prima del tag < IMG > per applicare lo stile creato nel passaggio 3 o 4.

< div id = "bgImage" >

< img / >

< / div >

< / body >

7

Sostituire "smallerImage.jpg" con il nome della seconda immagine che è centrato all'interno dell'immagine principale.

Consigli & Avvertenze

• Se Internet Explorer 8 non centra l'immagine dopo aver aggiunto "auto margin: 0", sostituire il tag < HTML > nella parte superiore della tua pagina con il seguente XHTML 1.0 transitional <! DOCTYPE > Dichiarazione (da W3 Schools):
• <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN"
• "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >