多媒体网页设计与制作

《多媒体网页设计与制作》由会员分享，可在线阅读，更多相关《多媒体网页设计与制作（45页珍藏版）》请在金锄头文库上搜索。

1、模块五 多媒体网页设计与制作2提纲学会在网页中插入多媒体文件2学会多媒体网页的设计1学会多媒体网页的合成33学会多媒体网页页的设计设计使用Dreamweaver创建站点2认识网页制作工具Dreamweaver 81使用Dreamweaver制作一个网页框架345.1.1认识认识 网页页制作工具Dreamweaver 8 工欲善其事，必先利其器。Dreamweaver 8 是在多媒体方面颇颇有建树树的Macromedia公司 推出的可视视化网页页制作工具，它与Flash 8、 Fireworks 8合在一起被称为为网页页制作三剑剑客 ，这这三个软软件相辅辅相承，是制作网页页的最佳 选择选择 。其

2、中，Dreamweaver主要用来制作网 页页文件，制作出来的网页页兼容性比较较好，制 作效率也很高，Flash用来制作精美的网页动页动 画，而Fireworks用来处处理网页页中的图图形。 55.1.1认识认识 网页页制作工具Dreamweaver 8 1.Dreamweaver 8 的功能 可视视化编辑编辑 全面的编码环编码环 境 服务务器技术术 功能自定义义65.1.1认识认识 网页页制作工具Dreamweaver 8 2.Dreamweaver 8的工作区布局75.1.2使用Dreamweaver创创建站点 在 Dreamweaver 中，“站点”一词词既表示Web 站点，又表示属于W

3、eb站点的文档的本地存储储 位置。在开始构建Web站点之前，您需要建立 站点文档的本地存储储位置。 Dreamweaver站 点可组织组织 与Web站点相关的所有文档，跟踪 和维护链维护链 接，管理文件，共享文件以及将站 点文件传输传输 到Web服务务器。85.1.2使用Dreamweaver创创建站点 可以使用“站点定义义向导导”设设置Dreamweaver 站点，该该向导导会引领领您完成设设置过过程。或者 ，也可以使用“站点定义义”的“高级级”设设置，根 据需要分别设别设 置本地文件夹夹、远远程文件夹夹和 测试测试 文件夹夹。在本教程中，您将使用“站点定 义义”的“高级级”设设置来设设置项

4、项目文件的本地文件 夹夹。在本书书后面的部分，您将学习习如何设设置 远远程文件夹夹，以便将页页面发发布到Web服务务器 ，从而提供给给公众访问访问 。95.1.2使用Dreamweaver创创建站点 步骤骤 1：将素材文件夹夹dmt复制到E盘盘根目录录 下。 步骤骤 2：启动动Dreamweaver。105.1.2使用Dreamweaver创创建站点 步骤骤3：创创建“多媒体技术术与应应用基础础”站点。115.1.2使用Dreamweaver创创建站点 步骤骤3：创创建“多媒体技术术与应应用基础础”站点。125.1.3使用Dreamweaver制作网页页框架 步骤骤 1：创创建新文件。 在菜单

5、栏单栏 上依次点击击【文件】【新建】， 打开“新建文件”对话对话 框，在“常规规”选项选项 卡中 选择选择 “基本页页”和HTML，点击击“创创建”按钮钮即 创创建一个新的网页页文件。 135.1.3使用Dreamweaver制作网页页框架 步骤骤 2：保存文件。 完成步骤骤1的操作就创创建了一个空白页页面。在 菜单栏单栏 上依次点击击【文件】【保存】，打 开“保存”对话对话 框。保存目录选择录选择 E盘盘根目录录 下的dmt文件夹夹，文件名为为：tupian.html。 点击击“保存”按钮钮保存文件。145.1.3使用Dreamweaver制作网页页框架 步骤骤 3：插入表格。 将光标标移到

6、页页面内，在菜单栏单栏 上依次点击击【 插入】【表格】，打开“插入表格”对话对话 框。155.1.3使用Dreamweaver制作网页页框架 步骤骤 4：设设置整个表格属性。 选选中表格，在“属性”检查检查 器中的对齐对齐 列表中 选择选择 “居中对齐对齐 ”。将“背景颜颜色”设设置为为白色 。16学会在网页页中插入多媒体文件为网页中插入音频文件2为网页中插入图像文件1为网页中插入视频文件3为网页中插入动画文件4175.2.1为为网页页中插入图图像文件 一个页页面仅仅有文本会非常单调单调 ，很难难吸引人 的目光，所以必须须在文档中加入其他元素，如 图图像。如果能在网页设计页设计 中恰当地运用图

7、图像 ，既能使网页页美观观生动动而且富有生机，又能 体现现网站的风风格和特色图图像，加深用户对户对 网 站的良好印象。 应应用与网页页中的图图片，目前比较较流行的有两 种图图片格式，即GIF和JPG格式。这这两种格式 ，浏览浏览 器都能正确显显示。下面将为为大家介绍绍 运用图图像的简单简单 操作方法。185.2.1为为网页页中插入图图像文件 步骤骤1：插入页页面背景图图片。 在完成任务务一的操作后，在“属性”检查检查 器中 选择选择 “页页面属性”按钮钮打开“页页面属性”对话对话 框 ，选择选择 背景图图像为为dmt目录录下的images文件 夹夹下的bg.gif文件。点击击“应应用”、“确定

8、”按钮钮 。195.2.1为为网页页中插入图图像文件205.2.1为为网页页中插入图图像文件 步骤骤2：在表格内插入图图片。 将光标标移至表格第一行内，在菜单栏单栏 上依次 点击击【插入】【图图像】，打开“选择图选择图 像源 文件”对话对话 框，选择选择 dmt目录录下的images文 件夹夹下的top.jpg文件，点击击“确定”按钮钮，在 弹弹出的对话对话 框中点击击“确定”按钮钮。215.2.1为为网页页中插入图图像文件 步骤骤3：在表格内插入背景图图片。 将光标标移至表格第二行内，在“属性”检查检查 器 中点击击背景标题标题 下的 图标图标 ，在打开的对话对话 框中选择选择 banner

9、.gif文件，点击击“确定按钮钮”。 步骤骤 4：插入导导航条文字。 将光标标移至表格第二行内，输输入“图图片|音频频| 视频视频 |动动画”，选选中文字后，在“属性”检查检查 器 中设设置字号为为24，文本颜颜色为为白色。225.2.1为为网页页中插入图图像文件 步骤骤5：插入内容文字。 将光标标移至表格第三行内，在菜单栏单栏 上依次 点击击【插入】【图图像】，打开“选择图选择图 像源 文件”对话对话 框，选择选择 dmt目录录下的sucai文件 夹夹下的tupian.jpg文件，点击击“确定”按钮钮，在 弹弹出的对话对话 框中点击击“确定”按钮钮。235.2.1为为网页页中插入图图像文件2

10、45.2.2为为网页页中插入音频频文件 步骤骤1：将tupian.html文件复制三份，文件名 称分别为别为 yipin.html、shipin.html、 donghua.html，全部存放在dmt文件夹夹下。 步骤骤2：删删除图图像。 打开yinpin.html文件，选选中第三行中的 tupian.jpg图图片，按住Delete键删键删 除图图像。255.2.2为为网页页中插入音频频文件 步骤骤3：插入音频频文件。 将光标标移至表格第三行内，在菜单栏单栏 上依次 点击击【插入】【媒体】【插件】，打开“ 选择选择 文件”对话对话 框，选择选择 dmt目录录下的sucai 文件夹夹下的yinp

11、in.mp3文件，点击击“确定”按 钮钮，在弹弹出的对话对话 框中点击击“确定”按钮钮。265.2.2为为网页页中插入音频频文件 步骤骤4：设设置音频频文件显显示大小。 选选中音频频文件，在“属性”检查检查 器中设设置宽为宽为 770，高为为200。高和宽宽的值值确定音频频控件在 浏览浏览 器中以多大的大小显显示。275.2.1为为网页页中插入图图像文件285.2.3为为网页页中插入视频视频 文件 步骤骤1：删删除图图像。 打开shipin.html文件，选选中第三行中的 tupian.jpg图图片，按住Delete键删键删 除图图像。 步骤骤 2：插入视频视频 文件。 将光标标移至表格第三行

12、内，在菜单栏单栏 上依次 点击击【插入】【媒体】【插件】，打开“ 选择选择 文件”对话对话 框，选择选择 dmt目录录下的sucai 文件夹夹下的shipin.avi文件，点击击“确定”按钮钮 ，在弹弹出的对话对话 框中点击击“确定”按钮钮。295.2.3为为网页页中插入视频视频 文件 步骤骤 3：设设置视频视频 文件显显示大小。 选选中视频视频 文件，在“属性”检查检查 器中设设置宽为宽为 600，高为为400。高和宽宽的值值确定视频视频 控件在 浏览浏览 器中以多大的大小显显示。305.2.4为为网页页中插入动动画文件 步骤骤 1：删删除图图像。 打开donghua.html文件，选选中第

13、三行中的 tupian.jpg图图片，按住Delete键删键删 除图图像。 步骤骤 2：插入动动画文件。 将光标标移至表格第三行内，在菜单栏单栏 上依次 点击击【插入】【媒体】【Flash】，打开“ 选择选择 文件”对话对话 框，选择选择 dmt目录录下的sucai 文件夹夹下的donghua.swf文件，点击击“确定” 按钮钮，在弹弹出的对话对话 框中点击击“确定”按钮钮。315.2.4为为网页页中插入动动画文件 步骤骤 3：设设置视频视频 文件显显示大小。 选选中视频视频 文件，在“属性”检查检查 器中设设置宽为宽为 600，高为为400。高和宽宽的值值确定视频视频 控件在 浏览浏览 器中

14、以多大的大小显显示。32学会多媒体网页页的合成为网页建立超文本、超媒体2了解超文本、超媒体技术1335.3.1了解超文本、超媒体技术术 多媒体是融合两种或者两种以上媒体的一种人 -机交互式信息交流和传传播媒体，使用的媒体 包括文字、图图形、图图像、声音、动动画和电视电视 图图像(video)的。多媒体是超媒体系统统中的一 个子集，超媒体系统统是使用超链链接构成的全球 信息系统统，全球信息系统统是因特网上使用 TCP/IP协议协议 和UDP/IP协议协议 的应应用系统统。二维维 的多媒体网页页使用HTML来编编写，而三维维的多 媒体网页页使用VRML来编编写。在目前许许多多媒 体作品使用光盘盘存

15、储储器发发行，在将来多媒体 作品更多地使用网络络来发发行。345.3.1了解超文本、超媒体技术术 多媒体使用具有划时时代意义义的“超文本“思想与 技术组术组 成了一个全球范围围的超媒体空间间，通 过过网络络、只读读光盘盘存储储器(compact disc read-only memory，CD-ROM)、数字多能光 盘盘(digital versatile disc，DVD)和多媒体计计 算机，人们们表达、获获取和使用信息的方式和方 法将产产生重大变变革，对对人类类社会产产生长远长远 和 深刻的影响。355.3.1了解超文本、超媒体技术术 1.超文本的概念 超文本是一种文本，它和书书本上的文本

16、是一样样 的。但与传统传统 的文本文件相比，它们们之间间的 主要差别别是，传统传统 文本是以线线性方式组织组织 的 ，而超文本是以非线线性方式组织组织 的。这这里的“ 非线线性“是指文本中遇到的一些相关内容通过过 链链接组织组织 在一起，用户户可以很方便地浏览这浏览这 些相关内容。这这种文本的组织组织 方式与人们们的 思维维方式和工作方式比较较接近。365.3.1了解超文本、超媒体技术术375.3.1了解超文本、超媒体技术术 超链链接(hyper link)是指文本中的词词、短语语、 符号、图图像、声音剪辑辑或影视视剪辑辑之间间的链链 接，或者与其他的文件、超文本文件之间间的链链 接，也称为为“热链热链 接(hot link)”，或者称为为“超 文本链链接(hypertext link)”。385.3.1了解超文本、超媒体技术术 2.超媒体的概念 超媒体不仅仅可以包含文字而且还