第08章 网络开发技术

,计算机辅助教学理论与实践,网络开发技术,第8章,*,XXXXXXXXXXXXXXXXXX,目录,8.1网络及其系统构成,8.1.1网络的定义8.1.2硬件构成8.1.3软件构成,8.2静态网页制作技术,8.2.1认识Dreamweaver8.2.2建立与管理网站8.2.3编辑网页,第8章网络开发技术,*,XXXXXXXXXXXXXXXXXX,目录,8.2.4插入、编辑表格8.2.5多媒体的使用8.2.6教学系统设计8.2.7超链接的设定8.2.8框架的设计8.2.6发布站点,第8章网络开发技术,8.2静态网页制作技术,*,XXXXXXXXXXXXXXXXXX,目录,8.3动态网页制作技术,8.3.1搭建服务器平台8.3.2创建数据库8.3.3数据库连接8.3.4数据显示8.3.5数据添加8.3.6更新数据8.3.7数据删除,第8章网络开发技术,8.1网络及其系统构成,计算机网络是指互联起来的，既可独立工作又可联合工作的计算机的集合。所谓“互联”是指互相连接的计算机能够互相交换信息并达到资源共享的目的。网络一般都具有资源共享、提高系统的可靠性、分担网络中个别计算机的负荷、实时信息交换与管理等功能。,8.1.1网络的定义,网络课程的硬件系统通常由服务器、工作站、网间互联设备、传输媒质和客户端等部分组成。网络课程硬件构成的逻辑结构如图8-1所示。,8.1.2硬件构成,图8-1网络课程硬件构成的逻辑结构,8.1网络及其系统构成,网络课程软件可分为服务器软件和客户机软件两个方面。1.服务器软件现在较为流行的操作系统主要有：WINDOWS、UNIX和Linux，选择哪种系统要考虑系统本身的要求、性能以及运行于系统之上的服务器软件本身的性能和要求。在网络课程中，要涉及到素材库及其检索，需要数据库的支持。在网络课程服务器上使用的数据库一般有Oracle，Sybase，DB2，MicrosoftSQLServer，Access，VisualFoxPro，Informix和MySQL等。,8.1.3软件构成,8.1网络及其系统构成,1.服务器软件在网络课程的素材类型里，除了图像和文字外，还有一种重要的媒体形式：视频和动画。在网络上播放视频就要使用流媒体（StreamMedia）。服务器端需安装流媒体服务软件，常见的软件有WindowsMediaServer，RealServer和QuickTimeStreamingServer等，用来处理大量访问者的传输请求，并且控制不同的传输速率、压缩速率与影像品质。,8.1.3软件构成,8.1网络及其系统构成,按照网络课程开发语言，服务器需安装配置相应的运行环境，根据需要安装Tomcat或IIS等服务。Tomcat是一种web服务器上的一种软件包，用来对服务器上的网页文档提供访问权限控制，可用于开发和调试JSP程序，可用于架设网址。IIS是InternetInformationServer的简称，是Windows系统提供的一种服务，它包括WWW服务器、FTP服务器和SMTP服务器，亦可用于架设网站。,8.1.3软件构成,8.1网络及其系统构成,2.客户机软件基于B/S（浏览器/服务器）架构的网络课程，客户机一般通过操作系统自带的浏览器（如：IE）或自行安装的浏览器（如：navigator、QQ浏览器、猎豹浏览器、火狐浏览器等）即可。基于C/S（客户端/服务器）架构的网络课程，客户机需安装网络课程指定的客户端程序。,8.1.3软件构成,8.1网络及其系统构成,8.2静态网页制作技术,网络课件设计的主要工作就是设计并制作用于教学目的网站及网页。HTML是网页制作的基础，但直接使用其制作网页，不仅工作量大，编写程序复杂，直观性差，而且要求设计者有更多的计算机专业知识，因此，不适用于广大的非专业人员直接使用。为了避免大量的直接编写HTML程序，人们已开发出大量的“所见即所得”的网页制作工具。其中Dreamweaver和FrontPage就是当前主流的站点和网页编辑器。,2.客户机软件Dreamweaver有多种版本，目前的版本为Dreamweavercs6，它保留和发展了以前版本的各种优秀功能，并根据用户的要求增加了许多新功能。其主要特点有：1.制作效率高2.轻松维护3.所见即所得4.控制能力强5.全方位的呈现,8.2.1认识Dreamweaver,8.2静态网页制作技术,8.2静态网页制作技术,所谓网站是指一组相互关联的网页及其相关信息。网站可以建立在本地机上的某个文件夹里，也可建立在远地的服务器上。制作一个网站时首先应该建立站点，以方便对整个网站的结构进行规划。,8.2.2建立与管理网站,1创建网站现以DreamweaverCS6为例创建一个新的网站。首先介绍新建站点的方法，其具体操作为：,8.2.2建立与管理网站,8.2静态网页制作技术,图8-2Dreamweavercs6主画面,2管理网站Dreamweaver具有很好的网站管理和维护的功能。选择菜单“站点”“管理站点”，会弹出“管理站点”对话框，如图8-4所示。,8.2.2建立与管理网站,8.2静态网页制作技术,图8-4管理站点,使用Dreamweaver可以直接创建单独的网页，并对其进行编辑，而后存盘；也可以在一个已经打开的网站中添加新的网页。二者操作类似。1.创建一个新网页2.在网站中添加新的网页3.网页编辑器4.保存网页,8.2.3编辑网页,8.2静态网页制作技术,利用Dreamweaver的表格功能，设计者可以方便的设计出需要的表格。表格在网页中通常用于组织相关信息，是页面中以行和列的方式表述信息的手段。表格还可以用来进行页面布局，可将文本和图形插入无边框的表格之中进行整齐的排列。1.创建表格2.编辑表格,8.2.4插入、编辑表格,8.2静态网页制作技术,1.添加文本、特殊字符、日期和时间2.图像媒体的使用3.声音媒体的使用4视频媒体的应用5动画媒体的应用,8.2.5多媒体的使用,8.2静态网页制作技术,在网络课程中，每个文件夹都有存放位置和路径，这些文件的路径和存放位置和超链接是紧密相连的。超链接可以有效地引导访问者浏览相关的信息。链接路径一般有绝对路径和相对路径两种。绝对路径为文件提供完整路径，其中包括适用协议，如http和ftp等。例如：，一般链接到其他网站中的文件时须使用绝对路径。1.在文本文字上建立超链接2.电子邮件超链接3.在图片上创建超链接,8.2.6超链接的设定,8.2静态网页制作技术,如果在一个窗口上同时显示多个子网页，那么此种构建网页的方式叫作框架结构。框架是网页设计中很重要的技术，在一个框架结构中每个子网页可独立滚动并可动态地改变其子窗口的大小，其内容可以相互独立，也可以相互关联。1.创建框架结构的网页2.选择框架3.框架属性4.框架集属性5.保存框架,8.2.7框架的设计,8.2静态网页制作技术,启动Dreamweaver，打开拟发布的站点。在“管理站点”对话框中双击拟发布的站点，弹出“站点设置对象”对话框，选择“服务器”页签中的“添加服务器”图片按钮如图8-46所示。,8.2.8发布站点,8.2静态网页制作技术,图8-46站点设置对象,在弹出的添加服务器对话框中输入服务器名称，并填写已知的FTP服务器地址等基本信息后保存。单击文件面板工具栏上的向“远程服务器”上传文件蓝色箭头图标按钮。当询问是否上传整个站点时，单击“确定”按钮。Dreamweaver将站点下所有文件复制到您在定义远程文件夹中。在浏览器中打开远程站点以确保正确上传了所有文件。,8.2静态网页制作技术,8.2.8发布站点,8.3动态网页制作技术,静态网页制作技术中介绍了DreamweaverCS6的基本操作应用，建立动态的有交互应用的网络课程还需要搭建本地服务器平台、创建数据库并建立网页与数据库的连接的开发语言和开发平台。本节将以下列系统环境为例进行讲解，服务器平台选用微软公司开发的Windows下的Web服务器IIS（InternetInformationServer，Internet信息服务）。数据库选用微软公司的Acess2007数据库。开发语言选择ASP。开发平台选择DreamweaverCS6。,在开发网络课程时，可以在开发用计算机上搭建配置服务器平台。自行搭建的服务器平台其性能虽然不及专业服务器，但可顺畅运行和测试网络课程。具体过程如下：Web服务器IIS的配置过程为打开“控制面板”对话框；选择“添加/删除程序”选项，单击左侧的“添加/删除Windows组件”选项；打开“Windows组件向导”对话框；,8.3.1搭建服务器平台,8.3动态网页制作技术,如图8-49所示，勾选“Internet服务器（IIS）”复选框，单击下一步，完成IIS的安装。,8.3.1搭建服务器平台,8.3动态网页制作技术,图8-49“Windows组件向导”对话框,与其他类型的数据库系统相比，Access提供了各种工具简单方便，并且具有强大的自动化管理功能，这里选择Access2007版本，安装完整版Office即能成功安装Access。作为Office系列产品之一，Access文件的操作方法与Word类似。启动MicrosoftOfficeAccess2007，执行“文件”“新建”命令选择新建空白数据库，在右下角的文本框中输入新建数据库的名称，选用默认名称为Database1.accdb。,8.3.2创建数据库,8.3动态网页制作技术,创建数据库连接需要一些参数设置，使程序知道数据库的位置与数据库建立连接。ASP（ActiveServerPages，动态服务器网页）是目前流行的开放式Web服务器应用程序开发技术，它内含于IIS中，不需要单独安装就可以直接使用，它能将脚本语言、HTML标记语言和数据库结合在一起，创建网站中的各种动态应用程序。ASP文件名的格式是.asp，它是服务器端脚本，可在有配置好IIS的服务器上直接运行，可将运算结果写入HTML文件返回给浏览器端用户。ASP语言不需进行编译可直接执行，并整合于HTML中。,8.3.3数据库连接,8.3动态网页制作技术,1.ADO简介ADO(ActiveXDataObjects，ActiveX数据对象）是Microsoft提出的应用程序接口用以实现访问数据库中的数据。如果希望编写应用程序从SQLServer、Access、DB2或Oracle数据库中向网页提供数据，可以将ADO程序包含于活动服务器页（ASP）的HTML文件中。,8.3.3数据库连接,8.3动态网页制作技术,2.用OLEBC连接数据库OLEDB(ObjectLinkingandEmbeddingDatabase对象链接和嵌入数据库），一个基于COM的数据存储对象，能提供对所有类型的数据的操作，甚至能在离线的情况下存取数据。OLEDB是微软通向不同的数据源的低级应用程序接口。,8.3.3数据库连接,8.3动态网页制作技术,在Dreamweaver中如图8-56所示，上述index.asp文件可实现显示数据库Database1.accdb中student表内容。,8.3.4数据显示,图8-56显示数据示例,8.3动态网页制作技术,在Internet信息服务中，即IIS中选择网站站点所在的虚拟目录，在浏览器中预览index.asp文件，或在浏览器地址栏中直接输入访问地址，如图8-57所示。,8.3.4数据显示,图8-57数据库中数据显示,8.3动态网页制作技术,获得数据库的表数据后，可以进行各种访问数据库的操作，其中向数据库中添加记录需要有录入界面，在站点中新建文件add.asp，在Dreamweaver中打开该文件，执行菜单栏中“插入”“表单”命令，光标停留在表单上，输入文字姓名，执行菜单栏中的“插入”“文本域”，执行菜单栏中的“插入”“按钮”，根据页面中需要录入文本框和按钮的数量进行操作，选择表单，在表单动作中填写提交表单执行的页面add_new.asp，如图8-58所示。,8.3.5数据添加,8.3动态网页制作技术,图8-58添加数据录入界面设计,在Dreamweaver中新建文件add_new.asp，在代码窗口中录入如下内容：,8.3.5数据添加,8.3动态网页制作技术,在浏览器中预览add.asp文件，如图8-59所示。,8.3.5数据添加,8.3动态网页制作技术,图8-59录入数据,在文本框中录入要添加的学生信息，单击提交按钮，录入页面跳转至Index.asp页面，如图8-60所示。录入数据呈现在列表中。,8.3.5数据添加,8.3动态网页制作技术,图8-60录入数据效果,在拆分视图下，输入代码后如图8-61所示。,8.3.6更新数据,8.3动态网页制作技术,图8-61更新数据界面,文件modify.asp接收到Index.asp页面传递的id值，显示要修改的内容，单击index.asp页面中序号为“3”所在行的“编辑”按钮，如图8-62所示。,8.3.6更新数据,8.3动态网页制作技术,图8-62更新数据,本示例中通过单击index.asp页面删除按钮，删除一行数据。在DreamweaverCS6中新建文件del.asp，在代码窗口中录入如下内容：,8.3.7数据删除,8.3动态网页制作技术,在浏览器中预览index.asp页面，单击序号为“3”所在行的“删除”按钮，该按钮将id值传递给del.asp文件，执行删除后返回到index.asp页面