制作多媒体网页培训讲义(共68页).ppt

1、第九章 制作多媒体网页 第一节 Web组件的使用 第二节 DHTML效果的设置 第三节 在网页中插入多媒体文件 第四节 网页中的过渡效果 第五节 ActiveX控件和Java小程序第一节 Web组件的使用 一、插入字幕 二、插入交互式按钮 三、插入计数器 四、插入包含内容 五、网页横幅 一、一、插入滚动字幕滚动字幕 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组组件件”组件类型中的“字幕”，如图9-8所示。 （2）单击“完成”按钮，弹出如图9-9所示的对话框。 单击“样式样式”按钮，弹出如图9-11所示的“修改修改样

2、式样式”对话框。 （3）如果对滚动字幕的效果不满意时，可以修改滚动字幕的属性。 方法有三种： 单击字幕，然后再单击鼠标右键，在弹出的快捷菜单中选择“字幕属性”。 直接双击字幕。 选中字幕，然后按下AltEnter快捷键。 另外，删除滚动字幕的方法非常简单，只需直接选中字幕组件，然后按下Delete键将其删除即可。二、二、插入交互式按钮交互式按钮 （1）新建一个空白网页，单击“插入”菜单中的“Web组件”命令，弹出“插入插入Web组件组件”如图9-1所示的对话框。 （2）选择“动态效果动态效果”组件类型中的“交互式按钮”，单击“完成”按钮，弹出如图9-2所示的“交互式按钮”对话框。 在对话框中，

3、有“按钮”、“字体”和“图像”选项卡，分别用于对交互式按钮的属性设置。三、三、插入站点计数器站点计数器 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“计数器” 。 （2）单击“完成”按钮，弹出如图9-32所示的对话框。用户可以在“计数器样式”的选项中选择一种喜欢的格式。四、插入包含内容组件四、插入包含内容组件 1. 替换替换 2. 网页网页 3. 预定网页预定网页 4. 预定图片预定图片 5. 网页横幅网页横幅1. 替换替换（1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”

4、命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“包含内容”，在右边的列表框中选择“替换”，如图9-41所示。（2）单击“完成”按钮 ，即可弹出“替换属性替换属性”对话框。（3）单击“替换为”下拉框的下拉式按钮，选择要插入的变量名，然后单击“确定”按钮。 2. 网页网页 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“包含内容”，在右边的列表框中选择“网页” 。 （2）单击“完成”按钮 ，即可弹出“包含网包含网页属性页属性”对话框。 （3）输入当前Web的站点，或者单击“浏

5、览浏览”按钮，在弹出的“当前网站”对话框中选择一个网页，如图9-46所示。 （4）单击“当前网站当前网站”对话框的“确定”按钮，然后再单击“包含网页属性包含网页属性”对话框中的“确定确定”按钮，即可将网页插入其中。3. 预定网页预定网页（1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“包含内容”，在右边的列表框中选择“预定网页” 。（2）单击“完成”按钮。（3）需要填入“在预定的时间内在预定的时间内”显示的网页的路径，和在“在预定的时间之前或之后（可选）”显示的网页路径，也可以单击文本框后的“浏览”

6、按钮来选定网页。（4）在“开始时间开始时间”和“结束时间结束时间”后的各个下拉框中选择显示预定网页的开始时间和结束时间。4. 预定图片预定图片（1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在对话框中选择“插入插入Web组件组件”组件类型中的“包含内容”，在右边的列表框中选择“预定图片” 。（2）单击“完成”按钮。（3）在对话框的最下面选择预定图片显示的开始时间和结束时间。 （4）要显示的图片有两个输入文本框，分别是:“在预定的时间内在预定的时间内”及“在预定的时间之前或在预定的时间之前或者之后（可选）者之后（可选）”文本框。 5. 网页横幅网页横幅（1）在“网页

7、”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在对话框中选择“插入插入Web组件组件”组件类型中的“包含内容”，在右边的列表框中选择“网页横幅” 。（2）单击“完成”按钮。得到“网页横幅属性网页横幅属性”对话框。 （3）在“网页横幅属性”对话框中填入文本内容 。第二节 DHTML效果的设置 使用FrontPage 2003提供的动态HTML效果可以使网页中的各种网页元素都具有动态效果。方法：“视图”工具栏”“DHTML效果”,打开 “DHTML效果”工具栏。一、在网页中插入音频文件1.添加背景音乐（1）新建一个空白网页，选择“格式”菜单中的“背景菜单项”，弹出如图3-34所示

8、对话框：第三节 在网页中插入多媒体文件（2）在“背景音乐”下“位置（C）”输入框旁边单击 按钮，弹出如图3-35所示的对话框。 （3）选中需要作为背景音乐的音频文件，然后单击 按钮，回到 对话框，在“位置（C”）输入框中以显示所需的背景音乐名称，如图3-36所示。 （4）单击 对话框的 按钮，即可完成音频文件的插入。在“预览”视图下可以听到所插入的背景音乐。2.使用插件 在网页中插入音频文件还可以通过插件来实现.方法：选“插入”/“Web组件”/“高级控件”，在右边选“插件”，弹出下面对话框3.链接音频文件 选中文字右击，选“超链接”，在列表框选文件二、在网页中插入视频文件（1）新建一个空白网

9、页，选择“插入”菜单中的“图片”菜单项，再选择“视频”子菜单项，弹出如图3-37所示的对话框。（2）选择需要插入的视频文件，然后单击 按钮，视频文件即可被插入至网页中。 （3）选中视频文件，单击右键，在弹出的快捷菜单中选择“图片属性”命令，弹出如图3-38所示的对话框。 （4）单击 按钮，即可完成对视频文件的插入。 三、三、 插入插入Flash影片影片 （1）新建一个空白网页，选择“插入”菜单中的“图片”菜单项，再选择“Flash影片”子菜单项，弹出如图3-39所示的对话框。 （2）选择选择需要插入的Flash文件，然后单击 按钮，该Flash即可被插入至网页中。如图3-40所示。 （3）选中

10、该Flash文件，然后单击鼠标右键，在弹出的快捷菜单中选择“Flash影片属性”，弹出如图3-41所示的对话框。 （4）完成设置后，单击 对话框的 按钮，即可完成对视频文件的插入。 （5）保存该网页，然后使用IE或者其他浏览器可以看到该Flash影片的播放效果，如图3-43所示。 第四节 网页中的过渡效果方法：“格式”“网页过渡”注：FrontPage2003提供了25种过渡效果。第五节 ActiveX控件和Java小程序 在网页中插入控件和小程序,可使网页更具有活力一、ActiveX控件 方法：选“插入”/“Web组件”/“高级控件”，在右边选“ActiveX”，弹出下面对话框四月20072

11、007 四月2007 四月星期日星期日星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五星期六星期六2526272829303112345678910111213141516171819202122232425262728293012345二、Java小程序 Java语言是一种面向对像的语言。Java小程序是通过Java语言开发出来的一种特殊程序。 可在网页中播放声音、显示动画效果，但要发布后在浏览器中才看到效果。第九章第九章 制作多媒体网页制作多媒体网页 本章重点本章重点: 制作交互式按钮的方法制作交互式按钮的方法 制作滚动字幕的方法制作滚动字幕的方法 使用电子表格和图表使用电子表

12、格和图表 制作站点计数器的方法制作站点计数器的方法 如何插入图片库如何插入图片库 如何包含内容组件如何包含内容组件 制作链接栏的方法制作链接栏的方法 制作目录的方法制作目录的方法第第9章章 制作多媒体网页制作多媒体网页 9.1 制作交互式按钮制作交互式按钮 9.2 制作滚动字幕制作滚动字幕 9.3 插入插入Web搜索搜索 9.4 插入电子表格和图表插入电子表格和图表 9.5 制作站点计数器制作站点计数器 9.6 插入图片库插入图片库 9.9 包含内容组件包含内容组件 9.8 制作链接栏制作链接栏 9.9 制作目录制作目录9.3 插入插入Web搜索搜索 （1）在“网页”视图下打开Web页面，选择

13、“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择组件类型中的“Web搜索”，如图9-15所示，缺省情况下，搜索类型是“当前网站” 。9.3 插入插入Web搜索搜索 （2）单击“完成完成”按钮，弹出如图9-16所示的 “搜索表单属性搜索表单属性”对话框。 “搜索表单属性”选项卡。 “搜索结果”选项卡。9.3 插入插入Web搜索搜索 （3）单击按钮，即可完成在网页中插入Web组件。如图9-18所示。9.4 插入电子表格和图表插入电子表格和图表 9.4.1 Office电子表格电子表格 9.4.2 Office电子图表电子图表 9.4.3 Office数据透视表数据透视表 9.4.4

14、 电子表格和图表的编辑电子表格和图表的编辑9.4.1 Office电子表格电子表格 1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“电子表格和图表”，在右边的列表框中选择“Office电子表格”，如图9-19所示。9.4.1 Office电子表格电子表格 （2）单击“完成”按钮，即可完成Office电子表格的插入 。9.4.2 Office电子图表电子图表 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的

15、“电子表格和图表”，在右边的列表框中选择“Office电子图表” 。 （2）单击“完成完成”按钮。9.4.2 Office电子图表电子图表 1. 选择数据来源选择数据来源 2. 为数据类型设置明细为数据类型设置明细9.4.3 Office数据透视表数据透视表 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组组件件”组件类型中的“电子表格和图表”，在右边的列表框中选择“Office数据透视表” 。 （2）单击“完成”按钮，即可完成Office数据透视表的插入 。9.4.3 Office数据透视表数据透视表 （3）单击Of

16、fice数据透视表中的“单击此处可连接数据”超链接，弹出如图9-28所示的对话框。 在该对话框中，可以设置Office数据透视表的“数据源”、“特性”和“保护”属性。9.4.4 电子表格和图表的编辑电子表格和图表的编辑 1. 定位编辑单元格定位编辑单元格 2. 在表格中插入行在表格中插入行/列列 3. 插入电子表格的注意事项插入电子表格的注意事项9.6 插入图片库插入图片库 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“图片库”，在右侧的列表框中可以选择图片在网页中的布局，也可以建立图片库后再调

17、整。 9.6 插入图片库插入图片库 （2）单击“完成完成”按钮。 （3）在该“图片库属性图片库属性”对话框中单击“添添加加”按钮，在弹出的下拉菜单中选择“图片来图片来自文件自文件”，弹出“打开”对话框。 （4）在“打开打开”对话框可以连续选取一系列图片，然后单击“打开”按钮，回到对话框。 （5）可以对图片进行简单的编辑。选中一张图片的文件名之后，单击“编辑编辑”按钮 。9.6 插入图片库插入图片库 （6）单击“编辑图片”对话框的“确定”按钮，回到“图片库属性”对话框，单击“布局”选项卡，可以进行图片显示的布局调整。如图9-39所示。 （9）完成各项设置后，单击“完成”按钮完成设置。 9.8 制

18、作链接栏制作链接栏 9.8.1 包含自定义链接的链接栏包含自定义链接的链接栏 9.8.2 包含包含“上一个上一个”和和“下一个下一个”链接链接的的 链链 接栏接栏 9.8.3 基于导航结构的链接栏基于导航结构的链接栏9.8.1 包含自定义链接的链接栏包含自定义链接的链接栏 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“链接栏”，在右边的列表框中选择“包含自定义链接的链接栏” 。 （2）单击“完成”按钮，单击“下一步下一步”按钮，弹出如图9-56所示的对话框。9.8.1 包含自定义链接的链接栏包含

19、自定义链接的链接栏 （3）在图9-56所示对话框中选择选择栏的样式。单击“下一步”按钮。弹出“插入插入Web组件组件”对话框。 （4）单击“完成”按钮，弹出“插入新的链接栏”对话框。 （5）在“插入新的链接栏插入新的链接栏”对话框中填入新的链接栏的名称 。 （6）单击“添加链接添加链接”按钮，添加一些链接，并单击“确定”按钮完成操作。 9.8.2 包含包含“上一个上一个”和和“下一个下一个”链链 接的链接栏接的链接栏 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“链接栏”，在右边的列表框中选择“

20、包含“上一个”和“下一个”链接的链接栏” 。 （2）单击“完成”按钮，单击“下一步下一步”按钮，弹出如图9-56所示的对话框。9.8.2 包含包含“上一个上一个”和和“下一个下一个”链链 接的链接栏接的链接栏 （3）单击“下一步下一步”按钮，弹出“插入插入Web组组件件”对话框。 （4）单击“完成”按钮，弹出“链接栏属性链接栏属性”对话框。 （5）单击“确定”按钮，得到如图9-65所示的包含“上一个”和“下一个”链接的链接栏的网页。9.8.3 基于导航结构的链接栏基于导航结构的链接栏 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插

21、入插入Web组件组件”组件类型中的“链接栏”，在右边的列表框中选择“包含“上一个”和“下一个”链接的链接栏” 。 （2）单击“完成”按钮，单击“下一步下一步”按钮，弹出“插入插入Web组件组件”对话框。9.8.3 基于导航结构的链接栏基于导航结构的链接栏 （3）单击“下一步下一步”按钮，弹出“插入插入Web组件组件”对话框。 （4）单击“完成”按钮，弹出如图9-90所示的“链接栏属性链接栏属性”对话框。9.9 制作目录制作目录 9.9.1 基于基于Web站点目录站点目录 9.9.2 基于网页类别目录基于网页类别目录9.9.1 基于基于Web站点目录站点目录 （1）在“网页”视图下打开Web页面

22、，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“目录”，在右边的列表框中选择“该网站” 。 （2）单击“完成”按钮，得到如图9-93所示的“目录属性目录属性”对话框。9.9.2 基于网页类别目录基于网页类别目录 （1）在“网页”视图下打开Web页面，选择“插入”菜单中的“Web组件”命令，在图9-1所示的对话框中选择“插入插入Web组件组件”组件类型中的“目录”，在右边的列表框中选择“基于网页类别” 。 （2）单击“完成”按钮，得到如图9-93所示的“类别属性类别属性”对话框。在该对话框中选择一个或几个类别。 9.9.2 基于网页类

23、别目录基于网页类别目录 （3）选择网页类别。网页类别可以在视图界面中设置。 （4）选择复选框中的选项，并单击“确定”按钮完成操作。9.10 插入多媒体文件插入多媒体文件 1 插入音频文件插入音频文件 2 插入视频文件插入视频文件 3 插入插入Flash文件文件小结小结 通过本章的学习，读者应掌握FrontPage 2003中Web组件在网页设计中的应用。懂得： （1）如何制作交互式按钮、使字幕滚动、站点计数器、横幅广告、图片库和目录等组件的一般步骤。 （2）较复杂的组件有电子表格和图表，其中有关表格和图表的更深入知识，请参考其他资料；另外内容组件的应用也比较复杂，读者需要多花时间去掌握。综合练习九综合练习九 一、选择题一、选择题 1. 下列（下列（ ）内容不包括在电子表格和图片的）内容不包括在电子表格和图片的组件中。组件中。 A. Office电子表格电子表格B. Office电子图表电子图表 C. Office Visio D. Office数据透视表数据透视表 2. 在使用图片库组件时，下面列出的（在使用图片库组件时，下面列出的（ ）操）操作可以进行。作可以进行。 A. 修改图片大小修改图片大小 B. 设定图片的冲蚀效果设定