当前位置：文档之家 › 网页设计与制作第4章 使用图像和媒体

网页设计与制作第4章 使用图像和媒体

  • 格式：ppt
  • 大小：1.74 MB
  • 文档页数：37

下载文档原格式

  / 37

合集下载

网页设计与制作4

网页设计与制作4

5．显示／隐藏图层或对象 在【层】面板中图层和对象前面都有一 个【眼睛】图标，单击该【眼睛】图标，该 【眼睛】图标会消失，对应的图层或对象在 画布上也被隐藏。再单击该【眼睛】图标所 在的地方，该【眼睛】图标会重新出现，对 应的图层或对象也重新在画布上显示。 当某个图层被隐藏后，位于该图层中的对象 都将被隐藏。 可以在图层的菜单中选择【显示全部】或 【隐藏全部】命令来显示或者隐藏所有的图 层。
对象组合以后，在【层】面板中的对象图 层将合并为一个组合对象图层。 对象组合以后，使用【指针工具】单击组合对 象，可以将组合对象作为一个对象选中并做各 种编辑工作，特别是移动组合对象，其中所有 对象将一起移动，且各对象的相对位置不变。 使用【部分选择工具】可以选中组合对象中的 某一个对象，单独进行编辑。 使用【指针工具】选中组合对象，选择菜单 【修改】|【取消组合】命令可以取消对象的组 合。取消对象组合以后，在【层】面板中的对 象图层恢复原样。
图4-6 【变形】菜单
图4-7 【数值变形】对话框
10．对齐对象 选中多个对象将其对齐的方式有八种，分 别为左对齐、右对齐、顶对齐、底对齐、垂直 居中、水平居中、均分宽度、均分高度，前六 种至少同时选中两个对象，后两种至少同时选 中三个对象。选中对象在包含所有被选对象的 最小矩形区域内对齐，如图4-8中用辅助线标出 包含所有被选对象的最小矩形区域。 选中要对齐的多个对象。选择菜单【修改】 |【对齐】命令中的相关子命令或单击修改工具 栏中相应的按钮即可实现对象的对齐操作。
4.1.1 【层】面板中图层ห้องสมุดไป่ตู้对象的操作 1．【层】面板 Fireworks 8主要通过【层】面板对图层进行管理 和操作，【层】面板如图4-1所示。可通过选择【窗 口】|【层】命令来显示【层】面板。

《网页设计与制作》习题参考答案

《网页设计与制作》习题参考答案

《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。

2）WWW是建立在客户机／服务器模型之上的。

3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。

4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

5）WWW浏览提供界面友好的信息查询接口。

(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。

它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。

图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。

动画：动画是动态的图形，添加动画可以使网页更加生动。

常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。

网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。

表格：在网页中使用表格可以控制网页中信息的结构布局。

超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。

表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。

其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。

网页设计与制第4章图文

网页设计与制第4章图文
3．图层 图层就像透明的胶片，每个层都包含一个显示在舞台中 的不同图像，在舞台上一层层地向上叠加，每一张又都保持 独立。在一个图层上绘制和编辑对象，不会影响其他图层上 的对象。当有很多图层时，可以组合出各种复杂的动画效果。 Flash中的图层位于时间轴左侧，如图4-17所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档，文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片，观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式，其原理是在“连续的 关键帧”中分解动画动作，也就是在时间轴的每个关键帧上 逐帧绘制不同的内容，连续播放形成动画。
案例1：制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”，在“属性”面 板上设置笔触颜色为“没有颜色”，设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间，按住键盘上的Shift键的 同时按住鼠标左键拖动，绘制出一个任意大小的正圆，如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S)，弹 出“另存为”对话框，指定文件保存的路径，输入文件名 “小球运动”，保存类型为“Flash 8文档(*.fla)”，如图4-13 所示。

动态网页设计与制作实用教程(第二版)-第4章

动态网页设计与制作实用教程(第二版)-第4章

第4章 动画的基本形式
4.1.4 元件 元件只是一种人为的规范，我们将动画中一些出现频率比较高的物 件对象作用定义以便引用，而这种被定义的物件就是“元件”。元件好 像 被储备起来的演员，随时可调出来扮演角色。使用元件，可以很方便地 对动画元素进行管理与修改，如颜色、亮度、透明度等。而且只需在库 窗口中对元件进行修改，动画中所有被引用的该元件都会发生相应的变 化。 动画制作，文件体积当然越小越好，而使用元件，可以在很大程度 上减小文件体积。如果动画中有很多重复的图形而不使用元件，装载时 就要不断地重复装载图形；如果使用元件，则只需装载一次，以后就可 以通过调用来直接播放了。
第4章 动画的基本形式
本章学习导读 在Flash 8中，动画的制作分为帧动画、移动动画和形 变动画3种基本形式。本章我们将分别讲述有关动画制作的 基本概念和3种动画形式的制作过程，通过本章学习读者应 该掌握以下内容： • 场景、时间轴、帧、元件在动画制作中的作用 • 帧动画、移动动画和形变动画的特点与制作过程
第4章 动画的基本形式
4.2.3 形变动画 创建Flash 8动画，除了上面提到的位置变化外，还有形状变化。形 状变化指的是运动对象的构成进行了重新组合。形变的运动对象与位移动 画相反，必须是打散的实体，否则无法变形。在Flash 8中实现图形变形 的途径有多种，比如：通过选择工具、变形工具、编辑工具等都可以实现 变形
第4章 动画的基本形式
1．新建一个元件 选择“插入/新建元件”菜单（也可以选中场景中已有的图片，利用 “插 入/转换为元件”），弹出“创建新元件”对话框。 2．清除一个元件 在库窗口选中要删除的元件，单击窗口下边框处的删除图标 ；或者 选中元件后，在右键菜单中选择“删除”。 3．拷贝一个元件 选中元件后，在右键菜单中选择 “复制”，并在弹出的窗口中设置 元 件属性。 4．元件的常规属性 元件有颜色、亮度、透明度等特殊效果，而这些效果可以通过属性面 板进行设置。

网页设计与制作第4章 使用图像和媒体

网页设计与制作第4章 使用图像和媒体

4.2.1
教学案例━━五月飞雪
4.2.2
设置背景
在制作网页时，经常需要设置背景图像或背景颜色。设置整个 网页的背景图像或背景颜色，可通过【页面属性】对话框进行。
4.2.3
插入图像
一、通过【选择图像源文件】对话框插入图像。在插入图像时， 有时会弹出【图像标签辅助功能属性】对话框。
4.2.3
插入图像
4.3.7 RM
RM格式是Real Networks公司开发的一种流媒体视频文件格式 （文件扩展名为“.rm”）。RM可以根据网络数据传输的不同速率制 定不同的压缩比率，从而实现低速率的网络进行视频文件的实时传 送和播放。它主要包含Real Audio、Real Video和Real Flash三部分。 这种格式的一个特点是用户使用RealPlayer或RealOnePlayer播放器可 以在不下载音频/视频内容的条件下实现在线播放。RM格式一开始就 定位在视频流应用方面，可以说是视频流技术的始创者。 RM格式的 诞生，使得流文件为更多人所知。这类文件可以实现即时播放，即 先从服务器上下载一部分视频文件，形成视频流缓冲区后实时播放， 同时继续下载，为接下来的播放做好准备。这种“边传边播”的方 法避免了用户必须等待整个文件从网络上全部下载完毕才能观看的 缺点，因而特别适合在线观看影视。RM主要用于在低速率的网上实 时传输视频的压缩格式，它同样具有小体积而又比较清晰的特点。 RM文件的大小完全取决于制作时选择的压缩率。
425图像占位符选择菜单命令插入图像对象图像占位符或者在插入面板的常用类别中单击图像按钮组中的图像占位符或者在插入面板的常用类别中单击图像按钮组中的图像占位符按钮打开图像占位符对话框根据需要设置参数即可
第4 章
使用图像和媒体

网页设计与制作项目4文图应用

网页设计与制作项目4文图应用

设置图像占位符参数
插入图像占位符效果
4.2.3 通过插入鼠标经过图像制作导航条
步骤1 在表格“Table 1”第3行单元格中定位光 标，执行【插入】|【图像对象】|【鼠标经过图像】菜单 命令，弹出【插入鼠标经过图像】对话框，如图所示。
【插入鼠标经过图像】对话框
4.2.3 通过插入鼠标经过图像制作导航条
【选择图像源文件】对话框
4.2.1
插入图像
步骤6 在弹出的【图像标签辅助功能属性】对话框 中，如图所示，单击“确定”按钮。
设置图像标签辅助功能属性
4.2.1
插入图像
步骤 7 在【图像】属性面板中设置图像宽： 210 、高： 90等属性，如图所示；效果如图所示。 步骤 8 用同样的方法在表格“Table 21”的第2列单 元格中插入图像“ banner.gif ”，在【图像】属性面板中 设置宽度为480、高度为90，效果如图所示。
4.3.1
文本的基本操作
2．插入特殊字符 有些特殊符不能直接输入，如§、£、 ¥、 ©等，可以 用以下方法插入特殊字符。 方法一：执行【插入】|【HTML】|【特殊字符】菜单 命令，在弹出的子菜单中选中需要插入的字符名称，如图 所示。如果在子菜单中没有需要的字符，可以执行【其他 字符】命令，打开【插入其他字符】对话框，如图所示。 选中要插入的对象，单击“确定”按钮即可插入字符。
3、5行第1列单元格内输入文本“机票、旅游”。 步骤4 在表格“Table 32”的第2、4、6行第1
列单元格内分别输入文本“热门信息、旅游度假、机 票”。 步骤5 在表格“Table 32”的第2、4、6行第2列 单元格内输入文本“更多……”；在单元格属性面板中
选择【水平】|【右对齐】选项。

DreamweaverCC网页设计与制作标准教程图像与多媒体

检查器名称 图像 ID 图像大小 图像 URL 替换文本 调用编辑软件 编辑图像设置 从源文件更新 CSS 类
锐化 图像预览 边距 原始图像位置 边框宽度 对齐方式 亮度和对比度 裁剪 重新取样
图 4-4
图像【属性】检查器
图像【属性】检查器中的各项参数设置如表 4-1 所示。
表 4-1
图像属性
性 作 用 图像在网页中唯一的标识 图像在水平方向（宽）和垂直方向（高）的尺寸 图像在本地计算机或互联网中的 URL 路径 图像所应用的超链接 URL 地址 当鼠标滑过图像时显示的工具提示信息 调用相关的图像处理软件编辑图像 （例如， PSD 使用 Photoshop， PNG 使用 Fireworks） 在使用相关的图像处理软件编辑图像时所采用的设置项目 如使用的是 PSD 文档输出的图像文件，可将图像与源 PSD 关联，单 击此按钮进行动态更新 图像在网页中可应用的 CSS 样式 选择图像上方的热点链接，并进行移动或其他操作 在图像上方绘制一个矩形的热点链接区域 在图像上方绘制一个圆形的热点链接区域 在图像上方绘制一个多边形的热点链接区域 定义图像与其上方或下方各种网页元素之间的距离 定义图像与其左侧或右侧各种网页元素之间的距离 定义图像所应用的超链接的打开方式 如使用的是 PSD 文档输出的图像文件， 此处将显示 PSD 文档的 URL 路径 定义图像外部的边框宽度 第
第4章
图像与多媒体
在网页中，除了插入文本内容之外，还可以插入图像和多媒体素材内容。由于文本 给人的感觉单调、枯燥，所以通过添加图像和多媒体素材，可以使网页更加生动。 通过插入图像，可以使网页中的文本内容和图像进行混排，并实现图文结合，内容 上更加具有说服力。 而对于多媒体素材，在网页中应用比较广泛，如一些动画广告、动画网页，以及流 媒体视频，还有音乐网站等。 本章学习要点： 插入图像 编辑图像 图像对象操作 插入多媒体

网页设计与制作项目4文图应用68页PPT

网页设计与制作项目4文图应用
11、用道德的示范来造就一、法律是无私的，对谁都一视同仁。在每件事上，她都不徇私情。—— 托马斯
13、公正的法律限制不了好的自由，因为好人不会去做法律不允许的事 情。——弗劳德
14、法律是为了保护无辜而制定的。——爱略特 15、像房子一样，法律和法律都是相互依存的。——伯克
谢谢
11、越是没有本领的就越加自命不凡。——邓拓 12、越是无能的人，越喜欢挑剔别人的错儿。——爱尔兰 13、知人者智，自知者明。胜人者有力，自胜者强。——老子 14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德 15、最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利

《网页设计与制作》第4章课件


如何实现窗口间的关联3-1
如何实现左列导 航，在右面显示 相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？ 如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu

网页设计与制作第4章PPT课件

ID：用于设置HTML 5音频的标题。 源：用于设置HTML 5音频源文件。 Controls：选中该属性，表示显示音频播放控件。 Autoplay：选中该属性，则音频在加载完成后自动播放。 Loop：选中该属性，则音频将循环播放。 Muted：设置音频是否静音。 Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中 “Autoplay”，则忽略该属性。 “Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持 时，打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

4.1 图像格式
4.1.1 GIF图像 4.1.2 JPG/JPEG图像 4.1.3 PNG图像
4.1.1
GIF图像
GIF格式（Graphics Interchange Format，图像交换格式，文件扩 展名为“.gif”）的数据是一种连续色调的无损压缩格式，采用了可变 长度等压缩算法，压缩率一般在50%左右。只要图像不多于256色， GIF格式既可减少文件的大小，又能保持成像的质量。但是GIF格式 不多于256色的限制局限了其应用范围，不适合显示有晕光、渐变色 彩等颜色细腻的图像和照片等。GIF格式最适合显示色调不连续或具 有大面积单一颜色的图像（如图表、按钮、图标、徽标）或其他具 有统一色彩和色调或只需少量颜色的图像（如黑白照片等）。GIF分 为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系 统。动画GIF是将多幅图像保存为一个图像文件，从而形成动画。 GIF格式因其具有图像文件体积小、成像相对清晰、下载速度快、 下载时隔行显示、支持透明色以及多个图像能组成动画的特点，因 此大受欢迎，是一种在网络上使用最早、应用非常广泛的图形文件 格式。目前几乎所有相关软件都支持GIF格式，公共领域有大量的软 件在使用GIF格式图像文件。
4.2.5
图像占位符
选择菜单命令【插入】/【图像对象】/【图像占位符】，或者在【插 入】面板的【常用】类别中单击图像按钮组中的【图像占位符】 按钮，打开【图像占位符】对话框，根据需要设置参数即可。
4.2.1
教学案例━━五月飞雪
将素材文档复制到站点文件夹下，然后根据要求设置 网页背景和插入图像，在浏览器中的显示效果如图4-1所 示。
(1) 设置整个网页的背景图像为“snowbg.jpg”，要求 背景图像纵向和横向都重复。
(2) 依次插入3个JPG格式的图像“snow01.jpg”、 “snow02.jpg”、“snow03.jpg”以及一个PSD格式的图像 “snow04.psd”，替换文本依次为“雪中红花”、 “雪后 森林”、“雪中绿树”、“雪后大地”。
第4 章
使用图像和媒体
图像和媒体与文本一样，是网页制作中不 可缺少的重要元素。图像和媒体不仅可以为 网页增色添彩，还可以更好地配合文本传递 信息。本章将介绍图像和媒体的基本知识以 及在网页中插入图像和媒体的基本方法。
学习目标
了解网页中常用的图像和媒体的基本类型。 掌握插入图像和图像占位符的方法。 掌握插入SWF动画、FLV视频和ActiveX控件 的方法。 掌握设置图像属性和不同媒体属性的方法。
4.1.3
PNG图像
PNG格式（Portable Network Graphics Format，便携式网络图形格式， 文件扩展名为“.png”）。PNG格式设计的目的是试图替代GIF和TIFF文件格 式，同时增加一些GIF文件格式所不具备的特性。 网络通讯中因受带宽制约，在保证图像清晰、逼真的前提下，PNG格 式图像文件体积小，特别适合网络传输。PNG格式文件具有高压缩比，它利 用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不 可能产生颜色的损失，这样就可以重复保存而不降低图像质量。PNG-8格式 与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像。 图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代 表性的颜色编号，每一编号对应一种颜色，图像的数据量也因此减少，这对 彩色图像的传播非常有利。PNG格式图像在浏览器上采用流式浏览，即使经 过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容，然后 再逐渐清晰起来。它允许连续读出和写入图像数据，这个特性很适合于在通 信过程中显示和生成图像。PNG格式可以为原图像定义256个透明层次，使 得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。这 种功能是GIF和JPEG没有的。 PNG格式还支持真彩和灰度级图像的Alpha通 道透明度。 PNG格式对于几乎任何类型的网页图像都是非常适合的，是目前使用 量逐渐增多的图像格式。
二、通过【文件】面板拖曳图像
4.2.3
插入图像
三、通过【资源】面板插入图像
4.2.3
插入图像
ቤተ መጻሕፍቲ ባይዱ
四、插入PSD文件。在Dreamweaver CS6中，可 以直接在网页文档中插入PSD文件，此时将弹出【图 像优化】对话框。
4.2.4
图像属性
图像插入到网页后，不一定完全适合需要，有时还需要进行修饰。 最好使用Photoshop等图像处理软件对图像提前进行处理，不过在 Dreamweaver CS6中，可以通过【属性】面板来设置图像大小，也可以 适度地进行编辑处理操作，使其更符合实际需要。
4.1.2
JPG/JPEG图像
JPG/JPEG格式（Joint Photographic Experts Group，联合图像专 家组文件格式，文件扩展名为“.jpg”或“.jpeg”），是24位的图像文 件格式，也是一种与平台无关的高效率压缩格式。JPG/JPEG标准由 ISO与CCI TT（国际电报电话咨询委员会）共同制定，是面向连续色 调静止图像的一种压缩标准。 JPG/JPEG格式的文件一般有两种文件扩展名：“.jpg”和“.jpeg”， 这两种扩展名的实质是相同的，可以把“.jpg”的文件改名为“.jpeg”， 而对文件本身不会有任何影响。严格来讲，JPEG的文件扩展名应该 为“.jpeg”，但由于DOS系统的8.3文件名命名规则，PC机使用了 “.jpg”的扩展名，而由于Mac系统并不限制扩展名的长度，因此当时 苹果机上都使用了“.jpeg”的扩展名。虽然现在Windows系统也可以 支持任意长度的扩展名了，但大家已经习惯了“.jpg”的用法。这与 HTML网页文档扩展名“.htm”和“.html”的情况是一样的，虽然扩展 名不一样，但实际上是一回事。
4.2.1
教学案例━━五月飞雪
4.2.2
设置背景
在制作网页时，经常需要设置背景图像或背景颜色。设置整个 网页的背景图像或背景颜色，可通过【页面属性】对话框进行。
4.2.3
插入图像
一、通过【选择图像源文件】对话框插入图像。在插入图像时， 有时会弹出【图像标签辅助功能属性】对话框。
4.2.3
插入图像