第四章 网络技术教育应用(复习用).ppt

1、第4章 网络技术教育应用,聊城大学传媒技术学院 于连民 ,4.1 网络教育的技术基础 4.2 网络教育资源及利用 4.3 网络教学平台与网络课程 4.4 网络教育应用模式及设计,4.1 网络教育的技术基础,4.1.1 网站设计基础 4.1.2 动态网页技术 4.1.3 流媒体技术及应用 4.1.4 虚拟现实技术及应用 4.1.5 Web 2.0技术,4.1.1 网站设计基础,4.1.1 网站设计基础,网页制作是一门综合性技术，需要用到图像处理、动画制作、页面设计、语言编程等方面知识。常用的网页制作工具可以分为五大类: 图形图像制作工具：Photoshop、Fireworks、Freehand、

2、CorelDraw。 网页编辑工具：记事本、Dreamweaver、FrontPage、Visual Interdev、visual studio。 网页动画工具：Flash、Swish、Ulead Gif Animator。 网页开发语言：ASP、ASP.NET、JSP、PHP、 Perl 、 CGI、 XML、JavaScript、VBScript等。 网页上传工具：CuteFtp、LeapFtp、FlashFXP,网页三剑客,4.1.1 网站设计基础,1HTML语言 网页最基本的构成语言 Hypertext Markup Language (超文本标记语言) HTML文件可以直接由浏览器

3、解释执行，而无须编译,4.1.1 网站设计基础,1HTML语言 编写环境：记事本、Dreamweaver（带FTP功能）、Frontpage、Word等文本编辑器 HTML文件必须以html或htm为扩展名 运行环境：IE、Firefox等,4.1.1 网站设计基础,HTML语言的基本结构, 第一个HTML网页 Hello, world! 这里是内容区域！ ,任何的HTML都是以开始，以结束,定义了HTML文档的页头部分,指出文档的标题，这种标题会在浏览器上的标题条内显示出来,HTML的内容都定义在它们之间,4.1.1 网站设计基础,HTML常用标记 1）背景颜色及背景图像 颜色 : 系统预定

4、义颜色:red、green、blue等 六位16制数:#FF0000rrggbb 图像: gif、jpg、bmp或png,4.1.1 网站设计基础,HTML常用标记 2）字体标记 Size(字体大小 ): 取值17 ,由小到大 Face(字体类型 ): 客户端所能获得的字体，必须是用户计算机已经安装的字体，如使用特殊字体，可以把文字转化为图片进行加入,4.1.1 网站设计基础,HTML常用标记 3）段落标记和换行标记 注意： 是单标签 4）水平线标记 Width：宽度，可以是百分比，也可是像素 5）图像标记 src:图像文件的路径名及文件名，一般使用相对路径,4.1.1 网站设计基础,HTML

5、常用标记 6）超链接标记 聊城大学传媒技术学院 Href:链接的地址 一个文件：about.html 一个网址： 打开邮件客户端软件并填写接收者：mailto: target:打开目标的方式 _blank：使用新窗口打开链接 _top：上层窗口，主要在框架页中使用 _self：当前窗口 _parent ：父窗口 框架名称：在对应的框架中显示新页面,4.1.1 网站设计基础,HTML常用标记 7）表格标记（用于排版及定位）, 精品课程单位负责人 网络技术传媒技术学院张三 ,border ：边框宽度 Align:居中显示 表格背景,4.1.1 网站设计基础,HTML常用标记 8）滚动字幕标记 我会

6、动的，哈哈! 注： Direction:运动方向（down、up、left、right） Scrolldelay:间隔时间，值越大越慢,4.1.1 网站设计基础,HTML常用标记 9）背景音乐标记 loop ：循环次数，当值为-1时表示无限次循环播放，背景音乐一般采用*.mid格式文件。 10）多媒体文体嵌入标记 ,4.1.1 网站设计基础,2. Dreamweaver 8 (1) Dreamweaver 8 编辑界面,4.1.1 网站设计基础,2. Dreamweaver 8 Dreamweaver 8 编辑界面 三种视图：代码视图、设计视图、拆分视图,4.1.1 网站设计基础,2. Dre

7、amweaver 8 （2） 建立一个小站点 1）建立站点：三种方法 建立页面时使用英文字符定义名称，首页应采用index.html或default.html 2）设置页面属性：页面背景图片要尽量小，设置重复方式 3）设置标题方法 4）设置字体 5）添加横线 6）添加表格 7）添加图片 8）添加超级链接： 9）预览（F12）,4.1.1 网站设计基础,2. Dreamweaver 8 （3） 建立一个框架页 1）框架页面的构成，由各框架及一个框架集页面组成，即建立由左右两栏的构成的框架页面，需要三个文件 2）框架页滚动属性的调整,4.1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和

8、准备素材,网站制作,网站测试与发布,用户需求分析,网站整体规划,功能需求: 网站的受众群体是哪些？其特点是什么？ 网站最受关注的是哪些功能？ 是否有留言本、论坛、站内搜索等？ 是否提供用户注册？,内容需求: 网站内容包括哪些类型？ 网站信息采用哪些表现方式：文本、图片、视频、表格等？ 是否具有独立维护内容的能力？ 网站信息是否允许下载和转载？,设计需求: 网站采用哪种色系？ 网站的风格是什么样的？ 网站的页面深度有几级？ 是否有Flash动画？,技术需求 : 网站采用何种技术 系统具有的安全度 是否对浏览器有要求等,4.1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站

9、制作,网站测试与发布,用户需求分析,网站整体规划,栏目规划的原则 : 栏目设计结构要清晰、设计简洁。 栏目顺序安排合理，分清主次，重要栏目放在靠前位置，突出重点。 栏目结构不超过三级，过深的栏目容易使访问者失去耐心。,功能规划 : 分为前台功能和后台功能 前台功能是为访问者服务的，如注册、评论、留言、搜索等功能 后台功能是供网站维护者使用多功能，如发布功能、论坛、资源库等,4.1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,4.1.1 网站设计基础,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,4.1.1 网站设计基础

10、,3 网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,网站测试,注册域名,申请虚拟主机,利用FTP上传网页（DW）,虚拟主机是通过技术手段将一台服务器虚拟分成许多份，可以在一台服务器上同时安装多个网站,4.1.2 动态网页技术,4.1.2动态网页技术,1动态网页的概念 从技术上来划分 : 静态网页技术 网页的动态表现技术 网页的动态内容技术 从运行位置来划分 : 客户端网页技术(静态网页技术、网页的动态表现技术) 服务器端网页技术 (网页的动态内容技术) 动态网页技术包括网页的动态表现技术和网页的动态内容技术, 狭义上来讲，动态网页技术就是指运行在服务器端的动态内容技术。

11、,4.1.2动态网页技术,2网页动态表现技术 包括DHTML、Flash、VRML（虚拟现实造型语言）、Java Applet等 DHTML: 包括HTML、CSS、Javascript/VBScript VRML（Virtual Reality Modeling Language） ： 虚拟现实造型语言 Java Applet和ActiveX控件 目前，由于Applet能够渲染的很好，所以使用较多，如室内3D展示，而Flash的简单性，使其应用面很广，如有些3D城市就是用Flash模拟的。VRML生不逢时，虽然简单，但其需要安装插件，所以应用较少。,4.1.2动态网页技术,3网页动态内容技术

12、,特点 ： “保密性” “交互性” “自动更新” “因时因人而异”,ASP、PHP、JSP 、ASP.NET,4.1.3 流媒体技术及应用,4.1.3 流媒体技术及应用,3网页动态内容技术 1多媒体流与流媒体 流媒体技术是把连续的影像和声音信息经过压缩处理后放在网站服务器，让用户一边下载一边观看、收听，而不需要等整个压缩文件下载到自己机器后才可以观看的网络传输技术 2流媒体产品：Windows Media、Real Media、QuickTime、Shockwave 、FLV 3多媒体流技术在网络教育中的应用 （1）网络远程教育实时教学 （2）网络视频点播 （3）互联网直播 （4）视频会议,4

13、.1.4 虚拟现实技术及应用,4.1.4 虚拟现实技术及应用,1虚拟现实的概念与特征 是发展到一定水平上的计算机技术与思维科学相结合的产物，是由计算机生成的高级技术模拟系统。 （1）沉浸性 （2）交互性 （3）想象性 2虚拟现实系统的类型 （1）桌面虚拟现实系统 （2）沉浸型虚拟现实系统 （3）增强现实性的虚拟现实 （4）分布式虚拟现实,4.1.4 虚拟现实技术及应用,3虚拟现实系统的组成 硬件： 软件： 传感设备 ： 4虚拟现实技术在网络教育中的应用 （1）虚拟校园 （2）虚拟课堂 （3）虚拟实验室 （4）虚拟图书馆,4.1.5 Web 2.0技术,4.1.5 Web 2.0技术,1Web

14、2.0的概念及特征 Web1.0 :以内容为中心，以信息的发布、传输、分类、共享为目的的网络传播方式 Web2.0 :从模式上是由用户读信息向写信息的改变，从基本结构上是由网页向用户工具的演变，从工具上是由浏览器向各类阅读器等内容发展，运行机制上则是由客户服务器向Web 服务器的转变，作者由程序员等专业人士向互联网普通用户发展 集中表现 : 一是以P2P、Blog、Podcasting等技术的应用为代表，体现着网络发展的“去中心化”与“个性化” 另一个是以Wiki、网摘、SNS等软件和技术的应用为代表，体现着网络上知识的分享向着愈加便利和有效的方向发展,4.1.5 Web 2.0技术,4.1.5 Web 2.0技术,Web 2.0技术具有以下特征 （1）交互性 （2）开放性 （3）去中心化 （4）个性化 （5）社会化,4.1.5 Web 2.0技术,2博客（Blog）,3维客（Wiki）,4.1.5 Web 2.0技术,4RSS 起源于NetScape公司的推“Push”技术 , “Really