《中小型网站建设及网络搭建项目三课件.ppt》由会员分享,可在线阅读,更多相关《中小型网站建设及网络搭建项目三课件.ppt(340页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、中小型网站建设及网络搭建(上册)项目三项目三 设计网站动态页面设计网站动态页面培 养 目 标1掌握掌握Internet信息服务(信息服务(IIS)的安装及配置方法。的安装及配置方法。2理解记录集的概念和使用。理解记录集的概念和使用。3理解并掌握服务器行为。理解并掌握服务器行为。4理解后台管理模块的作用。理解后台管理模块的作用。5理解表单在数据提交中的作用。理解表单在数据提交中的作用。1能够搭建能够搭建ASP动态网站的运动态网站的运行环境。行环境。2能够完成网站前台模块的制能够完成网站前台模块的制作。作。3完成后台管理中各模块的设完成后台管理中各模块的设计制作。计制作。4能够正确使用服务器行为解
2、能够正确使用服务器行为解决实际问题。决实际问题。5培养学生解决问题的能力。培养学生解决问题的能力。实实训训内内容容任务三任务三任务三任务三 设计新闻发布模块设计新闻发布模块设计新闻发布模块设计新闻发布模块任务四任务四任务四任务四 设计留言板模块设计留言板模块设计留言板模块设计留言板模块任务五任务五任务五任务五 设计投票调查模块设计投票调查模块设计投票调查模块设计投票调查模块任务六任务六任务六任务六 设计后台管理模块设计后台管理模块设计后台管理模块设计后台管理模块任务二任务二任务二任务二 设计注册登录模块设计注册登录模块设计注册登录模块设计注册登录模块任务一任务一任务一任务一 搭建搭建搭建搭建A
3、SPASPASPASP动态网站运行环境动态网站运行环境动态网站运行环境动态网站运行环境情情 境境 导导 入入 在李诗同学接到为某学校制作网站的任务中,该网站不仅包括在李诗同学接到为某学校制作网站的任务中,该网站不仅包括静态页面的制作,也包括用户注册登录、留言板、新闻发布以及后静态页面的制作,也包括用户注册登录、留言板、新闻发布以及后台管理等动态页面的制作。在前面的台管理等动态页面的制作。在前面的“项目一项目一 网站静态页面设计网站静态页面设计”中我们已经和李诗同学一起完成了网站的静态部分的制作,现在让中我们已经和李诗同学一起完成了网站的静态部分的制作,现在让我们和李诗同学一起继续完成网站的动态
4、部分的制作吧。我们和李诗同学一起继续完成网站的动态部分的制作吧。任任 务务 要要 求求1掌握掌握Internet信息服务(信息服务(IIS)的安装方法。)的安装方法。2掌握配置掌握配置Internet信息服务(信息服务(IIS)的基本方法。)的基本方法。3掌握在掌握在Dreamweaver CS4中指定中指定ASP服务器技术。服务器技术。4理解配置理解配置IIS中常用选项卡如主目录、文档的作用。中常用选项卡如主目录、文档的作用。任任 务务 分分 析析 “搭建搭建ASP动态网站运行环境动态网站运行环境”主要包括以下内容:主要包括以下内容:IIS的安的安装、装、IIS的配置、建立虚拟目录和网站框架
5、搭建。的配置、建立虚拟目录和网站框架搭建。1IIS安装:在安装之前,先要准备好安装:在安装之前,先要准备好Windows XP安装光安装光盘或盘或IIS5.1安装包。安装包。2IIS配置:主要包括设置网站主目录、默认文档等。配置:主要包括设置网站主目录、默认文档等。3在在Dreamweaver CS4中指定中指定ASP服务器技术。服务器技术。任任 务务 操操 作子任务作子任务1 安装安装IIS第一步 打开“添加/删除Windows组件”在“开始”菜单中,选择“设置”“控制面板”,在“控制面板”中双击“添加/删除程序”,然后选择“添加/删除Windows组件”。任任 务务 操操 作子任务作子任务
6、1 安装安装IIS第二步 在组件前面添加选择标记在弹出的“Windows组件向导”对话框中,在“Internet信息服务(IIS)”组件前面方框加选择标记“”,如图 所示。还可以单击“详细信息”按钮,打开对话框,选择需要安装的Windows组件,如图 所示。任任 务务 操操 作子任务作子任务1 安装安装IIS任任 务务 操操 作子任务作子任务1 安装安装IIS第三步第三步 弹出弹出“所需文件所需文件”对话框对话框单击“下一步”按钮,出现配置组件安装进度条,并弹出“所需文件”对话框。如图 所示。任任 务务 操操 作子任务作子任务1 安装安装IIS第四步 选择“IIS”安装包的路径单击“浏览”按钮
7、,选择“IIS”安装包的路径。如果光驱中有“Windows安装光盘”则无需选择。第五步 安装完成单击“确定”按钮,完成IIS安装。第六步 安装是否成功安装完成后,打开浏览器,在地址栏中输入http:/127.0.0.1或者http:/localhost,如果出现欢迎页面,则说明安装成功。任任 务务 操操 作子任务作子任务1 安装安装IIS任任 务务 总总 结子任务结子任务1 安装安装IIS默认状态下,IIS会被安装到C:Inetpub目录下,其中有一个名为wwwroot的文件夹,它是浏览访问的默认目录。任任 务务 操操 作子任务作子任务2 配置配置IIS第一步 打开“管理工具”对话框在“开始”
8、菜单中,选择“设置”“控制面板”,在“控制面板”中双击“管理工具”,打开“管理工具”窗口。如图 所示。任任 务务 操操 作子任务作子任务2 配置配置IIS第二步 启动IIS在“管理工具”对话框中,双击“Internet信息服务”图标,启动IIS。任任 务务 操操 作子任务作子任务2 配置配置IIS第三步 打开默认网站在左侧服务器列表中单击目录树前的“+”,展开目录“本地计算机”“网站”“默认网站”,如图 所示。任任 务务 操操 作子任务作子任务2 配置配置IIS第四步 打开“默认网站 属性”对话框右击“默认网站”,从弹出的快捷菜单中选择“属性”,打开“默认网站 属性”对话框,如图 所示。任任
9、务务 操操 作子任务作子任务2 配置配置IIS第五步 设置“主目录”选择“主目录”选项卡,单击“浏览”按钮,设置“D:zjzx”为主目录,然后单击“确定”按钮,该目录将成为网站的主目录。如图 所示。任任 务务 操操 作子任务作子任务2 配置配置IIS第六步 设置“默认文档”选择“文档”选项卡,单击“添加”按钮,在弹出的“添加默认文档”对话框中,设置默认文档名为“index.asp”,如图 所示。然后单击“确定”按钮。任任 务务 操操 作子任务作子任务2 配置配置IIS第七步 调整默认文档顺序选择“index.asp”,选择向上箭头,将“index.asp”调整为第一个默认文档。单击“应用”按钮
10、,完成默认文档顺序的调整。然后,单击“确定”按钮。任任 务务 总总 结结 子任务子任务2 配置配置IIS不同的操作系统下,启动IIS的方法是不同的,上面是Windows XP Professional下启动IIS的方法。任任 务务 操操 作子任务作子任务3 指定服务器技术指定服务器技术第一步“本地信息”设置(1)打开Dreamweaver CS4,执行“站点”|“管理站点”命令,打开“管理站点”对话框,如图 所示。任任 务务 操操 作子任务作子任务3 指定服务器技术指定服务器技术(2)在列表框中选中之前建立的站点“zjzx”,单击右侧的“编辑”按钮,打开“zjzx的站点定义为”对话框,选择“高
11、级”选项卡,在“分类”列表框中选择“本地信息”选项,“本地信息”设置如图 所示。任任 务务 操操 作子任务作子任务3 指定服务器技术指定服务器技术第二步“测试服务器”设置(1)在“分类”列表框中选择“测试服务器”选项,如图 所示。任任 务务 操操 作子任务作子任务3 指定服务器技术指定服务器技术(2)单击“服务器模型”右侧的下拉按钮,打开下拉列表,选择合适的服务器模型,这里选择“ASP VBScript”脚本语言。(3)单击“访问”右侧的下拉按钮,打开下拉列表,选择“本地/网络”选项,选择该选项表示在执行动态页面时,将运行本地的Web服务器。任任 务务 操操 作子任务作子任务3 指定服务器技术
12、指定服务器技术(4)在“URL 前缀”文本框中输入站点的位置,因为选择的是本地计算机做为Web服务器,所以可以在“URL 前缀”文本框中输入http:/127.0.0.1或http:/localhost。当创建的动态页面上传到服务器后,在浏览器中不能正常显示时,在IE浏览器的地址栏中输入http:/127.0.0.1或http:/localhost 即可在浏览器中正常显示。设置如图 所示。任任 务务 操操 作子任务作子任务3 指定服务器技术指定服务器技术(5)设置完成后,单击“确定”按钮,则完成指定服务器技术的操作。任任 务务 总总 结子任务结子任务3 指定服务器技术指定服务器技术如果使用AS
13、P技术,则Dreamweaver插入VBScript、JavaScript、ASP.NET C#或ASP.NET VB脚本;如果使用JSP技术,则Dreamweaver插入Java脚本。本任务介绍的是在Dreamweaver CS4中指定ASP服务器技术。任任 务务 操操 作子任务作子任务4 数据库连接数据库连接(1)打开Dreamweaver CS4,单击菜单“窗口”“数据库”命令,打开“数据库”面板。任任 务务 操操 作子任务作子任务4 数据库连接数据库连接(2)单击“数据库”面板左上角的“+”号按钮,选择“自定义连接字符串”命令,如图 所示。任任 务务 操操 作子任务作子任务4 数据库连
14、接数据库连接(3)打开“自定义连接字符串”对话框,在“连接名称”后的文本框中输入“conn”作为数据库连接的名称,在“连接字符串”后的文本框中输入“Driver=SQL Server;Server=(local);Database=data;UID=sa;PWD=123”,在“Dreamweaver 应连接”项选择“使用此计算机上的驱动程序”选项。设置如图 所示。任任 务务 操操 作子任务作子任务4 数据库连接数据库连接 说明:此处UID是指SQL Server的用户名,PWD是指该用户的密码。任任 务务 操操 作子任务作子任务4 数据库连接数据库连接(4)单击右侧的“测试”按钮,如果弹出如图
15、 所示窗口,则说明数据库连接成功。任任 务务 总总 结结本任务讲解了如何搭建本任务讲解了如何搭建ASP动态网站服务器。重点内容包括动态网站服务器。重点内容包括IIS安装、安装、IIS配配置、指定服务器和数据库连接。本任务是后续章节,如注册登录、留言板、投置、指定服务器和数据库连接。本任务是后续章节,如注册登录、留言板、投票、新闻、后台管理的基础。票、新闻、后台管理的基础。参考附录进行实训报告填写。参考附录进行实训报告填写。实实 验验 报报 告告返 回任务二任务二 设计注册登录模块设计注册登录模块 情境导入情境导入注册登录模块是动态网站建设中的基本模块。注册登录模块是动态网站建设中的基本模块。注
16、册登录模块的作用是用户可以通过首页注册登录模块的作用是用户可以通过首页index.asp的注册的注册按钮进入注册页面,进行新用户注册,注册成功后将返回首页。按钮进入注册页面,进行新用户注册,注册成功后将返回首页。在首页用户可以进行登录,登录成功后显示欢迎信息,登录不成在首页用户可以进行登录,登录成功后显示欢迎信息,登录不成功则给予提示。功则给予提示。任任 务务 要要 求求任务二任务二 设计注册登录模块设计注册登录模块 1理解注册登录模块网页结构的整体设计。理解注册登录模块网页结构的整体设计。2掌握用户注册页面的制作。掌握用户注册页面的制作。3掌握用户登录功能的实现。掌握用户登录功能的实现。任任
17、 务务 分分 析析任务二任务二 设计注册登录模块设计注册登录模块 注册登录模块主要包括两个子模块,分别是注册模块和登录模块。注册登录模块主要包括两个子模块,分别是注册模块和登录模块。注册模块的功能是用户注册,包括将新用户的资料插入到数据库表注册模块的功能是用户注册,包括将新用户的资料插入到数据库表中、检查表中是否已经包含该用户、注册过程中两次密码是否一致等。中、检查表中是否已经包含该用户、注册过程中两次密码是否一致等。登录模块的功能是比较用户在页面上输入的用户名、密码与数据库登录模块的功能是比较用户在页面上输入的用户名、密码与数据库表中的用户名、密码内容是否一致。主要用到表中的用户名、密码内容
18、是否一致。主要用到“用户身份验证用户身份验证”中的中的“登录用户登录用户”功能。功能。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第一步 “用户注册登录”版块页面设计1在首页面index.asp导航栏下面一行的左边,插入一个1行3列的表格。2在该表格的第1个单元格中,插入一个表单,在表单中插入一个1行4列的表格。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 3在嵌套表格的第1个单元中,插入图片“images/d
19、englu.gif”;在第2个单元格先输入文本“用户名:”,再插入1个文本框,命名为“users_username”;在第3个单元格先输入文本“密码:”,再插入1个文本框,命名为“users_password”,“类型”设为“密码”;在第4个单元格中插入3个按钮,“登录”按钮的“动作”设为“提交表单”,“重置”按钮的“动作”设为“重设表单”。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第二步 创建首页面超链接,指向注册页面选中“注册”按钮,单击“行为”面板中单击“+”按钮,选 择“转 到 URL”命
20、令,在“URL”文 本 框 中 浏 览 或 输 入files/t2/register.asp,如图 所示,单击“确定”按钮。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第三步 创建新用户注册页面利用站点内的模板文件templatesziye.dwt生成一个ASP VBScript动态页,命名为register.asp保存到站点内files文件夹中的t2文件中。任任
21、务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第四步 插入表单打开register.asp页面,单击“插入”“表单”“表单”命令,插入一个表单,表单名为form1。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第五步 在表单中插入表格及表单域将光标定位在表单中,插入一个7行2列的表格,插入文本及各表单元素。五个表单元素的名称如下,其中,两个单选按钮的选定值(Value)分别为:“男”、“女”,“密码”和“确认密码”文本
22、域的“类型”为“密码”。如表 所示。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 表 表单元素名称设置任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第六步 检查表单单击“窗口”“行为”命令,在“行为”面板中选择“+”按钮,在弹出的下拉菜单中选择“检查表单”命令。设置users_
23、username、users_password、users_password2三个文本域的验证条件为是“值”为“必需的”;“可接受”为“任何东西”,即这三个文本域必须填写,不能为空。users_email文本域的验证条件是“可接受”为“电子邮件地址”。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第七步 检查两次密码是否一致进入代码窗口,手工修改表单form1中的“确认密码”文本域的onblur事件。当该文本域失去焦点时,会调用check()函数。任任 务务 操操 作子任务作子任务1 制制 作作 新新
24、用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 将光标定位于代码之前,添加代码:任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第八步 插入记录在“服务器行为”面板中,选择“插入记录”命令,弹出“插入记录”对话框,设置有关参数。如图3-2-8所示,然后单击“确定”按钮。图3-2-8 “插入记录”对话框任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第九步 检查新用户名检查新用户名的作
25、用是:如果是已经注册的用户,则不允许再次被注册。在“服务器行为”面板中选择“用户身份验证”,在子菜单中选择“检查新用户”命令。“用户名字段”下拉菜单中选择username字段。“如果已存在,则转到”文本框中输入registerfail.asp。表示如果用户名已经存在,则转到registerfail.asp页面。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第十步 完成注册单击“确定”按钮,完成注册。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设
26、计注册登录模块设计注册登录模块 第 十 一 步 建 立 注 册 失 败 页 面registerfail.asp如 果 用 户 名 已 经 存 在,则 转 到registerfail.asp 页面。效果如图 所示。任任 务务 操操 作子任务作子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 在这个页面中,设置一个“单击这里”超链接,指向注册页面register.asp。如图 所示。图 任任 务务 总总 结子任务结子任务1 制制 作作 新新 用用 户户 注注 册册 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 本子任务包括用户
27、注册页面设计以及注册成功、注册失败后的处理,编辑工作完成后,将相关的网页保存并上传,就可以测试该注册功能的执行情况了。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第一步 打开首页文件打开首页文件index.asp,将光标置于“登录区域”所在表单中。第二步 打开“登录用户”对话框打开“服务器行为”面板,选择“用户身份验证”“登录用户”命令。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第三步 设置“登录用户”对话框在“登录用
28、户”对话框中有四部分内容,如图 所示。下面详细介绍。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第一部分用来设置表单中的文本域的功能,“从表单获取输入”用来选择设置用户名和密码所在的表单的名称。“用户名字段”是表单中第一个文本域的名称,我们选择users_username。“密码字段”是表单中第二个文本域的名称,我们选择users_password。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第二部分用来设置服务器行为使
29、用到数据源连接的一些参数。“使用连接验证”下拉列表中选择数据源为“conn”。“表格”选择使用到的数据库表users。“用户名列”下拉列表中选择表users中存储用户名的字段users_username。“密码列”下拉列表中选择表users中存储用户密码的字段users_password。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第三部分用来设置用户登录成功或失败时分别转向的页面。如果选中“转到前一个URL(如果它存在)”前的复选框,则登录成功后浏览器会回到浏览index.asp的前一页。任任 务务 操操
30、 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第四部分用来设置用户的浏览权限。选择“用户名和密码”一项,表示只有用户名和密码正确的用户,才能浏览当前网页。选择“用户名、密码和访问级别”一项,表示将根据用户的用户名、密码及权限级别共同决定其浏览网页的权限。从“获取级别自”下拉菜单中选择字段,表示根据该字段的内容来确定用户的权限级别。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第四步 完成“登录用户”设置单击“确定”按钮。在“服务器行为”面板
31、中增加了一个“登录用户”行为。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第五步 读取阶段变量session(“MM_Username”)在创建“登录用户”的服务器行为时,系统将用户名信息保存在阶段变量session(“MM_username”)中,如果在其他页面想使该变量的值,只要读取就可以了。在“绑定”面板中,单击“+”按钮,从弹出的菜单中选择“阶段变量”,在“阶段变量”对话框的名称中输入MM_username,如图3-2-14所示,单击“确定”按钮。任任 务务 操操 作子任务作子任务2 制制 作作 用
32、用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第六步 设置登录成功或失败信息登录成功或失败,都返回index.asp,但显示内容不同。如果登录成功,在首页的“登录区域”显示欢迎界面,如果登录失败,则显示“非法用户”。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 1打开index.asp,在“登录区域”表单中添加一个模块,代码如下:您 好!,欢 迎
33、 光 临!注销 注意:Style=display:none表示本span现在不显示。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 2在代码窗口中,找到Response.Redirect(MM_redirectLoginSuccess)和Response.Redirect(MM_redirectLoginFailed),这是登录成功或登录失败后进行的相应处理。我们进行相应修改。如下:任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块
34、 任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 说明:1.login_table是“登录区域”所在表格的id。2.login_table.style.display=none;表示登录成功,将隐藏“登录界面”,login_success.style.display=;表示显示“欢迎界面”。3.如果登录成功后,隐藏“登录界面”、显示“欢迎界面”,请将控制登录成功或失败的这一大段代码,放到网页最后。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设
35、计注册登录模块 任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 第七步 设置“注销”功能打开index.asp,进入代码视图,选取文字“注销”。在“服务器行为”面板中,选择“用户身份验证”“注销用户”,弹出“注销用户”对话框,如图 所示,单击“确定”按钮。任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模块 任任 务务 操操 作子任务作子任务2 制制 作作 用用 户户 登登 录录 页页 面面任务二任务二 设计注册登录模块设计注册登录模
36、块 第八步 保存文件单击“文件”“保存”命令,将文件保存。任务二任务二 配 置 交 换 机 的 基 本 内 容配 置 交 换 机 的 基 本 内 容任任 务务 总总 结结用户访问网站时,首先要进行身份验证,这个功能是靠登录页面来实现的。如果输入的用户名和密码与数据库中的已有的用户名和密码一致,则登录成功。如果输入的用户名或密码与数据库中已有的用户名、密码不一样,则登录失败。情境导入情境导入子任务子任务1 制作新闻发布主页面制作新闻发布主页面新闻发布模块是动态网站建设中最常见的模块。通过对新新闻发布模块是动态网站建设中最常见的模块。通过对新闻的不断更新,让用户及时了解网站最新信息。在网站首页面闻
37、的不断更新,让用户及时了解网站最新信息。在网站首页面的显著位置往往有最新的新闻显示版块。在本网站案例中,我的显著位置往往有最新的新闻显示版块。在本网站案例中,我们需要在首页面完成们需要在首页面完成“新闻中心新闻中心”版块的制作。版块的制作。任务要求任务要求子任务子任务1 制作新闻发布主页面制作新闻发布主页面1掌握查询记录集的创建。掌握查询记录集的创建。2掌握服务器行为掌握服务器行为“重复区域重复区域”、“转到详细页面转到详细页面”的使用。的使用。3学会新闻发布时间的显示格式的设置。学会新闻发布时间的显示格式的设置。4学会截取过长的新闻标题。学会截取过长的新闻标题。实训设备实训设备子任务子任务1
38、 制作新闻发布主页面制作新闻发布主页面 配置网络环境的计算机系统,安装有配置网络环境的计算机系统,安装有IIS、Dreamweaver CS4、SQL Server 2005数据库及动画制作和图像处理等软件。数据库及动画制作和图像处理等软件。任务分析任务分析子任务子任务1 制作新闻发布主页面制作新闻发布主页面 打开网站首页打开网站首页index.asp,在,在“新闻中心新闻中心”位置进行设计,位置进行设计,要求显示最新要求显示最新10条新闻信息,显示新闻标题和发布时间等内条新闻信息,显示新闻标题和发布时间等内容,当用户单击想要浏览的新闻标题时即可进入该新闻的详细容,当用户单击想要浏览的新闻标题
39、时即可进入该新闻的详细内容页面;当用户想要浏览更多新闻时,点击该版块右上角的内容页面;当用户想要浏览更多新闻时,点击该版块右上角的“more”进入新闻列表页面。进入新闻列表页面。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发布主页面第一步第一步 插入表格插入表格在新闻中心版块位置插入在新闻中心版块位置插入2 2行行2 2列的表格。列的表格。第二步第二步 创建查询新闻记录集创建查询新闻记录集在在“绑绑定定”面面板板中中单单击击“+”按按钮钮,并并从从弹弹出出的的菜菜单单中中选选择择“记记录录集集(查查询询)”选选项项,在在打打开开的的“记记录录集集”对对话话框框中中输输入入如如表表
40、所所示示的的数数据据,创建一个按新闻发布时间降序排序的查询记录集,如图所示。创建一个按新闻发布时间降序排序的查询记录集,如图所示。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发布主页面属性属性设置值设置值属性属性设置值设置值名称Recordset1列全部连接筛选无表格news排序Time(降序)任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发布主页面第三步第三步 绑定记录集字段绑定记录集字段将将相相应应的的记记录录集集字字段段绑绑定定到到表表格格第第2行行中中单单元元格格的的相相应应位位置置,如如图图所示。所示。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新
41、闻发布主页面第四步第四步 设置重复区域设置重复区域1 1选中表格中第选中表格中第2 2行,通过单击表格左下方的行,通过单击表格左下方的 标记选中该行。标记选中该行。2 2在在“服服务务器器行行为为”面面板板中中单单击击“+”按按钮钮,从从弹弹出出菜菜单单中中选选择择“重重复复区区域域”服服务务器器行行为为。在在弹弹出出的的“重重复复区区域域”对对话话框框中中设设置置显显示示1010条条新闻,如图所示。新闻,如图所示。3 3设置完成后,效果如图所示。设置完成后,效果如图所示。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发布主页面任务操作任务操作子任务子任务1 制作新闻发布主页面制作
42、新闻发布主页面第五步第五步 在新闻标题上添加在新闻标题上添加“转到详细页面转到详细页面“服务器行为服务器行为1.选中表格中新闻标题字段代码选中表格中新闻标题字段代码“Recordset1.news_Title”。2在在“服服务务器器行行为为”面面板板中中单单击击“+”按按钮钮,并并从从弹弹出出菜菜单单中中选选择择“转到详细页面转到详细页面”服务器行为。服务器行为。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发布主页面3在弹出的在弹出的“转到详细页面转到详细页面”对话框中设置各参数,如图所示。对话框中设置各参数,如图所示。任务操作任务操作子任务子任务1 制作新闻发布主页面制作新闻发
43、布主页面第六步第六步 给给“more”设置链接设置链接选选中中“新新闻闻中中心心”版版块块右右上上角角的的“more”图图片片,在在“属属性性”面面板板中中设置链接到文件设置链接到文件“files/t3/news.asp”。任务总结任务总结子任务子任务1 制作新闻发布主页面制作新闻发布主页面1该页面记录集创建时需设置该页面记录集创建时需设置“排序排序”为为news_time降序,这样最新的降序,这样最新的新闻在版块的最上面显示。新闻在版块的最上面显示。2主页面主页面index.asp和新闻详细页面和新闻详细页面newscontent.asp之间是有关联的,之间是有关联的,由由index.asp
44、页面传递一个参数页面传递一个参数news_ID给给newscontent.asp页面。页面。3当显示的区域有限时,可通过设置日期的显示格式和对新闻标题进行当显示的区域有限时,可通过设置日期的显示格式和对新闻标题进行截取来解决。截取来解决。情境导入情境导入子任务子任务2 制作新闻详细页面制作新闻详细页面 一个网站的新闻信息量是很大的,所以在主页面为了显一个网站的新闻信息量是很大的,所以在主页面为了显示更多的新闻,只能列出新闻的标题、日期等,而不显示新闻示更多的新闻,只能列出新闻的标题、日期等,而不显示新闻具体内容。浏览者对哪条新闻感兴趣,可点击该新闻标题的链具体内容。浏览者对哪条新闻感兴趣,可点
45、击该新闻标题的链接后转到详细页面去浏览。接后转到详细页面去浏览。任务要求任务要求子任务子任务2 制作新闻详细页面制作新闻详细页面1掌握查询记录集的创建。掌握查询记录集的创建。2理解页面间传递的参数理解页面间传递的参数news_ID的作用。的作用。实训设备实训设备子任务子任务2 制作新闻详细页面制作新闻详细页面 配置网络环境的计算机系统,安装有配置网络环境的计算机系统,安装有IIS、Dreamweaver CS4、SQL Server 2005数据库及动画制作和图像处理等软件。数据库及动画制作和图像处理等软件。任务分析任务分析子任务子任务2 制作新闻详细页面制作新闻详细页面 该页面主要是用来显示
46、浏览者单击新闻发布主页面中的新该页面主要是用来显示浏览者单击新闻发布主页面中的新闻标题时打开的详细新闻内容。这个页面设计的重点在于如何闻标题时打开的详细新闻内容。这个页面设计的重点在于如何接收主页面接收主页面index.asp所传递的参数,并根据这个参数显示数据所传递的参数,并根据这个参数显示数据库中的相应记录内容。库中的相应记录内容。任务操作任务操作子任务子任务2 制作新闻详细页面制作新闻详细页面第一步第一步 创建显示新闻详细内容的页面创建显示新闻详细内容的页面利用站点内的模板文件利用站点内的模板文件templatesziye.dwt生成一个生成一个ASP VBScript动动态页,命名为态
47、页,命名为newscontent.asp保存到站点内保存到站点内files文件夹中的文件夹中的t3文件中。文件中。第二步第二步 插入表格插入表格在网页相应位置插入一个在网页相应位置插入一个3行行1列的表格。列的表格。任务操作任务操作子任务子任务2 制作新闻详细页面制作新闻详细页面第三步第三步 创建查询新闻记录集创建查询新闻记录集在在“绑绑定定”面面板板中中单单击击“+”按按钮钮,并并从从弹弹出出的的菜菜单单中中选选择择“记记录录集集(查查询询)”选选项项,在在打打开开的的“记记录录集集”对对话话框框中中输输入入如如表表所所示示的的数数据据,创建一个设置筛选条件的查询记录集,如图所示。创建一个设
48、置筛选条件的查询记录集,如图所示。任务操作任务操作子任务子任务2 制作新闻详细页面制作新闻详细页面属性属性设置值设置值属性属性设置值设置值名称Recordset1列全部连接筛选ID、=、URL参数、ID表格news排序无任务操作任务操作子任务子任务2 制作新闻详细页面制作新闻详细页面第四步第四步 在单元格中绑定记录集字段在单元格中绑定记录集字段将记录集字段代码插入到单元格的相应位置,如图所示。将记录集字段代码插入到单元格的相应位置,如图所示。任务总结任务总结子任务子任务2 制作新闻详细页面制作新闻详细页面 该页面在创建记录集时,要设置该页面在创建记录集时,要设置“筛选筛选”项,通过上个页项,通
49、过上个页面传递过来的参数面传递过来的参数news_ID的值来决定要显示哪条新闻的详细的值来决定要显示哪条新闻的详细内容。内容。情境导入情境导入子任务子任务3 制作新闻列表页面制作新闻列表页面网站为了吸引更多的浏览者,所有的精华都会放置在首页网站为了吸引更多的浏览者,所有的精华都会放置在首页面上显示,多数网站会有最新新闻的显示,但由于版块区域有面上显示,多数网站会有最新新闻的显示,但由于版块区域有限,不可能显示网站所有新闻,所以要创建一个新闻的列表页限,不可能显示网站所有新闻,所以要创建一个新闻的列表页面,以显示更多的新闻信息。面,以显示更多的新闻信息。任务要求任务要求子任务子任务3 制作新闻列
50、表页面制作新闻列表页面1掌握查询记录集的创建。掌握查询记录集的创建。2掌握服务器行为掌握服务器行为“重复区域重复区域”、“转到详细页面转到详细页面”的使用。的使用。3会添加会添加“记录集导航条记录集导航条”。实训设备实训设备子任务子任务3 制作新闻列表页面制作新闻列表页面 配置网络环境的计算机系统,安装有配置网络环境的计算机系统,安装有IIS、Dreamweaver CS4、SQL Server 2005数据库及动画制作和图像处理等软件。数据库及动画制作和图像处理等软件。任务分析任务分析子任务子任务3 制作新闻列表页面制作新闻列表页面 打开网站首页打开网站首页index.asp,点击,点击“新