文章教程

5.1系统概述

9/17/2020 9:49:37 PM 人评论 次浏览

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----二级页面

教程类别