网页制作-图片_第1页
网页制作-图片_第2页
网页制作-图片_第3页
网页制作-图片_第4页
网页制作-图片_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计电子商务社——图片知识要点文件路径图像格式在网页中使用图片文件路径

HTML超文本标记语言能够利用URL，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链接起来。常见的文件路径有两种：一种是绝对路径，另一种是相对路径，下面分别来介绍。绝对路径

绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分：一个传输协议（如HTTP协议）网络域名或者服务器IP地址网站结构的目录树文件名（文本、图片、音频和视频等）

这些部分就构成了一个完整的绝对路径，例如：/news/index.php相对路径

相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它文件(或文件夹)的路径关系，也就是自己相对于目标的位置。实例3-1在网页中插入图片<html><head><title>快乐学英语</title></head><body><h1>水果篇</h1><imgsrc="image/apple.jpg"/>apple<imgsrc="image/balana.jpg"/>balana</body></html>注意：相对路径的写法以及所写的文件夹是否存在。如上面例子中的image文件夹，要处于与该网页同级目录情况下（如下图），否则图片可能不能正常显示各种相对路径总结归纳起来，对于各种相对路径主要有三种情况。（1）当前目录：src=”**.jpg”如果源文件和引用文件在同一个目录里，直接写引用文件名即可。（2）当前目录上一层：src=”../**.jpg”

../表示源文件所在目录的上一级目录，../../表示源文件当前目录的上一级目录的上一级目录。（3）下级目录：src=”**/**.jpg”引用下级目录的文件，直接写下级目录文件的路径即可，其中**代表具体的文件名或者目录名。图像格式图片有很多格式，常见的有BMP、JPG、GIF、PNG等，网页设计中最常用的是JPG和GIF两种。JPG格式是目前网络上最流行的图像格式，它可以压缩文件，并提供多种压缩级别。JPG格式的文件拓展名为.jpg或.jpeg。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。GIF图像深度从1bit到8bit，也就是说GIF最多支持256种色彩的图像。PNG是为了替代GIF和TIFF而出现的文件存储格式，它增加了一些GIF文件格式所不具备的特性。应避免在网页中使用体积较大的图片。在网页中使用图片HTML中插入图片用的是<img/>标记,它的属性包括图片的路径、宽、高和替代文字等。基本语法格式如下：<imgsrc=”#”alt=”**”/>

#代表图片的URL**代表在浏览器尚未完全读入图片时，在图片位置显示的替代文字。实例3-2插入图片和替代文字<html><head><title>快乐学英语</title></head><body><h1>水果篇</h1><imgsrc="image/apple.jpg"alt="这是苹果的图片"/>apple<imgsrc="image/balana.jpg"alt="这是香蕉的图片"/>balana</body></html>比如图片路径出错，图片不能显示，但是可以显示图片的简介，推荐使用实例3-3图文混排<html><head><title>忆校网</title></head><body><h1>怀念曾经的校园</h1><imgsrc="image/xiaoyuan.jpg"alt="大学校园的林荫道"height="800"width="500"><br/><h3>在那曾经的校园林荫道</h3><h3>是否留下了我们那</h3><h3>充满希望的坚定</h3><h3>脚步脚步</h3><h3>那些终究回不去的曾经</h3><h3>注定只能在记忆中徘徊</h3></body></html>注意：在缺省状况下，图片显示原有的尺寸。可以用height和width属性改变图片的宽和高，图片会相应放大或缩小，如果比例不合适，显示出来的效果可能不太好。小技巧：用align属性，可以改变图片的水平对齐方式（居左，居中，居右）。实例3-3图文混排<html><head><title>忆校网</title></head><bodystyle="background-image:url(image/5.gif)"><h1>怀念曾经的校园</h1><imgsrc="image/xiaoyuan.jpg"alt="大学校园的林荫道"height="800"width="500"><br/><h3>在那曾经的校园林荫道</h3><h3>是否留下了我们那</h3><h3>充满希望的坚定</h3>

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论