一、（一）中的代码还可以修改的地方。
在（一）中，如果是运行在服务器下，如apache等，可以把head和navigation的div抽取出来，放置在另一个html文件里，然后在页面中，include进来。这样，当要对导航栏进行修改时，只需要修改一个文件，而不用修改所有相关的页面文件。不过，我这里没有这样做，没有抽取出来。
二、实现当前页面的标识+不同页面的head头部背景图片的改变
现在在（一）实现的基础之上，来实现导航栏当前所选页面的菜单项高亮显示，让访问者一路了然知道“我正在这里”。
首先，修改color.css文件，给菜单项增加一个class="here"属性，也就是说等一下这个here是使用javascript动态增加的一个属性。现在先在控制颜色的color.css中设置here的样式声明。追加这个代码：
#navigation a.here:link,#navigation a.here:visited,#navigation a.here:hover,#navigation a.here:active{ color:#eef; background-color: #799;} 此时，你或者可以先尝试一下，给导航栏中的其中一个<a>标签添加一个class="here"的属性，可以看到该菜单项高亮显示。
然后，来创建一个global.js，存放所有页面会用到的js。
在《JavaScript DOM编程艺术》里面，前面几章给我们写了很多个可以使用的函数。现在把这几个有用的函数添加到global.js的文件里面来。
/******************绑定函数到onload事件上的函数*************************/function addLoadEvent(func){ //参数func为页面加载完成要执行的函数 var oldonload = window.onload; //把现有的window.onload事件处理函数的值存入变量oldonload中 if(typeof window.onload != 'function'){ //判断 如果onload处理函数没绑定任何函数，则添加新函数；否则，追加新函数 window.onload = func; }else{ window.onload = function(){ //这里使用了匿名函数包纳两个函数 oldonload(); func(); } }}/*******************跟JavaScript中的insertBefore方法对应的一个函数*******************/function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextElementSibling); }}/******************动态添加class属性的函数*****************************/function addClass(element,value){ //调用该函数，就是创建一个例如：class="here"，给标签增加了增加了这么一个属性 if(!element.className){ element.className = value; }else{ newClassName = element.className; newClassName +=" "; newClassName += value; element.className = newClassName; }}
添加高亮显示的函数
/*****************高亮显示导航栏当前点击菜单***************************/function highlightPage(){ //判断 if(!document.getElementById) return false; if(!document.getElementsByName) return false; if(!document.getElementById("navigation")) return false; //获取 var nav = document.getElementById("navigation"); var links = document.getElementsByTagName("a"); //逻辑操作 for(var i =0; i
（1） if(currenturl.indexOf(linkurl) != -1) indexOf（）方法，可以在一个字符串中找一个子串的位置，，没有找到，返回-1，找到返回所在的位置。 （2） var linktext = links[i].lastChild.nodeValue.toLowerCase(); //把提取出来的文本转换为小写
document.body.setAttribute("id",linktext); 获取到当前链接的最后一个子节点的值——也就是说当前链接的标识文本。 当前链接的是如此这般的：这两行代码可以给body元素分别设置一个唯一的id属性值。如图： 此时主页的body是有一个id=”home“，另外我们还有一个id="header"的div，结合这两个id，就可以给不同的页面设置不同的背景图片 3、在webdesign.css添加设置每个页面的header的背景图片
#about #header{ background-image: url(../images/basshead.jpg);}#photos #header{ background-image: url(../images/bassist.jpg);}#live #header{ background-image: url(../images/drummer.jpg);}#contact #header{ background-image: url(../images/lineup.jpg);}
4、为了看到效果，我们先写出一个about.html的页面，来看看导航栏菜单项和header的背景图片是否改变了 about.html
webDesign 
About the band
Jay Skipt
Jay Skript is going to rock your world
Jay Skript is going to rock your world
Jay Skript is going to rock your world
Jay Skript is going to rock your world
Jay Skript is going to rock your world
The Domsters
The Domsters have been around,in one form or another,for almost as long.It's only in the past few years taht The Domsters.
效果截图：两个效果都实现了