多媒体网页设计与制作

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