Navigazione verticale

In questo capitolo impareremo come aggiungere una navigazione verticale o voci di menu al sito web. Andiamo passo dopo passo.

Step 1 - Per creare voci di menu o navigazione verticale, aggiungiamo il seguente codice in <div id = “left-nav”> nel file index.html che contiene l'elenco delle voci di menu.

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- È un semplice elenco puntato per il menu principale. Per creare un collegamento ipertestuale, vai aldesign view o code view.

Step 3 - Seleziona l'elemento che desideri utilizzare come collegamento ipertestuale e premi Ctrl + K.

Step 4- Fare clic sul pulsante Descrizione schermata…. Inserisci il testo che desideri come filescreentip e fare clic su OK.

Step 5 - Nel Text to display campo, inserisci Home e selezionare il file index.html e quindi fare clic su OK.

In questa fase, la nostra pagina index.html appare come segue:

Step 6 - Aggiungere altri collegamenti ipertestuali per altre voci di menu, come mostrato nel codice seguente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

Step 7- Per impostare lo stile per la navigazione in alto, vai al pannello Gestisci stili. Fare clic con il tasto destro su#left-nav e seleziona Modifica stile ...

Step 8 - Immettere il valore 0.9 nel campo della dimensione del carattere e selezionare em dall'elenco a discesa accanto alla dimensione del carattere e vai alla categoria Box.

Step 9- Controlla il riempimento "Uguale per tutti" e inserisci 5 nel campo in alto e fai clic su Ok. Dal pannello Applica stili, fai clic su Nuovo stile ...

Step 10 - Entra #left-nav ulnel campo Selector. Selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e nella categoria Elenco, selezionare nessuno dal campo del tipo di stile dell'elenco e fare clic su OK.

Step 11 - Ancora una volta, dal Apply Styles pannello, fare clic su New Style. Deseleziona l'imbottitura "Uguale per tutti". Immettere 0.2 nel campo inferiore e fare clic su OK.

Step 12 - Entra #left-nav ul li nel campo Selettore e seleziona il foglio di stile esistente dal menu a discesa "Definisci in" e vai alla categoria Casella.

Step 13 - Vai al pannello Applica stili e fai clic su Nuovo stile.

Step 14 - Entra #left-nav ul li a nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare il bianco come colore del carattere.

Step 15- Vai alla categoria Sfondo. Seleziona il colore come colore di sfondo

Step 16 - Vai al Box categoria e impostare i valori di riempimento.

Step 17 - Vai al Layoutcategoria. Selezionareblock dal display menu a discesa e fare clic su OK.

Step 18- Ora andiamo di nuovo al pannello Applica stili e fai clic su Nuovo stile. accedere#left-nav ul li a:hovernel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in". Seleziona il nero come colore del carattere.

Step 19- Ora vai alla categoria Sfondo. Seleziona il colore di sfondo per l'opzione di menu quando il mouse passa con il mouse sulla voce di menu e fai clic su OK.

Step 20 - Per controllare come appare, vai al menu File e seleziona Anteprima nel tuo browser.

Quando passi il mouse su una voce di menu, cambierà lo sfondo e il colore del carattere.