5.2 插入网页图像

图像在网页中可以以多种形式存在，同时Dreamweaver CC也提供了多种插入图像的方法。下面详细讲解这些图像的插入方法。

5.2.1 实战演练：插入普通图像

如果想要把一幅图像插入网页中，可以使用如下方法来实现。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，将光标设在要插入图像的位置，然后选择【插入】｜【图像】｜【图像】命令，或单击【插入】面板【常用】选项下的【图像】按钮，从弹出的下拉菜单中选择【图像】选项，如图5.1所示。

图5.1 【插入】面板

第3步，打开【选择图像源文件】对话框，从中选择图像文件，单击【确定】按钮，图像即被插入页面中，插入效果如图5.2所示。

图5.2 插入图像效果

技巧：插入普通图像还有其他方法。

（1）从【插入】面板中把【图像】按钮拖到编辑窗口中要插入图像的位置，打开【选择图像源文件】对话框，选择图像即可。

（2）从桌面上把一幅图像拖到编辑窗口中要插入图像的位置。

（3）从【资源】面板中插入图像：选择【窗口】｜【资源】命令（或按F11键），打开【资源】面板（如果没有建立站点，【资源】面板无法使用），单击按钮，然后在图像列表框内选择一幅图像，并将其拖到需要插入该图像的位置即可。

提示：在Dreamweaver CC编辑窗口中插入图像时，在HTML源代码中会自动产生对该图像文件的引用。为确保正确引用，必须要保存图像到当前站点内。如果不存在，Dreamweaver会询问用户是否要把该图像复制到当前站点内，单击【确定】按钮即可。

【拓展】

在HTML中使用“<img src= "图像地址（可以是相对地址和绝对地址）">”标记可以实现插入图像。具体代码如下：

     <img src="images/1.jpg" width="600" height="365" />

<img>标记主要有7个属性：width（设置图像宽）、height（设置图像高）、hspace（设置图像水平间距）、vspace（设置图像垂直间距）、border（设置图像边框）、align（设置图像对齐方式）和alt（设置图像指示文字）。

5.2.2 实战演练：插入鼠标经过图像

鼠标经过图像就是当鼠标移动到图像上时，图像会变成另一幅图，而当鼠标移开时，又恢复成原来的图像，这种行为也称为图像轮换。

鼠标经过图像一般由两幅图像组成：一个是主图像，就是首次载入页面时显示的图像；另一个是次图像，就是当鼠标指针移过主图像时显示的图像。这两个图像应该大小相等，如果这两个图像的大小不同，Dreamweaver CC会自动调整第2幅图像，使之与第1幅图像相匹配。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，将光标设在要插入位置，选择【插入】｜【图像】｜【鼠标经过图像】命令，或者选择【插入】面板【常用】选项中【图像】下拉菜单中的【鼠标经过图像】选项，如图5.3所示。

图5.3 选择【鼠标经过图像】命令

第3步，打开【插入鼠标经过图像】对话框，然后按如下说明进行设置，设置信息如图5.4所示。

图5.4 设置【插入鼠标经过图像】对话框

（1）【图像名称】文本框：为鼠标经过图像命名，如imagel。

（2）【原始图像】文本框：可以输入页面被打开时显示的图形，也就是主图的URL地址，或者单击后面的【浏览】按钮，选择一个图像文件作为原始的主图像。

（3）【鼠标经过图像】文本框：可以输入鼠标经过时显示的图像，也就是次图像的URL地址，或者单击后面的【浏览】按钮，选择一个图像文件作为交换显示的次图像。本例中使用的主图像和次图像如图5.5所示。

图5.5 鼠标经过图像原图

（4）【预载鼠标经过图像】复选框：选中该复选框会使鼠标还未经过图像，浏览器也会预先载入次图像到本地缓存中。这样当鼠标经过图像时，次图像会立即显示在浏览器中，而不会出现停顿的现象，加快网页浏览的速度。

（5）【替换文本】文本框：可以输入鼠标经过图像时的说明文字，即在浏览器中，当鼠标停留在鼠标经过图像上时，在鼠标位置旁显示该文本框中输入的说明文字，如“注册会员”。

（6）【按下时，前往的URL】文本框：输入单击图像时跳转到的链接地址，如http://www.mysite.com/user/。

第4步，设置完毕，单击【确定】按钮，即可完成插入鼠标经过图像的操作。

第5步，切换到【代码】视图，在<head>标签内输入“<style type="text/css">”标签，定义一个内部样式表，设计一个样式，清除图像边框样式，避免当图像定义超链接后，显示粗边框效果，代码如下所示。

     <style type="text/css">
     img { border:none;}
     </style>

第6步，按F12键，在浏览器中预览效果，如图5.6所示。当鼠标经过按钮图像时，会切换成另一个图像，显示下边线效果。

图5.6 鼠标经过图像效果

5.2.3 实战演练：插入图像占位符

图像占位符是指没有设置src属性的<img>标签。在编辑窗口中默认显示为灰色空白，在浏览器中浏览时显示为一个红叉，如果为其指定了src属性，则该图像占位符就会立即显示该图像，在【属性】面板中还可设置它的宽、高、颜色等属性。

图像占位符的作用：在团队开发中，网页制作者可先不用关注所插入图像内容是什么，图像内容由后台程序在后期自动完成，这样极大提高了网页制作效率。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，将光标设在要插入位置，选择【插入】｜【图像】｜【图像】命令，打开【选择图像源文件】对话框，随意选择并插入一幅图像。

第3步，选中插入的任意图像，在【属性】面板中清除【Src】文本框中的值，此时插入的图像就变成一幅图像占位符，显示灰色区域和该区域的大小，如图5.7所示。

图5.7 插入图像占位符

第4步，可以根据需要，在【属性】面板中设置图像占位符的基本属性，简单说明如下。

（1）【ID】文本框：为了方便引用和记忆，为图像占位符起一个名称。

（2）【宽】和【高】文本框：可设置图像占位符的宽度和高度，图像占位符上将显示宽度和高度的值。

（3）【颜色】选项：可为图像占位符定义一个颜色，以方便显示和区分不同位置的占位符。

（4）【替换】文本框：在该文本框中可以输入图像替换文本。在浏览器中，当图像无法显示时，会显示该标题文本。

（5）【标题】文本框：在该文本框中可以输入图像占位符的说明文字。在浏览器中，当鼠标停留在图像占位符上时，在鼠标位置旁将弹出该文本框中的说明文字。

（6）【Src】文本框：设置图像占位符的源文件，选择一幅图像后，图像占位符就失去了存在的意义，相当于直接插入一幅图像。

（7）【链接】文本框：为图像占位符设置链接，这与真实的图像没有区别，链接包括内部链接和外部链接，直接输入网址或者从文件中选择页面即可。

（8）【目标】文本框：设置访问的链接网页打开的方式。

（9）【Class】下拉列表：为图像占位符设置一种CSS类样式。

（10）【创建】按钮：单击该按钮可以启动Adobe Fireworks生成PNG图像。

第5步，【属性】面板中这些选项不是必选项，用户可根据需要酌情设置。例如，设置如图5.8所示属性，则预览时效果显示如图5.8所示。

图5.8 插入图像占位符效果

5.2.4 实战演练：插入Fireworks HTML

Fireworks HTML对象就是使用Fireworks制作的网页，Dreamweaver和Fireworks结合比较紧密，利用Fireworks快速绘制网页图像，然后输出为Fireworks HTML对象，在Dreamweaver中可以直接导入Fireworks HTML对象，即可完成制作精美的网页。

【操作步骤】

第1步，启动Fireworks，使用Fireworks设计一个页面或者栏目板块，然后导出为HTML文档格式，如图5.9所示。

图5.9 设计并输出Fireworks HTML

第2步，启动Dreamweaver CC，新建文档，保存为test.html。

第3步，选择【插入】｜【图像】｜【Fireworks HTML】命令，打开【插入Fireworks HTML】对话框，如图5.10所示。

图5.10 【插入Fireworks HTML】对话框

第4步，在【Fireworks HTML文件】文本框中可以输入要插入的Fireworks HTML文件地址，或者单击后面的【浏览】按钮，直接选择一个Fireworks HTML文档。如果选中【插入后删除文件】复选框，则操作完毕后会将原始的Fireworks HTML文件删除。

第5步，单击【确定】按钮，即可在Dreamweaver中插入Fireworks HTML文件。

上一章目录下一章