Acerca del establecimiento de vínculos y la navegación

Última actualización el 27/04/2021

Obtenga información sobre el establecimiento de enlaces y la navegación en Dreamweaver, así como sobre rutas absolutas, relativas a documentos y relativas a la raíz del sitio.

Después de haber configurado un sitio de Dreamweaver para almacenar los documentos del sitio web y haber creado páginas HTML, seguramente querrás crear conexiones desde tus documentos a otros documentos.

Dreamweaver ofrece varias formas de crear vínculos a documentos, imágenes, archivos multimedia o software descargable. Puedes establecer vínculos a cualquier texto o imagen en cualquier lugar dentro de un documento, incluyendo texto o imágenes en un encabezado, lista, tabla, elemento posicionado de forma absoluta (elemento AP) o marco.

Los vínculos se pueden crear y administrar de varias formas distintas. Algunos diseñadores web prefieren crear vínculos a páginas o archivos inexistentes mientras trabajan, mientras que otros prefieren crear todos los archivos y páginas primero y luego agregar los vínculos. Otra forma de administrar vínculos es crear páginas de marcador de posición, en las que agregas y pruebas vínculos antes de completar todas las páginas del sitio.

Rutas absolutas, relativas al documento y relativas a la raíz del sitio

Comprender la ruta del archivo entre el documento desde el que estás vinculando y el documento o recurso al que estás vinculando es esencial para crear vínculos.

Cada página web tiene una dirección única, llamada Uniform Resource Locator (URL). Sin embargo, cuando creas un vínculo local (un vínculo desde un documento a otro en el mismo sitio), generalmente no especificas la URL completa del documento al que estás vinculando; en su lugar, especificas una ruta relativa desde el documento actual o desde la carpeta raíz del sitio.

Existen tres tipos de rutas de vínculos:

  • Rutas absolutas (como http://www.adobe.com/support/dreamweaver/contents.html).

  • Rutas relativas al documento (como dreamweaver/contents.html).

  • Rutas relativas a la raíz del sitio (como /support/dreamweaver/contents.html).

    Con Dreamweaver puede seleccionar fácilmente el tipo de ruta de documento que desee crear para los vínculos.

Nota

Utilice el tipo de vínculo que prefiera y le resulte más cómodo, ya sea relativo a la raíz del sitio o al documento. En lugar de escribir las rutas, conviene acceder a los vínculos a través del botón Examinar, método que asegura la correcta introducción de la ruta.

Rutas absolutas

Las rutas absolutas proporcionan la URL completa del documento vinculado, incluyendo el protocolo a usar (generalmente http:// para páginas web), por ejemplo, http://www.adobe.com/support/dreamweaver/contents.html. En el caso de un activo de imagen, el URL completo podría ser http://www.adobe.com/es/support/dreamweaver/images/image1.jpg.

Debes usar una ruta absoluta para vincular a un documento o recurso en otro servidor. También puedes usar rutas absolutas para vínculos locales (a documentos en el mismo sitio), pero ese enfoque no es recomendable: si mueves el sitio a otro dominio, todos tus vínculos locales de ruta absoluta se romperán.Usar rutas relativas para vínculos locales también proporciona mayor flexibilidad si necesitas mover archivos dentro de tu sitio.

Nota

Al insertar imágenes (no vínculos), puedes usar una ruta absoluta a una imagen en un servidor remoto (es decir, una imagen que no está disponible en el disco duro local).

Rutas relativas al documento

Las rutas relativas al documento son generalmente mejores para vínculos locales en la mayoría de sitios web. Son particularmente útiles cuando el documento actual y el documento vinculado o recurso están en la misma carpeta y es probable que permanezcan juntos. También puedes usar una ruta relativa al documento para vincular a un documento o recurso en otra carpeta especificando la ruta a través de la jerarquía de carpetas desde el documento actual hasta el documento vinculado.

La idea básica de las rutas relativas al documento es omitir la parte de la ruta absoluta que es igual tanto para el documento actual como para el documento vinculado o recurso, proporcionando solo la porción de la ruta que difiere.

Por ejemplo, supóngase que tiene un sitio con la siguiente estructura:

  • Para vincular desde contents.html a hours.html (ambos en la misma carpeta), usa la ruta relativa hours.html.

  • Para vincular desde contents.html a tips.html (en la subcarpeta resources), usa la ruta relativa resources/tips.html. En cada barra (/), te mueves hacia abajo un nivel en la jerarquía de carpetas.

  • Para vincular desde contents.html a index.html (en la carpeta principal, un nivel arriba de contents.html), usa la ruta relativa ../index.html. Dos puntos y una barra (../) te mueve hacia arriba un nivel en la jerarquía de carpetas.

  • Para vincular desde contents.html a catalog.html (en una subcarpeta diferente de la carpeta principal), usa la ruta relativa ../products/catalog.html. Aquí, ../ te mueve hacia arriba a la carpeta principal, y products/ te mueve hacia abajo a la subcarpeta products.

    Cuando mueves archivos como un grupo (por ejemplo, cuando mueves una carpeta completa, de modo que todos los archivos dentro de esa carpeta mantengan las mismas rutas relativas entre sí), no necesitas actualizar los vínculos relativos al documento entre esos archivos. Sin embargo, cuando mueves un archivo individual que contiene vínculos relativos al documento, o un archivo individual al que apunta un vínculo relativo al documento, sí necesitas actualizar esos vínculos.(Si mueves o cambias el nombre de archivos usando el panel Archivos, Dreamweaver actualiza todos los vínculos relevantes automáticamente.)

Rutas relativas a la raíz del sitio

Rutas relativas a la raíz del sitio describen la ruta desde la carpeta raíz del sitio hasta un documento. Puede que quieras usar estas rutas si estás trabajando en un sitio web grande que usa varios servidores, o un servidor que aloja varios sitios.Sin embargo, si no estás familiarizado con este tipo de ruta, es recomendable que uses rutas relativas al documento.

Una ruta relativa a la raíz del sitio comienza con una barra diagonal inicial, que representa la carpeta raíz del sitio. Por ejemplo, /support/tips.html es una ruta relativa a la raíz del sitio hacia un archivo (tips.html) en la subcarpeta de soporte de la carpeta raíz del sitio.

Una ruta relativa a la raíz del sitio es a menudo la mejor manera de especificar vínculos si mueves frecuentemente archivos HTML de una carpeta a otra en tu sitio web. Cuando mueves un documento que contiene vínculos relativos a la raíz del sitio, no necesitas cambiar los vínculos ya que estos son relativos a la raíz del sitio, y no al documento mismo; por ejemplo, si tus archivos HTML usan vínculos relativos a la raíz del sitio para archivos dependientes (como imágenes), entonces si mueves un archivo HTML, sus vínculos de archivos dependientes siguen siendo válidos.

Sin embargo, cuando mueves o cambias el nombre de los documentos a los que apuntan los vínculos relativos a la raíz del sitio, debes actualizar esos vínculos, incluso si las rutas relativas de los documentos entre sí no han cambiado. Por ejemplo, si mueves una carpeta, debes actualizar todos los vínculos relativos a la raíz del sitio hacia archivos en esa carpeta. (Si mueve o cambia el nombre de los archivos utilizando el panel Archivos, Dreamweaver actualizará automáticamente todos los vínculos relevantes).