web设计实训报告模板

Web应用设计

项目报告

项目题目:                       

系    部:                       

专    业:                       

项目组长:                       

项目成员:                       

起始时间：2010年1月2日

结束时间：2010 年01月02日

1项目的总体目标及系统需求分析

运用已经掌握的知识完成网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver8 flash 8  fireworks 8  Photoshop制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

1)确定风格、确定主色调、及网页的主体外观、栏目的规划。

2)收集网页制作所需的相关资料和素材，并通过图像处理软件对图片进行加工处理。

3)主题鲜明、内容充实；颜色明快、醒目、结构合理；

4)导航清楚、栏目合理、层次分明、使用方便

5)设计8至15个页面。内含：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页内容。

2系统设计

2.1总体的结构图

设计一个主页面(结构图如下)

作数据库(其实只做一个Data表就可以了)

表一（用户注册）

3实训主要过程（步骤及核心代码）

3.1安装配置IIS

 ①“开始→控制面板→添加删除程序”

 ②打开“添加删除程序”选中“Internet信息服务（IIS）”单击进行装

③经过一段时间等待后，屏幕上出现【完成“Windows 组件向导”】对话框，单击【完成】按扭，完成了IIS的安装。

3.2主页的制作

1.生成进站页面，该页面以index.html的名字保存在根目录下（新建站点，在这里就介绍了）

2.生成主页及其他的页面

3.制作进站页面 

1)用表格整体布局（插入→表格）插入一个4行一列的表格

2)添加网页元素（按照要求输入文字和图象）

3)页面属性设置

    在页面属性中将背景颜色设为绿色（#99cc33）以后颜色都是这个值，文本颜色为白色（#FFFFFF）

※下面的心情文章也是用表格制作的在这里就不介绍了。

  布局是用的几个表格加几个连接就搞定了

 其中的时间显示用的代码是 

创建文档

1.选择文件→新建→模板；

2.选中【当模板改变是更新页面】单击【创建】进入新文档设计视图；

3.改变文档标题为“个人简历

”

4.将光标移到EditRegionl,输入对应的文字；

5.保存文档为toufashishang.htm.效果图如下

6.城市的性格和服装百年都用上面的文档来建。

3.3留言板基本功能页面的制作

（一）创建数据库

打开Microsoft Office Access“文件→新建选择空数据库→把数据库存在站点的根目录下→在中选择第一个，再按照上面需要制作的依次填入如用户表

打开表一显示的是

此时该数据库就建好了，按照上面的方法建另外的两个数据库”

创建ODBC数据源

1选择“开始——所有程序——控制面板——管理工具——数据源（ODBC）”。

2在“ODBC数据源管理器”对话框中，单击“系统DNS”选项卡。

3单击“添加”按钮，选择数据源类型（Microsoft Access Driver (*.mdb)），单击“完成”按钮。

4在弹出的“ODBC Microsoft Access 安装”对话框中，“数据源名”文本框中输入数据源的名称；在“说明”文本框中可输入对该数据库的注释；单击“选择”按钮，在弹出的“选择数据库”对话框中选取提供数据的Access数据库。

5选择数据库文件（xx/xx.mdb）后，单击“确定”按钮，返回到“ODBC Microsoft Access 安装”对话框中。

6用户可以看到新增了一个ODBC数据源，为以后建立与数据库的连接做好准备。

5．创建DSN连接

1在DW的“应用程序”面板中单击“数据库”选项卡，单击“+”按钮出现连接定义方式菜单。

2选择“数据源名称（DSN）”项，弹出其对话框。

3在“连接名称”文本框中输入一个字符串作为连接名。

4在“数据源名称（DSN）”下拉列表框中选择所需的DSN，如xx.mdb。“用户名”和“密码”为可选项。

5单击“测试”按钮，系统会弹出一个对话框，报告“成功创建连接脚本”。单击“确定”按钮。

6再次单击“确定”按钮。关闭“数据源名称（DSN）”对话框。在数据库面板中可以看到数据库中创建的数据表了。

（二）留言板基本功能页面的制作

(1)制作用户登录页面

①启动DW，制作dl.asp客户登录页面。

②检查登录表单。选择客户登录页面中的注册表单。在“行为”面板中单击“+”添加行为按钮，从弹出的菜单中选择“检查表单”行为命令，在弹出的对话框。

在“命名的栏位”列表框中做如下的检查表单项设置：

“文本yh”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。

“文本mm”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。

③单击“确定”按钮，完成检查登录表单的设置，并将该行为的事件设置为onSubmit。

④验证客户登录信息是否为客户登记表中的合法用户。

在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中执行“用户身份验证——登录用户”服务器行为命令。

在打开的对话框中，做如下设置。

2构建留言页面

获取客户留言页由以下部分组成：

●一个允许用户输入数据的HTML表单（留言板）。

●一个用于更新数据库的“插入记录”服务器行为。

插入页首先通过用户填写留言信息提交留言板表单。然后通过检查表单行为，验证表单的填写是否正确。如：是否输入用户名和留言内容等信息。输入有误或不符合要求则提示用户重新输入留言板信息，输入无误则将“留言板信息”插入到数据库表中。

具体步骤如下：

①启动Dreamweaver8，制作客户留言页面ny.asp。

②打开“服务器行为”选项卡。

③单击“+”按钮，从弹出的菜单中选择“插入记录”选项，在打开的对话框中做如下设置。

④单击“确定”按钮，确定“插入记录”服务器行为的设置。在“服务器面板”中便会出现插入记录行为。

⑤对完成的插入页面进行保存，便完成了插入页面的制作。

⑶ 显示留言

显示客户留言页面由以下部分组成：

●使用DW设计工具布置留言详细页面。

●为页面定义一个记录集，详细页将从此记录集中提取记录的详细信息。

●将记录集中的各项绑定到该页面。

留言页面首先通过记录集获取数据库表中相关的留言信息，在显示留言页面中显示出来。

1.设置重复区域

通常在显示客户留言的页面中，总是希望能够显示多条留言。这样做能方便地对客户留言做系统的分析和合理的比较。

具体的操作方法如下：

1选中显示内容的表格。

2在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中选择“重复区域”选项。并做如下设置。

③ 单击“确定”按钮，完成每页显示5条记录的重复区域设置。

2.记录集导航条

在留言板的显示页面中建立记录集导航条，能够方便网络管理者对客户留言信息检查和翻页。

具体操作如下：

1将光标停留在需插入记录集导航条的单元格内。

2在文档窗口菜单栏中执行“插入——应用程序对象——记录集分页——记录导航条”菜单命令。打开其对话框，并做如下设置。

3单击“确定”按钮，完成记录集导航条设置。

3.设置记录集导航状态

通过该操作，可以完成对数据库中所有记录集的统计工作。

具体操作如下：

1将光标停留在需插入记录集导航状态的单元格内。

2在文档窗口菜单栏中选择“插入——应用程序对象——显示记录计数——记录集导航状态”菜单命令，打开其对话框，并做如下设置。

1建立记录集。制index.asp文件，并在页面中建立如下记录集 

2 绑定记录集到index.asp页面

⑦ 附加一点，为了普通用户，因此，还可以加一项“对页的访问”。执行“服务器行为——“+”号按钮——用户身份验证——对 页的访问”，在打开的对话框中，做如下设置。

最后对文档保存，完成留言板基本功能的制作

4实训结果分析

所有的连接都能够达到要达到的效果，所有的页面都能浏览，不会出先该网页无法

5实训心得

一学期过去了，通过这一学期学习Dreamweaver，让我从不懂网页设计的门外汉学会了如何制作网页，学会了HTML语言。学会了一些ASP语言。学会了很多平时不接触的东西，随着网络的普及与发展，拥有个人网站的人越来越多。

所以我们要学习更多的东西，不能局限与现在。

最后说说这次课程设计学习，如何制作一个网络留言版和如何制作一个有个人特色的网页，这需要对数据库也有了一定的了解，制作的过程中也要有很好的创意。这样你才能完成一个优秀有创意的网站。