aiuto "galleggianti" fare layout Web intricati disegni possibile. Gli sviluppatori professionisti utilizzano l'attributo CSS "float" per posizionare le immagini e altri oggetti nelle pagine Web. Utilizzando uno stile di "galleggiare sinistra", per esempio, è possibile rendere il testo in un elemento HTML arco di avvolgere intorno al lato destro dell'immagine. Potreste aver visto questo schema di disposizione durante la visualizzazione di giornali e riviste articoli che contengono la disposizione del testo intorno alle immagini. Imparare a galleggiare un'immagine in una pagina Web e scoprire un mondo di nuove funzionalità di formattazione del testo che può migliorare il vostro sito.

istruzione

1 Aprire un documento HTML utilizzando il blocco note o un editor HTML.

2 Incolla questo codice nella sezione body del documento:

<Img class = "floatImageLeft" />

<Span>

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test test test test test test test test test test test test test test test test

test

</ Span>

Questo codice crea un'immagine - utilizzando un tag img - e un arco. L'intervallo contiene il testo che vi avvolgerà intorno all'immagine. Si noti che l'immagine IMG fa riferimento a una classe CSS chiamato "floatLeft." Sostituire "testImage.png" con l'URL di un'immagine sul Web o il nome del percorso di un'immagine sul disco rigido. Per esempio, se un'immagine denominata "park.gif" si trova in una cartella denominata "Immagini" sull'unità "C", creare il tag img nel modo seguente:

<Img class = "floatImageLeft" />

3 Incollare le seguenti definizioni delle classi CSS nella sezione head del documento:

<Style type = "text / css">

.floatImageLeft {

float: left;

margin-left: 10px;

margin-right: 20px;

}

.floatImageRight {

float: right;

margin-left: 10px;

margin-right: 20px;

}

</ Style>

La classe floatImageLeft, riferimento l'immagine, contiene un attributo float. Il valore di questo attributo è "left". Questo valore indica ai browser galleggiare oggetti sul lato sinistro di una pagina Web. La classe "floatImageRight" galleggia oggetti sul lato destro della pagina.

4 Salvare il documento e aprirlo utilizzando un browser. La classe floatLeft provoca l'immagine a galleggiare verso il lato sinistro della pagina Web; il testo si avvolge intorno lato destro dell'immagine.

5 Torna alla sezione corpo del documento HTML e modificare il codice "floatImageLeft" a "floatImageRight" nel tag IMG. Salvare il documento, per poi tornare al vostro browser.

6 Premere il tasto "F5" per ricaricare il browser. L'immagine si sposta verso il lato destro della pagina Web e il testo intorno lato sinistro dell'immagine.

Consigli e avvertenze

• Le impostazioni dei margini, definite nelle classi CSS float, assicurano che le immagini non aggrapparsi troppo vicino a entrambi i lati della pagina Web. Questo spazio bianco aggiuntivo tra un'immagine e il bordo di una pagina Web aiuta a creare un layout più professionale. I valori dei margini permettono anche di controllare la distanza tra l'immagine e il testo adiacente si trova nella campata. Esperimento con valori diversi per i margini sinistro e destro per vedere come i diversi valori influenzano l'aspetto della vostra immagine e la durata.