Nwlapcug.com


Un Tutorial di HTML per l'aggiunta di navigazione a sinistra

Un Tutorial di HTML per l'aggiunta di navigazione a sinistra


La possibilità di navigare a una pagina Web precedente esiste all'interno di tutti i browser Web per impostazione predefinita. Tuttavia, fornendo una sezione che consente di accedere a più pagine di un sito Web da un comodo menu, un web designer può semplificare la navigazione per gli utenti.

Istruzioni

1

Aprire il blocco note e impostare il file HTML con il seguente codice:

< html >
< head >

< / stile >
< / head >

< corpo >
< div id = \ "navigation\" >

&lt;a href=\&quot;\&quot;>Navigation item 1&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 2&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 3&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 4&lt;/a>

< / div >
< / body >

< / html >

Il < div id = \ "navigation\" >< / div > Tag separare gli elementi di navigazione come contenuto speciale che cadrà nel riquadro di spostamento.

2

Aggiungere il codice del foglio di stile tra la testa di < >< / testa > Tag, simile al seguente:

< stile rel = \ "stylesheet\" tipo = \ "testo/css\" >
{div #navigation
galleggiante: sinistra
VAI
Larghezza: 100px
VAI
Altezza: 100%
VAI
colore: #ffffff
VAI
background-color: #666
VAI
padding: 5px
VAI
}
< / stile >

Lo stile foglio dettami di informazioni come le informazioni nel riquadro di navigazione < div >< / div > Tag apparirà. In sostanza, il codice del foglio di stile crea un \"box\" che conterrà nulla nei tag navigazione. Così, tutte le informazioni all'interno di questi tag saranno conformi allo stile che definisce le informazioni del foglio di stile. Il \"float\" attributo nel foglio di stile dice al browser che la sezione di navigazione saranno \"float\" a sinistra di qualsiasi altro contenuto. Il \"width\" attributo consente di verificare che la casella intorno agli elementi di navigazione rimarrà a 100 pixel vasta.

3

Salvare il file come un file HTML selezionando \"File,\" quindi \"Save come... \ "Nella casella di testo nome file digitare il nome del file con estensione. html. Il file dovrebbe assomigliare a questo:

< html >
< head >
< titolo >< / title >
< meta http-equiv = \ "Contenuto-Type\<MIME" contenuto = \ "text/html; charset = iso-8859-1 \ ">
< stile rel = \ "stylesheet\" tipo = \ "testo/css\" >
{div #navigation
galleggiante: sinistra
VAI
Larghezza: 100px
VAI
Altezza: 100%
VAI
colore: #ffffff
VAI
background-color: #666
VAI
padding: 5px
VAI
}

< / stile >
< / head >

< corpo >
< div id = \ "navigation\" >

&lt;a href=\&quot;\&quot;>Navigation item 1&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 2&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 3&lt;/a>
&lt;a href=\&quot;\&quot;>Navigation item 4&lt;/a>

< / div >
< / body >

< / html >

4

Aprire il file in un browser Web. Gli elementi di navigazione deve essere allineato al lato sinistro. I tag di navigazione < div > ora servono come il pannello di navigazione a sinistra.