web设计实训报告模板.doc

重 庆 三 峡 学 院Web应用设计项目报告项目题目: 系 部: 专 业: 项目组长: 项目成员: 起始时间：2010年1月2日结束时间：2010 年01月02日1 项目的总体目标及系统需求分析运用已经掌握的知识完成网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver8 flash 8 fireworks 8 Photoshop制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。1) 确定风格、确定主色调、及网页的主体外观、栏目的规划。2) 收集网页制作所需的相关资料和素材，并通过图像处理软件对图片进行加工处理。3) 主题鲜明、内容充实；颜色明快、醒目、结构合理；4) 导航清楚、栏目合理、层次分明、使用方便5) 设计8至15个页面。内含：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页内容。2 系统设计2.1 总体的结构图设计一个主页面(结构图如下)主页首页相册日记视频uest留言档案sagi作数据库(其实只做一个Data表就可以了)表一（用户注册）字段名称数据类型说明yh文本注册管理员名称mm文本注册管理员密码表二（用来存放网友在留言板中所输入的信息。）yh文本网友姓名是em文本网友E_mail地址否zt文本网友留言主题否rl文本网友留言内容否2.2 系统各功能模块描述及任务分配3 实训主要过程（步骤及核心代码）3.1 安装配置IIS “开始控制面板添加删除程序” 打开“添加删除程序”选中“Internet信息服务（IIS）”单击进行装经过一段时间等待后，屏幕上出现【完成“Windows 组件向导”】对话框，单击【完成】按扭，完成了IIS的安装。3.2 主页的制作1. 生成进站页面，该页面以index.html的名字保存在根目录下（新建站点，在这里就介绍了）2. 生成主页及其他的页面3. 制作进站页面 1) 用表格整体布局（插入表格）插入一个4行一列的表格2) 添加网页元素（按照要求输入文字和图象）3) 页面属性设置 在页面属性中将背景颜色设为绿色（#99cc33）以后颜色都是这个值，文本颜色为白色（#FFFFFF）下面的心情文章也是用表格制作的在这里就不介绍了。 布局是用的几个表格加几个连接就搞定了 其中的时间显示用的代码是 !-now = new Date()hour = now.getHours()if (hour 12) document.write(现在是: + now.toLocaleString() else if (hour = 18) document.write(现在是: + now.toLocaleString()/ -创建文档1.选择文件新建模板；2.选中【当模板改变是更新页面】单击【创建】进入新文档设计视图；3.改变文档标题为“个人简历”4.将光标移到EditRegionl,输入对应的文字；5.保存文档为toufashishang.htm.效果图如下6.城市的性格和服装百年都用上面的文档来建。3.3 留言板基本功能页面的制作（一）创建数据库打开Microsoft Office Access“文件新建选择空数据库把数据库存在站点的根目录下在中选择第一个，再按照上面需要制作的依次填入如用户表打开表一显示的是此时该数据库就建好了，按照上面的方法建另外的两个数据库”创建ODBC数据源 选择“开始所有程序控制面板管理工具数据源（ODBC）”。 在“ODBC数据源管理器”对话框中，单击“系统DNS”选项卡。 单击“添加”按钮，选择数据源类型（Microsoft Access Driver (*.mdb)），单击“完成”按钮。 在弹出的“ODBC Microsoft Access 安装”对话框中，“数据源名”文本框中输入数据源的名称；在“说明”文本框中可输入对该数据库的注释；单击“选择”按钮，在弹出的“选择数据库”对话框中选取提供数据的Access数据库。 选择数据库文件（xx/xx.mdb）后，单击“确定”按钮，返回到“ODBC Microsoft Access 安装”对话框中。 用户可以看到新增了一个ODBC数据源，为以后建立与数据库的连接做好准备。5创建DSN连接 在DW的“应用程序”面板中单击“数据库”选项卡，单击“+”按钮出现连接定义方式菜单。 选择“数据源名称（DSN）”项，弹出其对话框。 在“连接名称”文本框中输入一个字符串作为连接名。 在“数据源名称（DSN）”下拉列表框中选择所需的DSN，如xx.mdb。“用户名”和“密码”为可选项。 单击“测试”按钮，系统会弹出一个对话框，报告“成功创建连接脚本”。单击“确定”按钮。 再次单击“确定”按钮。关闭“数据源名称（DSN）”对话框。在数据库面板中可以看到数据库中创建的数据表了。（二）留言板基本功能页面的制作(1)制作用户登录页面启动DW，制作dl.asp客户登录页面。检查登录表单。选择客户登录页面中的注册表单。在“行为”面板中单击“+”添加行为按钮，从弹出的菜单中选择“检查表单”行为命令，在弹出的对话框。在“命名的栏位”列表框中做如下的检查表单项设置：“文本yh”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。“文本mm”的“值”设置为“必需的”，“可接受”选项中选中“任何东西”。单击“确定”按钮，完成检查登录表单的设置，并将该行为的事件设置为onSubmit。验证客户登录信息是否为客户登记表中的合法用户。在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中执行“用户身份验证登录用户”服务器行为命令。在打开的对话框中，做如下设置。2 构建留言页面获取客户留言页由以下部分组成：l 一个允许用户输入数据的HTML表单（留言板）。l 一个用于更新数据库的“插入记录”服务器行为。插入页首先通过用户填写留言信息提交留言板表单。然后通过检查表单行为，验证表单的填写是否正确。如：是否输入用户名和留言内容等信息。输入有误或不符合要求则提示用户重新输入留言板信息，输入无误则将“留言板信息”插入到数据库表中。具体步骤如下：启动Dreamweaver8，制作客户留言页面ny.asp。打开“服务器行为”选项卡。单击“+”按钮，从弹出的菜单中选择“插入记录”选项，在打开的对话框中做如下设置。 单击“确定”按钮，确定“插入记录”服务器行为的设置。在“服务器面板”中便会出现插入记录行为。对完成的插入页面进行保存，便完成了插入页面的制作。 显示留言显示客户留言页面由以下部分组成：l 使用DW设计工具布置留言详细页面。l 为页面定义一个记录集，详细页将从此记录集中提取记录的详细信息。l 将记录集中的各项绑定到该页面。留言页面首先通过记录集获取数据库表中相关的留言信息，在显示留言页面中显示出来。1.设置重复区域通常在显示客户留言的页面中，总是希望能够显示多条留言。这样做能方便地对客户留言做系统的分析和合理的比较。具体的操作方法如下： 选中显示内容的表格。 在“服务器行为”选项卡中单击“+”按钮，从弹出的菜单中选择“重复区域”选项。并做如下设置。 单击“确定”按钮，完成每页显示5条记录的重复区域设置。2.记录集导航条在留言板的显示页面中建立记录集导航条，能够方便网络管理者对客户留言信息检查和翻页。具体操作如下： 将光标停留在需插入记录集导航条的单元格内。 在文档窗口菜单栏中执行“插入应用程序对象记录集分页记录导航条”菜单命令。打开其对话框，并做如下设置。 单击“确定”按钮，完成记录集导航条设置。3.设置记录集导航状态通过该操作，可以完成对数据库中所有记录集的统计工作。具体操作如下： 将光标停留在需插入记录集导航状态的单元格内。 在文档窗口菜单栏中选择“插入应用程序对象显示记录计数记录集导航状态”菜单命令，打开其对话框，并做如下设置。 建立记录集。制index.asp文件，并在页面中建立如下记录集 绑定记录集到index.asp页面 附加一点，为了限制普通用户，因此，还可以加一项“限制对页的访问”。执行“服务器行为“+”号按钮用户身份验证限制对 页的访问”，在打开的对话框中，做如下设置。最后对文档保存，完成留言板基本功能的制作4 实训结果分析所有的连接都能够达到要达到的效果，所有的页面都能浏览，不会出先该网页无法5 实训心得一学期过去了，通过这一学期学习Dreamweaver，让我从不懂网页设计