بناء موقع على شبكة الانترنت من الصفر الجزء الخامس: إضافة الملاحة.
ماذا سنفعل
في هذا الفصل سوف:
- إضافة قائمة الملاحة
إضافة قائمة الإنتقال
في المجلد 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>";
تعديل ورقة الأنماط
في المجلد 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 .