网页图像及其属性.docVIP

网页中的图像及其属性 导入语：网页中有图像才显得生动，并且图像还具有直观、生动的特点。图像还可以跨越语言的差异，但图像的增加会使网页的下载时间大大增加，所以设计网页要考虑图像的数量和大小。网页中的图片格式有： GIF格式：一般用于标题或卡通，可以有效利用透明像素。 JPEG/JPG格式：全彩的影像压缩格式，可以选择不同的压缩比率。 PNG格式：Fireworks固有的格式，图片的透明度可以自由更改。 图像也和文本一样有自己的属性，如名称、对齐、边框等。 主要内容： 网页中的图像 图像属性 2.3 网页中的图像 2.3.1 插入普通图像 插入式图像 方法：【文件】|【常用】|【图像】，选择图片即可插入到网页中。 占位图像 占位图像是在有了整体构图，但图像还没有准备好时使用，发布之前要用图像代替。 方法：【文件】|【常用】|【图像占位符】，会弹出以下对话框，以输入名称、大小、颜色和替换文本。 替换文本是用来简要说明图片的文字。 用图像替换占位符时应该确保图像与占位符同样大小。 2.3.2 插入背景图像 该方式显示的图像不影响文本的输入及其他元素的创建。 方法：【属性】|【页面属性】|【背景图像】 背景图像会覆盖背景颜色，但如果背景图像为透明，则显示背景颜色。 2.3.3 插入鼠标经过图像 方法：【插入】|【常用】|【鼠标经过图像】，设置图像名称、原始图像、鼠标经过图像、替换文本及链接（链接可以不设置）。 2.3.4 插入导航条 导航条的作用，显示网站主要栏目，并实现栏目的跳转。 方法：【插入】|【常用】|【导航条】，设置如图参数。 导航元件：添加的项目。 项目名称：可为栏目名称，也可以是默认名称。 状态图像：最初的图像。 鼠标经过图像：鼠标指针在上停留或滑过的图像。 按下图像：鼠标单击时的图像。 替换文本：鼠标停留时显示的简要说明。 按下时，前往的URL：链接文件的路径。 预载图像：下载网页时下载图片，否则会有延时。 插入：插入方式为垂直插入还是水平插入。 使用表格：用表格方式插入导航条项目。 加号、减号：添加或减少一个项目。 修改导航条的方法：【修改】|【导航条】。 2.3.5 插入分层图像 插入PSD格式图像 同普通图像。 将Photoshop选区图像复制到网页中，使用复制粘贴的方法。 将Photoshop切片图像复制到网页中，使用复制粘贴的方法。 2.4 图像属性 2.4.1 图像基本属性 选择图像，【属性】面板显示相应的格式属性。各选项名称及功能如下： 图像名称：区别网页中不同的图像。 宽和高：图像显示在网页中的大小。 源文件：显示的图片名称。 链接：设置为链接图片时的文件路径。 对齐：左对齐、居中、右，相对于文本的各种对齐。 替代：说明性文本，可让用户决定是否等待图片下载。 其它功能为创建热点链接时使用。 2.4.2 图像编辑功能 编辑：启动外部软件编辑。 裁剪：裁剪不必要的部分。 亮度和对比度：修改亮度及对比度。 锐化：调整图像清晰度。 课堂练习： 见书2.6 制作网页导航条、2.7 制作图文并茂的童话故事。 小结： 本节课主要学习在网页中添加图片和设置其属性，主要学习普通图像、占位符、背景图像、鼠标经过图像、导航条、分层图像。 作业： 书上P48一题3、4、5；二题3、4、5；三题3、4、5；四题2。