Neueste Web-Entwicklung Tutorials
 

Web Building - Hinzufügen von Navigations


Der Aufbau einer Website von Grund auf neu Teil V:. Hinzufügen Navigation.


Was wir tun werden

In diesem Kapitel werden wir:

  • Fügen Sie ein Navigationsmenü

Fügen Sie ein Navigationsmenü

Im demoweb Ordner, bearbeiten Sie die Datei script.js JavaScript.

Fügen Sie den folgenden, um das Skript:

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>";

Bearbeiten Sie das Stylesheet

Im demoweb Ordner, bearbeiten Sie Ihre Stylesheet site.css

Fügen Sie den folgenden auf den Dateiinhalt:

Neben 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;
}

Bearbeiten Sie die Homepage

Im demoweb Ordner, bearbeiten Sie Ihre Startseite 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>
Versuch es selber "

Die Seite oben, ist eine Kopie der Seite aus den vorangegangenen Kapiteln, mit einem zusätzlichen Navigationselement.


Bearbeiten Alle Seiten

Im demoweb Ordner, fügen Sie das Navigationselement zu den anderen Seiten (customers.html und about.html).


Weiterlesen

Lesen Sie mehr über HTML - Listen in unserem HTML - Tutorial .