多媒体系列教程：网页设计制作

第三课用FrontPage制作多媒体网页7.7 制作多媒体网页 (1)2.2 主页制作的题材选择 (1)2.3 制定主页的风格 (2)7.7 制作多媒体网页在制作出图文并茂的网页之后，很多读者朋友还想让自己的网页能够播放音乐、视频等多媒体文件，这一次我们就来看看如何制作多媒体网页，需要提醒朋友们的是，在网页中内嵌多媒体文件会影响网页的下载速度，所以在向网页中插入音频或者视频的时候，要注意得当，不要太嚣张了^_^。

一、添加音频文件1、嵌入法FrontPage XP支持的多种声音的格式文件，主要包括MIDI、WAV、AIFF和AU等，让我们来看看如何在网页中加入声音效果。

建立一个新页面，然后执行“插入/Web组件”命令，打开“插入Web组件”对话框，如图所示。

在“组件类型”中选择“高级控件”，然后在右侧的“选择一个控件”中选择“插件”选项，单击“完成”。

打开“插件属性”对话框，如图所示。

单击“浏览”按钮，在打开的对话框中选择要播放的音频文件。

然后在“浏览器不支持插件时显示的消息”文本框中输入“您的浏览器无法播放这种文件格式！”，这样当浏览者使用的浏览器无法播放这个音频文件时，会在网页上给出提示信息。

带的一个媒体播放插件，如果IE检测到网页中已经插入了一个音频文件，会在插入音频的位置显示一个“Active Movie”播放器，并用它来播放音频。

2、插入法如果浏览器不支持音频插件，用嵌入法添加的音频文件就无法播放了。

插入音频文件的方法无需依赖插件，因而不受这种限制。

在网页空白处单击鼠标右键，在打开的快捷菜单中选择“网页属性”命令，在“背景音乐”栏中的位置后面单击“浏览”按钮，选择需要播放的背景音乐文件，最后“确定”返回。

接着选中“不限次数”单选框，这样就可以使网页自动循环播放背景音乐了，如图所示。

如果取消“不限次数”单选框，还可以根据自己的需要设置背景音乐的播放次数。

2.2 主页制作的题材选择下面我们开始着手策划制作主页。

多媒体网页制作课程设计一、课程目标知识目标：1. 让学生掌握多媒体网页制作的基本概念，如HTML、CSS、JavaScript等；2. 让学生了解网页设计原则，如页面布局、色彩搭配、字体选择等；3. 使学生能够运用多媒体元素，如图片、音频、视频等，丰富网页内容。

技能目标：1. 培养学生运用网页制作软件（如Dreamweaver、Sublime Text等）进行网页设计与制作的能力；2. 培养学生解决网页制作过程中遇到的实际问题的能力；3. 提高学生团队协作和沟通能力，能与他人共同完成网页制作项目。

情感态度价值观目标：1. 培养学生对多媒体网页制作的兴趣和热情，激发创新意识；2. 培养学生认真负责的态度，对待网页制作过程中的每一个细节；3. 培养学生遵守网络安全和知识产权法律法规，尊重他人劳动成果。

分析课程性质、学生特点和教学要求：1. 课程性质：本课程为信息技术课程，旨在培养学生的网页制作技能，提高信息技术素养；2. 学生特点：学生为初中生，具有一定的计算机操作基础，对新鲜事物充满好奇；3. 教学要求：注重实践操作，以学生为中心，充分调动学生的主观能动性。

二、教学内容1. 多媒体网页制作基础知识：- HTML语言基础：学习HTML标签、属性、文档结构等；- CSS样式表：掌握选择器、盒模型、布局、颜色与字体样式等；- JavaScript基础：了解变量、函数、事件处理等基本概念。

2. 网页设计原则：- 页面布局设计：学习网页布局方法，如固定布局、流体布局等；- 色彩搭配与字体选择：掌握网页色彩搭配原则，了解字体选择与应用；- 网页界面设计：了解界面设计原则，提高网页美观性。

3. 多媒体元素应用：- 图片处理：学习图片格式、优化方法以及在网页中的应用；- 音频与视频：掌握音频、视频格式及在网页中的嵌入与控制方法；- 动画与交互：了解动画制作方法，如GIF、CSS3动画等，学习交互设计。

4. 网页制作实践：- 网页制作软件应用：学习使用Dreamweaver、Sublime Text等软件进行网页制作；- 项目实践：分组进行网页制作项目，锻炼实际操作能力；- 问题解决：在实践过程中，培养学生解决问题的能力。

第8章多媒体网页制作学习目标1.了解Dreamweaver 8.0标准工作界面各个组成部分的名称和主要功能；2.学会创建和管理本地站点的基本步骤和方法；3.了解页面设置的主要内容和操作方法；4.掌握利用表格进行页面布局的基本技能；5.掌握向页面添加文本、图像、音频、视频的基本技能和不同方法，并能设置各种媒体的相关属性和常用参数；6.掌握向页面插入Flash动画和Flash对象的基本方法，并能设置其相关属性和常用参数；7.掌握向页面插入Shockwave动画、Java Applet应用小程序、ActiveX控件、插件、Flash元素的基本方法，并能设置它们的相关属性和常用参数。

随着多媒体技术和计算机网络技术的飞速发展，多媒体信息的呈现方式越来越趋于数字化、网络化和集成化。

本章我们将通过一个实例，介绍利用Macromedia Dreamweaver 8.0软件将各种多媒体信息表达元素添加到Web页中的基本操作方法和步骤。

8.1 Dreamweaver 8.0的工作界面启动Dreamweaver 8.0，新建或打开一个文档，进入Dreamweaver 8.0的标准工作界面。

和其它应用程序有所不同，Dreamweaver 8.0提供了一个将全部元素集成在一个窗口中显示的布局方式，如图8-1所示。

它的工作界面包括：标题栏、菜单栏、插入面板组、文档工具栏、文档窗口、状态栏、属性面板和浮动面板组。

图8-1 Dreamweaver 8.0的工作界面1.标题栏启动Macromedia Dreamweaver 8.0后，标题栏将显示文字Macromedia Dreamweaver 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。

2.菜单栏Dreamweaver 8.0的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。

（1）文件：用来管理文件。

例如新建、打开、保存、导入、转换、输出打印等。

网页设计多媒体之Dreamweaver教程一、网站概述1、网站与网页的概述网页可以包括文字、图片、动画、视频、音频等元素，网站是众多网页的集合。

2、网页的基本元素①文本和图片：构成网页的最基本元素。

②超级链接：分为两种，一种是文字链接，一种是图片链接。

③动画：常见的有两种，一种是GIF动画，只可以表现200多种颜色，常见的制作软件有Fireworks、ImageReady，另一种是Flash动画，有极好的显示连贯性，体积小，还可以加入声音。

④表单：实现互动的重要元素，收集浏览者的信息，并与其交互，比如搜索引擎、论坛、电子邮件等。

⑤音频和视频：通过在网页中插入音视频插件实现，两种格式比较流行，一是Media Play，二是Real，两者都采用压缩算法和流媒体格式进行传送。

3、网页的布局根据网站的类型设计，不同的网站有不同的风格，但以下的基本布局元素是必须的：①页面标题：用来标识和说明网页的性质与内容，显示在浏览器的标题栏中。

②网站标识（logo）：安放在网页中最显眼的位置，代表网站形象，经过精心设计。

③页眉：是网页中最显眼的部分，用来放置网站最希望浏览者观看的内容。

④导航：提供网站栏目的索引，合理的导航会使网页使用更方便。

⑤内容：是网站的精神所在。

⑥页脚：提供网站拥有者的相关信息，如版权信息、联系方式等4、网页配色原则设计网页时要注意色彩的搭配与风格的设计，网站的风格是给浏览者的整体感觉，网页设计者多是根据人们对色彩的联想来决定用哪些颜色或色系的。

举例说明人们对色彩的联想：①红色：力量的来源，给人带来的联想有震撼、热烈、激情、喜庆、高贵、刺激、上进。

②灰色：最好的背景色，给人压抑、平易、暧昧，内向，消极、失望、抑郁的感觉。

③蓝色：给人清凉、开朗、理智、沉稳、深远、哀伤、安静的感觉。

5、网页代码与渲染①HTML代码打开一个网页，单击菜单栏中的查看—源文件，会出现一个文本文件，里面的文字就是网页的组成部分，即HTML代码，显示了网页的标题名、网页的字体、图片和插件安放的位置等信息。