人机交互网页制作课程设计实验报告

《网页制作》课程设计报告姓名:班级:学号:指导教师:设计时间：目录一.课程设计目的3二.课程设计题目描述和要求错误!未定义书签。三.课程设计报告内容错误!未定义书签。3.1设计方案错误!未定义书签。3.2设计过程错误!未定义书签。3.3设计结果错误!未定义书签。四.结论与心得错误!未定义书签。一.课程设计目的一、实验概述：利用表格、框架、层和链接设计页面（各页面之间要有链接），使用数据库做一个留言板1.1实验目的及要求：目的及要求：运用所学《网页设计》课程的理论知识和技能，分析和解决计算机应用实际问题，提高网页设计与制作能力；掌握利用软硬件资源发布一个具体网站的操作过程。1.2实验原理：利用Dreamweaver,MicrosoftOfficeAccess制作一个一个小型网站1.3实验环境（使用的软件）：Dreamweaver、MicrosoftOfficeAccess二、实验内容：实验方案设计：1.设计一个主页面(结构图如下主页HomeDiaryGalleryPhotoCollecGuestE_MailUsagition2.制作数据库(其实只做一个Data表就可以了)Admin表字段名称Tid数据类型自动编号文本说明注册管理员编号注册管理员名称注册管理员密码tAdmintPassword文本Data表（用来存放网友在留言板中所输入的信息。）字段名称数据类型说明字段大小必须有数据Tid自动编号网友留言编号//tNametE_mailtHomepagetOicq文本文本文本文本文本文本日期/时间网友姓名205010015100255是否否否是是网友E_mail地址网友主页地址网友OICQtSubjecttCotenttDate网友留言标题网友留言具体内容网友留言时间默认值输入Now()User表字段名称Tid数据类型说明自动编号文本文本文本文本文本日期/时间网友留言编号tName网友姓名（不可重复）tE_mail网友E_mail地址网友主页地址网友密码网友OICQtHomepagetPasswordtOicqtDate网友留言时间2.2实验过程（实验步骤、记录、数据、分析）一．⑴安装配置IIS（若配了就不用安装）①“开始→控制面板→添加删除程序”②打开“添加删除程序”选中“Internet信息服务（IIS）”单击进行装段时间等待后，屏幕上出现【完成“Windows组件向导”】对话框，单击【完成】按扭，完成了IIS的安装③经过一。二。主页的制作1.生成进站页面，该页面以index.html的名字保存在根目录下（新建站点，在这里就介绍了）2.生成主页及其他的页面3.制作进站页面⑴用表格整体布局（插入→表格）插入一个4行一列的表格⑵添加网页元素（按照要求输入文字和图象）⑶页面属性设置在页面属性中将背景颜色设为绿色（#99cc33）以后颜色都是这个值，文本颜色为白色（#FFFFFF）※下面的心情文章也是用表格制作的在这里就不介绍了。布局是用的几个表格加几个连接就搞定了其中的时间显示用的代码是<scriptlanguage="javascript"><!--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())}//--></script>创建文档1.选择文件→新建→模板；2.选中【当模板改变是更新页面】单击【创建】进入新文档设计视图；3.改变文档标题为“个人简历”4.将光标移到EditRegionl,输入对应的文字；5.保存文档为toufashishang.htm.效果图如下6.城市的性格和服装百年都用上面的文档来建。

三．留言板基本功能页面的制作（一）创建数据库打开MicrosoftOfficeAccess“文件→新建选择空数据库→把数据库存在站点的根目录下→在中选择第一个，再按照上面需要制作的依次填入如Admin表打开Admin表显示的是此时该数据库就建好了，按照上面的方法建另外的两个数据库”创建ODBC数据源①选择“开始②在“ODBC数据源③单击“钮，选择数据源类型（MicrosoftAccessDriver(*.mdb)），单击“按钮。④在弹出的“的名称；在“——所有程序——控制面板——管理工具——数据源（ODBC）”。管理器”对话框中，单击“系统DNS”选项卡。添加”按完成”ODBCMicrosoftAccess安装”对话框中，“数据源名”文本框中输入数据源注释；单击“选择”按钮，在弹出的取提供数据的Access数据库。⑤选择数据库文件（xx/xx.mdb）后，安装”对话框中。说明”文本框中可输入对该数据库的“选择数据库”对话框中选单击“确定”按钮，返回到“ODBCMicrosoftAccess⑥用户可以看到新增了一个ODBC数据源，为以后建立与数据库的连接做好准备。5．创建DSN连接①在DW的“应用程序”面板中单击“数据库”选项卡，单击“+”按钮出现连接定义方式菜单。②选择“数据源名称（DSN）”项，③在“连接名称”④在“数据源名称（DSN）”下拉列表框中选择码”为可选项。弹出其对话框。文本框中输入一个字符串作为连接名。所需的DSN，如xx.mdb。“用户名”“和密⑤单击“测试”按钮，系统会弹出一个对话框，报告“成功创建连接脚本”。单击“确定”按钮。⑥再次单击“中创建的数据表了。（二）留言板基本功能页面的制作确定”按钮。关闭“数据源名称（DSN）”对话框。在数据库面板中可以看到数据库⑴制作管理员登录页面①启动DWMX2004，制作login.asp客户登录页面。②检查登录表单。选择客户登录页面中的注册表单。在“行为”面为按钮，从弹出的检查表单”行为命令，在弹出的对话框中做如下设置。板中单击“+”添加行菜单中选择“在“命名的栏位”列表框中做如下的检查表单项设置：“文本tName”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。“文本tPassword”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。③单击“确定”按钮，完成检查登录表单的设置，并将该行为的事件设置为onSubmit。④验证客户登录信息是否为客户登记表中的合法用户。在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中执行“用户身份验证——登录用户”服务器行为命令。在打开的对话框中，做如下设置。⑵构建留言页面获取客户留言页由以下部分组成：一个允许用户输入数据的HTML表单（留言板）。一个用于更新数据库的“插入记录”服务器行为。插入页首先通过用户填写留言信息提交留言板表单。然后通过检查表单行为，验证表单的填写是否正确。如：是否输入用户名和留言内容等信息。输入有误或不符合要求重新输入留言板信息，输入无误则将“留言板信息”插入到数据库表中。具体步骤如下：则提示用户①启动DWMX2004，制作客户留言页面new.asp。②打开“服务器行为”选项卡。③单击“+”按钮，从弹出的菜单中选择“插入记录”选项，在打开的对话框中做如下设置。④单击“确定”按钮，确定“插入记录”服务器行为的设置。在“服务器面板”中便会出现插入记录行为。⑤对完成的插入页面进行保存，便完成了插入页面的制作。⑶显示留言显示客户留言页面由以下部分组成：使用DW设计工具布置留言详细页面。为页面定义一个记录集，详细页将从此记录集中提取记录的详细信息。将记录集中的各项绑定到该页面。留言页面首先通过记录集获取数据库表中相关的留言信息，在显示留言页面中显示出来。1.设置重复区域通常在显示客户留言的页面中，总是希望能够显示多条留言。这样做能方便地对客户留言做系统的分析和合理的比较。具体的操作方法如下：①选中显示内容的表格。②在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中选择“重复区域”选项。并做如下设置。③单击“确定”按钮，完成每页显示5条记录的重复区域设置。2.记录集导航条在留言板的显示页面中建立记录集导航条，能够方便网络管理者对客户留言信息检查和翻页。具体操作如下：①将光标停留在需插入记录集导航条的单元格内。②在文档窗口菜单栏中执行“插入——应用程序对象——记录集分页——记录导航条”菜单命令。打开其对话框，并做如下设置。③单击“确定”按钮，完成记录集导航条设置。3.设置记录集导航状态通过该操作，可以完成对数据库中所有记录集的统计工作。具体操作如下：①将光标停留在需插入记录集导航②在文档窗口菜单栏中航状态”菜单状态的单元格内。选择“插入——应用程序对象——显示记录计数——记录集导命令，打开其对话框，并做如下设置。⑷管理留言1．管理机制分析在此通过服务器行为来管理留言板，可以将不健康的留言从数据表中删除，维护良好的留言环境。删除留言首先在显示留言页面中选择需删除的留言记录，并以特定的记录转到删除留言页面。在删除留言页面中通过用户的管理员身份验证后，将所选择的留言记录从数据库表中删除。2．删除留言要实现删除留言的效果，请执行下列操作：①使用“转到详细页面”服务器行为。启动DW，打开index.asp显示留言页面，并在该页面中选择“删除留言”文本。在“服务器行为”选项卡中单击“+”按钮，从中选择“转到详细页面”选项，并做如下设置。②使用“移至特定记录”服务器行为。在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中选择“记录集分页——移至特定记录”服务器行为，并做如下设置。③建立记录集。制作del.asp文件，并在页面中建立如下记录集④绑定记录集到del.asp页面⑤删除记录。在“服务器行为”选项卡中单击“+”按钮，从中选择“删除记录”服务器行为，并做如下设置。⑥单击“确定”按钮，对文档进行保存，完成留言板的制作。⑦附加一点，为了限制普通用户不能随意具有删除留言的功能，因此，还可以加一项“限制对页的访问”。执行“服务器行为——“+”号按钮——用户身份验证——限制对页的访问”，在打开的对话框中，做如下设置。最后对文档保存，完成留言板基本功能的制作四.把所有的都连接起来就完成了主页面，最后浏览上传。2.3实验结论（结果）：所有的连接都能够达到要达到的效果，所有的页面都能浏览，不会出先该网页无法第一