第八章网络课件的规划与设计.docx

第八章网络课件的规划与设计.docx

《第八章网络课件的规划与设计.docx》由会员分享，可在线阅读，更多相关《第八章网络课件的规划与设计.docx（30页珍藏版）》请在冰豆网上搜索。

第八章网络课件的规划与设计

第八章网络课件的规划与设计

随着网络技术的不断进步，利用网络课件进行课堂教学或远程学习已成为当前教育的重要形式之一，而网络课件的质量也成为影响教学与学习质量的重要因素，如何合理有效的设计制作出适宜于教学与学习的网络课件将是我们面临的首要问题。

本章将帮助您了解网络课件的概念、特点以及设计过程等相关问题。

网络教学与网络课件的描述

8.1网络课件设计基础

8.1.1网络课件概述

一、网络课件概念

网络课件是在一定的现代教育技术理论指导下，运用网页制作等多媒体技术设计和开发的用来反映某种教学策略和教学内容而被应用于课程教学与学习中的应用软件，它是课件的一种形式。

网络课件一般以网页作为其基本表现形式，它将多种媒体类型的教学信息（文本、图形、图像、音频、视频、动画等）按照授课者教学策略的特殊要求，以及学习者的学习特征而进行有效地整合，其目的在于促进教师的教学和学生的学习，它是现代教育技术应用于教学和学习的重要表现。

学习网络课件需要与网络课程区别开来。

网络课件是一种课程教学与学习的支持媒体，它既可以是基于远程网络的教学与学习，也可以作为单机的教学与学习资源用于课堂教学或自主学习，其内容范围可以是一门课程，也可以是课程的某个章节；网络课程是基于完善的课程学习体系和功能的学习资源，一般用于学习者进行远程的自主式学习，因此其网络特性表现得更为明显。

网络课件在功能上设计比较灵活，一般根据课程教学与学习的具体需要设计相应的功能，其功能模块并不固定；网络课程通常功能比较全面，从课程信息的呈现到课程内容能够学习进度的控制，以及课程学习的回馈等相关功能都需要具备，如课程讨论区、学习进度控制区等等，这些在网络课件设计中通常根据具体要求灵活选择。

二、网络课件的特点

目前，网络课件的特点主要体现在以下几个方面：

1．Web特性

WWW（WorldWildWeb）服务是目前互联网上最为流行的用户服务之一，由于网络课件的本质是一种Web应用程序，因此它具有Web的基本特性。

●软硬件要求低不论是用于远程网络教学与学习，还是用课堂教学或个人自主学习，作为网络课件的使用者，用户只需要具备网页浏览器即可查看或学习所需内容，一般操作系统中（如Windows操作系统）安装了默认的浏览器，因此，不需要用户安装任何软件，对于硬件配置的需求也较低。

●超文本性网络课件中的课程信息是以超链接的形式组织在一起，页面之间以链接文本为节点实现页面之间的相互跳转。

用户只需要根据链接的引导即可获取相应的学习内容。

相对于传统的CAI课件资源，超文本式的网络课件更有利于使用者灵活选择学习内容，控制学习进度。

●信息容量大网络课件以网页的形式向教师或学习者呈现教学与学习信息，在网页中信息是以超链接的形式组织在一起的，形成了一定规模的网状资源结构，通过超链接，在同一页面中可以包含大量的信息，甚至可以包含超越课件自身的网络信息，在横向上整合了全国乃至世界范围内课程资源，从而为教师和学习者提供教学与学习支持。

●表现形式丰富网络课件不仅可以使用常用的文本信息呈现教学内容，还可以使用图形、图像、音频、视频、动画等多媒体信息来丰富课程内容的表现形式，使课程内容更加生动，更具表现力。

学习者通过视觉、听觉等多感官感受课程内容，增强记忆和理解，从而获得较好的学习效果。

2．超媒体性

超媒体是超文本技术在应用领域的扩展，它进一步扩展了超文本所链接的信息类型，用户不仅可以从一个文本跳转到另一个文本，而且可以激活一段声音、先是一幅图片、播放一段视频或动画。

在网络课件中使用超媒体技术，一方面使超文本的交互界面更为丰富，同时也为用户提供更大的选择空间，用户可以选择使用所喜爱的媒体呈现形式感受课程内容，以提高学习效果。

3．交互性

交互是用户与课件之间的对话，及时而有效的交互往往能够对学习者的学习产生事半功倍的效果。

网络课件为用户提供了各种形式的交互方式，如超链接式的交互、问题与回答式的交互、导航式的交互、反馈表单形式的交互等等。

通过交互学习者可以获知自己的学习效果，并得到相应的提示和评价，这种交互机制激发了学习者学习的兴趣，有利于进一步的学习。

网络课件不仅可以为学习者提供人——机交互，同时也可以利用网络平台，实现学习者之间、以及学习者与教师之间的交流，我们通常将其称之为“人际交互”，它扩大了交互的范畴，可以为学习者提供更人性化的帮助。

4．可更新性

任何一门课程，其内容都是在不断的更新的，因此网络课件的信息资源也具有可更新的特点，在网络课件的设计中通常设计了相应的管理模块，用来实现资源的上传、更新和修改，通过这些模块提供的自动页面生成功能，可以提高页面管理的效率，并保证资源信息的及时性。

同时通过链接形式可以将网络中新近的学习资源融入到课程教学与学习当中。

三、网络课件的组成要素

网络课件由诸多要素所构成，主要包括：

多媒体素材、网页链接、交互等要素。

多媒体素材是设计与开发网络课件的基本要素，按照信息的呈现方式可以分为：

文本、图形、图像、音频、视频、动画等。

文本是呈现教学信息的主要形式，在网络课件中通过对文本的各种属性（包括字体、字形、颜色等）的设置，可以增强文本内容的表现力。

图形与图像一般是指用平面创作工具创作并制成的静止图形图像，其创作工具主要有Photoshop和CorelDraw等，适当的图形图像不仅可以用来形象、直观地表现特定的教学信息，也可以优化课件的界面结构。

音频、视频和动画是网络课件中多媒体形式的重要体现，它们能够增强可见自身的表现力，增强学习者的学习动机，提高其学习兴趣。

网页链接是网络课件信息的基本组织形式，通过设置文字或图形等链接，可以实现在课件页面文档之间或页面文档中的跳转，为教师和学生使用课件提供导航。

交互是指用户与计算机进行的对话，其中双方都能够对另一方的行为作出反应。

交互式网络课件能够使学生自主选择学习的内容、调整学习的进度，并能够根据学习者的学习状况及时地给与评价与反馈，从而促进学习者的学习。

四、网络课件设计总规划

1．明确课件的设计理念

在进行网络课件的设计与开发之前，需要明确对所开发的网络课件的设计理念，这与主题有所区别，理念不但约束现在的制作，同时也指引其发展的方向，一般主要表现在课件设计的风格和创意上，如简洁明快、活泼可爱、成熟稳重、黑白素雅、色彩斑斓等等。

课件的设计理念不仅是设计者自身理念的体现，体现着设计者的方方面面，同时也与课件的内容及教学的策略密切相关。

2．确定网络课件的整体风格

网络课件的整体风格是指课件的整体形象给课件使用者的综合感受，它包括了网络课件CI（标志、色彩、字体和标语）、版面布局、浏览方式、交互性、文字、语言风格、内容价值等等诸多因素。

风格是所设计课件区别于其它课件的地方，它与课件的内容，以及设计者的审美观有着密切的相关性，在一定程度上决定了课件的使用效果，因此，设计者必须综合考虑课件的类型和内容，并在学习中不断地提高自身的审美能力。

3．网页色彩搭配

色彩是增强课件表现力的主要因素之一，各种色彩对人眼的视觉刺激强度不同，谐和的色彩搭配将有助于激发学习者的学习动机，提高课件的使用效率和效果。

在进行课件设计时应注意分析表现内容的层次与风格，合理选用色彩，如文字与背景的色彩对比以及色彩搭配的简洁性等。

每一个网络课件根据课件内容等都需要有一定的基调，即整体的色彩风格，不同的色彩有着不同的含义，给人各种丰富的感觉和联想，常见的色彩及其含义如下：

红色：

热情、奔放、喜悦、庄严

黄色：

高贵、富有、灿烂、活泼

黑色：

严肃、夜晚、沉着

白色：

纯洁、简单、洁净

蓝色：

天空、清爽、科技

绿色：

织物、生命、生机

灰色：

庄重、沉稳

紫色：

浪漫、富贵

棕色：

大地、厚朴

在进行具体的色彩搭配时，应考虑颜色的反差不宜过大，宜选用饱和度相近的颜色（如深黄、深绿等）作为课件的主色调，搭配时避免色彩“花哨”、“跳跃”。

可以通过以下方式选择色彩：

选定一种颜色，调整透明度或饱和度，加深统一和层次感；

选定一种颜色和它的对比色，增强醒目、新颖的效果；

选用一个色系等。

当然，色彩的搭配不是绝对的，不同的课件内容形式会有不同的搭配方式。

4．创意设计

优秀的网络课件离不开经典的创意。

创意是一个网络课件区别于其他网络课件的独特之处，是在长期实践过程中所产生的新颖的想法，是制作者多思多想的结果。

课件是否能够引人入胜以及精彩与否都与创意设计有着密切的联系。

创意来自于现实生活的结合，因此设计者应在日常生活中不断地观察思考，搜集资料，并不断地揣摩消化，使思维更加活跃，产生更多创造性的想法，努力使用技术性手段将其实现在网络课件的设计当中，不断修正与完善。

8.1.2网络课件制作工具－Dreamweaver

三、网页背景图像（此内容在第八章中介绍）

通过设置背景图像可以改变网页的背景，但不是所有的图像都能用作背景。

【实例9_9】修改网页背景

（1）启动Dreamweaver8，新建一个HTML文档。

（2）使用“修改”→“页面属性”命令，或者在属性面板点击【页面属性】按钮，打开“页面属性”对话框。

（3）在“页面属性”对话框的“分类”列表框中选择“外观”选项，单击“背景图像”文本输入框后的“浏览”按钮，选择背景图像，如图9-29所示。

图9-29设置背景图像

（4）图片被平铺成为网页背景图像，如图9-30所示。

图9-30使用背景图像后的效果

操作提示12：

不论图片尺寸多大，一旦将它设置为背景图像，Dreamweaver就会将它反复拼接，铺满整个背景区。

因此选择背景图片的时候，不能选择颜色太深的图片，以免文档内容不能衬托出来，为了使用背景图像，网页中其他元素的背景应该是透明的，否则背景图片将会被其他元素的背景遮挡，影响整个页面的美观。

四、跟踪图像（此内容在第八章中介绍）

跟踪图像用于指定一幅图像作为网页创作时的草稿图，它显示在文档的背景上，便于在进行网页设计时进行定位和安放对象，但跟踪图像不会显示在网页中。

【实例9_10】使用跟踪图像

（1）启动Dreamweaver8，新建一个HTML文档。

（2）使用“修改”→“页面属性”命令，或者在属性面板点击【页面属性】按钮，打开“页面属性”对话框。

（3）在“页面属性”对话框的“分类”列表框中选择“跟踪图像”选项，单击“跟踪图像”文本输入框后的“浏览”按钮，选择跟踪图像，并设置其“透明度”为70％，如图9-31所示。

图9-31设置跟踪图像

（4）单击“页面属性”对话框中的“确定”按钮，即可在文档中载入跟踪图像。

载入跟踪图像之后，网页设计窗口中出现蓝图，用户就可以根据蓝图进行网页制作，如图9-32所示。

图9-32载入跟踪图像

一般而言，常用的网页制作工具都可以用于网络课件的设计与制作。

常见的网络课件制作工具主要有Dreamweaver、FrontPage、AdobeGolive、MacromediaHomesite，我们将以Dreamweaver为例学习网络课件的设计。

一、Dreamweaver简介Dreamweaver是Macromedia公司出品的一款"所见即所得"的可视化网页编辑工具，目前最新版本为Dreamweaver8.0。

它具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能，并具有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。

因此它所具有的便捷的操作、丰富的表现力、方便的网站管理、可扩展的环境以及提高工作效率的新特性使其成为网页设计的首选软件。

Dreamweaver从Dreamweaver2.0到现在的Dreamweaver8.0，其功能有了很大的提升。

如，最大限度的外部编辑器扩充、更加强大的CSS支持、内建的图形编辑引擎以及无缝整合外部文件和代码等，实现了更多的可视化操作。

Dreamweaver8.0能够快速地创建极具表现力和动感效果的页面，尤其对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。

再加上强大的CSS样式及CSS滤镜功能，还可以制作出文本以及图片的各种效果。

Dreamweaver8.0提供了数剧脚本的可视化开发，支持的动态脚本包括ColdFusion，J2EE，PHP，.NET等技术，同时现在加入了XML命名空间支持，ASP.NET表单控件对象，新的参考书内容和新的PHP服务器端行为。

另外，Dreamweaver8.0还增加了代码编辑功能，为用户提供了更为方便的代码编辑环境，同时为了方便用户设计，在DreamweaverMX2004的基础上新增了放大镜功能。

二、Dreamweaver的工作环境

在安装Dreamweaver8.0之后，会自动在Windows地【开始】菜单中创建程序组，打开【开始】菜单，选择【所有程序】，选择【Macromedia】项目中的【MacromediaDreamweaver8】命令，即可启动Dreamweaver8.0，启动界面如图8-1所示，选择创建的文件类型（选择什么类型，为什么，其它的要不要选择，为什么）

图8-1

图8-2

选择HTML项目，进入如图8-2所示的Dreamweaver8.0工作界面。

在Dreamweaver的工作环境中，最主要的成分包括编辑窗口、快捷工具栏、属性面板、浮动面板等几个部分。

1．编辑窗口

●编辑窗口：

用来显示当前所创建和编辑的文档内容；

2．快捷工具栏

●插入工具栏：

插入工具栏中包含有多种不同类型网页元素图标，使用非常的方便，使用时首先需要选择工具的类型，并在相应的工具类型中单击工具栏中相应标签下的按钮，即可选择不同类型的网页元素。

对象面板中包含了8种对象，分别是：

常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹。

●文档工具栏：

文档工具栏中为设计者提供了设计的三种不同视图的切换按钮，它们分别是代码、拆分、设计，点击相应的按钮可以切换到对应的视图模式。

利用该工具栏右侧的标题文本框可以为文档创建标题（注意与文件名不同，在浏览网页文件时，标题先生在浏览器的标题栏中）。

●标准工具栏：

标准工具栏提供的工具按钮有：

“新建”、“打开”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤销”、“重做”，点击相应的工具按钮即可完成相应的操作。

（工具栏在哪里打开和关闭）

3．属性面板

●属性面板：

属性面板显示了当前所选对象的相关属性特征，并允许设计者对属性进行修改。

4．浮动面板

浮动面板组：

浮动面板为设计者提供了一个工具集，设计者可以将各种浮动窗口、面板等放置其中，并可以方便的组合为选项卡的形式，以节省屏幕空间，必要时可以将这些浮动窗口或面板从中分离出来，成为独立的浮动面板，方便设计者使用。

此外，状态栏：

在Dreamweaver8.0中将状态栏分为几个功能区，分别显示文档的源代码、显示页面的大小和比例、传输时间等信息，另外，Dreamweaver8.0在DreamweaverMX2004的基础上新增了选取工具、手形工具和缩放工具，使其功能更为完善。

菜单栏：

Dreamweaver8.0的大部分的操作命令都可以使用菜单来完成。

8.1.3网页的构成

一、创建一个简单的页面

 打开Dreamweaver网页编辑器（如图8-1），在“创建新项目”栏目中选择所要创建的页面的类型，这里我们创建一个简单的HTML文件，因此，单击HTML即可进入Dreamweaver的工作环境，在编辑窗口中可以对课件页面进行编辑，下面我们来创建第一个简单的页面，熟悉页面创建的基本过程。

步骤1设置页面属性

为了使整个课件页面形成统一的外观和风格，我们需要设置页面属性，一般而言，我们可以在新建的课件页面时进行这项设置，当然，也可以在制作完成之后再来修改页面的属性设置。

图8-3

操作提示：

Dreamweaver为我们提供了灵活的页面设置功能：

单击菜单栏中【修改】菜单，点击【页面属性】命令，打开如图8-3所示“页面属性”对话框，在这里可以对页面的外观样式，包括字体格式、页面的背景图像、页边距等，页面的连接样式，标题样式等进行详细的设置。

本例中我们保留原有的默认格式，即不作任何设置，我们将在后续章节中通过其它方式对页面中相关元素属性进行修改。

步骤2输入文本内容

将Dreamweaver工作环境切换到“设计”视图，就可在编辑区中输入文本了，同时还可以利用“属性”面板中的相关功能，方便地对文本进行格式。

直接在文档编辑区域输入文本内容，并在“属性”面板中点击“左对齐”按钮

，为了产生首行缩进的效果，我们可以在文本的开始处插入四个“不换行空格符”，单击【插入】菜单，依次点击【HTML】|【特殊字符】|【不换行空格符】既可插入一个“不换行空格符”。

设计效果如图8-4所示：

图8-4

操作提示:

1.Dreamweaver为用户提供了三种视图模式，代码视图显示了这个文档的html代码，设计者可以在这里直接对文档的代码进行编辑；设计视图为设计者提供了一种“所见即所得”的视图模式，设计者只需要向视图中添加相应的页面元素，如文本、图片等，并通过“属性”面板调整相关的参数即可；拆分视图为设计者提供了代码与页面效果相对照的视图模式，设计者可对照效果修改参数，也可以修改代码调整设计效果；

2.不换行空格符是一种可以被Dreamweaver识别并解释为空格的符号，由于Dreamweaver中在执行代码时会将常规空格忽略，因此采用添加“不换行空格符”的方式产生空格效果，其实质是在文档的html代码中添加了“ ”代码。

二、认识HTML

HTML（HypertextMarkupLanguage）是超文本标记语言的缩写，它是用于编写网页的主要语言，任何一个网页文件都对应着其相应的HTML语言代码。

HTML是一种纯文本类型的语言，因此可以用任何纯文本编辑器，如Window的“记事本”程序进行编写、查看和修改。

HTML通过对各种标记、元素、属性、对象等的设置建立与图像、声音、视频等多媒体信息以及其他超文本的链接，通过各种标记（tag）控制各种对象的表现方式与位置关系，通常标记由符号“<”、“>”以及其中所包容的标记元素所组成。

一般而言，HTML的语法有三种表达方式，如下所示：

<标记>对象

<标记属性1=参数1属性2=参数2…>对象

<标记>

基本的HTML构成元素应该包括一些标准HTML标记。

在下图中列出了文档（图8-5）的内容及对应的HTML文档（图8-6）：

图8-5

图8-6

可以看出，文档包含头head和正文body正文两部分。

头中含有标题title，正文中含有实际构成段落，列表和其他元素的文本。

其总体结构如下：

文档正文

一个页面都应有html、head、title和body标记及它们相应的结束标记。

网页的标题在（head）标记中用（title）标记进行设置，浏览器中显示为窗口的标题，body标记表示文档的主体内容的开始和结束，页面内容置于body标记之间。

（1）html标记

标记格式：

……

html标记用于标记一个页面的开始和结束。

每一个HTML文档的开始处应用一个标记，而结尾应用一个标记。

Web浏览器在收到一个文本信息后，当遇到标记时，就开始按HTML语法解释其后的内容，并按相应要求将这些内容显示出来，直到遇到结束标记为止。

如果一个页面没有标记，浏览器将无法识别文档的格式并正确的解释。

（2）head标记

标记格式：

……

head标记是用于标记一个页面的头部，它所标记的内容并不在页面中显示。

包含在其中的内容主要是一些设置、说明之类的内容。

如页面使用的字符集、页面的标题、背景音乐、脚本语言、样式表等等。

它是一个双边标记，开始于标记，结束于。

上例包含了一个

title标记用来指出页面的标题，它的作用是将包含的内容显示在浏览器的标题栏，用于标明该页面的主题内容。

title标记只能出现在文件的头部中，它是一个双边标记。

作为一个网页设计者，应该给每一个页面起一个能概括该页面内容的标题，使浏览者能够从中判断出该页面文件的大概内容。

对于标题的长度HTML没有限定，但过长的标题会导致折行，因此一般情况下它的长度不应超过64个字符。

（4）body标记

标记格式：

……

正文标记是包含Web的具体内容，包括文字、图形、图象、超级连接等各种HTML对象。

每一个Web页面都必须有此标记，用于标记一个页面输出显示的开始和结束。

它同样是一个双边标记。

值得注意的是：

①body标记包含Web的具体内容，包括文字、图形、图象、超级连接等各种HTML对象。

如果没有其他标记符修饰，body标记中的文字将以无格式（默认格式）的形式显示（如果浏览器窗口显示不下，则自动换行）。

空格、回车不起作用。

②body标记的一些属性可规定文字的默认格式，如text=colcor规定文字的默认颜色。

如没指明由浏览器确定。

③有些浏览器会自动正确地规格化一个HTML文件并正确的显示，哪怕文件中没有包含这些应有的标记，但是有些浏览器却不会这样做，此时页面的内容就可能不被显示出来或出现显示错误。

因此设计一个页面，应确保包含这些标记。

对于一个课件页面的HTML文档而言，仅仅具备以上几个基本的页面元素是不够的，还需要针对不同的页面对象，以及所需要的效果添加相关的标记，以下介绍几个常见的标记：

（5）
行标记

格式：

行标记又称为换行标记，是以单独的形式出现的。

在Dreamweaver设计视图中可以通过使用组合键Shift+Enter的方式插入
标签。

（6）

段落标记

格式：

段落文本

段落标记可以为段落文本添加段落属性，如ALIGN段落对齐方式属性等。

在Dreamweaver设计视图中可以通过使用Enter键插入

标签。

（7）div层标记

格式：

在div标记中同样可以实现层中文信息的段落属性，div标记的主要用途是结合JavaScript代码来实现丰富多彩的动态效果。

8.2网络课件的设计流程

网络课件的设计没有绝对的程序，根据具体情况可以采用不同的设计策略，通常网络课件的设计一般遵循以下七个模块：

模块一：

主题构思

这一模块是网络课件的总体规划阶段，同网站设计一样，完备的总体规划显得尤为重要，尽管这一部并未涉及到具体的设计制作，但如果没有建设前期所制定目标的正确引导，网络课件在制作过程中就难免会出现混乱的局面，所以我们应该对这一步做好充分的准备。

不论是用于教师教学还是用于学习者学习，网络课件的设计首先都必须明确课件的主题，这是该模块的主要任务。

课件的主题也即课程的主题，它是指课件自身所传递的主要教育信息。

进行主题构思，不仅要明确课件的主题内容，还必须了解该课程的主题思想以及与课程相关的知识背景、时代特征等，了解课程教学的目标，这将为下一步确定课程教学的内容、搜集相关素材、确定课件的风格等提供指导。

模块二：

教学系统设计

教学系统设计是课件设计的一个重要的一个步骤，要制作出适合教