1、多媒体CAI课件制作实例教程（第4版）,第5章 FrontPage网页型课件制作实例,第5章 主要内容,FrontPage基础知识,规划和创建课件网站,添加课件的教学内容,设计美化课件的版面,设置课件导航和交互,设置课件的动态效果,制作综合课件实例,FrontPage基础知识,5.1,使用界面：工具栏、任务窗格、网页标签、编辑区、编辑模式按钮 视图介绍：网页视图、文件夹视图、导航视图、超链接视图,5.1.1 FrontPage 的使用界面,编辑模式按钮,5.1.1 FrontPage 的使用界面,设计,拆分,代码,预览,5.1.2 视图介绍,网页视图,文件夹视图,导航视图,超链接视图,规划和创
2、建课件网站,5.2,规划课件网站：确定网站主题和目标、划分网站栏目 创建课件网站：新建网站、新建网页,网站制作流程,网站规划：对课件网站的内容和结构进行适当规划，划分出课件的栏目网页设计：网页版面内容、布局和美工的设计网页制作：使用网页制软件，根据规划和设计的方案制作出具体的网页网站发布：将网页文件上传到网络服务器上,5.2.1 规划课件网站,网站总体规划,网站内容规划,“雾凇”网站规划说明,5.2.2 创建课件网站,新建网站,新建网站就是要创建网站文件夹。在制作课件的网页时，常常要插入很多素材文件，如果这些素材文件被删除或移动，浏览网页时网页中就会留下空缺，因此，通常网站中的网页和素材文件都
3、集中存放于1个文件夹中。通过新建网站的操作，建立包含一个网页的网站文件夹。,5.2.2 创建课件网站,新建网页,网页是网站的基本组成元素，网页型课件是通过网页的形式组织和呈现的。在导航视图中新建“雾凇”网站的4个栏目网页，并更改网页的标题，然后在文件夹视图中更改网页的文件名。,添加课件的教学内容,5.3,添加文字：输入文字、设置文字和段落格式、插入水平线 添加表格：插入表格、调整表格 添加图片：插入图片、插入图片库 添加声音和视频：插入声音、插入视频 添加Flash动画：插入动画、调整动画,5.3.1 添加文字,在网页中添加文字的方法与Word一样，先输入文字或者从其他地方粘贴过来，然后设置文
4、字的格式和段落的格式等。为了给课件添加一些修饰，同时也使课件的标题与正文之间有所间隔，可以插入一条水平线。,5.3.1 添加文字,输入文字,按Enter回车键分段。按Shift+Enter键换行，产生的行距默认为0。,按Enter键换行效果,按shift+Enter键换行效果,5.3.1 添加文字,设置文字格式,在FrontPage中，设置文字和段落格式的操作方法与Word软件类似。,设置段落格式,5.3.2 添加表格,在网页制作中表格的用途很大，不但呈现数据信息需要用到表格，而且还可以利用表格来规划网页。在表格中，可以插入图片、文字、视频等信息。,5.3.2 添加表格,使用菜单,使用工具栏插
5、入表格按钮,插入表格,5.3.2 添加表格,调整表格,使用“表格属性”对话框,使用”单元格属性“对话框,5.3.2 添加表格,调整表格,使用“表格”工具栏,拖动表格框线，调整行高和列宽,“图片库”是FrontPage 2003提供的简单电子相册制作工具，使用它可以方便地制作出具有电子相册效果的网页。,5.3.3 添加图片,插入图片,插入图片库,在FrontPage 中，插入图片的方法与Word中类似，插入前最好先将图片文件复制到网站文件夹中。,在FrontPage中，默认的网页背景颜色为白色，可选择一种颜色作为网页背景色，但为了网页美观一般使用图片，选择“文件”“属性”命令，按图所示操作，可选
6、择图片作为网页背景。,5.3.3 添加图片,将图片设置为网页背景,5.3.4 添加声音和视频,添加声音,设置网页背景音乐 ： 在FrontPage中，可以将WAV、MIDI等格式的声音文件设置为网页的背景音乐。MP3格式的声音文件不能直接作为背景音乐，需要将其转换成WAV格式才能使用。,插入声音：用FrontPage制作网页时，不能直接插入声音，可以通过插入插件的方式引用声音文件。,5.3.4 添加声音和视频,添加视频,用插件插入视频： 用插件方式插入视频，视频画面下方带有播放控制条。,直接插入视频：选择“插入”“图片”“视频”命令，可以直接插入视频文件，插入的视频没有播放控制条。,5.3.5
7、 添加Flash动画,动画可以将事物的发展变化过程直观形象地展示给学生，目前被广泛使用的动画主要有GIF动画和Flash动画2种。在网页型课件中，GIF动画一般用于添加课件的修饰性内容，而Flash动画用途广泛，特别适合于动态呈现教学内容。,设计美化课件的版面,5.4,规划设计网页版面 使用表格规划版面 使用框架组织网页 使用共享边框 用主题美化课件外观,5.4.1 规划设计网页版面,内容设计：考虑网页中安排什么内容，每项内容使用何种媒体来呈现。,布局设计：根据浏览的需要，设计网页中文字、图片等内容的排列方式。,美工设计：考虑网页布局的整体造型、色彩的搭配、字体的选择、图片的运用和网站标志的设
8、计等因素。,1,2,3,5.4.1 规划设计网页版面,常见的网页版面布局形式,5.4.1 规划设计网页版面,网页版面设计草图,通过绘制网页版面设计草图，及时地记录设计方案。,5.4.2 使用表格规划版面,使用表格规划网页可以灵活安排网页版面，使网页整齐、有序。首先在网页中插入表格并设置表格属性，然后再将文字、图片等课件内容插入表格的单元格中。插入表格后将边框线粗细设置为“0”，可以使表格在浏览时变为不可见。,5.4.2 使用表格规划版面,网页版面宽度： 网页版面的宽度通常使用表格进行限定。插入布局表格后，只要指定表格的宽度即可。定义宽度数据时，一般使用像素作为单位，并根据浏览者的电脑屏幕分辨率
9、来设置宽度数值。例如，大多数浏览者的电脑屏幕分辨率为800像素的宽度，那么将网页版面的宽度设置为800像素以下为宜，这样可保证网页在浏览器窗口最大化时能够完整显示。,单元格衬距和间距：单元格衬距是指单元格中的内容与边框线间的距离，单元格间距指的是表格中的单元格之间的间距。设置单元格衬距和间距，都可以达到调整网页中相邻内容间距的目的。,5.4.3 使用框架组织网页,框架也是一种组织安排网页内容的常用手段。使用框架可以将网页版面划分成若干个区域，每个区域称为一个框架，每个框架既是整个网页的一部分，又对应一个独立的网页。,5.4.3 使用框架组织网页,使用模板创建框架网页,新建或设置各框架中的初始网
10、页,保存框架网页：如果各框架中的网页是新建的，保存时，需分别进行保存。,制作框架网页,5.4.3 使用框架组织网页,框架有2种形式：一是普通框架网页，二是嵌入式框架。框架网页用于整体规划网页版面，嵌入式框架可以用来局部安排网页版面内容。,嵌入式框架,5.4.4 使用共享边框,在一个网页型课件中，许多网页常常会有相同的组成部分，为了避免重复制作，可以使用共享边框来制作各网页的公共部分。通常可以在网页的顶部、左边或底部设置共享边框。,5.4.4 使用共享边框,开启共享边框功能：如果“格式”菜单下的“共享边框”命令是灰色的，说明共享边框功能没有启用。此时可选择“工具”“网页选项”命令，按左图所示，开
11、启共享边框功能。,取消共享边框：为所有网页设置了共享边框后，网站中现有的网页和以后新建的网页都会自动加上共享边框的内容。如果个别网页不需要共享边框，可打开此网页，选择“格式”“共享边框”命令按左图所示操作，取消网页中的共享边框。,5.4.5 用主题美化课件的外观,在FrontPage中，“主题”是指网页外观的类型或风格，可使用FrontPage中的“主题”来快速美化课件的外观。使用主题美化课件，可以在新建课件网页的时候使用主题，也可以做好网页后应用主题美化网页。,5.4.5 用主题美化课件的外观,自定义“主题”,设置课件的导航与交互,5.5,使用链接栏设置导航 使用超链接设置交互,5.5.1
12、使用链接栏设置导航,链接栏是FrontPage中实现网页导航的组件，利用它可以方便地将课件中的网页联系在一起。制作时，首先在导航视图中设置导航结构，并设置共享上边框，然后在共享边框中插入网页横幅（主要用于显示网页标题）和链接栏。,5.5.2 使用超链接设置交互,超链接是实现网页型课件交互功能的主要方法。网页中的超链接可以分为文本超链接、图像超链接、E-mail链接、锚点链接、文件链接、空链接等。,5.5.2 使用超链接设置交互,清除超链接文字的下划线： 设置完文字超链接后，默认情况下文字下方会增加一条下划线，如果觉得影响视觉效果，可以清除下划线。只要单击“格式”工具栏上的“下划线”按钮 即可。
13、,取消超链接：如果想将设置好的超链接取消，可以先选中超链接对象，然后右图所示的“编辑超链接”对话框中，单击“删除链接”按钮即可。,设计课件的动态效果,5.6,插入交互式按钮 插入滚动字幕 设置网页过渡 设置动态图文效果,5.6 设计课件的动态效果,在课件制作中，插入一些动态按钮，滚动的字幕，设置一些效果，可更加吸引学生的注意力。常见的网页型课件的动态效果有交互式按钮、滚动字幕、网页过渡、DHTML效果等。,网页过渡效果,5.6 设计课件的动态效果,交互式按钮：交互式按钮是一种动态效果的按钮，当浏览者用鼠标指向或单击它时，该按钮会出现一些动态的变化效果，通常使用它来制作网页的导航按钮。,滚动字幕
14、：上网浏览时，经常看到滚动的文字就是所说的滚动字幕，它可以吸引浏览者的注意力。在FrontPage中，可以很方便地插入左右滚动的字幕。,5.6 设计课件的动态效果,网页过渡：网页过渡是指从一个页面切换到另一个页面时，呈现动态的过渡效果（如圆形展开、向下擦除等）。通过设置网页切换效果，可以吸引学习者的注意力，增加网页型课件的动态效果。,动态图文效果：FrontPage提供了“DHTML效果”工具，应用它可以使网页中的文字和图片等对象以某种动态效果呈现，为了引发学生的注意，让课件内容的呈现更生动，可以把课件中需要强调的内容设置成某种动态效果。,制作综合课件实例,5.7,中学化学课件制作实例铁的性质
15、 中学语文课件制作实例桃花源记,5.7.1 中学化学课件制作实例铁的性质,课件规划设计,课件版面设计,课件制作,课件测试发布,课件内容结构,5.7.1 中学化学课件制作实例铁的性质,课件规划设计,课件版面设计,课件制作,课件测试发布,课件首页版面草图,5.7.1 中学化学课件制作实例铁的性质,课件规划设计,课件版面设计,创建课件网站 制作导航版块（共享边框） 制作课件首页 制作“课堂练习”（表单页）,课件制作,课件测试发布,课件制作流程,5.7.1 中学化学课件制作实例铁的性质,课件规划设计,课件版面设计,课件制作,课件测试发布,测试课件网站 发布课件网站,5.7.1 中学化学课件制作实例铁的
16、性质,课件首页和“课堂练习”网页效果图,5.7.1 中学化学课件制作实例铁的性质,测试和发布课件网站,发布站点： 发布站点就是把站点中的文件复制到服务器中。可以将计算机设置为站点服务器，然后在与之联网的其他计算机上浏览网站内容。,测试站点：网站的制作完成后，需要对站点进行测试，包括拼写检查、浏览器兼容性、页面大小及下载速度和测试超链接情况，以便进行站点发布。,5.7.2 中学语文课件制作实例桃花源记,本实例中将着重介绍首页(框架网页)和“课堂练习”网页(表单页)的制作，同时具体介绍一些发布、管理网站的方法。制作时，首先使用框架模板建立框架网页“index.htm”，然后分别制作框架中的各个页面，以及各栏目页面，接着在导航网页“top.htm”中插入超链接，建立各网页之间的联系，最后将课件发布到因特网服务器上。,方舟工作室 邮箱： 网站：,谢谢大家！,
