5.1 系统概述
本例开发的静态页面比较简单，通过这样一个简单的例子，希望读者掌握XHTML+CSS+JavaScript相结合的开发过程，为后续PHP的学习打下坚实的基础。
1．需求分析
作为介绍网页设计的精品课程网站，主要实现该课程全部教学资源共享的目的，因此定位为宣传类网站。
（1）面向人群：同类院校教师、学生等。
（2）网站目标：希望通过该网站展示学院的教学水平、文化和师资力量，传达出学校的育人理念。
（3）网站风格：颜色明快、简洁大方、内容丰富。
2．功能需求
（1）logo：明确显示学院育人理念；显示出精品课程的名称。
（2）导航栏包括首页、课程设置、教学内容、教学团队、资源中心、学生作品、教学效果、教学方法；页面主体展示学生作品、介绍该网站。
（3）实现一个二级页面，“课程设置”中的“内容组织与安排”。
3．网页总体设计
本例的主要目的是让读者掌握使用XHTML+CSS+JavaScript相结合进行静态页面开发的全过程，熟悉简单静态页面的开发方法与步骤，熟练掌握table标签在页面准确布局中的技巧。
整个设计过程中使用到的技术包括：
（1）XHTML文档的DTD声明。
（2）xmlns的声明。
（3）table标签布局。
（4）XHTML常用标签的使用。
（5）CSS外部文件与内部文件修饰方法。
（6）js脚本的设计。
①变量的声明；
②自定义函数的使用；
③流程控制语句的使用；
④数组对象的使用；
⑤ DOM的运用；
⑥ BOM的检测。
4．开发环境
本案例实现过程简单，采用如下环境开发：
（1）操作系统：Windows 7。
（2）开发工具：记事本。
（3）浏览器：IE 8.0。
5．文件夹的组织结构
静态网页的目录比较少，结构非常简单，主要有首页文件index.html，CSS样式文件夹、图片文件夹等，JS脚本直接嵌入到XHTML文档内部，没有单独设置文件夹。本次案例组织结构如下。
hbsiWeb------------项目名称
index.html------------网站首页
css-------------------样式表文件夹
css.css----------样式表文件
Images----------------图片文件夹
lingyu-----------------二级页面文件夹
zhuanli.html----二级页面