网页设计理论与实务 课件 第3、4章 常用标记、 CSS基础.pptx

网页设计理论与实务 课件 第3、4章 常用标记、 CSS基础.pptx

3-常用网页标记;教学内容;一、文件路径;一、文件路径;一、文件路径;一、文件路径;课堂思政案例;二、链接;2.1 A标记;2.1 A标记;2.2 书签;2.2 书签;2.3BASE标记;三、网页图片;三、网页图片;常用的Web网页图像格式包括: GIF JPEG PNG;GIF(Graphics Interchange Format),即图像互换格式,是CompuServe公司在1987年开发的图像文件格式。 基于LZW算法的无损压缩格式,其压缩率一般在50%左右,目前几乎所有图像软件都支持GIF格式。 ;GIF格式的特点是压缩比高,磁盘空间占用较少,所以这种图像格式迅速得到了广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像(称为GIF87a),后来随着技术发展,可以同时存储若干幅静止图象进而形成连续的动画,使之成为当时支持2D动画为数不多的格式之一;GIF格式只能保存最大8位色深的数码图像,所以它最多只能用256色来表现物体,无法展示色彩复杂的物体。 尽管如此,这种格式仍在网络上大行其道应用 这和GIF图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的。 在1980年代的时期由COMPUSERVE(当时世界上最大的BBS)引进 ;GIF(Graphics Interchange Format,图形交换格式)格式的特点: 无损压缩 最多256色 能够使用透明色 文件扩展名:gif;GIF; Join PhotoGraphic Experts Group:联合图形专家组 压缩技术十分先进,它用有损压缩方式去除冗余的图像和彩色数据,获取得极高的压缩率的同时能展现十分丰富生动的图像。可以用最少的磁盘空间得到较好的图像质量。 采用平衡像素之间的亮度色彩来压缩的,因而更有利于表现带有渐变色彩且没有清晰轮廓的图像。 最高可以把1.37MB的BMP位图文件压缩至20.3KB。当然我们完全可以在图像质量和文件尺寸之间找到平衡点。成为网络上最受欢迎的图像格式。 ;不同压缩比的JPEG图片;JPEG格式的特点: 有损压缩 没有颜色限制 可以控制压缩比 渐进式JPEG 对JPEG图形文件格式增强的规范,先显示图片轮廓,再显现出图片越来越仔细的版本,直到整个图片被显示出来。 ;PNG(Portable Network Graphics,可移植的网络图形) PNG(Portable Network Graphics)是一种新兴的网络图像格式。 在1994年底,由于Unysis??司宣布GIF拥有专利的压缩方法,要求开发GIF软件的作者须缴交一定费用,由此促使免费的png图像格式的诞生。 PNG一开始便结合GIF及JPG两家之长,打算一举取代这两种格式。 1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准,并且大部分绘图软件和浏览器开始支持PNG图像浏览,从此PNG图像格式生机焕发。 ;PNG汲取了GIF和JPG二者的优点 存贮形式丰富,兼有GIF和JPG的色彩模式; 能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息,因为PNG是采用无损压缩方式来减少文件的大小,这一点与牺牲图像品质以换取高压缩率的JPG有所不同; 显示速度很快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像; PNG同样支持透明图像的制作。 用网页本身的颜色信息来代替设为透明的色彩,这样可让图像和网页背景很和谐地融合在一起。 ;3.2 IMG标记;3.2 IMG标记; 什么是客户端图像映射 在同一幅图中定义若干区域,不同区域对应不同的超链接,单击不同区域可跳转到相应页面。 客户端图像映射的使用 (1)定义映射图 (2)使用映射图;定义映射图:map标记符和area标记符 map定义相同的id与name属性 map为容器,内部定义多个区域 使用映射图:img usemap=#映射图名称 usemap属性值为map的id值或者name值;AREA标记符;AREA标记符;演示——图像映射效果;图像映射应用场景;使用图片编辑工具 看几个特殊点的像素的位置;3.4 MAP内重复区域处理;MARQUEE标记 用于滚动对象:文字、图片 属性设置: direction: left(默认值) , right , up , down; 向左、向右、向上、向下滚动 align:? LEFT,CENTER,RIGHT,TOP,BOTTOM bgcolor: 背景颜色 height: 高度 weight:宽度 ;behavior= (1)scroll:由一端滚动到另一端,会重复滚动; (2)slide:由一端滚动到另一端,只滚动一次; (3)alternate:在两端之间来回滚动 注意:默认direction=left

您可能关注的文档

文档评论(0)

1亿VIP精品文档

相关文档