人机交互 网页制作 课程设计 实验报告.docx
《人机交互 网页制作 课程设计 实验报告.docx》由会员分享,可在线阅读,更多相关《人机交互 网页制作 课程设计 实验报告.docx(19页珍藏版)》请在冰点文库上搜索。
人机交互网页制作课程设计实验报告
《网页制作》课程设计报告
姓名:
班级:
学号:
指导教师:
设计时间:
一.课程设计目的
一、实验概述:
利用表格、框架、层和链接设计页面(各页面之间要有链接),使用数据库做一个留言板
1.1实验目的及要求:
目的及要求:
运用所学《网页设计》课程的理论知识和技能,分析和解决计算机应用实际问题,提高网页设计与制作能力;掌握利用软硬件资源发布一个具体网站的操作过程。
1.2实验原理:
利用Dreamweaver,MicrosoftOfficeAccess制作一个一个小型网站
1.3实验环境(使用的软件):
Dreamweaver、MicrosoftOfficeAccess
二、实验内容:
实验方案设计:
1.设计一个主页面(结构图如下
主页
Home
Diary
Gallery
Photo
Collection
Guest
E_Mail
Usagi
2.制作数据库(其实只做一个Data表就可以了)
Admin表
字段名称
数据类型
说明
Tid
自动编号
注册管理员编号
tAdmin
文本
注册管理员名称
tPassword
文本
注册管理员密码
Data表(用来存放网友在留言板中所输入的信息。
)
字段名称
数据类型
说明
字段大小
必须有数据
Tid
自动编号
网友留言编号
/
/
tName
文本
网友姓名
20
是
tE_mail
文本
网友E_mail地址
50
否
tHomepage
文本
网友主页地址
100
否
tOicq
文本
网友OICQ
15
否
tSubject
文本
网友留言标题
100
是
tCotent
文本
网友留言具体内容
255
是
tDate
日期/时间
网友留言时间
默认值输入Now()
User表
字段名称
数据类型
说明
Tid
自动编号
网友留言编号
tName
文本
网友姓名(不可重复)
tE_mail
文本
网友E_mail地址
tHomepage
文本
网友主页地址
tPassword
文本
网友密码
tOicq
文本
网友OICQ
tDate
日期/时间
网友留言时间
2.2实验过程(实验步骤、记录、数据、分析)
一.⑴安装配置IIS(若配了就不用安装)
①“开始→控制面板→添加删除程序”
②打开“添加删除程序”选中“Internet信息服务(IIS)”单击进行装
③经过一段时间等待后,屏幕上出现【完成“Windows组件向导”】对话框,单击【完成】按扭,完成了IIS的安装。
二。
主页的制作
1.生成进站页面,该页面以index.html的名字保存在根目录下(新建站点,在这里就介绍了)
2.生成主页及其他的页面
3.制作进站页面
⑴用表格整体布局(插入→表格)插入一个4行一列的表格
⑵添加网页元素(按照要求输入文字和图象)
⑶页面属性设置
在页面属性中将背景颜色设为绿色(#99cc33)以后颜色都是这个值,文本颜色为白色(#FFFFFF)
※下面的心情文章也是用表格制作的在这里就不介绍了。
布局是用的几个表格加几个连接就搞定了
其中的时间显示用的代码是
--
now=newDate()
hour=now.getHours()
if(hour<12){
document.write("现在是:
"+now.toLocaleString())
}elseif(hour<18){
document.write("现在是:
"+now.toLocaleString())
}elseif(hour>=18){
document.write("现在是:
"+now.toLocaleString())
}
//-->
创建文档
1.选择文件→新建→模板;
2.选中【当模板改变是更新页面】单击【创建】进入新文档设计视图;
3.改变文档标题为“个人简历
”
4.将光标移到EditRegionl,输入对应的文字;
5.保存文档为toufashishang.htm.效果图如下
6.城市的性格和服装百年都用上面的文档来建。
三.留言板基本功能页面的制作
(一)创建数据库
打开MicrosoftOfficeAccess“文件→新建
选择空数据库→把数据库存在站点的根目录下→在
中选择第一个,再按照上面需要制作的依次填入如Admin表
打开Admin表显示的是
此时该数据库就建好了,按照上面的方法建另外的两个数据库”
创建ODBC数据源
1选择“开始——所有程序——控制面板——管理工具——数据源(ODBC)”。
2在“ODBC数据源管理器”对话框中,单击“系统DNS”选项卡。
3单击“添加”按钮,选择数据源类型(MicrosoftAccessDriver(*.mdb)),单击“完成”按钮。
4在弹出的“ODBCMicrosoftAccess安装”对话框中,“数据源名”文本框中输入数据源的名称;在“说明”文本框中可输入对该数据库的注释;单击“选择”按钮,在弹出的“选择数据库”对话框中选取提供数据的Access数据库。
5选择数据库文件(xx/xx.mdb)后,单击“确定”按钮,返回到“ODBCMicrosoftAccess安装”对话框中。
6用户可以看到新增了一个ODBC数据源,为以后建立与数据库的连接做好准备。
5.创建DSN连接
1在DW的“应用程序”面板中单击“数据库”选项卡,单击“+”按钮出现连接定义方式菜单。
2选择“数据源名称(DSN)”项,弹出其对话框。
3在“连接名称”文本框中输入一个字符串作为连接名。
4在“数据源名称(DSN)”下拉列表框中选择所需的DSN,如xx.mdb。
“用户名”和“密码”为可选项。
5单击“测试”按钮,系统会弹出一个对话框,报告“成功创建连接脚本”。
单击“确定”按钮。
6再次单击“确定”按钮。
关闭“数据源名称(DSN)”对话框。
在数据库面板中可以看到数据库中创建的数据表了。
(二)留言板基本功能页面的制作
⑴制作管理员登录页面
①启动DWMX2004,制作login.asp客户登录页面。
②检查登录表单。
选择客户登录页面中的注册表单。
在“行为”面板中单击“+”添加行为按钮,从弹出的菜单中选择“检查表单”行为命令,在弹出的对话框中做如下设置。
在“命名的栏位”列表框中做如下的检查表单项设置:
“文本tName”的“值”设置为“必需的”,“可接受”选项中选中“任何东西”。
“文本tPassword”的“值”设置为“必需的”,“可接受”选项中选中“任何东西”。
③单击“确定”按钮,完成检查登录表单的设置,并将该行为的事件设置为onSubmit。
④验证客户登录信息是否为客户登记表中的合法用户。
在“服务器行为”选项卡中单击“+”按钮,从弹出的菜单中执行“用户身份验证——登录用户”服务器行为命令。
在打开的对话框中,做如下设置。
2构建留言页面
获取客户留言页由以下部分组成:
●一个允许用户输入数据的HTML表单(留言板)。
●一个用于更新数据库的“插入记录”服务器行为。
插入页首先通过用户填写留言信息提交留言板表单。
然后通过检查表单行为,验证表单的填写是否正确。
如:
是否输入用户名和留言内容等信息。
输入有误或不符合要求则提示用户重新输入留言板信息,输入无误则将“留言板信息”插入到数据库表中。
具体步骤如下:
①启动DWMX2004,制作客户留言页面new.asp。
②打开“服务器行为”选项卡。
③单击“+”按钮,从弹出的菜单中选择“插入记录”选项,在打开的对话框中做如下设置。
④单击“确定”按钮,确定“插入记录”服务器行为的设置。
在“服务器面板”中便会出现插入记录行为。
⑤对完成的插入页面进行保存,便完成了插入页面的制作。
⑶显示留言
显示客户留言页面由以下部分组成:
●使用DW设计工具布置留言详细页面。
●为页面定义一个记录集,详细页将从此记录集中提取记录的详细信息。
●将记录集中的各项绑定到该页面。
留言页面首先通过记录集获取数据库表中相关的留言信息,在显示留言页面中显示出来。
1.设置重复区域
通常在显示客户留言的页面中,总是希望能够显示多条留言。
这样做能方便地对客户留言做系统的分析和合理的比较。
具体的操作方法如下:
1选中显示内容的表格。
2在“服务器行为”选项卡中单击“+”按钮,从弹出的菜单中选择“重复区域”选项。
并做如下设置。
③单击“确定”按钮,完成每页显示5条记录的重复区域设置。
2.记录集导航条
在留言板的显示页面中建立记录集导航条,能够方便网络管理者对客户留言信息检查和翻页。
具体操作如下:
1将光标停留在需插入记录集导航条的单元格内。
2在文档窗口菜单栏中执行“插入——应用程序对象——记录集分页——记录导航条”菜单命令。
打开其对话框,并做如下设置。
3单击“确定”按钮,完成记录集导航条设置。
3.设置记录集导航状态
通过该操作,可以完成对数据库中所有记录集的统计工作。
具体操作如下:
1将光标停留在需插入记录集导航状态的单元格内。
2在文档窗口菜单栏中选择“插入——应用程序对象——显示记录计数——记录集导航状态”菜单命令,打开其对话框,并做如下设置。
⑷管理留言
1.管理机制分析
在此通过服务器行为来管理留言板,可以将不健康的留言从数据表中删除,维护良好的留言环境。
删除留言首先在显示留言页面中选择需删除的留言记录,并以特定的记录转到删除留言页面。
在删除留言页面中通过用户的管理员身份验证后,将所选择的留言记录从数据库表中删除。
2.删除留言
要实现删除留言的效果,请执行下列操作:
1使用“转到详细页面”服务器行为。
●启动DW,打开index.asp显示留言页面,并在该页面中选择“删除留言”文本。
●在“服务器行为”选项卡中单击“+”按钮,从中选择“转到详细页面”选项,并做如下设置。
2使用“移至特定记录”服务器行为。
在“服务器行为”选项卡中单击“+”按钮,从弹出的菜单中选择“记录集分页——移至特定记录”服务器行为,并做如下设置。
3建立记录集。
制作del.asp文件,并在页面中建立如下记录集
4绑定记录集到del.asp页面
⑤删除记录。
在“服务器行为”选项卡中单击“+”按钮,从中选择“删除记录”服务器行为,并做如下设置。
⑥单击“确定”按钮,对文档进行保存,完成留言板的制作。
⑦附加一点,为了限制普通用户不能随意具有删除留言的功能,因此,还可以加一项“限制对页的访问”。
执行“服务器行为——“+”号按钮——用户身份验证——限制对页的访问”,在打开的对话框中,做如下设置。
最后对文档保存,完成留言板基本功能的制作
四.把所有的都连接起来就完成了主页面,最后浏览上传。
2.3实验结论(结果):
所有的连接都能够达到要达到的效果,所有的页面都能浏览,不会出先该网页无法
第一个休闲空间个人网站
留言本浏览
三、实验小结
一学期过去了,通过这一学期学习Dreamweaver,让我从不懂网页设计的门外汉学会了如何制作网页,学会了HTML语言。
学会了ASP。
学会了很多平时不接触的东西,随着网络的普及与发展,拥有个人网站的人越来越多。
所以我们要学习更多的东西,不能局限与现在。
最后说说这次课程设计学习,如何制作一个网络留言版和如何制作一个有个人特色的网页,这需要对数据库也有了一定的了解,制作的过程中也要有很好的创意。
这样你才能完成一个优秀有创意的网站。