多媒体CAI课件制作基础教程(第三版)课件 第06章_使用Dreamweaver_CS3制作网页型课件

第6章 使用Dreamweaver CS3制作网页型课件,随着网络的兴起和发展，网络课件已成为日常教学工作不可分割的一部分。而Macromedia公司的Dreamweaver CS3顺应时代潮流，以其可以精确控制网页元素的HTML语言和所见即所得的编辑环境的完美组合成为众多网络课件设计工具的首选。网页型课件与传统课件相比，具有占用存储空间小，易于在网上传输、流通，易于共享等特点。网页型课件能够容纳大量信息，能兼容多种素材的文件格式，并且是一个开放的体系，有利于对课件进行修改、增添和删除。 通过对本章的学习，读者应了解并掌握Dreamweaver CS3的功能特点和基本使用方法，并且能够应用该软件制作出图文并茂的多媒体CAI课件 。,6.1 多媒体与多媒体技术,随着课堂教学的不断变革，传统的理论讲述已经不能适应现代的课堂教学。网络课件的出现，摆脱了教材生硬的面孔，这种由文本、图形、动画、声音、视频等多种媒体信息组合在一起，经过加工和处理所形成的教学系统，图文声像并茂，表现力和感染力极强， 使学习过程变得轻松愉快 。 网络课件具有以下优点。 共享性：一个网络课件可以同时供很多人使用。例如：学校可以将网络课件放到校园网上，这样所有连接校园网的教室都可以同时使用这些课件。 易用性：通过浏览器直接使用，方式简单统一。 交互性：人机交互、人与人即学习者与学习者、学习者与教师之间的交互，还可以通过论坛、留言本、电子信箱、新闻组、博客等手段进行交互。 开放性：设计几种情境模式，让不同水平的学生按各自的要求，进行相应的学习。 方便性：通过动态的后台管理，教师增减内容，调用资源方便、快捷。,6.2 Dreamweaver CS3工作界面,Dreamweaver CS3是美国Macromedia公司出品的一款网页编辑工具，它集网页制作和网站管理于一身，是专门为网页设计者开发的可视化网页编辑工具。利用它设计的网页可以跨越平台和浏览器限制，使得它也成为目前最受欢迎的工具软件之一 。 文档视图 插入栏 文档工具栏 属性面板 其他界面元素,6.2.1 文档视图,文档窗口显示当前文档，可以选择下列任一视图。 设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver CS3显示文档的完全可编辑的可视化表 示形式，类似于在浏览器中查看页面时看到的内容。 代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码(如 PHP 或 ColdFusion标记语言)以及任何其他类型代码的手工编码环境。 代码和设计视图：用于在单个窗口中同时看到同一文档的代码视图和设计视图 。,6.2.2 插入栏,选择插入工具栏中相应的命令，可以向网页中添加文字、图像、表格、按钮、导航以及程序等各种设计元素。根据类别不同，“插入”工具栏由 “常用”、“布局”、“表单”、“数据”、Spry、“文本”和“收藏夹”组成 。,6.2.3 文档工具栏,“文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，用户通过单击这些按钮可以在文档的不同视图模式间进行快速切换，如图6-9所示 。,6.2.4 属性面板,属性面板用于检查和编辑当前选定页面元素(如文本和插入的对象等)的最常用属性，如图6-10所示 。,6.2.5 其他界面元素,在Dreamweaver CS3的工作界面中，还包括状态栏、标签选择器和面板组等一些比较常用的界面元素。 状态栏位于文档窗口的底部，它的作用是提供与用户正在编辑的文档有关的某些信息，如当前窗口大小、文档大小和估计下载时间等。状态栏时刻显示着当前文档窗口的尺寸(以像素为单位)，用户也可以单击“窗口大小”按钮，在打开的“窗口大小”菜单中将文档窗口的大小调整到预定义或自定义尺寸 。,6.3 站点的创建和管理,使用Dreamweaver制作网络课件最常用的方法就是在用户的本地磁盘上创建并编辑页面，然后将这些页面上传到一个远程Web服务器供公众访问。通常，在编辑页面之前首先要创建站点 。 创建站点 管理站点,6.3.1 创建站点,站点是一系列具有相关主题、相似设计的文档的组合。Dreamweaver CS3是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的Web站点。 创建Web站点的第一步是规划，为了达到最佳效果，在创建任何Web站点之前，应对站点的结构进行设计和规划。决定要创建多少页面，每个页面显示什么内容，页面布局的外观以各页面之间的链接关系 。,6.3.2 管理站点,当站点创建完成后，文件面板将显示当前站点的新本地根文件夹，也就是刚刚创建的Net Courseware站点，如图6-16所示 。,6.4 文档的处理,文档的处理是网络课件制作中的基本操作，它包括打开和编辑文档，设置文档属性、定义文档标题等内容 。 文档的基本操作 在文档中插入对象 文本格式化操作 使用可视化向导设计网页,6.4.1 文档的基本操作,文档是页面基本元素的集合。文档的基本操作包括创建新文档、打开现有文档、保存文档 。 创建新文档 打开已有文档 保存文档,6.4.2 在文档中插入对象,在文档中可以使用菜单插入对象，也可以使用插入栏实现。 1. 使用菜单插入对象 以插入图像为例，可以通过以下步骤在文档中插入对象： (1) 选择“插入”“图像”命令，打开“选择图像源文件”对话框，在对话框中指定要插入图像的位置和名称。 (2) 单击“确定”按钮，即可将Dreamweaver CS3所允许格式的图像插入到当前文档窗口插入点所在的位置。 2. 使用插入栏插入对象 选择“窗口”“插入”命令，可以打开或关闭插入栏，前面已经介绍过，常用的插入栏有8种类型。 以插入图像为例，步骤如下：选择“常用”插入栏，单击插入栏中的“图像”按钮，打开“选择图像源文件”对话框，后面的步骤与使用菜单插入过程相同，不再赘述 。,6.4.3 文本格式化操作,文本是网页中重要的内容。良好的文本格式，能够很好地体现文本的层次，激发读者的阅读兴趣。在文档中构建丰富的字体、多种的段落格式以及赏心悦目的文本效果，对于课件制作是必不可少的要求。 在Dreamweaver CS3中，文本的格式化操作非常简单，Dreamweaver就像一个普通的字处理程序一样，用户几乎凭借直觉，就可以完成对文本的格式化操作 。,6.4.4 使用可视化向导设计网页,Dreamweaver CS3提供了3种可视化向导，用于辅助用户设计网页和估计网页在浏览器中的外观，分别是“标尺”、“网格”和“跟踪图像” 。 使用“标尺”和“网格” 使用跟踪图像,6.5 网页布局,网络课件精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素 网页布局。Dreamweaver CS3提供了多种方法来创建和控制网页布局，包括使用表格布局页面、使用框架布局页面和使用层布局页面 。 网页布局基础 创建基于表格的页面布局 创建基于框架的页面布局 创建基于层的页面,6.5.1 网页布局基础,一开始，网页呈现在设计者面前的时候，它就像一张白纸，可以任意发挥设计者的才思和创意。不过要明白，虽然可以控制一切能控制的东西，但假如设计者忽略一种约定俗成的标准或者不能符合大多数访问者的浏览习惯，那么这样的网页布局无疑是失败的 。,6.5.2 创建基于表格的页面布局,在Dreamweaver CS3中，表格有标准模式、扩展模式及布局模式3种模式。标准模式是最基本的表格模式；扩展模式是标准模式的扩充，在这种模式下用户可以方便地选择表格进行编辑；布局模式是Dreamweaver CS3为方便页面布局而专门设计的一种模式，与前两种模式相比，这种模式下表格和单元格边框是没有宽度的 。,6.5.3 创建基于框架的页面布局,使用框架可以方便地实现网页的定位，与其他定位方式不同的是，使用框架可以将一个浏览器窗口划分为多个区域，在每个区域都可以显示不同的HTML文档。 框架实际上由两部分组成，即框架与框架集。框架就是网页中被分割开的各个部分，每个部分都是一个完整的HTML网页。网页中的各个框架组成框架集，框架集实际也是一个HTML文档，用于定义文档中框架的结构、数量、尺寸及装入框架的页面文件，所以框架集并不显示在浏览器中，只是存储了一些框架如何显示的信息。就如图6-37所示的框架而言，其中就包含了框架集与3个框架，因此，与之对应的HTML文档也就有4个 。,6.5.4 创建基于层的页面,使用图层可以将页面上的元素精确定位，图层中可以加入文本、图片、表格、插件，也可以在其中嵌套另一个图层。层与层之间相互独立，互不干扰。 在Dreamweaver CS3中，可以通过在网页文档中新建层，然后将页面元素放置于层中的方式，精确定位插入的页面元素，并可以控制元素的上下顺序、显示或隐藏，还可利用时间轴同时在屏幕上移动一个或多个层 。,6.6 使用超链接,超链接是网络课件制作中的重要内容，一个网络课件有了合理的超链接才能使课件功能分布更合理，整体效率更高 。 超链接基础 创建超链接,6.6.1 超链接基础,超链接与URL(每个网页惟一的一个地址，称作统一资源定位器 URL)以及网页文件的存放路径是紧密相关的。定义超链接其实就是指定一个URL地址来访问它指向的Internet资源。一般来说，超链接路径可分为绝对路径和相对路径两类 。 URL 绝对路径 相对路径,6.6.2 创建超链接,Dreamweaver CS3可以为文本、图像、声音文件等创建超链接，以链接到其他文档或文件。当在本地站点内移动或重命名文档或其他链接文件时，Dreamweaver 可自动更新指向文档的链接 。 创建链接的类型和方法 创建网页间超链接 创建网页内超链接 创建电子邮件链接 创建空链接和脚本链接 创建图形热点链接,6.7 向网页中添加内容,在完成了页面布局、网页之间的链接关系后，就需要将文字、图像、声音、视频等多种素材添加到课件中。 通过Dreamweaver CS3“插入”菜单中的命令，或插入栏中的“常用”类别工具栏的“图像”和“媒体”等按钮，可以把多种素材添加到网页中，充实网络课件的内容 。 插入文本和图像 添加声音和视频 添加Flash媒体对象 添加表单对象,6.7.1 插入文本和图像,网页型课件中，文本和图像是最基本的组成元素。使用文字可以很好地表达课件的层次和重点；使用图像可以生动地传达用文字无法体现的内容。使用文本和图像可以直观地开展教学，突出讲课的重点 。,6.7.2 添加声音和视频,在网页课件中适当地加入声音，如背景音乐、课文朗读等，会使整个课件更活泼。视频文件既有声音又有图像，具有很强的表现力，对于观赏性、操作性很强的科目，在课件中适当地使用视频会起到很好的教学效果 。 添加声音 添加视频,6.7.3 添加Flash媒体对象,在以前的Dreamweaver版本中，在网页上只能插入Flash动画和按钮，而且动画本身与所在页面并没有什么直接关系，要使动画具有交互性也必须在制 作动画时就做好，还需要有一定的编程经验以及XML语言知识。而在 Dreamweaver CS3中，只需设置一些参数就可以实现动态交互的Flash动画效果 。 添加Flash文本 插入Flash按钮 制作网页动画,6.7.4 添加表单对象,表单是Internet用户与服务器进行信息交流的重要工具，在网页中有着广泛的应用，如留言板、搜索引擎、注册程序等。通常，一个表单中会包含多个对象，也称为控件。一个完整的表单包括表单对象和应用程序两个基本组件。其中，表单对象在网页中起描