On the relative path and absolute path _dreamweaver in Web pages

Often hear netizens bitter about their own web page there are many pictures can not be normal display, why can not normal display it? Most of the reasons for summarizing this are due to the use of the wrong path. The image, animation and other materials in the Web page have their own fixed location, the page is only through the path to use HTML language to invoke them, and then display them in the Web page. The path in the Web page can be divided into relative path and absolute path, everyone (especially the novice web design friends) are often not enough knowledge of them, where the relative path should be used where the absolute path, so that the browser can not open the specified location of the file, so that the material can not be displayed properly.

So what is a relative path? What is an absolute path? Why do you use an absolute path and sometimes not show it? Let's get to know them together.

For example, the C disk of My Pictures directory has a tp.jpg image, then its path is C:My pictures p.jpg, in fact, this complete description of the location of the file path is absolute path. If there is a picture tp.jpg in the page index.htm, their absolute path is:

C:My picturesindex.htm

C:My Pictures p.jpg

If you use the absolute path c:my pictures p.jpg to do the picture link, then everything will be OK on the local computer, because pictures this picture does exist under C:My tp.jpg. But you upload them to the Web server, it will not be normal, because the server to your partition may be in the C disk other directory, or in D disk other directories, in short, it is not so clever is c:my pictures. So how should the image path be set? Here you have to use a relative path, the so-called relative path, as the name suggests is their relative and target location. The tp.jpg that are connected in index.htm in the previous example can use My Pictures p.jpg to locate files so that no matter where they are placed, there is no error as long as their relative relationships do not change. The specific way to link is this: ". My Picturesimg.jpg ", which uses the" ... " To represent the previous level of the directory, "..." to represent the directory on the ancestor, and so on.

Let's take a look at some of the path errors that a novice friend might make:

Example 1

C:mywedwedindex. Htm

C:mywedimg p. Jpg

In this example, the index.htm page has tp.jpg this picture, because two files are in the mywed directory, so the beginner may write the picture link as img p.jpg, so the actual link becomes c:mywedwedimg p.jpg, obviously this is not true. The correct path should be the relative path. IMG p.jpg.

Example 2

C:mywedwedwed1index. Htm

C:MYWEDIMGIMG1 p. Jpg

In this example, the Index.htm Web page has the tp.jpg this picture, the beginner may mistakenly write the picture link as. IMGIMG1 p.jpg, then the absolute path is C:MYWEDWEDIMGIMG1

Tp.jpg, because there is no such file in the directory, so obviously this link is wrong. The correct one should be ... imgimg1 p.jpg.

Example 3

C:mywedwedwedindex. Htm

C:mywedwedimg p. Jpg

In this example, the Index.htm Web page has tp.jpg this picture, the beginner may mistakenly write the picture link as ... img p.jpg, then the absolute path is c:mywedimg P.jpg, because there is no such file in the directory, so obviously this link is wrong. The right thing to do is. IMG p.jpg.

From the above three examples, we can see that the page and the image in the same directory of the same parts can use the "..." To replace.

Some readers may have such a puzzle: A site has a lot of links, how can I guarantee that their connection is correct, if I adjust the image or Web page storage path, it is not all chaos? In order to improve efficiency, we recommend that you use Dreamweaver for Web site editing, because it has a site management function, the absolute path to use this feature can be automatically converted to a relative path, and when you change the file path in the site, the connection path associated with these files will automatically change, It is very convenient!