多媒体网页设计与制作
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
13
5.1.3使用制作网页框架
♫ 步骤 3：插入表格。 ♫ 将光标移到页面内，在菜单栏上依次点击【插
入】→【表格】，打开“插入表格”对话框。
14
5.1.3使用制作网页框架
♫ 步骤 4：设置整个表格属性。 ♫ 选中表格，在“属性”检查器中的对齐列表中
选择“居中对齐”。将“背景颜色”设置为白 色。
15
33
5.3.1了解超文本、超媒体技术
♫ 多媒体使用具有划时代意义的"超文本"思想与 技术组成了一个全球范围的超媒体空间，通过 网络、只读光盘存储器( ，)、数字多能光盘( ，)和多媒体计算机，人们表达、获取和使用 信息的方式和方法将产生重大变革，对人类社 会产生长远和深刻的影响。
34
5.3.1了解超文本、超媒体技术
25
5.2.2为网页中插入音频文件
♫ 步骤4：设置音频文件显示大小。 ♫ 选中音频文件，在“属性”检查器中设置宽为
770，高为200。高和宽的值确定音频控件在浏 览器中以多大的大小显示。
26
5.2.1为网页中插入图像文件
27
5.2.3为网页中插入视频文件
♫ 步骤1：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
41
5.3.2为网页建立超文本、超媒体
♫ 步骤3：依照步骤1和步骤2的操作，依次为导 航栏中的“音频”、“视频”、“动画”等文 字添加超链接。
♫ 步骤 4：打开、、等文件，对页面中的导航栏 进行超链接设置。
42
5.3.2为网页建立超文本、超媒体
♫ 文档的位置和路径： ♫ 绝对路径（例如：）。 ♫ 文档相对路径（例如 ）。 ♫ 站点根目录相对路径（例如 ）。
30
5.2.4为网页中插入动画文件
♫ 步骤 3：设置视频文件显示大小。 ♫ 选中视频文件，在“属性”检查器中设置宽为
600，高为400。高和宽的值确定视频控件在浏 览器中以多大的大小显示。
31
学会多媒体网页的合成
1 了解超文本、超媒体技术 2 为网页建立超文本、超媒体
32
5.3.1了解超文本、超媒体技术
多媒体网页设计与制作
2021/7/11
提纲
1 学会多媒体网页的设计 2 学会在网页中插入多媒体文件 3 学会多媒体网页的合成
2
学会多媒体网页的设计
1 认识网页制作工具Dreamweaver 8 2 使用Dreamweaver创建站点 3 使用Dreamweaver制作一个网页框架
3
5.1.1认识网页制作工具 8
600，高为400。高和宽的值确定视频控件在浏 览器中以多大的大小显示。
29
5.2.4为网页中插入动画文件
♫ 步骤 1：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
图像。 ♫ 步骤 2：插入动画文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【】，打开“选择文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
21
5.2.1为网页中插入图像文件
♫ 步骤5：插入内容文字。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【图像】，打开“选择图像源文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
22
5.2.1为网页中插入图像文件
23
5.2.2为网页中插入音频文件
♫ 工欲善其事，必先利其器。 8是在多媒体方面 颇有建树的公司推出的可视化网页制作工具， 它与 8、 8合在一起被称为网页制作三剑客， 这三个软件相辅相承，是制作网页的最佳选择 。其中，主要用来制作网页文件，制作出来的 网页兼容性比较好，制作效率也很高，用来制 作精美的网页动画，而用来处理网页中的图形 。
♫ 应用与网页中的图片，目前比较流行的有两种 图片格式，即和格式。这两种格式，浏览器都 能正确显示。下面将为大家介绍运用图像的简 单操作方法。
17
5.2.1为网页中插入图像文件
♫ 步骤1：插入页面背景图片。 ♫ 在完成任务一的操作后，在“属性”检查器中
选择“页面属性”按钮打开“页面属性”对话 框，选择背景图像为目录下的文件夹下的文件 。点击“应用”、“确定”按钮。
♫ 步骤3：在表格内插入背景图片。 ♫ 将光标移至表格第二行内，在“属性”检查器
中点击背景标题下的 图标，在打开的对话框 中选择文件，点击“确定按钮”。 ♫ 步骤 4：插入导航条文字。 ♫ 将光标移至表格第二行内，输入“图片|音频| 视频|动画”，选中文字后，在“属性”检查 器中设置字号为24，文本颜色为白色。
学会在网页中插入多媒体文件
1 为网页中插入图像文件 2 为网页中插入音频文件 3 为网页中插入视频文件 4 为网页中插入动画文件
16
5.2.1为网页中插入图像文件
♫ 一个页面仅有文本会非常单调，很难吸引人的 目光，所以必须在文档中加入其他元素，如图 像。如果能在网页设计中恰当地运用图像，既 能使网页美观生动而且富有生机，又能体现网 站的风格和特色图像，加深用户对网站的良好 印象。
43
总结
♫ 本模块主要介绍利用规划制作多媒体网页的一 般方法。通过本模块的学习和实训，学生应掌 握利用 8设计多媒体网页、插入多媒体文件、 和网页合成的方法。
44
45
♫ 步骤1：将文件复制三份，文件名称分别为、 、，全部存放在文件夹下。
♫ 步骤2：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
图像。
24
5.2.2为网页中插入音频文件
♫ 步骤3：插入音频文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【插件】，打开“选 择文件”对话框，选择目录下的文件夹下的3 文件，点击“确定”按钮，在弹出的对话框中 点击“确定”按钮。
开“新建文件”对话框，在“常规”选项卡中 选择“基本页”和，点击“创建”按钮即创建 一个新的网页文件。
12
5.1.3使用制作网页框架
♫ 步骤 2：保存文件。 ♫ 完成步骤1的操作就创建了一个空白页面。在
菜单栏上依次点击【文件】→【保存】，打开 “保存”对话框。保存目录选择E盘根目录下 的文件夹，文件名为：。点击“保存”按钮保 存文件。
♫ 1.超文本的概念 ♫ 超文本是一种文本，它和书本上的文本是一样
的。但与传统的文本文件相比，它们之间的主 要差别是，传统文本是以线性方式组织的，而 超文本是以非线性方式组织的。这里的"非线 性"是指文本中遇到的一些相关内容通过链接 组织在一起，用户可以很方便地浏览这些相关 内容。这种文本的组织方式与人们的思维方式 和工作方式比较接近。
8
5.1.2使用创建站点
♫ 步骤 1：将素材文件夹复制到E盘根目录下。 ♫ 步骤 2：启动。
9
5.1.2使用创建站点
♫ 步骤3：创建“多媒体技术与应用基础”站点 。
10
5.1.2使用创建站点
♫ 步骤3：创建“多媒体技术与应用基础”站点 。
11
5.1.3使用制作网页框架
♫ 步骤 1：创建新文件。 ♫ 在菜单栏上依次点击【文件】→【新建】，打
7
5.1.2使用创建站点
♫ 可以使用“站点定义向导”设置站点，该向导 会引领您完成设置过程。或者，也可以使用“ 站点定义”的“高级”设置，根据需要分别设 置本地文件夹、远程文件夹和测试文件夹。在 本教程中，您将使用“站点定义”的“高级” 设置来设置项目文件的本地文件夹。在本书后 面的部分，您将学习如何设置远程文件夹，以 便将页面发布到服务器，从而提供给公众访问 。
18
5.2.1为网页中插入图像文件
19
5.2.1为网页中插入图像文件
♫ 步骤2：在表格内插入图片。 ♫ 将光标移至表格第一行内，在菜单栏上依次点
击【插入】→【图像】，打开“选择图像源文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
20
5.2.1为网页中插入图像文件
♫ 多媒体是融合两种或者两种以上媒体的一种人 -机交互式信息交流和传播媒体，使用的媒体 包括文字、图形、图像、声音、动画和电视图 像()的。多媒体是超媒体系统中的一个子集， 超媒体系统是使用超链接构成的全球信息系统 ，全球信息系统是因特网上使用协议和协议的 应用系统。二维的多媒体网页使用来编写，而 三维的多媒体网页使用来编写。在目前许多多 媒体作品使用光盘存储器发行，在将来多媒体 作品更多地使用网络来发行。
39
5.3.2为网页建立超文本、超媒体
♫ 步骤 1：选择对象。 ♫ 打开文件，选中导航栏中的“图片”两字。 ♫ 步骤2：添加超链接。 ♫ 选中对象后，在在“属性”检查器中链接标题
后的文本框中输入“”，也可以点击链接标题 下的 图标，在打开的对话框中选择文件，点 击“确定”按钮。
40
5.3.2为网页建立超文本、超媒体
4
5.1.1认识网页制作工具 8
♫ 1 8 的功能 ♫ 可视化编辑 ♫ 全面的编码环境 ♫ 服务器技术 ♫ 功能自定义
5
5.1.1认识网页制作工具 8
♫ 2 8的工作区布局
6
5.1.2使用创建站点
♫ 在 中，“站点”一词既表示站点，又表示属 于站点的文档的本地存储位置。在开始构建站 点之前，您需要建立站点文档的本地存储位置 。 站点可组织与站点相关的所有文档，跟踪 和维护链接，管理文件，共享文件以及将站点 文件传输到服务器。
35
5.3.1了解超文本、超媒体技术
36
5.3.1了解超文本、超媒体技术
♫ 超链接( )是指文本中的词、短语、符号、图像 、声音剪辑或影视剪辑之间的链接，或者与其 他的文件、超文本文件之间的链接，也称为“ 热链接( )”，或者称为“超文本链接( )”。
37ห้องสมุดไป่ตู้
5.3.1了解超文本、超媒体技术
♫ 2.超媒体的概念 ♫ 超媒体不仅可以包含文字而且还可以包含图形
、图像，动画、声音和电视片断，这些媒体之 间也是用超级链接组织的，而且它们之间的链 接也是错综复杂的。
38
5.3.2为网页建立超文本、超媒体
♫ 超链接是多媒体网页中一个不可缺少的要素， 在一个文档中可以创建几种类型的链接：链接 到其它文档或文件（如图形、影片、或声音文 件）的链接；命名锚记链接，此类链接跳转至 文档内的特定位置。电子邮件链接，此类链接 新建一个收件人地址已经填好的空白电子邮件 ；空链接和脚本链接，此类链接使您能够在对 象上附加行为，或者创建执行代码的链接。创 建链接之前，一定要清楚文档相对路径、站点 根目录相对路径以及绝对路径的工作方式。
图像。 ♫ 步骤 2：插入视频文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【插件】，打开“选 择文件”对话框，选择目录下的文件夹下的文 件，点击“确定”按钮，在弹出的对话框中点 击“确定”按钮。
28
5.2.3为网页中插入视频文件
♫ 步骤 3：设置视频文件显示大小。 ♫ 选中视频文件，在“属性”检查器中设置宽为
5.1.3使用制作网页框架
♫ 步骤 3：插入表格。 ♫ 将光标移到页面内，在菜单栏上依次点击【插
入】→【表格】，打开“插入表格”对话框。
14
5.1.3使用制作网页框架
♫ 步骤 4：设置整个表格属性。 ♫ 选中表格，在“属性”检查器中的对齐列表中
选择“居中对齐”。将“背景颜色”设置为白 色。
15
33
5.3.1了解超文本、超媒体技术
♫ 多媒体使用具有划时代意义的"超文本"思想与 技术组成了一个全球范围的超媒体空间，通过 网络、只读光盘存储器( ，)、数字多能光盘( ，)和多媒体计算机，人们表达、获取和使用 信息的方式和方法将产生重大变革，对人类社 会产生长远和深刻的影响。
34
5.3.1了解超文本、超媒体技术
25
5.2.2为网页中插入音频文件
♫ 步骤4：设置音频文件显示大小。 ♫ 选中音频文件，在“属性”检查器中设置宽为
770，高为200。高和宽的值确定音频控件在浏 览器中以多大的大小显示。
26
5.2.1为网页中插入图像文件
27
5.2.3为网页中插入视频文件
♫ 步骤1：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
41
5.3.2为网页建立超文本、超媒体
♫ 步骤3：依照步骤1和步骤2的操作，依次为导 航栏中的“音频”、“视频”、“动画”等文 字添加超链接。
♫ 步骤 4：打开、、等文件，对页面中的导航栏 进行超链接设置。
42
5.3.2为网页建立超文本、超媒体
♫ 文档的位置和路径： ♫ 绝对路径（例如：）。 ♫ 文档相对路径（例如 ）。 ♫ 站点根目录相对路径（例如 ）。
30
5.2.4为网页中插入动画文件
♫ 步骤 3：设置视频文件显示大小。 ♫ 选中视频文件，在“属性”检查器中设置宽为
600，高为400。高和宽的值确定视频控件在浏 览器中以多大的大小显示。
31
学会多媒体网页的合成
1 了解超文本、超媒体技术 2 为网页建立超文本、超媒体
32
5.3.1了解超文本、超媒体技术
多媒体网页设计与制作
2021/7/11
提纲
1 学会多媒体网页的设计 2 学会在网页中插入多媒体文件 3 学会多媒体网页的合成
2
学会多媒体网页的设计
1 认识网页制作工具Dreamweaver 8 2 使用Dreamweaver创建站点 3 使用Dreamweaver制作一个网页框架
3
5.1.1认识网页制作工具 8
600，高为400。高和宽的值确定视频控件在浏 览器中以多大的大小显示。
29
5.2.4为网页中插入动画文件
♫ 步骤 1：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
图像。 ♫ 步骤 2：插入动画文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【】，打开“选择文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
21
5.2.1为网页中插入图像文件
♫ 步骤5：插入内容文字。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【图像】，打开“选择图像源文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
22
5.2.1为网页中插入图像文件
23
5.2.2为网页中插入音频文件
♫ 工欲善其事，必先利其器。 8是在多媒体方面 颇有建树的公司推出的可视化网页制作工具， 它与 8、 8合在一起被称为网页制作三剑客， 这三个软件相辅相承，是制作网页的最佳选择 。其中，主要用来制作网页文件，制作出来的 网页兼容性比较好，制作效率也很高，用来制 作精美的网页动画，而用来处理网页中的图形 。
♫ 应用与网页中的图片，目前比较流行的有两种 图片格式，即和格式。这两种格式，浏览器都 能正确显示。下面将为大家介绍运用图像的简 单操作方法。
17
5.2.1为网页中插入图像文件
♫ 步骤1：插入页面背景图片。 ♫ 在完成任务一的操作后，在“属性”检查器中
选择“页面属性”按钮打开“页面属性”对话 框，选择背景图像为目录下的文件夹下的文件 。点击“应用”、“确定”按钮。
♫ 步骤3：在表格内插入背景图片。 ♫ 将光标移至表格第二行内，在“属性”检查器
中点击背景标题下的 图标，在打开的对话框 中选择文件，点击“确定按钮”。 ♫ 步骤 4：插入导航条文字。 ♫ 将光标移至表格第二行内，输入“图片|音频| 视频|动画”，选中文字后，在“属性”检查 器中设置字号为24，文本颜色为白色。
学会在网页中插入多媒体文件
1 为网页中插入图像文件 2 为网页中插入音频文件 3 为网页中插入视频文件 4 为网页中插入动画文件
16
5.2.1为网页中插入图像文件
♫ 一个页面仅有文本会非常单调，很难吸引人的 目光，所以必须在文档中加入其他元素，如图 像。如果能在网页设计中恰当地运用图像，既 能使网页美观生动而且富有生机，又能体现网 站的风格和特色图像，加深用户对网站的良好 印象。
43
总结
♫ 本模块主要介绍利用规划制作多媒体网页的一 般方法。通过本模块的学习和实训，学生应掌 握利用 8设计多媒体网页、插入多媒体文件、 和网页合成的方法。
44
45
♫ 步骤1：将文件复制三份，文件名称分别为、 、，全部存放在文件夹下。
♫ 步骤2：删除图像。 ♫ 打开文件，选中第三行中的图片，按住键删除
图像。
24
5.2.2为网页中插入音频文件
♫ 步骤3：插入音频文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【插件】，打开“选 择文件”对话框，选择目录下的文件夹下的3 文件，点击“确定”按钮，在弹出的对话框中 点击“确定”按钮。
开“新建文件”对话框，在“常规”选项卡中 选择“基本页”和，点击“创建”按钮即创建 一个新的网页文件。
12
5.1.3使用制作网页框架
♫ 步骤 2：保存文件。 ♫ 完成步骤1的操作就创建了一个空白页面。在
菜单栏上依次点击【文件】→【保存】，打开 “保存”对话框。保存目录选择E盘根目录下 的文件夹，文件名为：。点击“保存”按钮保 存文件。
♫ 1.超文本的概念 ♫ 超文本是一种文本，它和书本上的文本是一样
的。但与传统的文本文件相比，它们之间的主 要差别是，传统文本是以线性方式组织的，而 超文本是以非线性方式组织的。这里的"非线 性"是指文本中遇到的一些相关内容通过链接 组织在一起，用户可以很方便地浏览这些相关 内容。这种文本的组织方式与人们的思维方式 和工作方式比较接近。
8
5.1.2使用创建站点
♫ 步骤 1：将素材文件夹复制到E盘根目录下。 ♫ 步骤 2：启动。
9
5.1.2使用创建站点
♫ 步骤3：创建“多媒体技术与应用基础”站点 。
10
5.1.2使用创建站点
♫ 步骤3：创建“多媒体技术与应用基础”站点 。
11
5.1.3使用制作网页框架
♫ 步骤 1：创建新文件。 ♫ 在菜单栏上依次点击【文件】→【新建】，打
7
5.1.2使用创建站点
♫ 可以使用“站点定义向导”设置站点，该向导 会引领您完成设置过程。或者，也可以使用“ 站点定义”的“高级”设置，根据需要分别设 置本地文件夹、远程文件夹和测试文件夹。在 本教程中，您将使用“站点定义”的“高级” 设置来设置项目文件的本地文件夹。在本书后 面的部分，您将学习如何设置远程文件夹，以 便将页面发布到服务器，从而提供给公众访问 。
18
5.2.1为网页中插入图像文件
19
5.2.1为网页中插入图像文件
♫ 步骤2：在表格内插入图片。 ♫ 将光标移至表格第一行内，在菜单栏上依次点
击【插入】→【图像】，打开“选择图像源文 件”对话框，选择目录下的文件夹下的文件， 点击“确定”按钮，在弹出的对话框中点击“ 确定”按钮。
20
5.2.1为网页中插入图像文件
♫ 多媒体是融合两种或者两种以上媒体的一种人 -机交互式信息交流和传播媒体，使用的媒体 包括文字、图形、图像、声音、动画和电视图 像()的。多媒体是超媒体系统中的一个子集， 超媒体系统是使用超链接构成的全球信息系统 ，全球信息系统是因特网上使用协议和协议的 应用系统。二维的多媒体网页使用来编写，而 三维的多媒体网页使用来编写。在目前许多多 媒体作品使用光盘存储器发行，在将来多媒体 作品更多地使用网络来发行。
39
5.3.2为网页建立超文本、超媒体
♫ 步骤 1：选择对象。 ♫ 打开文件，选中导航栏中的“图片”两字。 ♫ 步骤2：添加超链接。 ♫ 选中对象后，在在“属性”检查器中链接标题
后的文本框中输入“”，也可以点击链接标题 下的 图标，在打开的对话框中选择文件，点 击“确定”按钮。
40
5.3.2为网页建立超文本、超媒体
4
5.1.1认识网页制作工具 8
♫ 1 8 的功能 ♫ 可视化编辑 ♫ 全面的编码环境 ♫ 服务器技术 ♫ 功能自定义
5
5.1.1认识网页制作工具 8
♫ 2 8的工作区布局
6
5.1.2使用创建站点
♫ 在 中，“站点”一词既表示站点，又表示属 于站点的文档的本地存储位置。在开始构建站 点之前，您需要建立站点文档的本地存储位置 。 站点可组织与站点相关的所有文档，跟踪 和维护链接，管理文件，共享文件以及将站点 文件传输到服务器。
35
5.3.1了解超文本、超媒体技术
36
5.3.1了解超文本、超媒体技术
♫ 超链接( )是指文本中的词、短语、符号、图像 、声音剪辑或影视剪辑之间的链接，或者与其 他的文件、超文本文件之间的链接，也称为“ 热链接( )”，或者称为“超文本链接( )”。
37ห้องสมุดไป่ตู้
5.3.1了解超文本、超媒体技术
♫ 2.超媒体的概念 ♫ 超媒体不仅可以包含文字而且还可以包含图形
、图像，动画、声音和电视片断，这些媒体之 间也是用超级链接组织的，而且它们之间的链 接也是错综复杂的。
38
5.3.2为网页建立超文本、超媒体
♫ 超链接是多媒体网页中一个不可缺少的要素， 在一个文档中可以创建几种类型的链接：链接 到其它文档或文件（如图形、影片、或声音文 件）的链接；命名锚记链接，此类链接跳转至 文档内的特定位置。电子邮件链接，此类链接 新建一个收件人地址已经填好的空白电子邮件 ；空链接和脚本链接，此类链接使您能够在对 象上附加行为，或者创建执行代码的链接。创 建链接之前，一定要清楚文档相对路径、站点 根目录相对路径以及绝对路径的工作方式。
图像。 ♫ 步骤 2：插入视频文件。 ♫ 将光标移至表格第三行内，在菜单栏上依次点
击【插入】→【媒体】→【插件】，打开“选 择文件”对话框，选择目录下的文件夹下的文 件，点击“确定”按钮，在弹出的对话框中点 击“确定”按钮。
28
5.2.3为网页中插入视频文件
♫ 步骤 3：设置视频文件显示大小。 ♫ 选中视频文件，在“属性”检查器中设置宽为