制作ASP动态网页（模块八）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt

《制作ASP动态网页（模块八）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt》由会员分享，可在线阅读，更多相关《制作ASP动态网页（模块八）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、制作ASP动态网页（模块八）电子课件 中职Dreamweaver+CS3网页制作任务实训教程（高教版）模块八 制作ASP动态网页 主讲老师：*Dreamweaver CS3网页制作任务实训教程学习目标u了解IIS的安装与配置方法u了解并熟悉Access数据库、动态站点和数据源的创建u熟悉并掌握动态表格、动态文本、重复区域和记录集导航状态的创建u熟悉并掌握记录集导航条的插入以及转到详细页面超级链接的创建u掌握记录的插入、更新和删除操作任务一 制作ASP动态网页的准备工作u任务目标熟悉制作ASP动态网页之前的各种必要的准备工作，通过练习掌握IIS的安装与配置、Access数据库的创建、动态站点的创

2、建与配置以及数据源的创建等操作。具体要求如下：（1）了解IIS的安装与配置。（2）熟悉Access数据库的创建。（3）了解并熟悉动态站点的创建。（4）了解并熟悉数据源的创建。任务一 制作ASP动态网页的准备工作u操作思路（1）通过控制面板安装并配置IIS。（2）利用Access 2003制作数据库表格。（3）利用Dreamweaver CS3创建与配置动态站点。（4）创建数据源。制作ASP动态网页前准备工作的操作思路操作一 安装与配置IIS（1）选择【开始】【控制面板】菜单命令打开“控制面板”窗口，双击其中的“添加或删除程序”图标，如图所示。（2）打开“添加或删除程序”窗口，单击窗口左侧的“添

3、加/删除Windows组件”按钮，如图所示。添加程序添加Windows组件操作一 安装与配置IIS（3）在打开的对话框中选中“Internet信息服务（IIS）”复选框，单击“下一步”按钮，如图所示。（4）打开提示对话框，将Windows XP的安装光盘放入光驱，然后单击“确定”按钮，如图所示。添加IIS组件放入安装光盘操作一 安装与配置IIS（5）此时系统开始安装IIS组件，并在打开的对话框中显示安装进度，如图所示。（6）安装完成后在打开的对话框中单击“完成”按钮，如图所示。安装组件完成组件的安装操作一 安装与配置IIS（7）再次打开“控制面板”窗口，在其中双击“管理工具”图标，如图所示。（

4、8）在打开的窗口中双击“Internet信息服务”图标，如图所示。打开管理工具打开Internet信息服务操作一 安装与配置IIS（9）打开“Internet信息服务”窗口，展开左侧的“网站”选项，在“默认网站”选项上单击鼠标右键，在弹出的快捷菜单中选择【新建】【虚拟目录】菜单命令，如图所示。（10）打开“虚拟目录创建向导”对话框，单击“下一步”按钮，如图所示。新建虚拟目录“虚拟目录创建向导”对话框操作一 安装与配置IIS（11）在打开的对话框的“别名”文本框中输入站点别名，这里输入“login”，单击“下一步”按钮，如图所示。（12）在打开的对话框的“目录”文本框中输入站点位置，这里输入“E

5、:login”（需确保该路径中已存在同名文件夹），单击“下一步”按钮，如图所示。输入站点别名设置站点位置操作一 安装与配置IIS（13）在打开的对话框中默认其中设置，直接单击“下一步”按钮，如图所示。（14）然后在打开的对话框中单击“完成”按钮完成虚拟目录的创建，如图所示。设置访问权限完成创建操作二 创建Access数据库（1）启动Microsoft Access 2003，选择【文件】【新建】菜单命令，如图所示。（2）在窗口右侧的任务窗格中单击“空数据库”超级链接，如图所示。新建数据库新建空白数据库操作二 创建Access数据库（3）在打开的“文件新建数据库”对话框的“文件名”下拉列表框中输

6、入数据库名称，这里输入“userinfo”，并设置其保存位置，然后单击“创建”按钮，如图所示。（4）在打开的窗口中单击上方的“设计”按钮，如图所示。设置数据库名称和保存位置打开表设计器操作二 创建Access数据库（5）在打开的表窗口中的“字段名称”和“数据类型”栏下输入如图所示的信息。（6）按照相同的方法输入如图所示的信息，创建出表的结构。设置表结构设置表结构操作二 创建Access数据库（7）在“UserID”项上单击鼠标右键，在弹出的快捷菜单中选择“主键”命令，如图所示。（8）此时“UserID”项左侧将出现钥匙标记，表示该项为主键项。按“Ctrl+S”键打开“另存为”对话框，在“表名称

7、”文本框中输入“user”，单击“确定”按钮完成数据库和表的创建，如图所示。创建主键保存表操作三操作三 创建与配置动态站点创建与配置动态站点（1）启动Dreamweaver CS3，选择【站点】【新建站点】菜单命令，在打开的对话框中单击“高级”选项卡，如图所示。（2）在“站点名称”文本框中输入“login”，在“本地根文件夹”文本框中输入“E:login”，在“HTTP地址”文本框中输入“http:/localhost/login/”，如图所示。新建站点设置站点本地信息操作三操作三 创建与配置动态站点创建与配置动态站点（3）在“分类”列表框中选择“测试服务器”选项，然后在“服务器模型”下拉列表

8、框中选择“ASP VBScript”选项，在“访问”下拉列表框中选择“本地/网络”选项，在“URL前缀”文本框中输入“http:/localhost/login/”，单击“确定”按钮，如图所示。设置站点测试服务器操作四 创建数据源（1）利用控制面板打开“管理工具”窗口，在其中双击“数据源（ODBC）”图标，如图所示。（2）打开“ODBC数据源管理器”对话框，单击“系统DSN”选项卡，然后单击“添加”按钮，如图所示。打开数据源工具添加数据源操作四 创建数据源（3）打开“创建新数据源”对话框，在其中的列表框中选择第2项选项，单击“完成”按钮，如图所示。（4）在打开的对话框中设置数据源名称和说明信息

9、，然后单击“选择”按钮，如图所示。选择驱动程序设置数据源名称和说明操作四 创建数据源（5）打开“选择数据库”对话框，在“驱动器”下拉列表框中选择数据库所在盘符，在上方的“目录”列表框中选择数据库所在文件夹，然后在左侧的列表框中选择数据库，最后单击“确定”按钮，如图所示。（6）在Dreamweaver中选择【窗口】【数据库】菜单命令，打开“应用程序”面板，单击“数据库”选项卡下的“添加”按钮，在弹出的下拉菜单中选择“数据源名称（DSN）”命令，如图所示。选择数据库连接数据源操作四 创建数据源（7）打开“数据源名称（DSN）”对话框，在“连接名称”文本框中设置数据源的连接名称，在“数据源名称”下拉

10、列表框中选择创建的数据源，单击“确定”按钮，如图所示。（8）关闭对话框后，在“应用程序”面板的“数据库”选项卡中即可看到创建的数据源，展开该数据源下的“表”选项，即可看到前面在Access中创建的“user”表，如图所示。设置数据源连接名称 成功创建数据源任务二任务二 制作制作“留言记录留言记录”动态网页动态网页u任务目标通过创建记录集、插入记录、添加重复区域和设置记录集分页等操作制作出最终效果如图所示的“留言记录”网页。“留言记录”动态网页的最终效果任务二任务二 制作制作“留言记录留言记录”动态网页动态网页u操作思路（1）利用已创建的数据源建立记录集。（2）在提供的ASP网页中插入记录集中的

11、记录。（3）为插入的记录建立重复区域。（4）为动态网页设置记录集分页显示功能。制作“留言记录”动态网页的操作思路操作一 创建记录集（1）将光盘中提供的“message.asp”网页文件和“message.mdb”数据库文件复制到电脑中的“E:message”文件夹下，打开“message.asp”文件，选择【窗口】【数据库】菜单命令打开“应用程序”面板，单击“绑定”选项卡，如图所示。（2）单击“添加”按钮，在弹出的下拉菜单中选择“记录集（查询）”命令，如图所示。打开“应用程序”面板绑定记录集操作一 创建记录集（3）打开“记录集”对话框，在“名称”文本框中输入“mes”，在“连接”下拉列表框中选

12、择“message”选项，如图所示。（4）选中“全部”单选项，在“排序”下拉列表框中选择“GuestTime”选项，在右侧的下拉列表框中选择“降序”选项，单击“确定”按钮，如图所示。创建记录集设置排序字段和排序方式操作一 创建记录集（5）此时“绑定”选项卡中将显示绑定的所有记录集字段，如图所示。创建好的记录集操作二 插入记录（1）将文本插入点定位在表格的第3行第1列中，选择“绑定”选项卡中的“GuestName”选项，单击“插入”按钮，如图所示。插入记录操作二 插入记录（2）此时单元格中将显示插入的记录集中的所选字段，如图所示。（3）将文本插入点定位在表格的第3行第2列中，选择“绑定”选项卡中

13、的“GuestContent”选项，单击“插入”按钮，如图所示。插入的记录插入记录操作二 插入记录（4）此时单元格中将显示插入的记录集中的所选字段，如图所示。（5）用相同方法将“GuestTime”字段插入到表格的第3行第3列单元格中，如图所示。插入的记录插入记录操作三操作三 添加重复区域添加重复区域（1）将鼠标指针移至表格的第3行单元格左侧，当其变为向右的黑色实心箭头时单击鼠标选择该行所有单元格，如图所示。选择整行单元格操作三操作三 添加重复区域添加重复区域（2）单击“应用程序”面板中的“服务器行为”选项卡，单击“添加”按钮，在弹出的下拉菜单中选择“重复区域”命令，如图所示。（3）打开“重复

14、区域”对话框，在“记录集”下拉列表框中选择“mes”选项，选中“记录”单选项，并在其中的文本框中输入“4”，如图所示。添加重复区域设置引用的记录集和显示记录的数量操作三操作三 添加重复区域添加重复区域（4）此时所选单元格左上方将出现“重复”字样，表示所选单元格已成功添加了重复区域，如图所示。成功添加重复区域操作四 设置记录集分页（1）将文本插入点定位在第4行第2列单元格中，在“服务器行为”选项卡中单击“添加”按钮，在弹出的下拉菜单中选择【记录集分页】【移至前一条记录】菜单命令，如图所示。（2）打开“移至前一条记录”对话框，默认“链接”下拉列表框中所选选项，在“记录集”下拉列表框中选择“mes”

15、选项，单击“确定”按钮，如图所示。选择命令设置链接和记录集操作四 设置记录集分页（3）此时单元格中将插入“移至前一条记录”的超级链接。将文本插入点定位在第4行第3列单元格中，在“服务器行为”选项卡中单击“添加”按钮，在弹出的下拉菜单中选择【记录集分页】【移至下一条记录】菜单命令，如图所示。（4）打开“移至下一条记录”对话框，默认“链接”下拉列表框中所选选项，在“记录集”下拉列表框中选择“mes”选项，单击“确定”按钮，如图所示。选择命令设置链接和记录集操作四 设置记录集分页（5）此时单元格中即可插入“移至下一条记录”的超级链接，如图所示。插入的超级链接操作四 设置记录集分页（6）保持设置的网页

16、，按“F12”键预览，此时将自动调取数据库中的信息并显示出来，如图所示。（7）单击“下一页”按钮将自动显示下一页的内容，如图7所示。预览效果分页显示留言记录实训一实训一 制作制作“用户信息用户信息”动态网页动态网页u实训目标制作“用户信息”动态页面，最终效果如图8-59所示。其中将主要涉及IIS的配置、Access数据库的创建、动态站点的配置、数据源的连接、记录集的创建、记录的插入、重复区域的添加、记录集导航状态以及记录集导航条的添加等操作。“用户信息”网页的最终效果实训一实训一 制作制作“用户信息用户信息”动态网页动态网页u实训分析（1）配置别名为“info”、位置为“E:info”的IIS

17、。（2）创建名为“info”的Access数据库并在其中创建“info”表，字段名称包括“ID”、“Name”、“Sex”、“Age”、“Email”和“Tel”，其中“ID”字段自动编号且设为主键、“Sex”、“Age”和“Tel”为数字类型、其余字段为文本类型，并输入各条记录（参见光盘效果中的数据库文件）。（3）配置站点名称为“info”，本地根文件夹为“E:info”，HTTP地址为“http:/localhost/info/”，服务器模型为“ASP VBScript”，访问类型为“本地/网络”，“URL前缀”为“http:/localhost/info/”的动态站点。（4）创建数据源名

18、为“info”，说明为“用户信息”，数据库为“info.mdb”的数据源。实训一实训一 制作制作“用户信息用户信息”动态网页动态网页（5）新建并保存“info.asp”动态网页文件，利用“应用程序”面板的绑定功能建立名称为“info”，连接为“info”，排序为“ID”的记录集。（6）设置网页背景颜色为“#FFCCFF”，然后创建4行6列的表格，合并第1行单元格，在其中输入标题文本，并参考效果文件设置文本格式。（7）在第2行各单元格中依次输入“编号”、“姓名”、“性别”、“年龄”、“电子邮件地址”和“联系电话”，并设置文本格式。（8）在第3行各单元格中依次插入绑定好的记录集中相应的字段，然后将

19、第3行设置为重复区域。实训一实训一 制作制作“用户信息用户信息”动态网页动态网页（9）合并最后一行单元格，在其中利用“数据”选项卡中的“记录集导航条”按钮 和“记录集导航状态”按钮，并将相应的英文文本更改为中文文本。（10）保存并预览网页效果。制作“用户信息”网页的操作思路实训二实训二 制作制作“用户注册用户注册”动态网页动态网页u实训目标制作“用户注册”动态页面，最终效果如图所示。其中将主要涉及到记录集的连接以及“插入记录表单向导”的使用，通过这些操作达到将动态网页中输入的注册信息及时收集到数据库的目的。“用户注册”动态网页的最终效果实训二实训二 制作制作“用户注册用户注册”动态网页动态网页

20、u实训分析（1）配置别名为“reg”、位置为“E:reg”的IIS。（2）Access数据库直接利用光盘中提供的“reg.mdb”文件。（3）配置站点名称为“reg”，本地根文件夹为“E:reg”，HTTP地址为“http:/localhost/reg/”，服务器模型为“ASP VBScript”，访问类型为“本地/网络”，“URL前缀”为“http:/localhost/reg/”的动态站点。（4）创建数据源名为“reg”，说明为“注册信息”，数据库为“reg.mdb”的数据源。（5）打开光盘提供的“reg.asp”素材，利用“应用程序”面板的绑定功能建立名称为“reg”，连接为“reg”，排序为“regID”的记录集。（6）将文本插入点定位在表格的第2行单元格中，单击“数据”选项卡中的“插入记录表单向导”按钮，在打开的对话框中按下图进行设置。实训二实训二 制作制作“用户注册用户注册”动态网页动态网页（7）选择“提交”按钮，将名称修改为“确认注册”，将“密码：”对应的文本区域表单对象设置为“密码”类型，并适当调整插入表单的对齐方式和间距。（8）保存网页并预览，输入相应的注册信息后单击“确认注册”按钮即可跳转到指定的网页，且此时“reg.mdb”数据库中的表格将同步收集到输入的数据。制作“用户注册”动态网页的操作思路