综合示例
项目简介
为世界著名的乐队Jay Skript and the Domsters设计一个网站。
原始资料
有关乐队的介绍材料、巡演日程，以及一些照片。
站点结构
站点文件夹目录结构：
/images
/styles
/scripts
要创建的页面：
/Home
/About
/Photos
/Live
/Contact
对应如下文件：
index.html
about.html
photos.html
live.html
contact.html
页面结构
站点每个页面分成几个区域：
头部区域包含站点的品牌性信息，也是放logo的地方。这个区域要使用<header>元素。
导航区域包含一组链接，指向各个页面。这个区域使用<nav>元素。
内容区域包含每一页的实质性内容，这个区域使用<article>元素。
模板代码：
设计
外观设计
CSS
建议把所有CSS分别放在几个文件：
layout.css 整体布局
color.css 颜色
typography.css 版式
这些样式表都可以导入到一个基本的样式表中：
把包含这三行代码的文件保存为basic.css，并放在styles文件夹中。如果想添加一个新样式表或者删除一个样式，只要编辑basic.css即可。在模板的<head>元素中通过<link>元素引入这个基本样式表，然后在页面<header>中添加一个<img>标签，指向logo图片。也可以向<article>中添加一些临时性填充文本：
颜色
记住，不管为哪个元素应用什么颜色，都要同时给它一个背景色。否则，就有可能导致意外，看不到某些文本。
此时模板图： 
布局
如图： 
版式
字体和大小显然应该放在版式文件中，而外边距和内边距难以说清，这里将内边距信息放在布局中，外边距信息放在版式中：
如下： 
标记
主页index.html添加一段介绍性文字：
JavaScript
在编写DOM脚本之前，必须先确定怎么组织JavaScript文件。如果站点需要很多长长的脚本，那最好把它分割成几个小文件。本站很简单，所需的JavaScript代码也不长。为了减少请求的数量，将所有脚本放在global.js文件里。需要添加的函数：addLoadEvent函数，insetAfter函数，addClass函数。
页眉突出显示
修改color.css文件，添加为here类定义的样式：
增加函数highlightPage：
如图所示： 
利用highlightPage函数，还可以通过给每个页面的body元素添加id属性，可以为每个页面应用不同的样式。 新的highlightPage：
更新layout.css，添加以下代码：
如此一来，每个页面的头部就会应用不同的背景图像了。
JavaScript幻灯片
需要用到moveElement函数。还要创建幻灯片元素并准备相应链接：
效果如图： 
内部导航
制作About页面。在about.html的<article>元素添加如下标记：
但是页面略长，而<nav>元素中包含的内部链接就是解决这个问题。单击<nav>中的每个链接，都会跳到带有相应id属性的<section>。使用JavaScript和DOM，选择性地每次只显示其中一个部分（section）：
然后还需要在<article>中的<nav>所包含的链接被单击时调用showSection函数：
效果如图： 
JavaScript图片库
接下来制作photos.html
更新layout.css，添加：
在global.js中添加showPic函数和preparePlaceholder函数。微小改动：将description文本放到了placeholder图像上方。 效果预览： 
增强表格
制作live.html页面
更新layout.css:
更新color.css:
在global.js中添加stripeTables函数、highlightRows函数和displayAbbreviations函数。 改动：
highlightRows：没有直接运用样式，而是使用addClass函数添加了highlight类。
displayAbbreviations：将content改为article元素。
更新layout.css
更新typography.css
更新color.css
效果如图： 
增强表单
构建一个联系表单
更新layou.css
然后基于模板创建submit.html，添加如下内容：
字段标签
表单中有三个字段：name、email和message。每个字段都有一个对应的<label>标签。很多浏览器会对label元素添加默认行为：如果label中的文本被单击，关联的表单字段就会获得焦点。但并不是所有浏览器都实现了该行为，写个函数保证在所有浏览器都有此行为：
表单验证
在使用JavaScript编写验证表单的脚本时，记住三件事：
验证脚本写得不好，反而不如没有验证。
千万不要完全依赖JavaScript。客户端验证并不能取代服务器端的验证。
客户端验证的目的在于帮助用户填好表单，避免他们提交未完成的表单，从而节省他们的时间。
提交表单
压缩代码
见最佳实践
Last updated