- Dreamweaver+jQuery移动网页设计从新手到高手
- 张雪玲 刘琳
- 1434字
- 2021-04-04 00:02:08
3.2 在网页中插入图像
前面介绍了网页中常见的3种图像格式，下面就来学习如何在网页中插入图像。在插入图像前，一定要有目的地选择图像，最好运用图像处理软件对图像进行美化，否则插入的图像可能会不美观。
3.2.1 插入普通图像
图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也会加深人们对网站的印象。下面通过如图3-1所示的实例讲述在网页中插入图像方法，具体操作步骤如下。
图3-1
01打开网页文档，如图3-2所示。
图3-2
02将光标置于要插入图像的位置，执行“插入”|images命令，弹出“选择图像源文件”对话框，在该对话框中选择图像tu.jpg，如图3-3所示。
图3-3
03单击“确定”按钮，插入图像，如图3-4所示。
★提示★
如果选中的文件不在本地网站的根目录下，则弹出如下图所示的对话框，系统要求用户复制图像文件到本地网站的根目录，单击“是”按钮，此时会弹出“拷贝文件为”对话框，让用户选择文件的存放位置，可选择根目录或根目录下的任何文件夹，这里建议新建一个名称为images的文件夹，今后可以把网站中的所有图像都放入该文件夹中。
图3-4
★高手支招★
使用以下方法也可以插入图像。
· 执行“窗口”|“资源”命令，打开“资源”面板，在该面板中单击
按钮，展开图像文件夹，选定图像文件，然后拖至网页中合适的位置。
· 单击HTML插入栏中的
按钮，弹出“选择图像源文件”对话框，在该对话框中选择需要的图像文件。
3.2.2 插入鼠标经过图像
“鼠标经过图像”就是，在浏览器中查看网页时，当鼠标指针经过图像时，该图像就会变成另外一幅图像；当鼠标移开时，该图像又会恢复原来的图像。这种效果在Dreamweaver中可以非常方便地做出来。
鼠标未经过图像时的效果如图3-5所示，当光标经过图像时的效果如图3-6所示，具体操作步骤如下。
01打开网页文档，如图3-7所示。
图3-5
图3-6
图3-7
02将光标置于插入鼠标经过图像的位置，执行“插入”|HTML|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图3-8所示。
图3-8
★知识要点★
“插入鼠标经过图像”对话框中可以进行如下设置。
· 图像名称：设置鼠标经过图像的名称。
· 原始图像：鼠标经过图像的原始图像，在其后的文本框中输入此原始图像的路径，或单击“浏览”按钮，打开“原始图像”对话框，在该对话框中选择图像。
· 鼠标经过图像：用来设置鼠标经过图像时，原始图像替换成的图像。
· 预载鼠标经过图像：选中该复选框，网页打开时就预下载替换图像到本地硬盘。当鼠标经过图像时，能迅速切换到替换图像；如果取消该选项，当鼠标经过该图像时才会下载替换图像，效果可能会出现不连贯的现象。
· 替换文本：用来设置图像的替换文本，当图像不显示时，显示这个替换文本。
· 按下时，前往的URL：用来设置鼠标经过图像应用的超链接。
★提示★
在HTML插入栏的菜单中执行“鼠标经过图像”命令
，弹出“插入鼠标经过图像”对话框，也可以插入鼠标经过图像。
03单击“原始图像”文本框右侧的“浏览”按钮，在弹出的“原始图像：”对话框中选择相应的图像，如图3-9所示，单击“确定”按钮。
图3-9
04单击“鼠标经过图像”文本框右侧的“浏览”按钮，在弹出的“鼠标经过图像：”对话框中选择相应的图像，如图3-10所示。
05单击“确定”按钮，如图3-11所示。
06单击“确定”按钮，插入鼠标经过图像，如图3-12所示。
图3-10
图3-11
★提示★
在插入鼠标经过图像时，如果不为该图像设置链接，Dreamweaver将在HTML源代码中插入一个空链接＃，该链接上将附加鼠标经过的图像行为，如果将该链接删除，鼠标经过图像将不起作用。
图3-12
07保存文档，按F12键在浏览器中预览，鼠标未经过图像时的效果如图3-5所示，鼠标经过图像时的效果如图3-6所示。