CSS教程3.pptVIP

页面背景颜色 总结1-图像的透明通道 在绿色背景网页中分别添加JPEG和PNG的两种格式背景图像，效果如下所示。 总结2-会动的GIF图像 使用GIF动画点缀页面 * * * 矢量图不会失真，位图会失真 * 讲解要点： * 频谱图标、明度调整 * 频谱图标、明度调整 * 以免图像太小而不能铺满整个页面 * 讲解要点： * 频谱图标、明度调整 * 讲解要点： * 频谱图标、明度调整 * 缩略图、较大尺寸的图像 缩略图会链接到导航页，如果不选择“为每张相片建立导览页面”选项，缩略图直接链接到大尺寸图像。 * 频谱图标、明度调整 * 讲解要点： * 注意脚本生成 * 注意脚本生成 * 注意脚本生成 1、案例1 3、Hspace和vspace * FLASH动画文件 IE7.0版本以上浏览器能直接显示PNG图像的问题 以免图像太小而不能铺满整个页面 第 3 章 图像与多媒体 网页设计基础 本章目标 会使用图像相关标签实现图文并茂的页面 图像的插入 调整图文的混排效果 创建网站相册 多媒体在网页中的应用 本章任务 制作儿童相册页面 本章任务 制作数码相机网页 本章任务 制作家庭生活 照片页面 本章任务 制作营养美食网页 图像标签 常见的图像格式介绍 图像类型 优点 缺点 适用场合 制作工具 *.jpg 体积小，下载速度快；且比较清晰 有损压缩、 画面失真 大面积色调的图像，如摄影作品、相片等 Photoshop *.gif 支持无损耗压缩和透明度；通用性好,几乎所有的浏览器都支持 支持有限的透明度，效果不如别的图像 网页简单动画（由多个单帧画面连在一起组成逐帧动画） Photoshop *.png 支持无损耗压缩和透明度 图像格式通用性差，很多浏览器都不支持 网页透明图像：Logo或一些点缀的小图像 photoshop *.swf 体积小，便于网络传输，能制作更丰富、表达时间更长的动画 制作麻烦 网页动画 Flash 位图 矢量图 图像标签 图像的基本语法 IMG src=images/adv_2.jpg width=300 height=150 alt=明星演唱会开幕 …… BODY IMG src=images/adv_2.jpg alt=明星演唱会开幕 width=300height=150 /BODY …… 鼠标移到图像上，出现的提示性文字 图像的位置 图像的宽度 图像的高度 为图像添加的提示性文字 图像标签 图像与文本的对齐方式 IMG align=middle 图像与文本居中对齐,还可以取 top, bottom 值 …. BODY IMG align=middle src=images/adv_2.jpg width=180 height=95 border=0 / 请点击广告进入明星专区 /BODY …… 图像和文本居中对齐 给图像添加边框 图像标签 图像与文本的距离 使用hspace和vspace属性 …. BODY h4图像与文本的距离控制/h4 img src=图片/黑白照片.jpg hspace=30 这段文字距离左边图像的距离是30px。p img src=图片/黑白照片.jpg vspace=30 br这段文字距离上边图像的距离是30px。 /BODY …… 控制图像四周与文本间隔水平方向的宽度 控制图像四周与文本间隔垂直方向的高度 图像标签 课堂案例1 知识要点：使用“图像”按钮插入图像。使用“属性”面板改变图片的大小、调整图像的亮度和对比度并为图片添加文字说明。使用“图像占位符”命令代替网页中缺少的一张图片，如下图。 课堂案例1 要求： 1、插入图片并设置图片属性： 插入图片img_01.jpg、img_02.jpg、img_03.jpg、img_04.jpg、img_05.jpg到相应单元格中 插入图片img_06.gif到层“apDiv1”中，并设置宽和高分别为269、262，给图片添加文字说明为“我的照片” “替换”选项：指定文本（将图片的说明文字输入“替换”文本框中） （1）当图片能正常显示时，鼠标指针滑过图像时显示替代文本； （2）当图片不能正常显示时，用文本替换图片。 课堂案例1 要求： 2、调整图像的亮度和对比度： 设置图片img_06.gif的亮度为30、对比度为6 页面左侧插入图像占位符，并设置名称为images、宽度为69、高度为218、颜色为紫色（#CE38C6） 代码如下： img src= alt= name=images width=69 height=218 id=images style=backgro