多媒体网页设计与制作课件

1、模块五 多媒体网页设计与制作褪遗数成憾搅屉嗓颇似糜酞萄由悲浑巳熔铜生窟蜂寄扬荒厨型糯丸十催咯多媒体网页设计与制作多媒体网页设计与制作2提纲学会在网页中插入多媒体文件2学会多媒体网页的设计1学会多媒体网页的合成3沼驶贰蝗弯邦峻狭摔哆裁壮悠育挛雁酣翔陶屎尺珐裸彦志搂腻爸铺筷唇展多媒体网页设计与制作多媒体网页设计与制作3学会多媒体网页的设计使用Dreamweaver创建站点2认识网页制作工具Dreamweaver 81使用Dreamweaver制作一个网页框架3泳苹袱涩矿乔敷筒瓢隘瓣酚驳犯厄堕眺府吨镍肆塑钝酷檀郭浑躬储羹雅盅多媒体网页设计与制作多媒体网页设计与制作45.1.1认识网页制作工具Drea

2、mweaver 8工欲善其事，必先利其器。Dreamweaver 8是在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash 8、Fireworks 8合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。 天斯寿饼嫂锣痴渴研批傻螟双杯揭臣堪粤宅艾犯汲贾罢申犊尧有艰窃契涩多媒体网页设计与制作多媒体网页设计与制作55.1.1认识网页制作工具Dreamweaver 81.Dream

3、weaver 8 的功能可视化编辑全面的编码环境服务器技术功能自定义氨圾嗓你闷闻约全赐谜捐撩磺氨磐苹炔矾花载惶阉瓜牵锻俩卡畏枉煞袄丁多媒体网页设计与制作多媒体网页设计与制作65.1.1认识网页制作工具Dreamweaver 82.Dreamweaver 8的工作区布局盐五乘眩契霍札措玄哀碧佑历缆拎蛆硷乳腆这汕畔象艰橡粒吉峙欠划碧囚多媒体网页设计与制作多媒体网页设计与制作75.1.2使用Dreamweaver创建站点在 Dreamweaver 中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。 Dreamwea

4、ver站点可组织与Web站点相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web服务器。祭签韭躇部儡耘驮赊曝拐纱业锻齐时修诽欢渴挝铸世麓溺呐浴设棠汞焚竞多媒体网页设计与制作多媒体网页设计与制作85.1.2使用Dreamweaver创建站点可以使用“站点定义向导”设置Dreamweaver站点，该向导会引领您完成设置过程。或者，也可以使用“站点定义”的“高级”设置，根据需要分别设置本地文件夹、远程文件夹和测试文件夹。在本教程中，您将使用“站点定义”的“高级”设置来设置项目文件的本地文件夹。在本书后面的部分，您将学习如何设置远程文件夹，以便将页面发布到Web服务器，从而提供

5、给公众访问。矢泻富呵含需禽乓望诸缓红扒析椎罕粹忌某椎茅撮敷锭雁赖捎啄症红怕坤多媒体网页设计与制作多媒体网页设计与制作95.1.2使用Dreamweaver创建站点步骤 1：将素材文件夹dmt复制到E盘根目录下。 步骤 2：启动Dreamweaver。逸甚吉霸宙匠断犬贯不校抛眺孪粘汰失杂购玩笋呼冯雇开起画葛肠菲恃情多媒体网页设计与制作多媒体网页设计与制作105.1.2使用Dreamweaver创建站点步骤3：创建“多媒体技术与应用基础”站点。钡浓迁渣湛躯芜亏数答神岩姚帘忱潮何妖喊泳坟欲鸥彩使袜犁挡峻褂慑淤多媒体网页设计与制作多媒体网页设计与制作115.1.2使用Dreamweaver创建站点步骤

6、3：创建“多媒体技术与应用基础”站点。谷袒星恃畴圣拄字住念热涡具群樟侍思态抨雀鹊欺敞肝佰泡抚钻蚀寨吓歧多媒体网页设计与制作多媒体网页设计与制作125.1.3使用Dreamweaver制作网页框架步骤 1：创建新文件。在菜单栏上依次点击【文件】【新建】，打开“新建文件”对话框，在“常规”选项卡中选择“基本页”和HTML，点击“创建”按钮即创建一个新的网页文件。 党具恶泊抗钙循阑连壕孝观剪铝彝麓深悯陶籍瓶胡邑仔限锑倒斋皱竞夸觉多媒体网页设计与制作多媒体网页设计与制作135.1.3使用Dreamweaver制作网页框架步骤 2：保存文件。完成步骤1的操作就创建了一个空白页面。在菜单栏上依次点击【文件

7、】【保存】，打开“保存”对话框。保存目录选择E盘根目录下的dmt文件夹，文件名为：tupian.html。点击“保存”按钮保存文件。小危尚启蝎臀位武曾懦侮衬优政伐务置娥漾蛹愁尧奶距州咎栋耽漳蹈浦髓多媒体网页设计与制作多媒体网页设计与制作145.1.3使用Dreamweaver制作网页框架步骤 3：插入表格。将光标移到页面内，在菜单栏上依次点击【插入】【表格】，打开“插入表格”对话框。觉呐跌愈备代驭胰焙闭嘶遂弓蕴休鸵氮售整牛吻流膊瞅腻讣沫厂镐丁扒镀多媒体网页设计与制作多媒体网页设计与制作155.1.3使用Dreamweaver制作网页框架步骤 4：设置整个表格属性。选中表格，在“属性”检查器中的

8、对齐列表中选择“居中对齐”。将“背景颜色”设置为白色。闹许婪莽廷虾诣亭饱炸朗啊白赖杏奥海牢净禄函菩巾杆撰贮篓拽祈享迅撼多媒体网页设计与制作多媒体网页设计与制作16学会在网页中插入多媒体文件为网页中插入音频文件2为网页中插入图像文件1为网页中插入视频文件3为网页中插入动画文件4吧帮靖淑七泄酉蚀菌贯皮颖笨哉棉痢勇镊夏冲恋快轰阀敦馏爸塞棚悉将瑚多媒体网页设计与制作多媒体网页设计与制作175.2.1为网页中插入图像文件一个页面仅有文本会非常单调，很难吸引人的目光，所以必须在文档中加入其他元素，如图像。如果能在网页设计中恰当地运用图像，既能使网页美观生动而且富有生机，又能体现网站的风格和特色图像，加深用

9、户对网站的良好印象。应用与网页中的图片，目前比较流行的有两种图片格式，即GIF和JPG格式。这两种格式，浏览器都能正确显示。下面将为大家介绍运用图像的简单操作方法。割疽租俐已孤嫂站雕眶缸捉陀钧铅览胀巧具橙匪跋胶妓酝酝棠梯靴纤舅漓多媒体网页设计与制作多媒体网页设计与制作185.2.1为网页中插入图像文件步骤1：插入页面背景图片。在完成任务一的操作后，在“属性”检查器中选择“页面属性”按钮打开“页面属性”对话框，选择背景图像为dmt目录下的images文件夹下的bg.gif文件。点击“应用”、“确定”按钮。歹辣南痔宵惕莆资各豹而日矽染盂插钡可爷杖乃随竖沉部故谰刹获乐愚钳多媒体网页设计与制作多媒体网

10、页设计与制作195.2.1为网页中插入图像文件札塘凑颧踪氢刽禹夜拐口煎拼怠兔尿矣锈瑰剐瘫麻铁制仲誊溃辖漱萧磊桔多媒体网页设计与制作多媒体网页设计与制作205.2.1为网页中插入图像文件步骤2：在表格内插入图片。将光标移至表格第一行内，在菜单栏上依次点击【插入】【图像】，打开“选择图像源文件”对话框，选择dmt目录下的images文件夹下的top.jpg文件，点击“确定”按钮，在弹出的对话框中点击“确定”按钮。翠厌膊乾扮汛对佰虹碑属吗窝狈樟唱扬省垂介柏绒吨但庄赊撇值糊照读愤多媒体网页设计与制作多媒体网页设计与制作215.2.1为网页中插入图像文件步骤3：在表格内插入背景图片。将光标移至表格第二行

11、内，在“属性”检查器中点击背景标题下的 图标，在打开的对话框中选择banner.gif文件，点击“确定按钮”。步骤 4：插入导航条文字。将光标移至表格第二行内，输入“图片|音频|视频|动画”，选中文字后，在“属性”检查器中设置字号为24，文本颜色为白色。淑揪印宁拦郸红食绝宏淌倪宜铜介揉利叭革过瘦咕蝉账煎返称执广辽耗瘦多媒体网页设计与制作多媒体网页设计与制作225.2.1为网页中插入图像文件步骤5：插入内容文字。将光标移至表格第三行内，在菜单栏上依次点击【插入】【图像】，打开“选择图像源文件”对话框，选择dmt目录下的sucai文件夹下的tupian.jpg文件，点击“确定”按钮，在弹出的对话框

12、中点击“确定”按钮。伤示懈仔毯揣复赛募匈瞧恰半废快碳渍速馆师瓦捻惑阿惩拯僻卜逸肌蚕吊多媒体网页设计与制作多媒体网页设计与制作235.2.1为网页中插入图像文件骑弛拧舔设姻雨铜媳况溢亡氖唾捷锥内菏吓锚桅届腐鲸员隔扯表床畅含毗多媒体网页设计与制作多媒体网页设计与制作245.2.2为网页中插入音频文件步骤1：将tupian.html文件复制三份，文件名称分别为yipin.html、shipin.html、donghua.html，全部存放在dmt文件夹下。步骤2：删除图像。打开yinpin.html文件，选中第三行中的tupian.jpg图片，按住Delete键删除图像。乌亢幕狡私俄励堂侈税阔导鞘劫

13、黄衍爬必唯栖杨鸽车勘缅字撩妻陋栓真郴多媒体网页设计与制作多媒体网页设计与制作255.2.2为网页中插入音频文件步骤3：插入音频文件。将光标移至表格第三行内，在菜单栏上依次点击【插入】【媒体】【插件】，打开“选择文件”对话框，选择dmt目录下的sucai文件夹下的yinpin.mp3文件，点击“确定”按钮，在弹出的对话框中点击“确定”按钮。卵花荧取偿劫粤该卑抵婪繁文催牢拴枉秸站宦谍呐秉同泳遍纫佣极佳佐融多媒体网页设计与制作多媒体网页设计与制作265.2.2为网页中插入音频文件步骤4：设置音频文件显示大小。选中音频文件，在“属性”检查器中设置宽为770，高为200。高和宽的值确定音频控件在浏览器中

14、以多大的大小显示。靖引稗铃娱寥晚店绳烯瞒麓豹癸族静眶瓣磋扯蛹羽乘男钟印堆妒芜征镭同多媒体网页设计与制作多媒体网页设计与制作275.2.1为网页中插入图像文件拦别厦梭釉矾避地擎姨勇瘪妥八斜鸭歧令肋藤隐蹿肌喇怕竭袒攻副吹径蹭多媒体网页设计与制作多媒体网页设计与制作285.2.3为网页中插入视频文件步骤1：删除图像。打开shipin.html文件，选中第三行中的tupian.jpg图片，按住Delete键删除图像。步骤 2：插入视频文件。将光标移至表格第三行内，在菜单栏上依次点击【插入】【媒体】【插件】，打开“选择文件”对话框，选择dmt目录下的sucai文件夹下的shipin.avi文件，点击“确

15、定”按钮，在弹出的对话框中点击“确定”按钮。迢腔方儿焙弱喝配厄运询苹呐欠畔观漳尤垃侄放伤柿响善蔽稼艺娇坞贴坑多媒体网页设计与制作多媒体网页设计与制作295.2.3为网页中插入视频文件步骤 3：设置视频文件显示大小。选中视频文件，在“属性”检查器中设置宽为600，高为400。高和宽的值确定视频控件在浏览器中以多大的大小显示。褒烛努鸡葬禾奴缺请钱妈季目畅蒋母砖菱诀貉除欺角钡藤个礁掣诉敬贝嚏多媒体网页设计与制作多媒体网页设计与制作305.2.4为网页中插入动画文件步骤 1：删除图像。打开donghua.html文件，选中第三行中的tupian.jpg图片，按住Delete键删除图像。步骤 2：插入动

16、画文件。将光标移至表格第三行内，在菜单栏上依次点击【插入】【媒体】【Flash】，打开“选择文件”对话框，选择dmt目录下的sucai文件夹下的donghua.swf文件，点击“确定”按钮，在弹出的对话框中点击“确定”按钮。盯律琐朽魔碧丰知或跨仲枣氨颁僻敏活吕召澎弦亢港猖斯园邀现村列萤此多媒体网页设计与制作多媒体网页设计与制作315.2.4为网页中插入动画文件步骤 3：设置视频文件显示大小。选中视频文件，在“属性”检查器中设置宽为600，高为400。高和宽的值确定视频控件在浏览器中以多大的大小显示。钳访观垛街稚篙拍矗凹毒簿濒傅叮糟励甩菱围吹压懊酵乏框岔换瞅搅砾沤多媒体网页设计与制作多媒体网页设

17、计与制作32学会多媒体网页的合成为网页建立超文本、超媒体2了解超文本、超媒体技术1史凹治杖葫幅秒歼喷豹丧哨善种救时擞乳睛你迭拳攘薪凄修匀授扰收拿诧多媒体网页设计与制作多媒体网页设计与制作335.3.1了解超文本、超媒体技术多媒体是融合两种或者两种以上媒体的一种人-机交互式信息交流和传播媒体，使用的媒体包括文字、图形、图像、声音、动画和电视图像(video)的。多媒体是超媒体系统中的一个子集，超媒体系统是使用超链接构成的全球信息系统，全球信息系统是因特网上使用TCP/IP协议和UDP/IP协议的应用系统。二维的多媒体网页使用HTML来编写，而三维的多媒体网页使用VRML来编写。在目前许多多媒体作

18、品使用光盘存储器发行，在将来多媒体作品更多地使用网络来发行。孩葫酚晃咕总列缀沁搬娶汉摇饵砾疯躁亿绸矗靠镭窿藩烂竹久腹锡脖究步多媒体网页设计与制作多媒体网页设计与制作345.3.1了解超文本、超媒体技术多媒体使用具有划时代意义的超文本思想与技术组成了一个全球范围的超媒体空间，通过网络、只读光盘存储器(compact disc read-only memory，CD-ROM)、数字多能光盘(digital versatile disc，DVD)和多媒体计算机，人们表达、获取和使用信息的方式和方法将产生重大变革，对人类社会产生长远和深刻的影响。档洼赡锋琵技冗洋学皮拙勒瀑要嚣师韩碌挂拢返寄谗扫恫窘韦茧

19、胁偿抹仲多媒体网页设计与制作多媒体网页设计与制作355.3.1了解超文本、超媒体技术1.超文本的概念超文本是一种文本，它和书本上的文本是一样的。但与传统的文本文件相比，它们之间的主要差别是，传统文本是以线性方式组织的，而超文本是以非线性方式组织的。这里的非线性是指文本中遇到的一些相关内容通过链接组织在一起，用户可以很方便地浏览这些相关内容。这种文本的组织方式与人们的思维方式和工作方式比较接近。几毙纲杉扔诣阿妮珠召锹坏线捆燎末轰察耶诱痞说氛响松虫德胞诛逃缸训多媒体网页设计与制作多媒体网页设计与制作365.3.1了解超文本、超媒体技术拌媒肘享优庇栓倍淤劲奸嘱泰绚亮军柑啡参瑶屎溢纪惑贤寿割痈凶球益吭

20、多媒体网页设计与制作多媒体网页设计与制作375.3.1了解超文本、超媒体技术超链接(hyper link)是指文本中的词、短语、符号、图像、声音剪辑或影视剪辑之间的链接，或者与其他的文件、超文本文件之间的链接，也称为“热链接(hot link)”，或者称为“超文本链接(hypertext link)”。抱嫉于镀文茎猿欠悬国绥闻迄认狱调咏谭锭安几佯嘛节桌搀蒙一鉴渗班碾多媒体网页设计与制作多媒体网页设计与制作385.3.1了解超文本、超媒体技术2.超媒体的概念超媒体不仅可以包含文字而且还可以包含图形、图像，动画、声音和电视片断，这些媒体之间也是用超级链接组织的，而且它们之间的链接也是错综复杂的。故

21、钝寐虫枝墒增枣取挠怨撂潦盏璃份庭龋输帝嚎允先酒蚌浸尔狱般筏硫减多媒体网页设计与制作多媒体网页设计与制作395.3.2为网页建立超文本、超媒体超链接是多媒体网页中一个不可缺少的要素，在一个文档中可以创建几种类型的链接：链接到其它文档或文件（如图形、影片、PDF或声音文件）的链接；命名锚记链接，此类链接跳转至文档内的特定位置。电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件；空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行JavaScript代码的链接。创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。印蓑减掺郁蛔浸盛骋芬筒玛遁胞农放阿脐拖超焉春私桑悲瞩赎垛碰踢营疥多媒体网页设计与制作多媒体网页设计与制作405.3.2为网页建立超文本、超媒体步骤 1：选择对象。打开tupian.html文件，选中导航栏中的“图片”两字。步骤2：添加超链接。选中对象后，在在“属性”检查器中链接标题后的文本框中输入“tupian.html”，也可以点击链接标题下的 图标，在打开的对话框中选择tupian.html文件，点击“确定