网页设计技巧谈：走出路径的困惑
如果您刚刚开始接触网页设计，是不是经常发生这样的问题呢？做好的网页在自己机器上可以正常浏览，而把页面传到服务器上就总是出现看不到图片，CSS样式表失效等错误。这种情况下多半是由于你使用了错误的路径，在应该使用相对路径的地方使用了绝对路径，导致
如果您刚刚开始接触网页设计，是不是经常发生这样的问题呢？做好的网页在自己机器上可以正常浏览，而把页面传到服务器上就总是出现看不到图片，CSS样式表失效等错误。这种情况下多半是由于你使用了错误的路径，在应该使用相对路径的地方使用了绝对路径，导致浏览器无法在指定的位置打开指定的文件。
下面我们就来谈一下最让初学者头疼的相对路径与绝对路径的区别问题。
什么是绝对路径：
大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c：/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.pckings.net/img/photo.jpg来确定文件位置的方式也是绝对路径。
另外，在网站的应用中，通常我们使用"/"来表示根目录，/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的，因为要知道这里所指的根目录并不是你的网站的根目录，而是你的网站所在的服务器的根目录，因此当网站的根目录与服务器根目录不同时，就会发生错误。
什么是相对路径：
让我们先来分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm，在这个页面中联接有一张图片photo.jpg.他们的绝对路径如下：c：/website/index.htm c：/website/img/photo.jpg
如果你使用绝对路径c：/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c：/website/img/photo.jpg上找到photo.jpg文件，但是当你将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有c：/website/img/photo.jpg这样一个路径。那么，在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢？对，应该是用相对路径，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。
另外我们使用“……/”来表示上一级目录，“……/……/”表示上上级的目录，以此类推。（学习过Dos的朋友可能更容易理解）
再看几个例子，注意所有例子中都是index.htm文件中联接有一张图片photo.jpg.
例：c：/website/web/index.htm c：/website/img/photo.jpg在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：img/photo.jpg这种写法是不正确的，在此例中，对于index.htm文件来说img/photo.jpg所代表的绝对路径是：c：/website/web/img/photo.jpg，显然不符合要求。
正确写法：使用……/img/photo.jpg的相对路径来定位文件
例：c：/website/web/xz/index.htm c：/website/img/images/photo.jpg在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：……/img/images/photo.jpg这种写法是不正确的，在此例中对于index.htm文件来说……/img/images/photo.jpg所代表的绝对路径是：c：/website/web/img/images/photo.jpg.正确写法：可以使用……/……/img/images/photo.jpg的相对路径来定位文件
例：c：/website/web/xz/index.htm c：/website/web/img/photo.jpg在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：……/……/img/photo.jpg这种写法是不正确的，在此例中对于index.htm文件来说……/……/img/photo.jpg所代表的绝对路径是：c：/website/img/photo.jpg.正确写法：可以使用……/img/photo.jpg的相对路径来定位文件
总结：通过以上的例子可以发现，在把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分都可以忽略，不做考虑。只要考虑他们不同之处就可以了。
如何修改样式表的路径：
使用文本编辑器打开htm文件，查看源代码，在源代码的开头部分
……标记中间找到.“Href=”后面的内容就是css的路径，我们可以根据以上的知识进行相对路径的转换。例：c：/website/web/xz/index.htm c：/website/css/test.css在此例中index.htm中联接test.css文件，可以使用……/……/css/test.css的相对路径来定位文件，完整的代码标记是：错误写法举例：……/……/……/css/test.css这种写法是不正确的，在此例中对于index.htm文件来说……/……/……/css/test.css所代表的绝对路径是：c：/css/test.css
最后，为了避免在制作网页时出现路径错误，我们可以使用Dreamweaver的站点管理功能来管理站点。只要使用菜单命令site-new site新建站点并定义站点目录之后，它将自动的把绝对路径转化为相对路径，并且当你在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改，实在是非常的方便。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1663
14
1420
52
1315
25
1266
29
1239
24
Win11 Tips Sharing: Skip Microsoft Account Login with One Trick
Mar 27, 2024 pm 02:57 PM
Win11 Tips Sharing: One trick to skip Microsoft account login Windows 11 is the latest operating system launched by Microsoft, with a new design style and many practical functions. However, for some users, having to log in to their Microsoft account every time they boot up the system can be a bit annoying. If you are one of them, you might as well try the following tips, which will allow you to skip logging in with a Microsoft account and enter the desktop interface directly. First, we need to create a local account in the system to log in instead of a Microsoft account. The advantage of doing this is
A must-have for veterans: Tips and precautions for * and & in C language
Apr 04, 2024 am 08:21 AM
In C language, it represents a pointer, which stores the address of other variables; & represents the address operator, which returns the memory address of a variable. Tips for using pointers include defining pointers, dereferencing pointers, and ensuring that pointers point to valid addresses; tips for using address operators & include obtaining variable addresses, and returning the address of the first element of the array when obtaining the address of an array element. A practical example demonstrating the use of pointer and address operators to reverse a string.
What is the difference in the 'My Computer' path in Win11? Quick way to find it!
Mar 29, 2024 pm 12:33 PM
What is the difference in the "My Computer" path in Win11? Quick way to find it! As the Windows system is constantly updated, the latest Windows 11 system also brings some new changes and functions. One of the common problems is that users cannot find the path to "My Computer" in Win11 system. This was usually a simple operation in previous Windows systems. This article will introduce how the paths of "My Computer" are different in Win11 system, and how to quickly find them. In Windows1
What are the tips for novices to create forms?
Mar 21, 2024 am 09:11 AM
We often create and edit tables in excel, but as a novice who has just come into contact with the software, how to use excel to create tables is not as easy as it is for us. Below, we will conduct some drills on some steps of table creation that novices, that is, beginners, need to master. We hope it will be helpful to those in need. A sample form for beginners is shown below: Let’s see how to complete it! 1. There are two methods to create a new excel document. You can right-click the mouse on a blank location on the [Desktop] - [New] - [xls] file. You can also [Start]-[All Programs]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-click our new ex
VSCode Getting Started Guide: A must-read for beginners to quickly master usage skills!
Mar 26, 2024 am 08:21 AM
VSCode (Visual Studio Code) is an open source code editor developed by Microsoft. It has powerful functions and rich plug-in support, making it one of the preferred tools for developers. This article will provide an introductory guide for beginners to help them quickly master the skills of using VSCode. In this article, we will introduce how to install VSCode, basic editing operations, shortcut keys, plug-in installation, etc., and provide readers with specific code examples. 1. Install VSCode first, we need
How to find the storage path of RPM files in Linux system?
Mar 14, 2024 pm 04:42 PM
In Linux systems, RPM (RedHatPackageManager) is a common software package management tool used to install, upgrade and delete software packages. Sometimes we need to find the storage path of an installed RPM file for search or other operations. The following will introduce how to find the storage path of the RPM file in the Linux system, and provide specific code examples. First, we can use the rpm command to find the installed RPM package and its storage path. Open
PHP programming skills: How to jump to the web page within 3 seconds
Mar 24, 2024 am 09:18 AM
Title: PHP Programming Tips: How to Jump to a Web Page within 3 Seconds In web development, we often encounter situations where we need to automatically jump to another page within a certain period of time. This article will introduce how to use PHP to implement programming techniques to jump to a page within 3 seconds, and provide specific code examples. First of all, the basic principle of page jump is realized through the Location field in the HTTP response header. By setting this field, the browser can automatically jump to the specified page. Below is a simple example demonstrating how to use P
Linux kernel source code storage path analysis
Mar 14, 2024 am 11:45 AM
The Linux kernel is an open source operating system kernel whose source code is stored in a dedicated code repository. In this article, we will analyze the storage path of the Linux kernel source code in detail, and use specific code examples to help readers better understand. 1. Linux kernel source code storage path The Linux kernel source code is stored in a Git repository called linux, which is hosted at [https://github.com/torvalds/linux](http
