Construire un site web à partir de zéro Partie V:. Ajout de navigation.
Qu'allons nous faire
Dans ce chapitre, nous allons:
- Ajouter un menu de navigation
Ajouter un menu de navigation
Dans le dossier Demoweb, modifier les script.js de fichiers JavaScript.
Ajouter ce qui suit au script:
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";
Modifier la feuille de style
Dans le dossier Demoweb, modifiez votre feuille de style site.css
Ajouter ce qui suit au contenu du fichier:
Addition à site.css
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display:
inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: black;
}
Modifier la page d'accueil
Dans le dossier Demoweb, éditer votre page d'accueil index.html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main
Ingredients:</h2>
<p>Pages (HTML)</p>
<p>Style Sheets
(CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files
and Databases)</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
</html>
Essayez - le vous - même »La page ci-dessus, est une copie de la page des chapitres précédents, avec un élément de navigation supplémentaire.
Modifier Toutes les pages
Dans le dossier Demoweb, ajoutez l'élément de navigation pour les autres pages (customers.html et about.html).
Lire la suite
En savoir plus sur les listes HTML dans notre Tutoriel HTML .