网站制作中网页、图片路径问题

炀三郎

炀三郎

2016-02-19 15:49

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享网站制作中网页、图片路径问题的教程,热爱PS的朋友们快点看过来吧!

  经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  在此例中,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进行网站编辑,因为它有个站点管理功能,使用该功能绝对路径可以自动地转化为相对路径,并且当你在站点中改动文件路径时,与这些文件关联的连接路径都会自动更改,实在是方便极了!

展开更多 50%)
分享

猜你喜欢

网站制作中网页、图片路径问题

Web开发
网站制作中网页、图片路径问题

Tomcat 3.1 存在暴露网站路径问题

Java JAVA基础
Tomcat 3.1 存在暴露网站路径问题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作清凉动感的水中网页

电脑网络
Photoshop制作清凉动感的水中网页

站长注意 网站中网页使用框架结构的弊病

Web开发
站长注意 网站中网页使用框架结构的弊病

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE7中网页动态创建iframe时边框问题

Web开发
IE7中网页动态创建iframe时边框问题

网页制作解惑:图象文件的路径

Web开发
网页制作解惑:图象文件的路径

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

虚拟主机应用中的常见术语及常见问题

虚拟主机应用中的常见术语及常见问题

Access应用:仔细地选择索引

Access应用:仔细地选择索引
下拉加载更多内容 ↓