（中职）多媒体应用技术任务8.6创建交互式网页及发布网站教学课件（）.pptx

《（中职）多媒体应用技术任务8.6创建交互式网页及发布网站教学课件（）.pptx》由会员分享，可在线阅读，更多相关《（中职）多媒体应用技术任务8.6创建交互式网页及发布网站教学课件（）.pptx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）多媒体应用技术任务8.6 创建交互式网页及发布网站教学课件（工信版）任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务描述】【任务目标】【任务分析】郭迪已基本上完成了整个网站的制作，但是在郭迪已基本上完成了整个网站的制作，但是在lianxiwo.html文件中插入的表文件中插入的表单仅仅只是一个表面，如何才能让浏览者真正能输入信息后被郭迪看到，取到相单仅仅只是一个表面，如何才能让浏览者真正能输入信息后被郭迪看到，取到相互交流的作用呢？做好的网站又如何发布到服务器上呢？互交流的作用呢？做好的网站又如何发布到服务器上呢？如果要实现表单功能，则需要在本地电脑上设置服务器，

2、关联数据库，使用简如果要实现表单功能，则需要在本地电脑上设置服务器，关联数据库，使用简单的单的access数据库来存储数据，使用数据库来存储数据，使用Dreamweaver制作制作asp动态网页。动态网页。1.会在本地电脑上设置服务器。会在本地电脑上设置服务器。2.会在本地电脑上关联数据库。会在本地电脑上关联数据库。3.会使用会使用Dreamweaver制作制作asp动态网页。动态网页。4.了解了解asp动态网页的概念。动态网页的概念。任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】1.检检查查电电脑脑上上是是否否装装有有“Internet信信息息服服务务(IIS)

3、管管理理器器”。选选择择“开开始始|控控制制面面板板”，打打开开“控控制制面面板板”对对话话框框，选选择择“管管理理工工具具”，查查看看是是否否有有“Internet 信信息息服服务务(IIS)管管理理器器”命命令令。若若有有，则则进进行行第第3步步。没没有有，则则进进行行第第2步步。如如图图8-6-1所所示。示。图图8-6-1 查看是否装有查看是否装有“Internet 信息服务信息服务(IIS)管理器管理器”任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】2.安安装装“Internet 信信息息服服务务(IIS)管管理理器器”。选选择择“控控制制面面板板|程程序

4、序和和功功能能|打打开开或或关关闭闭Windows功功能能”，在在“windows功功能能”对对话话框框中中，勾勾选选“Internet信信息息服服务务”，点点击击“确确定定”按按钮钮，等等待待安安装装即即可可。如如图图8-6-2所所示。示。图图8-6-2安装安装“Internet 信息服务信息服务(IIS)管理器管理器”任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】3.设置设置“Internet 信息服务信息服务(IIS)管理器管理器”添加一个网站。在添加一个网站。在“Internet 信息服务信息服务(IIS)管理器管理器”对话框中，选择对话框中，选择“网站网

5、站”，单击鼠标右键，选择，单击鼠标右键，选择“添加网站添加网站”，在，在“添加添加网站网站”对话框中，输入对话框中，输入“网站名称网站名称”为为“guodiweb”，“应用程序池应用程序池”为为“DefaultAppPool”，“物理路径物理路径”为为“E:guodiWeb”，IP地址为地址为“10.1.34.168”（IP地址为自己本机设置的地址为自己本机设置的IP），点击），点击“确定确定”启动网站。如图启动网站。如图8-6-3所所示。示。图图8-6-3 设置设置“Internet 信息服务信息服务(IIS)管理器管理器”添加一个网站添加一个网站任务任务8.6 创建交互式网页及发布网站创建

6、交互式网页及发布网站【任务实施】4.测试网站服务器是否正常工作。打开测试网站服务器是否正常工作。打开IE浏览器，在地址栏中输入浏览器，在地址栏中输入“http:/10.1.34.168/”，看是否能正常打开网站首页（，看是否能正常打开网站首页（index.html）。如图）。如图8-6-4所所示。示。图图8-6-4 测试测试网站服务器是否正常工作网站服务器是否正常工作任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】5.使素材库中的数据库文件关联系统使素材库中的数据库文件关联系统DSN。把素材库中。把素材库中“任务任务8.6”文件夹中的拷贝文件夹中的拷贝到到“guod

7、iWeb”文件夹中。打开文件夹中。打开“控制面板控制面板|管理工具管理工具|数据源数据源(ODBC)”，在，在“ODBC数据源数据源管理器管理器”对话框中，选择对话框中，选择“系统系统DSN”，点击，点击“添加添加”按钮，在按钮，在“创建新数据源创建新数据源”对话框对话框中选择中选择“Microsoft Access Driver(*.mdb，*.accdb)”，单击，单击“完成完成”。在弹出的。在弹出的“ODBC Microsoft Access安装安装”对话框中，填写对话框中，填写“数据源名数据源名”为为“liuyan”，“说明说明”为为“我的留言数据库我的留言数据库”，点击，点击“选择选

8、择”按钮，选择按钮，选择E盘盘guodiWeb文件夹下的文件夹下的Data1.accdb数据库。素材数据库。素材“Data1.accdb”数据库中的结构如图数据库中的结构如图8-6-5所示。所示。图图8-6-5 将将素材库中的数据库文件关联系统素材库中的数据库文件关联系统DSN任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】图图8-6-5 将将素材库中的数据库文件关联系统素材库中的数据库文件关联系统DSN任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】6.在在Dreamweaver软件下设置网站测试服务器。启动软件下设置网站测试服务器。启

9、动Dreamweaver，选择，选择“站点站点|管理站点管理站点”，选择，选择“郭迪的个人求职网站郭迪的个人求职网站”（若没有，请新建站点，详细步骤参照任务（若没有，请新建站点，详细步骤参照任务1），点击），点击“编辑按钮编辑按钮”，在，在“站点设置对象站点设置对象 郭迪的个人求职网站郭迪的个人求职网站”对话框中，选择对话框中，选择“服务器服务器”，选择，选择“+”（添加服务器（添加服务器按钮），设置按钮），设置“服务器名称服务器名称”为为“郭迪的服务器郭迪的服务器”，“连接方法连接方法”为为“本地本地/网络网络”，“服务器文服务器文件夹件夹”为为“E:/guodiWeb”，“Web URL”

10、为为http:/10.1.34.168/，单击，单击“保存保存”，如图，如图8-6-6所示。回所示。回到到“站点设置对象站点设置对象 郭迪的个人求职网站郭迪的个人求职网站”对话框，勾选对话框，勾选“测试测试”后，点击后，点击“保存保存”。图图8-6-6 在在Dreamweaver软件下设置网站测试服务器软件下设置网站测试服务器任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】7.更改网页更改网页“lianxiwo.html”网页为网页为“lianxiwo.asp”。在。在“文件文件”浮动面板内选浮动面板内选择择“lianxiwo.html”，单击鼠标右键，选择，单击鼠

11、标右键，选择“编辑编辑|重命名重命名”，将，将html改成改成asp，按回车，按回车，在弹出的在弹出的“更新文件更新文件”对话框中选择对话框中选择“更新更新”命令。如图命令。如图8-6-7所示。所示。图图8-6-7 更改更改网页网页“lianxiwo.html”网页为网页为“lianxiwo.asp”任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】8.双击打开双击打开“lianxiwo.asp”网页，调出网页，调出“数据库数据库”浮动面板，添加浮动面板，添加“数据源数据源”。在打开。在打开“lianxiwo.asp”网页后，选择网页后，选择“窗口窗口|数据库数据库”

12、，调出，调出“数据库数据库”浮动面板，检查浮动面板，检查1、2、3项是否项是否打勾，若打勾，则继续添加数据源，否则请完成前面打勾，若打勾，则继续添加数据源，否则请完成前面3个步骤。点击个步骤。点击“+”，选择，选择“数据源名称数据源名称（DSN）”，在弹出的，在弹出的“数据源名称（数据源名称（DSN）”对话框中输入对话框中输入“连接名称连接名称”为为“liuyan”（名称须（名称须为英文），点击为英文），点击“确定确定”。如图。如图8-6-8所示。所示。图图8-6-8 添加数据源添加数据源任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】9.添加添加“服务器行为服务器

13、行为”为为“插入记录插入记录”，实现从网页的文本框中输入的数据能自动，实现从网页的文本框中输入的数据能自动存贮在后台数据库中。选择存贮在后台数据库中。选择“服务器行为服务器行为”选项卡，单击选项卡，单击“+”按钮，选择按钮，选择“插入记录插入记录”，在弹出的，在弹出的“插入记录插入记录”对话框中，选择连接为对话框中，选择连接为“liuyan”，插入到表格，插入到表格“liuyan”中，中，插入后，转到插入后，转到“index.html”获取值自获取值自“form1”，选择网页中相应的文本输入框对应相，选择网页中相应的文本输入框对应相应数据库列表名称。点击应数据库列表名称。点击“确定确定”即可。

14、如图即可。如图8-6-9所示。所示。图图8-6-9 添加添加“插入记录插入记录”服务器行为服务器行为任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【任务实施】10.验证数据是否输入到后台数据库。打开验证数据是否输入到后台数据库。打开lianxiwo.asp网页，在文本输入框中写上网页，在文本输入框中写上留言内容，点击留言内容，点击“提交提交”，若返回到主页，则成功提交，可到后台数据库查看留言内容。，若返回到主页，则成功提交，可到后台数据库查看留言内容。如图如图8-6-10所示。所示。图图8-6-10 验证验证任务任务8.6 创建交互式网页及发布网站创建交互式网页及发布网站【相

15、关知识】1.ASPASP的全称为的全称为Microsoft Active Server Pages，意为，意为“动态服务器页面动态服务器页面”，是一，是一套微软开发的服务器端脚本环境，套微软开发的服务器端脚本环境，ASP内含内含IIS5.0种，通过种，通过ASP可以结合可以结合HTML网页、网页、ASP对象和对象和ActiveX元件建立动态、交互且高效的元件建立动态、交互且高效的Web服务器应用程序，其优点是简服务器应用程序，其优点是简单易学，适用于小型网站的设计。单易学，适用于小型网站的设计。要运行要运行ASP程序，要在程序，要在Windows操作系统上安装操作系统上安装IIS6.0，设置，

16、设置web站点。站点。2.关于数据库关于数据库数据库（数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，它产生于）是按照数据结构来组织、存储和管理数据的仓库，它产生于距今六十多年前，随着信息技术和市场的发展，特别是二十世纪九十年代以后，数据距今六十多年前，随着信息技术和市场的发展，特别是二十世纪九十年代以后，数据管理不再仅仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据管理不再仅仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据库有很多种类型，从最简单的存储有各种数据的表格到能够进行海量数据存储的大型库有很多种类型，从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个方面得到了广泛的应用。数据库系统都在各个方面得到了广泛的应用。常见的小型数据库如常见的小型数据库如Access，中型如，中型如SQL Server，大型如，大型如Oracle。谢谢 谢！谢！