网页中的路径问题:
什么是绝对路径:
大家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www./img/photo.jpg来确定文件位置的方式也是绝对路径。 另外,在网站的应用中,通常我们使用"/"来表示根目录,/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的,因为要知道这里所指的根目录并不是你的网站的根目录,而是你的网站所在的服务器的根目录,因此当网站的根目录与服务器根目录不同时,就会发生错误。 什么是相对路径: 再看几个例子,注意所有例子中都是index.htm文件中联接有一张图片photo.jpg。
例: 总结:通过以上的例子可以发现,在把绝对路径转化为相对路径的时候,两个文件绝对路径中相同的部分都可以忽略,不做考虑。只要考虑他们不同之处就可以了。 如何修改样式表的路径: 最后,为了避免在制作网页时出现路径错误,我们可以使用dreamweaver的站点管理功能来管理站点。只要使用菜单命令site-new site新建站点并定义站点目录之后,它将自动的把绝对路径转化为相对路径,并且当你在站点中移动文件的时候,与这些文件关联的连接路径都会自动更改,实在是非常的方便。 总有人搞不清楚网页中路径到底是怎么写的,现在总结一下: 网页中设置路径有两种,一种是绝对路径,一种是相对路径。 一. 绝对路径 1. 写成"http://images.cnblogs.com/aaa.jpg", 类似这样比较容易理解,直接到相应的地址去找这个文件就行。 2. 还有一种就是直接写成"/images/aaa.jpg", 这表示基于根目录去找这个文件。这个只能放到web服务器上时用。 也就是说,如果是在本地文件夹中,直接打开相应的网页文件时,是找不到这个图像文件的。 如果在Web服务器上时,使用相应的URL访问时,实际上是表示http://www.cnblogs.com/下面的images目录下的文件。
使用根目录来表示路径时,好处是当网页文件在好几层子目录中时,直接用"/"来表示根目录要简单一些,比写成“../../../../images/aaa.jpg”这样的路径要好多了。但是不好的地方,就是如果不放到服务器上,是找不到文件的。 二. 相对路径 相对路径总是基于当前文件所在路径为基点开始算起的。这与放不放到Web服务器上没有关系。 比方说:有以下路径文件,当然,这里只链接图像文件,对于链接css文件,js文件都是一样的。 --works ----Images ----aaa.jpg ----Pages ----bbb.html ----ccc.jpg ----ddd.html works中有两个目录,两个文件,两个目录中各有一处文件。 1. 同级目录。直接写就行,不需要写目录信息。 如 ddd.html 文件中有一个 img 标签,直接写成 <img src=”ccc.jpg” /> 就可以了。 2. 下级目录。直接写目录名加文件名就行。 如 ddd.html 文件中,要访问 Images 目录下的aaa.jpg文件。写成 <img src=”Images/aaa.jpg” />。 如果还有下下下下层目录,那就 <img src=”Images/xxx/xxx/xxx/xxx/aaa.jpg” />. 3. 父级目录。在目录名前加”..”就行。 如 bbb.html 文件中,要访问 Works 目录下的ccc.jpg文件。写成 <img src=”../ccc.jpg” />。 如果要访问Images目录下的aaa.jpg文件,写成 <img src=”../Images/aaa.jpg” />。 如果要访问上上上上层目录时,写成 <img src=”../../../../../aaa.jpg” />。 三. css中的路径问题 现在做网页时,很多情况下,都是通过css文件中设置元素的背景图等。这时,在css中指定背景图像文件的时候, 也需要指定路径,这个路径其实与上面是一样的。只是基于css文件所在的路径。如以下目录结构: --works ----Images ----aaa.jpg ----css 总有人搞不清楚网页中路径到底是怎么写的,现在总结一下: 网页中设置路径有两种,一种是绝对路径,一种是相对路径。 一. 绝对路径 1. 写成"http://images.cnblogs.com/aaa.jpg", 类似这样比较容易理解,直接到相应的地址去找这个文件就行。 2. 还有一种就是直接写成"/images/aaa.jpg", 这表示基于根目录去找这个文件。这个只能放到web服务器上时用。 也就是说,如果是在本地文件夹中,直接打开相应的网页文件时,是找不到这个图像文件的。 如果在Web服务器上时,使用相应的URL访问时,实际上是表示http://www.cnblogs.com/下面的images目录下的文件。 使用根目录来表示路径时,好处是当网页文件在好几层子目录中时,直接用"/"来表示根目录要简单一些,比写成“../../../../images/aaa.jpg”这样的路径要好多了。但是不好的地方,就是如果不放到服务器上,是找不到文件的。 二. 相对路径 相对路径总是基于当前文件所在路径为基点开始算起的。这与放不放到Web服务器上没有关系。 比方说:有以下路径文件,当然,这里只链接图像文件,对于链接css文件,js文件都是一样的。 --works ----Images ----aaa.jpg ----Pages ----bbb.html ----ccc.jpg ----ddd.html works中有两个目录,两个文件,两个目录中各有一处文件。 1. 同级目录。直接写就行,不需要写目录信息。 如 ddd.html 文件中有一个 img 标签,直接写成 <img src=”ccc.jpg” /> 就可以了。 2. 下级目录。直接写目录名加文件名就行。 如 ddd.html 文件中,要访问 Images 目录下的aaa.jpg文件。写成 <img src=”Images/aaa.jpg” />。 如果还有下下下下层目录,那就 <img src=”Images/xxx/xxx/xxx/xxx/aaa.jpg” />. 3. 父级目录。在目录名前加”..”就行。 如 bbb.html 文件中,要访问 Works 目录下的ccc.jpg文件。写成 <img src=”../ccc.jpg” />。 如果要访问Images目录下的aaa.jpg文件,写成 <img src=”../Images/aaa.jpg” />。 如果要访问上上上上层目录时,写成 <img src=”../../../../../aaa.jpg” />。 三. css中的路径问题 现在做网页时,很多情况下,都是通过css文件中设置元素的背景图等。这时,在css中指定背景图像文件的时候, 也需要指定路径,这个路径其实与上面是一样的。只是基于css文件所在的路径。如以下目录结构: --works ----Images ----aaa.jpg ----css ----bbb.css ----ccc.html 比方说,ccc.html文件中要链接bbb.css文件, 而bbb.css文件中需要指定相应元素的背景图在Images目录中的aaa.jpg。 这样写: ccc.html中:<link href=”../css/bbb.css” type=”text/css” ref=”stylesheet” /> bbb.css中:.title { background: transparent url(../Images/aaa.jpg) no-repeat; } 明白了吗,这个路径是基于css文件所在目录来查找的。所以需要路径前加上”../”, 而不能直接写 “Images/aaa.jpg”. ----bbb.css ----ccc.html 比方说,ccc.html文件中要链接bbb.css文件, 而bbb.css文件中需要指定相应元素的背景图在Images目录中的aaa.jpg。 这样写: ccc.html中:<link href=”../css/bbb.css” type=”text/css” ref=”stylesheet” /> bbb.css中:.title { background: transparent url(../Images/aaa.jpg) no-repeat; } 明白了吗,这个路径是基于css文件所在目录来查找的。所以需要路径前加上”../”, 而不能直接写 “Images/aaa.jpg”.
|
|