Confusion about getting out of the path-absolute path and relative path

If you are new to web design, is this a problem often occurring? A good web page can be normally browsed on your own machine, and uploading the page to the server will always show no picture
Slice, "CSS"
Invalid style sheet and other errors. In this case, most of the reason is that you have used the wrong path and used the "absolute path" where "relative path" should be used. As a result, the browser cannot open the specified file at the specified location.
.

Next, let's talk about the difference between the relative path and the absolute path that most headaches beginners.
　　
What is absolute path:
　　
We all know that when we use a computer, we need to find the desired file, and we must know the location of the file. The path is used to indicate the location of the file. For example, if we see the path "C:
The/website/img/photo.jpg file is in the "IMG" subdirectory under the "website" directory of the "c" disk. Class
The complete path describing the file location is the absolute path. We can determine the file location based on the absolute path without knowing any other information. In the website, it is similar to http:
// Www.pckings.net/img/photo.jpg.
　　
In addition, in website applications, we usually use "/" to represent the root directory, and "/img/photo.jpg?“photophoto.jpg" files are stored in the root directory of the website.
In the "IMG" directory. However, this is risky for beginners, because you need to know that the root directory here is not the root directory of your website, but the root directory of the server where your website is located,
Therefore, an error occurs when the root directory of the website is different from the root directory of the server.
　　
What is relative path:
　　
Let's analyze why the image cannot be normally displayed. Now there is a page with index.htm.pdf, and a picture with photo.jpg is connected to it ". Their absolute path is as follows:
　　
C:/website/index.htm
C:/website/img/photo.jpg
　　
If you use the absolute path "C:/website/img/photo.jpg", everything works on your computer, because it can be called "C:
/Website/img/photo.jpg.pdf find the “photo.jpg file, but when you upload the page to the website, it is very likely that an error will occur, because your website may
On the server's "C" disk, it may be in the "D" disk, or in the "AA" directory, or in the "BB" directory. In short, there is no reason for "C:
/Website/img/photo.jpg. In the "index.htm.pdf" file, you must use the example to locate the "photo.jpg" text.
? Yes, it should be a relative path. The so-called relative path, as its name suggests, is its own relative location to the target. In the previous example, you can use the photo photo.jpg file attached to index.htm.pdf.
"Img/photo.jpg" to locate files, no matter where these files are put, as long as their relative relationship does not change, there will be no errors.
　　
In addition, we use "../" to represent the upper-level directory, "../" to represent the upper-level directory, and so on. (Friends who have learned "dos" may be easier to understand)
　　
For more information, see the examples in which all the examples are attached with an image album photo.jpg in the index.htm.pdf file ".
　　
Example:
C:/website/web/index.htm
C:/website/img/photo.jpg
　　
In this example, how should I represent the photo photo.jpg that is connected to index.htm?
　　
Incorrect syntax: img/photo.jpg
　　
In this example, for the "index.htm" file, "img/photo.jpg" represents the absolute path "C:/website/web/img/photo.jpg", which obviously does not meet the requirements.
　　
Correct syntax: Use the relative path of "../img/photo.jpg" to locate the file
　　
Example:
C:/website/web/xz/index.htm
C:/website/img/images/photo.jpg
　　
In this example, how should I represent the photo photo.jpg that is connected to index.htm?
　　
Incorrect syntax: ../img/images/photo.jpg
　　
In this example, the absolute path represented by "../img/images/photo.jpg" for the "../img/images/photo.jpg" file is "C:/website/web/img/images/photo.jpg ".
　　
Correct syntax: You can use the relative path of "../img/images/photo.jpg" to locate the file.
　　
Example:
C:/website/web/xz/index.htm
C:/website/web/img/photo.jpg
　　
In this example, how should I represent the photo photo.jpg that is connected to index.htm?
　　
Incorrect syntax: ../img/photo.jpg
　　
In this example, the absolute path represented by "../img/photo.jpg" for the "index.htm" file is "C:/website/img/photo.jpg ".
　　
Correct syntax: You can use the relative path of "../img/photo.jpg" to locate the file.
　　
Conclusion: The above example shows that when converting an absolute path to a relative path, the same parts of the two absolute paths can be ignored. You only need to consider their differences.
　　
How to modify the path of a style sheet:
　　
Open the "htm" file in a text editor, view the source code, and locate it in the "To "<LINK rel =" stylesheet "href =" test.css"
Type = "text/CSS"> ". "Href =" is followed by the "CSS" path. We can convert relative paths based on the above knowledge.
　　
Example:
C:/website/web/xz/index.htm
C:/website/CSS/test.css
　　
In this example, you can use the relative path of "../CSS/test.css" to locate the file in the "connecting to test.css" file in "index.htm.pdf ".
The code mark is "<LINK rel =" stylesheet "href =".../CSS/test.css"
Type = "text/CSS">"
　　
Example of incorrect writing: ../CSS/test.css
　　
This writing method is not correct. In this example, the absolute path represented by "../.../CSS/test.css" for the "index.htm" file is "C:/CSS/test.css"
　　
Finally, to avoid path errors during webpage creation, we can use the website management function of Dreamweaver to manage websites. You only need to use the menu command "site> New
Site (site> new site) "after creating a site and defining the site directory, it will automatically convert the absolute path to the relative path, and when you move files in the site, associate with these files
The connection path is automatically changed, which is very convenient.