- Dreamweaver+ASP动态网页设计从新手到高手
- 徐洪峰
- 1105字
- 2021-04-05 05:58:13
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所示。