November 12
Giornali e riviste spesso creano affascinanti visual display utilizzando la semplice tecnica di avvolgere il testo intorno ad un'immagine. Gli sviluppatori web emulare questo effetto sulle pagine web utilizzando una varietà di tecniche di programmazione. Cascading Style Sheets (CSS), per esempio, hanno una proprietà "float", che semplifica il posizionamento di elementi di una pagina web. Utilizzando un pizzico di creatività e di poche righe di codice, è possibile aggiungere l'interesse e lo stile alle immagini del sito web da avvolgendoli con il testo.
1 Aprire il Blocco note, e incollare il seguente codice in un documento vuoto:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<title>Place style block below this title</title>
</ Head>
<Body>
<P>
<Img class = "right" alt = "" /> Aggiungi testo QUI
</ P>
<P>
<Img class = "right" alt = "" /> Aggiungi testo QUI
</ P>
</ Body>
</ Html>
Questo crea due paragrafi. Ogni paragrafo contiene un immagine e testo. Sostituire "xyz.jpg" con il nome di un'immagine sul disco rigido. Sostituire "ADD testo qui" con un grande blocco di testo di 100 parole o più. Si noti che ogni paragrafo ha una classe CSS. Il primo paragrafo fa riferimento a una classe denominata "sinistra", e il secondo comma riferimenti una classe denominata "giusto". Queste classi creano l'effetto di testo-wrap per ogni paragrafo.
2 Aggiungere il seguente blocco "stile" sotto il titolo:
<Style>
wrapLeft {float: left; margin: 5px;}
wrapRight {float: right; margin: 5px;}
</ Style>
Questo definisce le classi CSS ".wrapLeft" e ".wrapRight." Ogni classe contiene una proprietà "float". Un galleggiante provoca un elemento HTML spostare per quanto possibile in una direzione. Un valore "sinistra" induce a galleggiare verso sinistra, ed un valore "giusto" induce a galleggiare verso destra. La proprietà "margine" definisce il numero di pixel tra il bordo dell'oggetto e il suo oggetto vicina. In questo esempio, i margini sono cinque pixel.
3 Premere il tasto "CTRL + S." Notepad si aprirà la finestra "Salva con nome".
4 Passare alla cartella che contiene le immagini.
5 Tipo "Test_Wrap_Text1.html" nella casella di testo "Nome file" e fare clic su "Salva". Blocco note salvare il file come un documento HTML nella stessa cartella che contiene le immagini.
6 Individuare il file HTML in Esplora risorse e fare doppio clic su di esso per visualizzare nel browser.
7 Verificare che il testo avvolge le immagini sinistra e destra.