湖南省高电子商务专业技能抽查之网页中的图片.ppt

1 技能要求 1、能正确选用网站图像的基本格式，并能进行格式转换； 2、能根据网页图像大小以及图像像素要求对图像进行处理； 3、能够进行图像的简单加工处理和简单图像的合成； 4、能够在图像中设置相应的文字效果； 5、能进行商品图片的水印处理，边框制作等； 图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。 1 网页中的图片格式 Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但最常用的网页图片为JPEG、GIF两种图像格式。为了保证浏览者下载网页的速度，常使用JPEG和GIF这两种压缩格式的图像。 GIF文件 JPEG文件 PNG文件 1 网页中的图片格式 目前在网页上使用的图片格式主要是GIF和JPG两种。 GIF格式即为图像交换格式。 GIF格式只支持256色以内的图像，且采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件； 同时它支持透明色，可以使图像浮现在背景之上； 其为交换格式，在浏览器下载整张图片之前，用户就可以看到该图像，所以在网页制作中首选的图片格式为GIF。 JPG格式为静态图像压缩标准格式。 它为摄影图片提供了一种标准的有损耗压缩方案。 在保存时能够将人眼无法分辨的资料删除,以节省存储空间,但这些被删除的资料无法在解压时还原。 网页中的图片格式 在网页中使用图像时应该注意的几个问题 1．网页的图像文件要小 2．控制网页中图像的数量和质量 3．在网页中恰到好处地添加动画 2 与图片相关的HTML标签 1、 插入图片 img标签的作用就是插入图片，其中属性“src”是该标签的必要属性，该属性指定导入图片的导入位置和名称。 注意： 导入的图片与HTML文件是出于同一目录下的，如果不处于同一目录下，可以采用设置路径的方式来导入。 2 与图片相关的HTML标签 【例】 在网页中插入图片示例 html head title图片的插入/title /head body img src=01.jpg /body /html 2 与图片相关的HTML标签 2 与图片相关的HTML标签 2、图片标签属性的应用 “width” “height” “border” “alt” 2 与图片相关的HTML标签 ①“width”和“height”属性 控制图片大小依靠“width”和“height”属性： “width”属性控制图片的宽度， “height”属性控制图片的高度。 当图片只设置了其中一个属性的时候，另一个属性就自动依照原始图片的两个属性值的比例变化。 如图片原始大小为80*60，当只设置了该图片的显示宽度为160，高度将自动以？来显示。 2 与图片相关的HTML标签 “width”和“height”属性 宽度和高度的语法结构： img width=n 或img height=n img width=m% 或img width=m% 　其中，n代表一个数值，单位为像素， 　　　　m代表0～100的数，即m%的取值范围为 0%～m%，图片将以相对于当前窗口大小的 百分比来表示。 2 与图片相关的HTML标签 【例】 图片大小控制示例 html head title图片的大小控制/title /head body img src=01.jpg img src=01.jpg height=100 img src=01.jpg width=100 img src=01.jpg height=150 width=200 img src=01.jpg height=50% img src=01.jpg width=50% /body /html 2 与图片相关的HTML标签 与图片相关的HTML标签 ②Border属性 主要是用来给图片的周围加上指定粗细的边框。 语法结构： img border=n 其中，n为一个数值，单位为像素。 与图片相关的HTML标签 【例】 图片边框设置示例 html head title图片的边框/title /head body img src=01.jpg width=80 height=60 border=6 img src=01.jpg width=120 height=100 border=4 img src=01.jpg width=160 height=140 bord