En son web geliştirme öğreticiler
 

Web Bina - Ekleme Gezinme


Sıfırdan bir web sitesi oluşturma. Bölüm V: navigasyon ekleme.


Ne yapacağız

biz olacak bu bölümde:

  • Bir navigasyon menüsü ekleme

Bir Navigasyon Menüsü Ekle

Demoweb klasöründe, JavaScript dosyası script.js düzenleyin.

komut dosyasına aşağıdaki ekleyin:

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

Style Sheet düzenle

Demoweb klasöründe, sizin stil sayfası site.css düzenlemek

Dosya içeriğine aşağıdaki ekleyin:

site.css katılmalar

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

Ana Sayfa düzenle

Demoweb klasöründe, ana sayfa index.html düzenleyin.

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>
Kendin dene "

Yukarıdaki sayfa, ek bir navigasyon elemanı ile önceki bölümlerde sayfanın bir kopyasıdır.


Düzen Tüm Sayfalar

Demoweb klasöründe, diğer sayfalara navigasyon öğesi ekleyin ( customers.html and about.html ) .


Daha fazla oku

Bizim HTML listeleri hakkında daha fazla oku HTML Öğreticisi .