04图象操作.ppt

《04图象操作.ppt》由会员分享，可在线阅读，更多相关《04图象操作.ppt（44页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、主讲：房亚东西安工业大学 83208212（O）网页常用的图形文件格式网页常用的图形文件格式 GIFGIF、JPEGJPEG、PNGPNG网页上的图形文件是以GIF、JPEG为主，而PNG则有逐渐普用的趋势。4.1 4.1 图像的基本格式图像的基本格式GIFGIF图形文件格式图形文件格式GIF(Graphics Information Format)自1987年提出迄今为止，陆续有3种规格产生GIF87a、GIF89a、GIF24，其中GIF87a和GIF89a采用的是名叫LZW的非失真压缩技术，因此，GIF图形文件虽然经过压缩，却不会造成失真的现象。JPEGJPEG图形文件格式图形文件格式J

2、PEG是由Joint Photographic Expert Group所发展，这个组织发展JPEG格式主要的目的是要存储照片。由于照片通常为实物或风景，因此，JPEG支持24-bit真彩色（即166，777，216色）。PNGPNG图形文件格式图形文件格式PNG（Portable Network Graphics可携式网络图片）支持48-bit真彩色和65，536层的透明阶层效果，同时采用比GIF更有效率的非失真压缩技术。缺点是图形文件大小比GIF、JPEG图形文件大，不支持动画。GIF、JPEG、PNG比较表比较表可可存储的颜色数存储的颜色数压缩技术压缩技术透明色系透明色系动画动画扩展名扩

3、展名8-bit非非失真压缩失真压缩支持支持支持支持.gif24-bit失真压缩失真压缩不支持不支持不支持不支持.jpeg .jpg48-bit非非失真压缩失真压缩支持支持不支持不支持.pngGIFJPEGPNG 图像是网页制作中最常用的元素，灵活使用图像会使网页更加亮丽。Dw无法创建和生成图像，因此，使用Dw向创建的网页中插入图像时，应先准备好所需的图像。插入图像 插入图像基本操作:插入图像占位符:插入互动图像：导航条：图像面板属性解释：图像名称：在动态网页中，为方便在JavaScript等脚本语言中对图像的引用，需为图像设置名称，如果该图像没有在脚本中引用，可以不设置图像名称图像大小：图像尺

4、寸，可输入数值改变图像大小源文件：图像文件所在的目录及名称，可以点击后面的文件夹按纽，选择新的图像来替换现在的图像链接：指定图像的超链接边框；可以设置边框的粗细，以象素为单位。当边框值为零时，没有边框 替代：设置图像的说明性文字，当浏览者在鼠标移向该图像时显示提示信息；还可以在浏览者关闭了图像显示功能时，在图片位置上显示这些文字，以便浏览者了解图像的内容热点工具：可以建立一个区域，当鼠标点击时可以链接到目标网页编辑：编辑图像的工具图像的边距：设置图像相对于编辑窗口或文本等的间隔目标：设置链接网页载入时的目标窗口或框架低解析度源：设置低分辨率的图像。在图像被下载之前，先载入低分辨率的图像，以便使

5、浏览者及早地了解图像的信息对齐：设置图像垂直对齐方式与一段文字的绕排方式，有以下的取值：默认值：一般浏览器默认方式是基线对齐方式 基线：基线对齐方式是使图像的底部与文字的基线对齐 顶端：使图像的顶部与当前行中最高对象的顶部对齐 居中：图像的中间与当前的基线对齐底部：底部对齐方式与基线对齐方式基本相同文本上方：图像的顶部与当前行中最高的文字顶部对齐绝对居中：图像的中间与当前文字或对象的中间对齐绝对底部：图像的底部与当前文字或对象的绝对底部对齐左对齐：文字在图像的右端自动回行右对齐：文字在图像的左端自动回行对齐方式：设置图象水平对齐方式：指的是图像与其所在的段落的对齐 为了确保此引用的正确性，该图

6、像文件必须位于当前站点中。如果图像文件不在当前站点中，询问是否要将此文件复制到当前站点中。将插入点放置在您要显示图像的地方，执行以下操作之一：在“插入”栏的“常用”类别中，单击“图像”图标选择“插入”“图像”将图像从“资源”面板（“窗口”“资源”）拖到“文档”窗口中的所需位置；然后跳到第3 步将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第3 步在出现的对话框中执行下列操作之一：选择“文件系统”以选择一个图形文件 选择“数据源”以选择一个动态图像源浏览以选择要插入的图像或内容源在“替换文本”和“详细描述”文本框中输入值，然后单击“确定”(“首选参数”-辅助功能-图像)4.2 4.2

7、 插入图像基本操作插入图像基本操作实例1：插入图片，宽度400，高度280，垂直居中对齐插入图片，宽度插入图片，宽度400，高度，高度280，垂直居中对齐，垂直居中对齐图片插入例子图片插入例子 这是使用这是使用img插入的图片插入的图片 Dreamweaver使用方法：使用方法：p代码试图中输入代码试图中输入p“插入插入”“标签标签”，选择，选择“html标签标签”，选择，选择“img”实例2：将图片设置为背景图片背景的使用爱情是什么 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面；老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住 自己的喷嚏和鼻涕；朋友说：爱情是只啁

8、啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。实例3：视频的插入在标记在标记img中使用属性中使用属性dynsrc,可以在网页在加入视频可以在网页在加入视频程序代码如下程序代码如下:html loop=2实例4：标志embed的使用使用标志使用标志embedembed可以实现在网页中插入声音可以实现在网页中插入声音,视频视频,动画等效果动画等效果.语法语法:在网页中插入音频在网页中插入音频 html=hope.mp3 width=400 height=180实例5：网页中FLASH动画的插入 html=11.swf width=480 height

9、=320实例5：背景音乐的插入语法语法:在网页中设置背景音乐在网页中设置背景音乐,次数为无限次：次数为无限次： 曾经有一份真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫及,尘世间最痛苦的事情莫过于此。如果上天能给我一个机会再来一次的话，我会对那个女孩说，我爱你，如果非要给这个回答一个期限，我希望是，一百万年！图像占位符是在准备好将最终图形添加到Web 页之前使用的图形若要插入图像占位符，请执行以下操作：4.3 4.3 插入图像占位符插入图像占位符“文档”窗口中，将插入点放置在要插入占位符图形的位置执行下列操作之一：在“常用”插入栏中，单击“图像占位符”图标 选择“插入”“图

10、像占位符”在该对话框中，为图像占位符选择选项可以设置占位符的大小和颜色，并为占位符提供文本标签单击“确定”占位符的颜色、大小属性和标签如下所示：可以在页面中插入鼠标经过图像。鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。4.4 4.4 创建鼠标经过图像创建鼠标经过图像开始前，选用一对或多对图像用于鼠标经过图像使用两个图像文件创建鼠标经过图像：主图像（当首次载入页时显示的图像）次图像（当鼠标指针移过主图像时显示的图像）鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性若要创建鼠标经过图像，

11、请执行以下操作：在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置使用以下方法之一插入鼠标经过图像：在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标在“插入”栏中，选择“常用”，然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置 选择“插入”“图像对象”“鼠标经过图像”导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。4.5 4.5 导航条导航条导航条项目有四种状态：一一般般：用户尚未单击或尚未与此项目交互时所显示的图像，此种状态的项目看起来未被单击过滑滑过过：指鼠标指针滑过“一般”图像时所显示的图像。

12、项目的外观发生变化（例如变得更亮），以便让用户知道可与这个项目进行交互。按下：按下：指项目被单击后所显示的图像例如，用户单击某项目后，载入一个新的页面，而导航条仍然显示，只是被单击的项目变暗，表示它曾被选择过。按按下下时时鼠鼠标标经经过过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。不不必必包包含含所所有有这这四四种种状状态态的的导导航航条条图图像像；例例如如，可可以以只只选选用用“一一般般”和和“按下按下”这两种状态。这两种状态。插入导航条插入导航条插入导航条时，须命名导航条项目，并选择要用于它们的图像插入导航条时，须命名导航条项目，并选择要用于它们的图像执行下列操作之一：选

13、择“插入”“图像对象”“导航条”在“插入”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮注意：一个页面只能插入一个导航条注意：一个页面只能插入一个导航条 修改导航条修改导航条 为为文文档档创创建建导导航航条条后后，可可使使用用“修修改改导导航航条条”命命令令向向导导航航条条添添加加图图像，或从导航条中删除图像像，或从导航条中删除图像执行下列操作之一：选择“修改”“导航条”在“导航条项目”列表中，选择要编辑的项目注注意意：浏浏览览文文件件时时，可可直直接接选选择择本本地地文文件件，但但不不能能选选择择站站点点内内资资源源，但配置远程站点后可以选择但配置远程站点后可以选择如何设置图像

14、映射？如何设置图像映射？图像映射有服务器端（Server-side）和客户端（Client-side）两种类型，其中的差别在于，当浏览者按下图像映射上的热点（Hot Spot）时，前者是由服务器来决定热点所链接的文件，而后者则是由浏览器来决定热点所链接的文件。客户端图像映射有下列几个优点：客户端图像映射有下列几个优点：由浏览器来决定热点所链接的文件，无须通过网络询问服务器，所以处理速度较快。4.6 4.6 使用图像地图使用图像地图使用者可以在本机电脑测试图像映射的各个热点能否运行，而不必等到上传至服务器之后再测试。当浏览者将光标移到图像映射上的热点时，浏览器的状态栏会显示热点所连接的文件URL

15、，若是服务器端图像映射，则只会显示图像映射的坐标。2、定义图像映射上的各个热点、定义图像映射上的各个热点HTML支 持 圆 形（Circle）、矩 形(Rectangle)和多边形(Polygon)3种热点形状，我们可以利用影像处理软件（PhotoImpact）来表示热点的位置。1、绘制要作为图像映射的图片、绘制要作为图像映射的图片使用图像地图的步骤：使用图像地图的步骤：圆圆形形：如欲定义圆形热点，必须找出其圆心坐标及半径（以像素点为单位）。矩矩形形：利用图像处理软件在图片上画出矩形热点，然后将光标分别移到矩形的左上角及右下角，再分别记录其坐标。多多边边形形：利用图像处理软件在图片上画出多边形

16、热点，然后将光标分别移到多边形的各个角点，再依顺时针或逆时针方向记录其坐标。图：热点标记图：热点标记圆形热点矩形热点多边形热点3、在、在HTML文件中建立图像映射文件中建立图像映射使用使用标记标记属 性：标 记 含 有 CLASS、ID、STYLE、NAME=“”等属性，其中NAME属性可以用来指定图像映射的名称，以供标记的USEMAP属性使用。标记标记这个标记的用途是描述浏览器端图像映射的热点相关信息。属性：属性：ALT=“”ALT=“”指定热点的替代显示文字HREF=“URL”HREF=“URL”指定热点所连接的文件举例说明：1.定义图像映射的名称在HTML文件的标记中间加入标记，并使用N

17、AME属性指定图像映射的名称。设置图像映射2.标记定义图像映射上和圆形、矩形、多边形3个热点，热点定义完毕之后，我们加上语句，表示图像映射上其余的部分均没有链接任何文件。圆心的坐标及半径圆心的坐标及半径矩形的左上角及右下角坐标矩形的左上角及右下角坐标多边形的各个角点坐标多边形的各个角点坐标3、建立图片与图像映射的关联、建立图片与图像映射的关联在我们将图像映射的名称及各个热点定义完毕之后，我们可以在这些定义的上方加上插入图片的语句，然后利用标记的USEMAP属性指定图片所使用的图像映射名称，而且名称之前一定要记得加上#符号。在之下加入：当光标移到热点并按下时，会先显示热点的形状，然后打开所链接的

18、文件。热点形状 图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。p 在在Dreamweaver插入客户端图像地图插入客户端图像地图 在插入客户端图像地图时，请创建一个热点，然后定义用户单击此热点时所打开的链接。执行下列操作之一：在“文档”窗口中，选择图像在属性检查器中，单击右下角的展开箭头，查看所有属性在“地图名称”文本框中为该图像地图输入唯一的名称注注意意：如如果果在在同同一一文文档档中中使使用用多多个个图图像像地地图图，要要确确保保每每个个地地图图都都有有唯唯一一名称名称若要定义图像地图区域，请执行下列操作之一：注意：可以创建

19、多个热点，但它们是同一图像地图的一部分n 选择圆形工具，并将鼠标指针拖至图像上，创建一个圆形热点n 选择矩形工具，并将鼠标指针拖至图像上，创建一个矩形热点n 选择多边形工具，在各个顶点上单击一下，定义一个不规则形状的热点。然后单击箭头工具封闭此形状创建热点后，出现热点属性检查器 完成热点属性检查器中的有关内容 完成绘制图像地图后，在该文档的空白区域单击，以便更改属性检查器p 修改图像地图修改图像地图对在图像地图中所创建的热点进行编辑很容易，可以：对在图像地图中所创建的热点进行编辑很容易，可以：p 移动热点移动热点p 调整热点大小调整热点大小p 在层之间向上或向下移动热点在层之间向上或向下移动热

20、点p 还可以将含有热点的图像从一个文档复制到其它文档还可以将含有热点的图像从一个文档复制到其它文档p 复制某图像中的一个或多个热点，然后将其粘贴到其它图复制某图像中的一个或多个热点，然后将其粘贴到其它图像上，这样就将与该图像关联的热点也复制到了新文档中像上，这样就将与该图像关联的热点也复制到了新文档中p 若要选择图像地图中的多个热点，请执行以下操作：若要选择图像地图中的多个热点，请执行以下操作：使用指针热点工具选择一个热点：使用指针热点工具选择一个热点：执行下列操作之一：执行下列操作之一：按下按下Shift 键的同时单击要选择的其它热点键的同时单击要选择的其它热点 按按Control+A（在（

21、在Windows 中）选择所有的热点中）选择所有的热点p 若要移动热点，请执行以下操作：若要移动热点，请执行以下操作：使用指针热点工具选择要移动的热点。使用指针热点工具选择要移动的热点。执行下列操作之一：执行下列操作之一：将此热点拖动到新区域将此热点拖动到新区域 用用Shift+箭头键将热点向选定方向一次移动箭头键将热点向选定方向一次移动10 个像素个像素 使用箭头键将热点向选定方向一次移动使用箭头键将热点向选定方向一次移动1 个像素个像素p 若要调整热点的大小，请执行以下操作：若要调整热点的大小，请执行以下操作：指针热点工具选择要调整大小的热点指针热点工具选择要调整大小的热点 拖动热点选择器手柄，更改热点的大小或形状拖动热点选择器手柄，更改热点的大小或形状总结 本节主要介绍图像的运用。图像在网页设计和制作中起到画龙点睛的作用。在网页中适当地运用图像可以避免文字排版的单调，使结构更加合理 v exercises exercises插入图片及设置图片属性热点的设置(图像映射的操作)制作一个导航条页面用某图片做背景在页面插入声音在页面插入视频