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.