Web编程基础实验大作业设计报告.pdfVIP

Web技术基础

112208206124刘德伦

一，作业要求：

1.页面布局（可根据具体设计采用以下一种或多种页面布局技术：表格、框架、

CSS+Div）。

2.文本应用（要求在网页中输入文本，进行文本属性设置，设置网页标题、文本大

小、文本颜色、文本对齐方式等）

3.超的应用（要求在网页中要创建文本、E-mail、命名锚记、下

载文件等）。

4.CSS样式表的应用（要求在网页中要应用到CSS样式表）。

5.表单的应用（要求在网页中要创建表单，表单对象并设置其属性，包括文本

框、框、单选按钮、复选框、文件上传框、下拉选择框、提交按钮和重置按

钮等）。

6.JavaScript行为的应用(要求在网页中创建常见类型的行为,如行为的显示隐藏层、

启用浏览器窗口等)。

Spry构件的应用（要求在网页中创建使用spry表单验证,如,spry验证文本域、spry

验证、spry验证确认、spry验证单选按钮等）。

二，设计目的：

个人制作江汉大学的主页，内容包括有江汉大学的介绍，学院的介绍，

等功能，并通过导航栏进行跳转至其它子网页。在不同的子页面运用不同的

JavaScript行为，来显示不同的浏览效果，提升网页的视觉效果。

三，设计步骤：

开发环境：win7dreamweavercs5

1.建立站点WEB大作业

2.页面布局技术

主要采用CSS+DIV布局，子页面存在表格布局，实现了网页的多样化。

用到的CSS样式表如下图所示：

3.文本应用（要求在网页中输入文本，进行文本属性设置，设置网页标题、文本大小、文本颜

色、文本对齐方式等）

网页中对文本输入属性的设置有如下几种：

实际显示效果如下图：

4.超的应用

在每个子页面的导航栏，都实现了站内的功能，可以跳转至任意子页面。

设置的menu如下图

设置的外站连接（连接到各学院的）

例如：数计学院

锚有：

New.html网页中，在年时间轴上设置锚，连接代码如下，用来显示不同年份时期的

运行效果为：

点击“2013“文字后，运行效果为：

5.CSS样式表的应用

本中样式表的使用类型为外部样式，且有多个子网页调用同一个样式表

layout.css。

网页中整体布局定义的样式表有以下几种：

定义页面中Javascript行为的样式表有：

5.表单的应用

在contact.html网页中，运用到表单元素来实现对学校意见信息的收集。如下图：

6.JavaScript行为的应用

在welcome.html网页中实现利用JavaScript行为来实现轮换的特效，使得图

片浏览效果更佳。

应用相关代码如下：

效果如下：

7.Spry构件的应用

对文本框输入进行控制：

各单元格中的Spry验证构件及属性如下：

1，：Spry验证文本域，最小字符数为4；

2，：Spry验证文本区域，最大字符数为11；

3，地址：Spry验证文本区域，最大字符数为50；

4，内容：Spry验证文本区域，最大字符数为100；

部分功能函数代码如下：

四，总体效果：

主界面

院系

信息反馈

五，设计心得：

通过本次WEB课程的学习以及大作业的完成，让我懂得了开发设计一个的

具体思路和步骤。通过老师的精心指导和实际的课程实验让我学会了各种设计

的技术例如表单，框架，层叠样式，内容验证等等基本方法，以及采用语言制

作特效。虽然实验过程中遇到了不少的，比如说样式设计达不到自己的理想要

求，一些语言无法实现等，但通过收集各种资料查找各