Las páginas web que creé tienen rutas absolutas locales. ¿Cómo las cambio a las rutas correctas y luego las coloco en Internet? ¡Mis imágenes no se pueden abrir!

Verlo en código. Si encuentras el código de la ruta absoluta, puedes modificarla. ruta relativa

....\ representa el directorio principal

...\...\ en el directorio principal

representa el directorio actual

Adjunto: la ruta relativa y la ruta absoluta explican en detalle las habilidades de diseño web: salga de la confusión de caminos

Si acaba de comenzar a contactar con el diseño web, ¿se encuentra a menudo con este tipo de problemas? Puedo navegar por la página web normalmente en mi propia máquina, pero si transfiero la página web al servidor, siempre aparecen errores como falta de imágenes y una hoja de estilo CSS no válida. Lo más probable es que esto se deba a que utilizó la ruta incorrecta, utilizando una ruta absoluta donde debería usarse una ruta relativa, lo que provocó que el navegador no pudiera abrir el archivo especificado en la ubicación especificada.

A continuación analizaremos la diferencia entre rutas relativas y rutas absolutas, que también es el tema más problemático para los principiantes.

¿Qué es una ruta absoluta?

Todos sabemos que cuando usualmente usamos computadoras para buscar archivos, necesitamos saber la ubicación del archivo, y la ubicación del archivo es Por ejemplo, siempre que veamos dicha ruta: c:/website/img/photo.jpg Sabemos que el archivo photo.jpg está en el subdirectorio img del directorio del sitio web en el directorio img de la unidad c. . Una ruta completa que describe la ubicación de un archivo como este es una ruta absoluta. No necesitamos conocer ninguna otra información para determinar la ubicación del archivo en función de la ruta absoluta. De manera similar, la forma de determinar la ubicación del archivo /img/photo.jpg en un sitio web es mediante una ruta absoluta.

Además, en las aplicaciones web, normalmente usamos "/" para representar el directorio raíz, y /img/photo.jpg significa que el archivo photo.jpg se encuentra en el directorio img de la raíz del sitio web. directorio. Pero esto es arriesgado para los principiantes, porque debe saber que el directorio raíz al que se hace referencia aquí no es el directorio raíz del sitio web, sino el directorio raíz del servidor donde se encuentra el sitio web. Por lo tanto, cuando el directorio raíz del sitio web es diferente. el directorio raíz del servidor. Se producirá un error.

Qué es una ruta relativa:

Primero analicemos por qué la imagen no se puede mostrar correctamente. Por ejemplo, hay una página index.htm, que contiene una imagen photo.jpg. Sus rutas absolutas son las siguientes:

c:/website/index.htm

c:/website/img/photo.jpg

Si usas el ruta absoluta c:/website/img/photo.jpg, entonces todo funciona bien en su propia computadora porque de hecho puede encontrar el archivo photo.jpg en la ubicación especificada, es decir, c:/website/img/photo.jpg, pero cuando usted coloca la página Al cargar un sitio web, es probable que se produzcan errores, porque su sitio web puede estar en la unidad c del servidor, puede estar en la unidad d, puede estar en el directorio aa o, más probablemente, en el directorio bb. En resumen, no hay razón para tener c:/website/img/ Una ruta como photo.jpg. Entonces, ¿qué ruta se debe utilizar para ubicar el archivo photo.jpg en el archivo index.htm? Así es, debería ser una ruta relativa. La llamada ruta relativa, como sugiere el nombre, es su propia posición en relación con el objetivo. Al vincular photo.jpg en el ejemplo anterior index.htm, puede usar img/photo.jpg para ubicar el archivo No importa dónde se coloquen estos archivos, siempre que su relación relativa no cambie, no se producirá ningún error.

Además, también usamos "./" para representar el directorio de nivel superior, ".../.../" para representar el directorio de nivel superior, y así sucesivamente. (

Mire algunos ejemplos más y observe que en todos ellos, el archivo index.htm está vinculado a la imagen photo.jpg.

Ejemplo:

c:/website/web/index.htm

c:/website/img/photo.jpg img/photo.jpg

En este ejemplo, ¿cómo se debe representar la foto.jpg vinculada en index.htm?

Incorrecto: img/photo.jpg

Esto es incorrecto En este ejemplo, la ruta absoluta del archivo index.htm de img/photo.jpg es: c: /website. /web/img/photo.jpg, que obviamente es incorrecto.

La forma correcta de escribirlo es: utilizar la ruta relativa de ./img/photo.jpg para localizar el archivo

Ejemplo:

c:/ website/web/xz/ index.htm

c:/website/img/images/photo.jpg

En este ejemplo, ¿index.htm enlaza con photo.jpg?

La forma incorrecta de escribir es: .../img/images/photo.jpg

Esta forma de escribir es incorrecta En este ejemplo, el archivo index.htm. ./ img/images/photo.jpg representa la ruta absoluta: c:/website/web/img/images/photo.jpg.

Esto es incorrecto. /.../img/images/photo.jpg para localizar el archivo

Ejemplo:

c:/website/web/xz/index.htm

c:/website/web/images/photo.jpg

En este ejemplo, index.htm En este ejemplo, ¿cómo se debe representar la foto.jpg vinculada?

La forma incorrecta de escribir es:.../.../img/photo.jpg

Esta forma de escribir es incorrecta en este ejemplo, para el index.htm; archivo... ./.../img/photo.jpg representa la ruta absoluta: c:/website/img/photo.jpg.

Esto es incorrecto; en este caso, para el archivo index.htm.../../img/photo.jpg significa la ruta absoluta: c:/website/img/photo.jpg .

Escritura correcta: puede utilizar la ruta relativa de.../img/photo.jpg para localizar el archivo

Resumen: a través del ejemplo anterior, podemos encontrar que al convertir la ruta absoluta a Cuando se utilizan rutas relativas, las partes idénticas de las rutas absolutas de dos archivos pueden ignorarse y no considerarse. Basta pensar en sus diferentes partes.

Cómo modificar la ruta de la hoja de estilo:

Utilice un editor de texto para abrir el archivo htm y ver el código fuente. Al principio del código fuente, . ... Busque .Href=" en el medio de la etiqueta. El contenido detrás de ella es la ruta de css Podemos convertir la ruta relativa según el conocimiento anterior.

Ejemplo:

c:/website/web/xz/index.htm

c:/website/css/test.css

En este ejemplo, index.htm está vinculado al archivo test.css. Puede utilizar la ruta relativa de .../.../css/test.css para localizar el archivo.

Ejemplo de escritura incorrecta:.../.. ./.../css/ test.css

Esta es una escritura incorrecta. En este ejemplo, el archivo index.htm.../.../.../css/test.css representa. la ruta absoluta: c:/ css/test.css

Finalmente, para evitar errores de ruta al crear páginas web, podemos utilizar la función de administración de sitios de Dreamweaver para administrar el sitio. Simplemente use el comando de menú sitio-nuevo sitio para crear un nuevo sitio y definir el directorio del sitio. Automáticamente convertirá la ruta absoluta en una ruta relativa, y cuando mueva archivos en el sitio, las rutas de conexión asociadas con estos archivos también lo harán. Cambia automáticamente. Muy conveniente.