Dreamweaver-CC之图像与多媒体PPT课件

第4章图像和多媒体、web设计和创作DreamweaverCC标准教程、1、1 .插入图像2 .图像3。网页上的多媒体调整，本章的主要内容：2、图像是网页设计中非常重要的元素，它使页面更美丽、更有魅力。在网页中插入图像也是Dreamweaver网页设计必须掌握的技术。插入4.1图像，3，4.1.1课堂案例-插入主网站4.1.2图像4.1.3图像源文件4.1.4图像的宽度和高度4.1.5替换文本4.1.6图像编辑，插入4.1图像，4，案例学习目标：学习在网页中插入图像的各种方法。案例知识点：使用“插入”面板、“插入”|“图像”菜单和直接拖动图像等将图像插入到网页上的指定位置。材质所在位置：CD/事例资料/ch04/classroom实例-汽车网站。案例效果如图4-1所示。4.1.1讲座案例-汽车网站，5，6，由于站点中的图像必须位于站点文件夹中才能在网页中正确显示，因此在构建站点时，请创建专用于站点图像的文件夹，将其命名为“images”，然后在站点中放置所需的图像。插入4.1.2图像，7，在Dreamweaver中，可以通过三种方式将图像插入到网页中：(1)选择菜单“插入”|“图像”，在“选择图像源”对话框中，找到并选择所需图像，然后单击“确定”按钮完成图像插入。(2)选择“插入”面板的“主页”选项卡，单击“图像”按钮上的黑色三角形，从下拉菜单中选择图像选项，在“选择图像源”对话框中查找并选择所需图像，然后单击“确定”按钮完成图像插入。(3)打开“文件”面板，展开显示图像文件夹中的所有文件，按住鼠标左键拖动到需要插入的图像名称上的相应位置，然后释放鼠标以完成图像插入。插入4.1.2图像，8，图像源文件可以是插入的图像文件所在的位置、本地图像或网络上的图像。当插入的图像位于站点文件夹内时，“属性”面板的“源文件”文本框中会显示相对路径。如果要插入的图像不在站点文件夹中，则会出现一个对话框询问您是否要将图像复制到站点文件夹中，请单击“确定”按钮。您也可以在属性面板源文件文本框中直接修改网页上显示的图像的路径和文件名。4.1.3图像源文件，9，在网页中插入图像文件后，可以调整图像大小。可以通过两种方式调整：(1)进行视觉调整，以在文档窗口中选择图像。执行以下操作之一以调整图像大小：要调整图像的宽度，请拖动右侧的选择手柄。要调整图像的高度，请拖动底部的选择手柄。要同时调整图像的宽度和高度，请拖动顶角的选择手柄。要在调整图像大小时保持元素的比例(长宽比)，请按住Shift键并拖动顶角的选择手柄。若要将图像的宽度和高度调整为特定大小(例如1x1像素)，请使用“属性”面板。在“宽度”和“高”字段中输入数值。可以直观地将图像大小调整为至少8x8像素。4.1.4图像的宽度和高度，10，(2)在文档窗口中，通过调整“属性”面板选择图像。选择“窗口”菜单|“属性”或按快捷方式ctrl F3打开“属性”面板，然后输入宽度和高度的数值，如图4-11所示。单击“切换大小约束”图标以在调整图像时禁用或限制宽比例。要将图像恢复为原始大小，请单击“重置为原始大小”图标。要永久修改图像大小，请单击“提交图像大小”图标。4.1.4图像的宽度和高度，11，如果web页上的图像显示不正确(例如，图像源文件路径无效或浏览器图像显示已关闭等)，访问者将无法查看图像。可以使用图像“属性”面板中的“替换”文本框为不可见图像设置说明性文本。4.1.5替代文本，12，Dreamweaver具有图像编辑功能，无需其它图像编辑软件即可优化、裁剪、调整亮度和对比度以及锐化图像，从而获得图像在网页上的最佳显示效果。4.1.6编辑图像，13，网页不仅由图像和文本组成，音频、视频等多媒体在网页设计中的应用也越来越广泛，现在可以插入到网页中的多媒体包括动画、视频、Java小程序对象、ActiveX控件等，应用多媒体可以丰富网页内容，但会影响浏览速度，因此通常不会在网页中使用太多多媒体元素。4.2网页的多媒体，14，4.2.1教室案例-度假村4.2.2.2 Flash动画插入4.2.3 Flash视频插入4.2.4教室案例-瑜伽俱乐部，4.2网页上的多媒体，15，案例学习目标：学习如何在网页中插入动画、FLV视频等元素。案例知识点：使用“插入”面板上的“媒体”|“swf”和“FLV”按钮插入多媒体元素。材料位置：CD/事例资料/ch04/教室案例-度假村。案例效果如图4-20、图4-21所示。4.2.1讲座案例-度假村，16。17，18，在文档窗口中，单击要插入Flash动画的位置。单击菜单“插入”“html”“Flash SWF”打开“选择SWF”对话框，浏览到要插入的Flash动画文件，选择该文件，然后单击“确定”按钮。插入的Flash动画会以预留位置的形式显示在设计视窗中，您可以在属性面板的宽度和高度中调整动画大小，如图4-29所示。4.2.2插入Flash动画，19，从Dreamweaver插入Flash视频的过程如下：在“文档”窗口中，单击要插入Flash视频的位置。单击“插入菜单| |HTML|flash video”打开“插入FLV”对话框(如图4-30所示)，选择视频类型，然后在URL属性中浏览.单击浏览并选择要插入的FLV视频文件，选择外观，设置Flv视频的高度和宽度，然后根据需要选中“自动播放”和“自动播放”复选框。单击“确定”按钮完成FLV视频的插入。4.2.3插入Flash视频，20，案例学习目标：学习如何在网页中使用插入插件插入视频和背景音乐。案例知识点：使用“插入”面板上的“媒体”|“插件”按钮插入多媒体元素。材料位置：光盘/事例资料/ch04/教室案例-瑜伽俱乐部。案例效果如图4-36所示。插入4.3.4插件-瑜伽俱乐部，21。22，可以在网页中使用插件插入多媒体元素。在网页中插入插件的过程如下：在文档窗口中，单击要插入插件的位置。选择菜单“插入”，在“选择文件”对话框中找到并选择多媒体文件，然后单击“确定”按钮完成插入。插入4.3.5插件，23，4.3.1类示例-Mick音乐4.3.2插入HTML5Video元素4.3.3插入HTML5Audio元素，4.3 html 5 web多媒体，24，案例学习目标：学习在网页中插入video、audio元素。案例知识点：使用“插入”面板上的“HTML”|“HTML”|“HTML 5 Audio”和“HTML5Video”按钮插入Video和audio多媒体元素。材料位置：光盘/外壳材料/ch04/类别外壳-米克音乐。案例效果如图4-39所示。以材质“classroom case-Mick music”作为本地站点文件夹，创建名为“Mick music”的站点。4.3.1 classroom case-Mick音乐，25，26，在Dreamweaver中插入HTML5Video元素的过程如下：在文档窗口中，单击要插入HTML5Video元素的位置。单击菜单“插入”“html”“html 5视频”，在网页中插入Video元素，然后在“代码”窗格中显示生成的代码。其中controls属性是用于添加播放、暂停和音量的控件。属性窗口的宽度和高度设置Video元素的大小，然后单击源后面的浏览按钮，选择Video元素要播放的视频文件，如图4-49所示。4.3.2 HTML5Video元素，27，在Dreamweaver中插入audio元素的过程如下：在文档窗口中，单击要插入audio元素的位置。单击菜单“插入”html | html 5 audio，在网页上插入audio元素，然后将新代码添加到“代码”窗格中。在“properties(属性)”窗口中，依次单击“source(源)”和“browse(浏览，4.3.3插入HTML5Audio元素，28，4.4.1练习案例-硬件机器4.4.2练习案例-审美咖啡屋4.4.2练习案例-经典音乐网络，4.4练习案例，29，案例练习目标：插入图像和调整图像练习。案例工作点：1。在中间单元格中插入图像。图像1.jpg的大小调整为水平117高度105，亮度值为14，图像2.jpg的大小调整为水平110高度px，对比度值为26，图像3.jpg的大小调整为水平110高度89，锐化值调整为2。2.右上客户服务照片切除后，将尺寸调整为宽度110高147，在单元内水平居中对齐。材料位置：磁盘/盘柜材料/ch04/硬件机器，效果如图4-45所示。4.4.1练习案例-硬件机器，30，31，案例练习目标：插入和调整FLV视频和多媒体插件的练习。案例工作点：1。web文档index.html中的1 .插入FLV文件，将其大小调整为水平510高度383，将外观保存为ClearSkin3(最小宽度：260)，自动和循环使用，并以原始名称保存外观。2.在web文档index1.html中，使用插件插入方法插入文件1.wmv，然后在代码窗格中使用插件大小宽度510高度383、自动和循环，以及原始名称保存文件1 . wmv。材质所在位置：磁盘/盘柜数据/ch04/审美咖啡厅，如图4-46所示的效果。4.4.2练习案例-审美咖啡馆，32。33，案例练习目标：插入HTML5Video和HTML5Audio元素练习。案例工作点：1。在web文档index.html中，删除提示文本“在此处插入HTML5Vide