首页 | 新闻 | 软件 | 分类 | 折扣 | 人才 | 房产 | 二手 | 知道 | 购物 | 交友 | I T  | 自主建站 
 博客 | 黄页 | 时尚 | 商城 | 旅游 | 影视 | 动漫 | 笑话 | 企业 | 相册 | 社区 | IDC  | 免费域名
·免费电影在线收看 ·二手信息免费发布 ·电脑技术在线免费查阅览 ·郑州房屋出租、出售、同(异)性合租 ·河南折扣商家万店联盟
首页 | IT资讯| 网页制作| 平面设计| 网络安全| 办公软件| 应用程序| 数据库| 服务器
河南资讯网 > 电脑网络 > 网页制作 > 网页制作技巧>正文
网站中网页、图片路径问题
http://www.hainfo.com.cn 2007-11-30 11:59:01 人气: 来源: 河南资讯网】
经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用HTML语言来调用它们,然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径,大家(尤其是初学网页设计的朋友)往往对它们不够认识,在应该使用相对路径的地方使用了绝对路径,从而导致浏览器无法在指定的位置打开指定的文件,使素材不能正常显示。

  那什么是相对路径?什么是绝对路径呢?为什么使用了绝对路径有时就不能显示呢?让我们一起来认识一下它们吧。

  比如C盘的My Pictures目录下有一个tp.jpg图像,那么它的路径就是c:\My pictures\tp.jpg,其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg,它们的绝对路径是:

  c:\My pictures\index.htm

  c:\My pictures\tp.jpg

  如果你使用了绝对路径c:\My pictures\tp.jpg进行图片链接,那么在本地电脑中将一切正常,因为在c:\My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后,就不会正常了,因为服务器给你划分的存放空间可能在C盘其他目录中,也可能在D盘其他目录中,总之不会那么巧的就是c:\My pictures。那么图片路径应该如何设置呢?这里就必须使用相对路径了,所谓相对路径,顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My pictures\tp.jpg来定位文件,这样不论将这些文件放到哪里,只要它们的相对关系没有变,就不会出错。具体的链接方式是这样的:“..\My pictures\img.jpg”,其中使用“..\”来表示上一级目录,“..\..\”表示上上级的目录,以此类推。

  我们一起来看看初学的朋友可能犯的几个路径错误:

例1

  c:\mywed\wed\index.htm

  c:\mywed\img\tp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,因为两个文件同在Mywed目录下,所以初学者可能把图片链接写为img\tp.jpg,那么这样实际的链接就变为了C:\mywed\wed\img\tp.jpg,显然这是不正确的。正确的路径应该是相对路径..\img\tp.jpg。

例2

  c:\mywed\wed\wed1\index.htm

  c:\mywed\img\img1\tp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误的把图片链接写为..\img\img1\tp.jpg,那么这样转为绝对路径就是C:\mywed\wed\img\img1\tp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是..\..\img\img1\tp.jpg。

例3

  c:\mywed\wed\wed\index.htm

  c:\mywed\wed\img\tp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误地把图片链接写为..\..\img\tp.jpg,那么这样转为绝对路径就是C:\mywed\img\tp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是..\img\tp.jpg。

  通过上面三个例子,我们可以看到网页与图片所在目录相同的部分都可以使用“..”进行代替。

  有的读者可能会有这样的疑惑:一个网站有许多的链接,我怎么能保证它们的连接都正确,如果我调整了一下图片或网页的存储路径,那不是全乱了么?为了提高工作效率,我们推荐大家使用Dreamweaver进行网站编辑,因为它有个站点管理功能,使用该功能绝对路径可以自动地转化为相对路径,并且当你在站点中改动文件路径时,与这些文件关联的连接路径都会自动更改,实在是方便极了!
(编辑:) 留言评论】【在线投稿】【打印网页】【关闭窗口】【↑顶部
热点资讯
·noahweb™引擎介绍
·韩国网站之网站颜色组合搭配
·如何去掉超链结的下划线
·搜索引擎的蜘蛛人(robots)
·网站中网页、图片路径问题
·关于文字链接与按钮的分析
·让ad代码不再影响你的网页加
·网页设计的布局理念
·网页制作技巧:输入表单的三种
·google已推出基于co-op的自定
·利用缓存提高访问速度
·理论:关于网站品质
·打造完美的ie网页木马
·韩国网站配色之我见_色彩搭配
·iis下中文名的文件无法下载问
GOOGLE 广告
推荐资讯
+ 相关信息咨讯 + 版权与免责声明
·关于文字链接与按钮的分析 2007-11-30
·让ad代码不再影响你的网页加载速度! 2007-11-30
·网页设计的布局理念 2007-11-30
·网页制作技巧:输入表单的三种布局 2007-11-30
·google已推出基于co-op的自定义搜索引擎服务 2007-11-30
·利用缓存提高访问速度 2007-11-30
·理论:关于网站品质 2007-11-30
·打造完美的ie网页木马 2007-11-30
·韩国网站配色之我见_色彩搭配 2007-11-30
·iis下中文名的文件无法下载问题的解决方案 2007-11-30
1.凡本网注明来源为“河南资讯网”的所有作品,包括文字与图片,未经本网授权不得转载。
2. 凡注明"来源:xxx(非本站)"的作品,均转载自其它媒体,本网转载的目的在于传播更多信息,此类稿件并不代表本网观点,本网不承担此类稿件侵权行为的直接责任及连带责任。
3. 如因作品内容、版权等需要同本网联系的,请在作品在本网发表之日起30日内联,否则视为放弃相关权利。
版权所有:河南资讯网 2005-2008 www.hainfo.com.cn, All Rights Reserved
7X24小时客户服务热线:0371-67277251、65741536