November 25
Le immagini possono ravvivare anche la pagina Web più noiosa quando si sa che cosa fare con loro. HTML e CSS consentono di inserire una foto e poi avvolgere il testo intorno ad esso utilizzando l'effetto "galleggiante". L'effetto galleggiante è spesso usato nelle pagine Web in cui le immagini si completano un corpo di testo come in una rivista o un libro. Con i CSS (Cascading Style Sheets), è possibile modificare l'allineamento in seguito.
1 Avviare un editor di testo. Aprire il foglio di stile per la pagina Web che si desidera modificare. Se non vi è alcun foglio di stile per esso ancora, creare un nuovo file e salvarlo come "style.css". È possibile utilizzare un nome diverso, ma mantenere l'estensione css.
2 Digitare la seguente dichiarazione CSS nel foglio di stile. Si noti che il "img" ecco un selettore CSS che corrisponde al tag HTML <img> che viene utilizzato per inserire le immagini in una pagina Web. La proprietà "float" e il suo valore "sinistra" (senza virgolette) saranno allineare l'immagine a sinistra quando viene visualizzato in una pagina Web.
img {
float: left;
}
3 Aggiungere una classe al selettore. Questo è facoltativo, ma è una buona idea usare uno se si utilizza più di un'immagine per pagina Web. Creare una classe per ogni allineamento dell'immagine che si intende utilizzare.
esempio:
img.floatleft {
float: left;
}
Immagini della classe "floatleft" sarà galleggiare a sinistra.
4 Fare clic alla destra della parentesi graffa destra. Premere il tasto "Enter" due volte per iniziare in una nuova riga nel foglio di stile. Digitare il seguente codice:
img {
float: right;
}
5 Aggiungere una classe al codice appena inserito. Tutte le immagini di questa classe saranno galleggiare a destra.
esempio:
img.floatright {
float: right;
}
6 Premere il tasto "Enter" di nuovo un paio di volte per iniziare una nuova riga. Digitare il seguente codice per le immagini che erediterà l'allineamento del tag HTML sono posti in. È possibile utilizzare qualsiasi nome per la classe, fino a quando non si utilizza tale nome per un'altra classe.
img.floatinherit {
float: inherit;
}
7 Salvare il foglio di stile utilizzando l'editor di testo.
8 Aprire la pagina Web in un editor di testo. Inserire il codice seguente tra i tag <head> e </ head> tag. Se si è già collegato il foglio di stile alla pagina Web, non c'è bisogno di fare questo.
<Link rel = "stylesheet" type = "text / css" href = "miostile.css" />
9 Cerca nel codice della pagina Web, fino a trovare il posto in cui si desidera inserire un'immagine. Ad esempio, si potrebbe desiderare di aggiungere l'immagine all'inizio di un paragrafo.
10 Digita il codice HTML per l'inserimento di una foto. Mettere tra i tag HTML per l'area in cui si desidera che appaia. Per esempio, se si desidera che l'immagine appaia all'interno di un paragrafo, posizionarlo tra i tag <p> e </ p>. Inserire la posizione dell'immagine nella attributo "src" e un nome visualizzato per esso nel attributo "alt".
esempio:
<P> <img alt = "image display name" /> </ p>
11 Aggiungere la classe che si desidera utilizzare. Utilizzare la classe che galleggia l'immagine nel punto desiderato. Fare riferimento al foglio di stile.
Esempio: Per allineare l'immagine a sinistra, digitare il nome della classe che ha un allineamento "sinistra" nel foglio di stile.
<P> <img class = "floatleft" alt = "image display name" /> </ p>
12 Ripetere per ogni immagine che si desidera a galleggiare. Salvare la pagina Web.