Nwlapcug.com


Come utilizzare i tag DIV per un Layout dei contenuti

Stabilisce il contenuto della pagina Web è un aspetto importante del Web design. È possibile utilizzare un numero di elementi in HTML per dividere una pagina Web e stendere il contenuto correttamente, inclusi tabelle, livelli, campate e tag DIV. Utilizzato per definire le divisioni in un documento HTML, il tag DIV sono flessibile, facile da usare e compatibile con i browser Web. Essi sono spesso utilizzati in combinazione con fogli di stile CSS (CSS) a migliore lay out, formato o che permettono di migliorare il contenuto in una pagina Web. Utilizzando div e CSS, è possibile creare divisioni sulla tua pagina Web, ad esempio intestazioni e barre laterali.

Istruzioni

1

Cliccare su "Start", "Programmi" "Accessori" e "Blocco note".

2

Digitare il seguente testo nella parte superiore del blocco note:

< html >

< style type = "text/css" >

<!...

intestazione () {

height: 100px;

width: 500px;

background-color: #FFFFCC;

}

corpo () {

height: 300px;

width: 500px;

}

corpo #sidebar {

height: 300px;

width: 80px;

float: left;

background-color: #009900;

}

piè di pagina () {

height: 100px;

width: 500px;

background-color: #000000;

color: #FFFFFF;

}

-->

< / stile >

< / head >

< corpo >

< div id = "header" > contenuto per id "intestazione" va qui < / div >

< div id = "corpo" >

< div id = "barra laterale" > contenuto per id "sidebar" va qui < / div >

< / div >

< div id = "footer" > contenuto per id "piè di pagina" va qui < / div >

< / body >

< / html >

Questo codice crea quattro tag DIV utilizzando il < div > di apertura e chiusura < / div > combinazioni di tag HTML. Il codice quindi dà loro ID separati: sidebar, corpo, intestazione e piè di pagina. E ' anche crea un blocco CSS utilizzando < style > apertura e chiusura < / stile > combinazioni di tag HTML. Quindi formatta gli attributi di ogni tag DIV individuali, come colore di sfondo, posizionamento, larghezza e altezza, per creare un layout di pagina Web. È ora possibile inserire il contenuto all'interno dei singoli tag DIV.

3

Fare clic su "File" e poi "Salva come". Selezionare "All files" in "Salva come tipo".

4

Salvare il file come file HTML sul tuo computer inserendo. html alla fine del nome del file, ad esempio, usingDivTags.html.

5

Individuare il file HTML in cui è stato salvato sul tuo computer e fare doppio clic su di esso. Dovrebbe aprire nel browser Web e presentarvi con un layout colorato, quattro lati.