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.xhtml，CSS样式文件夹、图片文件夹等，JS脚本直接嵌入到XHTML文档内部，没有单独设置文件夹。本次案例组织结构如下。

hbsiWeb------------项目名称

index.xhtml------------网站首页

css-------------------样式表文件夹

css.css----------样式表文件

Images----------------图片文件夹

lingyu-----------------二级页面文件夹

zhuanli.xhtml----二级页面