2.3.1插入并编辑图像

2.3.1　插入并编辑图像

网页中使用图像的常用格式有jpeg、gif、png等，其中jpeg图像(文件扩展名为.jpg)压缩比较高、图像质量也较好，gif图像(文件扩展名为.gif)具有文件较小、支持透明背景和动画等特性。jpeg图和gif图在网页中应用最广。大图一般采用jpeg图，小图或需要支持透明背景、动画的就使用gif图。

1. 插入图像

一般情况下，先把要插入的图像放到站点的图像文件夹(如images文件夹)中；然后在网页中插入表格对网页内容进行安排，确保网页已经保存在站点文件夹中；最后再把图像插入到表格的单元格内。

使用菜单插入图像的步骤如下：

(1)将光标置于需要插入图像的位置；

(2)选择“插入”−>“图像”菜单命令，或者在“插入”面板中单击按钮，弹出“选择图像源文件”对话框，在此对话框中选择合适的图像，单击“确定”按钮即可。

注意：为保证图像能正常显示，应在插入图像前做两件事：一是把图像放入站点目录的图像文件夹内；二是把网页保存在站点文件夹下。

2. 图像属性编辑

选择图像，可以通过“属性”面板来修改图像的属性，图像的属性有基本属性的扩展属性，默认只打开图像的基本属性。单击属性面板右下角的按钮(Dreamweaver窗口要足够宽才能显示该按钮)，可以打开扩展属性；打开扩展属性时，再单击右下角的按钮，扩展属性即收缩起来。图像及其属性面板如图2-22所示，图像的基本属性和扩展属性都可显示出来。

图2-22　图像的属性

1)图像的基本属性

图像的基本属性主要有以下几方面。

(1)设置“宽”、“高”属性改变图像的大小。

(2)通过设置“源文件”来选择图像。

(3)“替换”的含义为：当浏览网页时把光标放在图像上会显示文字提示，如图2-22设置图像替换文字，则浏览时，光标放在图片上会显示文字“Cs3C60分子结构”；当图像不能正常显示时，显示一个红X的同时，把替换文字显示在红X的边上。

(4)“类”就是为图像应用已经定义了的样式。

(5)“链接”处输入新目标URL，含义为，单击图像时，可以打开新目标URL网页或其他文件，第1章已学习过超链接的含义。当新目标URL是浏览器能打开链接的文件(如gif图像、HTML网页等)时，用浏览器打开此文件；当链接的新目标URL文件浏览器不能打开(如压缩文件RAR等)时，则弹出下载对话框，用户可以下载该文件。

(6)“编辑”就是使用该图像默认的编辑器来编辑它。

2)图像的扩展属性

图像的扩展属性主要有以下几方面。

(1)“垂直边距”和“水平边距”用于确定图像上下、左右间距。

(2)简单图像处理工具中的“边框”用于给图像加一个指定宽度的边框，后面几个工具按钮依次是裁剪、重新取样、亮度和对比度、锐化。使用这几个工具按钮，可以对插入进来的图像进行简单的处理，与第1章所讲的图像滤镜完全不同，这些处理会实质性地改变图像文件。例如，给图2-22所示的图形添加边框、进行裁剪和锐化，结果如图2-23所示。

图2-23　图像边框、裁剪和锐化

(3)热点工具按钮用于设置图像的热点区域，热点主要用于链接。图2-24所示的图像设置了3个热点区域，每个热点区域都可以单独做一个链接。

(4)“对齐”属性用于指定图像在网页区域的左右、上下对齐方式。

其他一些不常用的图像属性，请自行练习。

图2-24　图像的热点区域

3. 图像占位符的使用

图像占位符是在准备好将最终图形添加到网页之前使用的图形，在网页布局时常常用到。可以设置占位符的大小、颜色，并为占位符提供文本标签。

1)插入图像占位符

在文档窗口中，将光标置于要插入点的位置，选择“插入”−>“图像”−>“图像占位符”命令，或者在插入面板中单击图像下拉按钮，再选择。

在“图像占位符”对话框的名称文本框中输入占位符名称(以字母开头，也可不输)，宽度、高度、颜色等，如图2-25(a)所示。这样就插入了一个图像占位符。用同样的方法，连续插入几个图像占位符，如图2-25(b)所示。

图2-25　图像占位符的插入与替换

2)替换图像占位符

根据图像占位符的尺寸，用Fireworks或Photoshop等软件制作相应大小的图像，然后在Dreamweaver中替换它。替换图像占位符，执行下列操作：选择图像占位符，然后在属性面板中单击“源文件”框旁的文件夹图标，或者双击占位符，将出现“选择图像源文件”对话框，在该对话框中选择要替换占位符的图像，然后单击“确定”按钮。

4. 图像应用CSS样式

图像属性面板(见图2-22)中有“类”这个栏目，这是为图像选择CSS样式而设计的。图像对象可以应用标签(img)样式、ID样式、类样式，可以将样式单独定义再应用，也可以直接在img标签里定义并应用样式。

例如，在CSS样式面板中单击“新建”按钮，新建一个样式类，类名“.imageclass1”，“规则定义”选择“仅限该文档”，单击“确定”按钮，在“CSS规则定义”对话框的“分类”−>“扩展”−>“Filter”下选择“FlipH”命令，单击“确定”按钮，即建好了样式类.imageclass1。

切换到“代码”视图，在head头部的style样式定义元素内可看到如下代码：

.imageclass1 {

filter: FlipH; }

在网页中插入一张图片，如图2-26(a)所示。网页代码如下：

<img src="iamges/tiane.jpg" />

选择该图，在属性面板的“类”属性下拉列表中选择“.imageclass1”，切换到“代码”视图，可以看到如下代码：

<img src="iamges/tiane.jpg" class="imageclass1" />

保存文件。按F12键预览，效果如图2-26(b)所示。这是水平镜像的滤镜效果。

相似地，定义一个样式类.imageclass2，与.imageclass1不同之处，只在“Filter”下选择Xray滤镜，其他相同。给原图应用“.imageclass2”样式类，保存后，预览效果如图2-26(c)所示，这是X射线透射的滤镜效果。

图2-26　图像应用CSS样式

再新建一个名为“.imageclass3”样式类，在“CSS规则定义”对话框的“分类”−>“边框”的“style”下拉列表中选择“Double”(双边框)，并勾选“全部相同”(指上、下、左、右相同)；在“color”下设置颜色为#F00，并勾选“全部相同”。单击“确定”按钮，即建好了“.imageclass3”样式类。

将样式类.imageclass3应用于图2-26(a)所示的图像，切换到“实时”视图，预览效果如图2-26(d)所示。

可应用于图像的CSS样式还有很多，这里只是举了几例，其余的大家自己练习。

注意：将滤镜样式应用于图像时，在“实时”视图下将看不到滤镜的效果，只有在浏览器中才能预览到滤镜效果，其他样式(如加边框样式)则可以在“实时”视图中预览到样式的效果。将CSS样式应用于图像，只是改变了图像在浏览器的显示样式，图像原文件并未发生变化。