网页设计理论与实务 课件 第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