WEB技术基础大作业设计：页面布局与技术应用.pdfVIP

WEB技术基础大作业设计

：

班级：11级嵌入班

学号：112208204134

一、作品说明

借鉴实验七中的“装修公司”的素材和布局风格按以下所需的技术需求作出相应的

改变以得到最终效果。

二、技术说明

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

CSS+Div）。

说明：页面布局中我整体采用CSS+Div。

整个页面由名为container的Div块构成，其中又分为标题“menu”和底部“footer”模块，

中间模块分为三部分“info1”，“info2”和“info3”构成，5个Div块的布局由CSS控

制，包括宽度、高度、内边距、外边距和背景颜色等属性，并设置“info1”和“info2”的

浮动方式为左浮动，“info3”的浮动方式为右浮动。

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

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

说明：网页标题由于是采用为整个标题，故不好设置标题。

1、在“info1”中的“主要成员”和“info2”中的“致辞”以及“info3”中的“理念和

价值准则”的三个大标题均设置为font-size属性为30px，color属性为#451B08，text-align

属性为center。

2、在“info1”，“info2”和“info3”三个模块中剩余的文字描述部分将其属性设置为

disy属性为block，color属性为#933，font-size属性为14px，margin-top属性为20px，

margin-bottom属性为20px，border-bottom-width属性为1px，border-bottom-style属性为solid，

border-bottom-color属性为#999，padding-bottom属性为5px。

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

文件等）。

说明：在文档中创建了两个，一个是e-mail，一个是创建了图形的矩形热点。

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

说明：在网页中出现的Div块的布局使用CSS规则，在文字描述部分也是使用CSS样式表

设置。

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

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

和重置按钮等）。

说明：

1、在“info2”模块中创建表单，选用文本框和框，若点击“登录”则跳转到登陆页面，

若选择“”则跳转到页面。

2、在“”页面中，以下三项均使用表单创建。

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

藏层、启用浏览器窗口等)。

说明：

1、在“info1”中的元素中设置增大收缩的js效果。

2、在“info3”中的元素中设置启用浏览器窗口。

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

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

说明：Spry的使用主要是在“”页面中使用，以下内容均使用spry构件制成。若“提

交”则跳转到“成功”页面。

三、心得体会

在此次大作业完成过程中，方面并没有太大的问题，但是在素材寻找和设计布

局却花了很长时间都没有找到合适的，于是直接选用了平时作业中的素材，加上以上设计要

求中的做修改和增加内容完成了整个的大作业。端制作方面，需要技术但更需要

设计感还需要配合ps等制图工具的使用。