多媒体网页设计与制作.ppt

《多媒体网页设计与制作.ppt》由会员分享，可在线阅读，更多相关《多媒体网页设计与制作.ppt（45页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、模块五模块五 多媒体网页设计与制作多媒体网页设计与制作2提纲提纲学会在网页中插入多媒体文件学会在网页中插入多媒体文件2学会多媒体网页的设计学会多媒体网页的设计1学会多媒体网页的合成学会多媒体网页的合成33学会多媒体网学会多媒体网页的的设计使用使用Dreamweaver创建站点创建站点2认识网页制作工具认识网页制作工具Dreamweaver 81使用使用Dreamweaver制作一个网页框架制作一个网页框架34认识网网页制作工具制作工具Dreamweaver 8工欲善其事，必先利其器。工欲善其事，必先利其器。Dreamweaver 8是在多媒体方面是在多媒体方面颇有建有建树的的Macromedi

2、a公司公司推出的可推出的可视化网化网页制作工具，它与制作工具，它与Flash 8、Fireworks 8合在一起被称合在一起被称为网网页制作三制作三剑客，客，这三个三个软件相件相辅相承，是制作网相承，是制作网页的最佳的最佳选择。其中，其中，Dreamweaver主要用来制作网主要用来制作网页文件，文件，制作出来的网制作出来的网页兼容性比兼容性比较好，制作效率也很好，制作效率也很高，高，Flash用来制作精美的网用来制作精美的网页动画，而画，而Fireworks用来用来处理网理网页中的中的图形。形。5认识网网页制作工具制作工具Dreamweaver 81.Dreamweaver 8 的功能的功能

3、可可视化化编辑全面的全面的编码环境境服服务器技器技术功能自定功能自定义6认识网网页制作工具制作工具Dreamweaver 82.Dreamweaver 8的工作区布局的工作区布局7使用使用Dreamweaver创建站点建站点在在 Dreamweaver 中，中，“站点站点”一一词既表示既表示Web站点，又表示属于站点，又表示属于Web站点的文档的本地存站点的文档的本地存储位置。在开始构建位置。在开始构建Web站点之前，您需要建立站点之前，您需要建立站点文档的本地存站点文档的本地存储位置。位置。Dreamweaver站站点可点可组织与与Web站点相关的所有文档，跟踪和站点相关的所有文档，跟踪和维

4、护链接，管理文件，共享文件以及将站点文接，管理文件，共享文件以及将站点文件件传输到到Web服服务器。器。8使用使用Dreamweaver创建站点建站点可以使用可以使用“站点定站点定义向向导”设置置Dreamweaver站点，站点，该向向导会引会引领您完成您完成设置置过程。或者，程。或者，也可以使用也可以使用“站点定站点定义”的的“高高级”设置，根据需置，根据需要分要分别设置本地文件置本地文件夹、远程文件程文件夹和和测试文文件件夹。在本教程中，您将使用。在本教程中，您将使用“站点定站点定义”的的“高高级”设置来置来设置置项目文件的本地文件目文件的本地文件夹。在。在本本书后面的部分，您将学后面的部

5、分，您将学习如何如何设置置远程文件程文件夹，以便将，以便将页面面发布到布到Web服服务器，从而提供器，从而提供给公众公众访问。9使用使用Dreamweaver创建站点建站点步步骤 1：将素材文件：将素材文件夹dmt复制到复制到E盘根目根目录下。下。步步骤 2：启：启动Dreamweaver。10使用使用Dreamweaver创建站点建站点步步骤3：创建建“多媒体技多媒体技术与与应用基用基础”站点。站点。11使用使用Dreamweaver创建站点建站点步步骤3：创建建“多媒体技多媒体技术与与应用基用基础”站点。站点。12使用使用Dreamweaver制作网制作网页框架框架步步骤 1：创建新文件。

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

7、”按按钮保存文件。保存文件。14使用使用Dreamweaver制作网制作网页框架框架步步骤 3：插入表格。：插入表格。将光将光标移到移到页面内，在菜面内，在菜单栏上依次点上依次点击【插插入入】【表格表格】，打开，打开“插入表格插入表格”对话框。框。15使用使用Dreamweaver制作网制作网页框架框架步步骤 4：设置整个表格属性。置整个表格属性。选中表格，在中表格，在“属性属性”检查器中的器中的对齐列表中列表中选择“居中居中对齐”。将。将“背景背景颜色色”设置置为白色。白色。16学会在网学会在网页中插入多媒体文件中插入多媒体文件为网页中插入音频文件为网页中插入音频文件2为网页中插入图像文件为

8、网页中插入图像文件1为网页中插入视频文件为网页中插入视频文件3为网页中插入动画文件为网页中插入动画文件417为网网页中插入中插入图像文件像文件一个一个页面面仅有文本会非常有文本会非常单调，很，很难吸引人的吸引人的目光，所以必目光，所以必须在文档中加入其他元素，如在文档中加入其他元素，如图像。如果能在网像。如果能在网页设计中恰当地运用中恰当地运用图像，既像，既能使网能使网页美美观生生动而且富有生机，又能体而且富有生机，又能体现网网站的站的风格和特色格和特色图像，加深用像，加深用户对网站的良好网站的良好印象。印象。应用与网用与网页中的中的图片，目前比片，目前比较流行的有两种流行的有两种图片格式，即

9、片格式，即GIF和和JPG格式。格式。这两种格式，两种格式，浏览器都能正确器都能正确显示。下面将示。下面将为大家介大家介绍运用运用图像的像的简单操作方法。操作方法。18为网网页中插入中插入图像文件像文件步步骤1：插入：插入页面背景面背景图片。片。在完成任在完成任务一的操作后，在一的操作后，在“属性属性”检查器中器中选择“页面属性面属性”按按钮打开打开“页面属性面属性”对话框，框，选择背景背景图像像为dmt目目录下的下的images文件文件夹下的下的bg.gif文件。点文件。点击“应用用”、“确定确定”按按钮。19为网网页中插入中插入图像文件像文件20为网网页中插入中插入图像文件像文件步步骤2：

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

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

12、钮，在，在弹出出的的对话框中点框中点击“确定确定”按按钮。23为网网页中插入中插入图像文件像文件24为网网页中插入音中插入音频文件文件步步骤1：将：将tupian.html文件复制三份，文件名文件复制三份，文件名称分称分别为yipin.html、shipin.html、donghua.html，全部存放在，全部存放在dmt文件文件夹下。下。步步骤2：删除除图像。像。打开打开yinpin.html文件，文件，选中第三行中的中第三行中的tupian.jpg图片，按住片，按住Delete键删除除图像。像。25为网网页中插入音中插入音频文件文件步步骤3：插入音：插入音频文件。文件。将光将光标移至表格第

13、三行内，在菜移至表格第三行内，在菜单栏上依次点上依次点击【插入插入】【媒体媒体】【插件插件】，打开，打开“选择文件文件”对话框，框，选择dmt目目录下的下的sucai文件文件夹下的下的yinpin.mp3文件，点文件，点击“确定确定”按按钮，在，在弹出的出的对话框中点框中点击“确定确定”按按钮。26为网网页中插入音中插入音频文件文件步步骤4：设置音置音频文件文件显示大小。示大小。选中音中音频文件，在文件，在“属性属性”检查器中器中设置置宽为770，高，高为200。高和。高和宽的的值确定音确定音频控件在控件在浏览器中以多大的大小器中以多大的大小显示。示。27为网网页中插入中插入图像文件像文件28

14、为网网页中插入中插入视频文件文件步步骤1：删除除图像。像。打开打开shipin.html文件，文件，选中第三行中的中第三行中的tupian.jpg图片，按住片，按住Delete键删除除图像。像。步步骤 2：插入：插入视频文件。文件。将光将光标移至表格第三行内，在菜移至表格第三行内，在菜单栏上依次点上依次点击【插入插入】【媒体媒体】【插件插件】，打开，打开“选择文件文件”对话框，框，选择dmt目目录下的下的sucai文件文件夹下的下的shipin.avi文件，点文件，点击“确定确定”按按钮，在，在弹出的出的对话框中点框中点击“确定确定”按按钮。29为网网页中插入中插入视频文件文件步步骤 3：设置

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

16、，选择dmt目目录下的下的sucai文件文件夹下的下的donghua.swf文件，点文件，点击“确定确定”按按钮，在在弹出的出的对话框中点框中点击“确定确定”按按钮。31为网网页中插入中插入动画文件画文件步步骤 3：设置置视频文件文件显示大小。示大小。选中中视频文件，在文件，在“属性属性”检查器中器中设置置宽为600，高，高为400。高和。高和宽的的值确定确定视频控件在控件在浏览器中以多大的大小器中以多大的大小显示。示。32学会多媒体网学会多媒体网页的合成的合成为网页建立超文本、超媒体为网页建立超文本、超媒体2了解超文本、超媒体技术了解超文本、超媒体技术133了解超文本、超媒体技了解超文本、超

17、媒体技术多媒体是融合两种或者两种以上媒体的一种人多媒体是融合两种或者两种以上媒体的一种人-机交互式信息交流和机交互式信息交流和传播媒体，使用的媒体播媒体，使用的媒体包括文字、包括文字、图形、形、图像、声音、像、声音、动画和画和电视图像像(video)的。多媒体是超媒体系的。多媒体是超媒体系统中的一个子中的一个子集，超媒体系集，超媒体系统是使用超是使用超链接构成的全球信息接构成的全球信息系系统，全球信息系，全球信息系统是因特网上使用是因特网上使用TCP/IP协议和和UDP/IP协议的的应用系用系统。二。二维的多媒体的多媒体网网页使用使用HTML来来编写，而三写，而三维的多媒体网的多媒体网页使用使

18、用VRML来来编写。在目前写。在目前许多多媒体作品使多多媒体作品使用光用光盘存存储器器发行，在将来多媒体作品更多地行，在将来多媒体作品更多地使用网使用网络来来发行。行。34了解超文本、超媒体技了解超文本、超媒体技术多媒体使用具有划多媒体使用具有划时代意代意义的的超文本超文本思想与思想与技技术组成了一个全球范成了一个全球范围的超媒体空的超媒体空间，通，通过网网络、只、只读光光盘存存储器器(compact disc read-only memory，CD-ROM)、数字多能光、数字多能光盘(digital versatile disc，DVD)和多媒体和多媒体计算算机，人机，人们表达、表达、获取和

19、使用信息的方式和方法取和使用信息的方式和方法将将产生重大生重大变革，革，对人人类社会社会产生生长远和深刻和深刻的影响。的影响。35了解超文本、超媒体技了解超文本、超媒体技术1.超文本的概念超文本的概念超文本是一种文本，它和超文本是一种文本，它和书本上的文本是一本上的文本是一样的。但与的。但与传统的文本文件相比，它的文本文件相比，它们之之间的主的主要差要差别是，是，传统文本是以文本是以线性方式性方式组织的，而的，而超文本是以非超文本是以非线性方式性方式组织的。的。这里的里的非非线性性是指文本中遇到的一些相关内容通是指文本中遇到的一些相关内容通过链接接组织在一起，用在一起，用户可以很方便地可以很方

20、便地浏览这些相关些相关内容。内容。这种文本的种文本的组织方式与人方式与人们的思的思维方式方式和工作方式比和工作方式比较接近。接近。36了解超文本、超媒体技了解超文本、超媒体技术37了解超文本、超媒体技了解超文本、超媒体技术超超链接接(hyper link)是指文本中的是指文本中的词、短、短语、符号、符号、图像、声音剪像、声音剪辑或影或影视剪剪辑之之间的的链接，接，或者与其他的文件、超文本文件之或者与其他的文件、超文本文件之间的的链接，接，也称也称为“热链接接(hot link)”，或者称，或者称为“超文本超文本链接接(hypertext link)”。38了解超文本、超媒体技了解超文本、超媒体

21、技术2.超媒体的概念超媒体的概念超媒体不超媒体不仅可以包含文字而且可以包含文字而且还可以包含可以包含图形、形、图像，像，动画、声音和画、声音和电视片断，片断，这些媒体之些媒体之间也是用超也是用超级链接接组织的，而且它的，而且它们之之间的的链接接也是也是错综复复杂的。的。39为网网页建立超文本、超媒体建立超文本、超媒体超超链接是多媒体网接是多媒体网页中一个不可缺少的要素，中一个不可缺少的要素，在一个文档中可以在一个文档中可以创建几种建几种类型的型的链接：接：链接接到其它文档或文件（如到其它文档或文件（如图形、影片、形、影片、PDF或声或声音文件）的音文件）的链接；命名接；命名锚记链接，此接，此类

22、链接跳接跳转至文档内的特定位置。至文档内的特定位置。电子子邮件件链接，此接，此类链接新建一个收件人地址已接新建一个收件人地址已经填好的空白填好的空白电子子邮件；空件；空链接和脚本接和脚本链接，此接，此类链接使您能接使您能够在在对象上附加行象上附加行为，或者，或者创建建执行行JavaScript代代码的的链接。接。创建建链接之前，一定要清楚文档接之前，一定要清楚文档相相对路径、站点根目路径、站点根目录相相对路径以及路径以及绝对路径路径的工作方式。的工作方式。40为网网页建立超文本、超媒体建立超文本、超媒体步步骤 1：选择对象。象。打开打开tupian.html文件，文件，选中中导航航栏中的中的“

23、图片片”两字。两字。步步骤2：添加超：添加超链接。接。选中中对象后，在在象后，在在“属性属性”检查器中器中链接接标题后后的文本框中的文本框中输入入“tupian.html”，也可以点，也可以点击链接接标题下的下的 图标，在打开的，在打开的对话框中框中选择tupian.html文件，点文件，点击“确定确定”按按钮。41为网网页建立超文本、超媒体建立超文本、超媒体42为网网页建立超文本、超媒体建立超文本、超媒体步步骤3：依照步：依照步骤1和步和步骤2的操作，依次的操作，依次为导航航栏中的中的“音音频”、“视频”、“动画画”等文字添加等文字添加超超链接。接。步步骤 4：打开：打开yinpin.htm

24、l、shipin.html、donghua.html等文件，等文件，对页面中的面中的导航航栏进行超行超链接接设置。置。43为网网页建立超文本、超媒体建立超文本、超媒体文档的位置和路径：文档的位置和路径：绝对路径（例如：）。路径（例如：）。文档相文档相对路径（例如路径（例如 dreamweaver/contents.html）。）。站点根目站点根目录相相对路径（例如路径（例如/support/dreamweaver/contents.html）。）。44本模本模块主要介主要介绍利用利用规划制作多媒体网划制作多媒体网页的一的一般方法。通般方法。通过本模本模块的学的学习和和实训，学生，学生应掌掌握利用握利用Dreamweaver 8设计多媒体网多媒体网页、插、插入多媒体文件、和网入多媒体文件、和网页合成的方法。合成的方法。总结总结45