03-图片.ppt

志在高远 技报天下 第3章 图片 A EET 大实训-WEB 知识要点 文件路径 图像格式 在网页中使用图片 A EET 大实训 * 文件路径 A EET 大实训 HTML超文本标记语言能够利用URL，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链接起来。常见的文件路径有两种：一种是绝对路径，另一种是相对路径，下面分别来介绍。 * 绝对路径 A EET 大实训 绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分： 一个传输协议（如HTTP协议） 网络域名或者服务器IP地址 网站结构的目录树 文件名（文本、图片、音频和视频等） 这些部分就构成了一个完整的绝对路径，例如： /news/index.php * 相对路径 A EET 大实训 相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。 什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它文件(或文件夹)的路径关系，也就是自己相对于目标的位置。 * 实例3-1 在网页中插入图片 A EET 大实训 * 实例分析 A EET 大实训 目前在本地硬盘有这样的一个文件结构： 一个网页3-1.html：需要浏览的网页。 一幅图片heart.jpg：心的图片。 一个文件夹image：里面有一副图片f.jpg。 * 各种相对路径 A EET 大实训 总结归纳起来，对于各种相对路径主要有三种情况。 （1）当前目录： src=”**.jpg” 如果源文件和引用文件在同一个目录里，直接写引用文件名即可。 （2）当前目录上一层： src=”../**.jpg” ../表示源文件所在目录的上一级目录，../../表示源文件当前目录的上一级目录的上一级目录。 （3）下级目录：src=”**/**.jpg” 引用下级目录的文件，直接写下级目录文件的路径即可，其中**代表具体的文件名或者目录名。 * 在网页中使用图片 A EET 大实训 HTML中插入图片用的是img /标记,它的属性包括图片的路径、宽、高和替代文字等。基本语法格式如下： img src= ” # ” alt= ” ** ” / # 代表图片的 URL ** 代表在浏览器尚未完全读入图片时，在图片位置显示的替代文字。 * 实例3-2 插入图片和替代文字 A EET 大实训 alt属性的作用是在图片位置显示替代的文字，可以对图片加以解释，推荐使用。 * 实例3-3 图文混排 A EET 大实训 在缺省状况下，图片显示原有的尺寸。可以用height和width属性改变图片的宽和高，图片会相应放大或缩小，如果比例不合适，显示出来的效果可能不太好。 * 实例3-4 添加背景图片 A EET 大实训 通过background-image属性在页面中添加背景图片，文字可以写在背景上面。 * 志在高远 技报天下