网页图像及其属性

网页中的图像及其属性

导入语：网页中有图像才显得生动，并且图像还具有直观、生动的特点。图像还可以跨越语言的差异，但图像的增加会使网页的下载时间大大增加，所以设计网页要考虑图像的数量和大小。网页中的图片格式有：GIF格式：一般用于标题或卡通，可以有效利用透明像素。

JPEG/JPG格式：全彩的影像压缩格式，可以选择不同的压缩比率。PNG格式：Fireworks固有的格式，图片的透明度可以自由更改。

图像也和文本一样有自己的属性，如名称、对齐、边框等。

主要内容：

网页中的图像

图像属性

2.3 网页中的图像

2.3.1 插入普通图像

1、插入式图像

方法：【文件】|【常用】|【图像】，选择图片即可插入到网页中。

2、占位图像

占位图像是在有了整体构图，但图像还没有准备好时使用，发布之前要用图像代替。

方法：【文件】|【常用】|【图像占位符】，会弹出以下对话框，以输入名称、大小、颜色和替换文本。

替换文本是用来简要说明图片的文字。

用图像替换占位符时应该确保图像与占位符同样大小。

2.3.2 插入背景图像

该方式显示的图像不影响文本的输入及其他元素的创建。

方法：【属性】|【页面属性】|【背景图像】

背景图像会覆盖背景颜色，但如果背景图像为透明，则显示背景颜色。

2.3.3 插入鼠标经过图像

方法：【插入】|【常用】|【鼠标经过图像】，设置图像名称、原始图像、鼠标经过图像、替换文本及链接（链接可以不设置）。

2.3.4 插入导航条

导航条的作用，显示网站主要栏目，并实现栏目的跳转。

方法：【插入】|【常用】|【导航条】，设置如图参数。

导航元件：添加的项目。

项目名称：可为栏目名称，也可以是默认名称。

状态图像：最初的图像。

鼠标经过图像：鼠标指针在上停留或滑过的图像。

按下图像：鼠标单击时的图像。

替换文本：鼠标停留时显示的简要说明。

按下时，前往的URL：链接文件的路径。

预载图像：下载网页时下载图片，否则会有延时。

插入：插入方式为垂直插入还是水平插入。

使用表格：用表格方式插入导航条项目。

加号、减号：添加或减少一个项目。

修改导航条的方法：【修改】|【导航条】。

2.3.5 插入分层图像

1、插入PSD格式图像同普通图像。

2、将Photoshop选区图像复制到网页中，使用复制粘贴的方法。

3、将Photoshop切片图像复制到网页中，使用复制粘贴的方法。

2.4 图像属性

2.4.1 图像基本属性

选择图像，【属性】面板显示相应的格式属性。各选项名称及功能如下：

图像名称：区别网页中不同的图像。

宽和高：图像显示在网页中的大小。

源文件：显示的图片名称。

链接：设置为链接图片时的文件路径。

对齐：左对齐、居中、右，相对于文本的各种对齐。

替代：说明性文本，可让用户决定是否等待图片下载。

其它功能为创建热点链接时使用。

2.4.2 图像编辑功能

编辑：启动外部软件编辑。

裁剪：裁剪不必要的部分。

亮度和对比度：修改亮度及对比度。

锐化：调整图像清晰度。

课堂练习：

见书2.6 制作网页导航条、2.7 制作图文并茂的童话故事。

小结：

本节课主要学习在网页中添加图片和设置其属性，主要学习普通图像、占位符、背景图像、鼠标经过图像、导航条、分层图像。

作业：

书上P48一题3、4、5；二题3、4、5；三题3、4、5；四题2。