2.3 插入图像

图像是网页中最重要的元素之一,美观的图像会为网站增添生命力,同时加深用户对网站风格的印象。

在网页中插入图像的效果如图2-13所示,具体操作步骤如下。

图2-13 插入图像的效果

01 打开网页文档,如图2-14所示。

图2-14 打开网页文档

02 将光标置于要插入图像的位置,执行“插入”|Image命令,如图2-15所示。

图2-15 执行Image命令

高手支招

使用以下方法也可以插入图像。

■ 执行“窗口”|“资源”命令,打开“资源”面板,在面板中单击“图像”按钮,展开图像文件夹,选定图像文件,然后用鼠标拖动到网页中合适的位置。

■ 单击“常用”插入栏中的“图像”按钮,弹出“选择图像源文件”对话框,从中选择需要的图像文件。

03 弹出“选择图像源文件”对话框,在对话框中选择图像images/xiaoguo01a.jpg,如图2-16所示。

04 单击“确定”按钮,插入图像,如图2-17所示。

图2-16 “选择图像源文件”对话框

图2-17 插入图像

提示

如果选中的文件不在本地网站的根目录下,则弹出提示对话框,要求用户复制图像文件到本地网站的根目录下,单击“是”按钮,如图2-18所示,会弹出“复制文件为”提示框,让用户选择文件的存放位置,可选择根目录或根目录下的任何文件夹,这里建议新建一个名称为images的文件夹,今后可以把网站中的所有图像都放入到该文件夹中。

图2-18 提示对话框

指点迷津

如何加快页面图片的下载速度?

如果首页图片过少,而其他页面图片过多,为了提高效率,当访问者浏览首页时,后台进行其他页面图片的下载。方法是在首页加入<img src=“tiantao.jpg” width=0 height=0>,其中width和height要设置为0,tiantao.jpg为提前下载的图片名。

05 选中图像,单击鼠标右键,在弹出的快捷菜单中执行“对齐”|“右对齐”命令,如图2-19所示。

图2-19 设置图像的对齐方式

06 执行命令后,效果如图2-20所示。在“属性”面板中也可以设置图像的属性。

图2-20 图像的对齐效果

知识要点

图像的“属性”面板中主要有以下参数。

■ 图像:设置图像的名称。

■ Src:指定图像的具体路径。单击按钮选择源文件或直接输入。

■ 链接:为图像设置超级链接。可以单击按钮选择要链接的文件,或直接输入URL路径。

■ 目标:链接时的目标窗口或框架。在其下拉列表中包括以下选项。

_blank:将链接的对象在一个未命名的新浏览器窗口中打开。

_parent:将链接的对象在含有该链接的框架的父框架或父窗口中打开。

_self:将链接的对象在该链接所在的同一框架或窗口中打开。_self是默认选项。

_new:将链接的对象在一个新浏览器窗口中打开。

_top:将链接的对象在整个浏览器窗口中打开,因而会替代所有框架。

■ 替换:图片的注释。当浏览器不能正常显示图像时,便在图像的位置用这个注释代替图像。

■ 编辑:启动“外部编辑器”首选参数中指定的图像编辑器,并使用该图像编辑器打开选定的图像。

■ 原始:指定在载入主图像之前应该载入的图像。

07 保存文档,按F12键在浏览器中预览效果,如图2-13所示。