สร้างเว็บไซต์จากรอยขีดข่วน Part V:. นำทางเพิ่ม
สิ่งที่เราจะทำ
ในบทนี้เราจะ:
- เพิ่มเมนูนำทาง
เพิ่มเมนูนำทาง
ในโฟลเดอร์ demoweb แก้ไขจาวาสคริปต์ script.js ไฟล์
เพิ่มต่อไปนี้สคริปต์:
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
ในโฟลเดอร์ demoweb แก้ไขแผ่น site.css สไตล์ของคุณ
เพิ่มต่อไปนี้เนื้อหาไฟล์:
นอกจาก 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;
}
แก้ไขหน้าแรก
ในโฟลเดอร์ demoweb แก้ไข 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>
ลองตัวเอง»หน้าข้างต้นเป็นสำเนาของหน้าจากบทก่อนหน้านี้มีองค์ประกอบการสำรวจเพิ่ม
แก้ไขทุกหน้า
ในโฟลเดอร์ demoweb เพิ่มองค์ประกอบนำทางไปยังหน้าเว็บอื่น ๆ (customers.html และ about.html)
อ่านเพิ่มเติม
อ่านเพิ่มเติมเกี่ยวกับรายการของเราใน HTML สอน HTML