Cree, abra, edite, guarde y recupere versiones previas de archivos en Dreamweaver. Cree plantillas y abra archivos relacionados.

Dreamweaver ofrece un entorno flexible para trabajar con una gran variedad de documentos web. Además de documentos HTML, puede crear y abrir una gran variedad de documentos basados en texto, incluyendo JavaScript, PHP y hojas de estilos en cascada (CSS).

Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede crear cualquiera de los tipos de documento siguientes:

  • Un nuevo documento o plantilla en blanco

  • Un documento basado en uno de los diseños de página predefinidos que vienen con Dreamweaver, incluidos más de 30 diseños de página basados en CSS

  • Un documento basado en una de las plantillas existentes

    También puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de documento, puede establecerlo como tipo de documento predeterminado para las páginas nuevas que cree.

    Puede definir fácilmente las propiedades del documento, como etiquetas meta, título del documento, colores de fondo, así como otras propiedades de la página en la Vista de diseño o en la Vista de código.

Tipos de archivos de Dreamweaver

Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tipo de archivo principal con el que va a trabajar es el archivo HTML. Los archivos HTML —o archivos en lenguaje de formato de hipertexto— incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página web a través del navegador. Los archivos HTML se pueden guardar con la extensión . html o .htm. De forma predeterminada, Dreamweaver guarda los archivos con la extensión .html.

Dreamweaver le permite crear y modificar páginas web basadas en HTML5. También hay diseños de inicio para crear páginas HTML5 partiendo de cero.

A continuación se incluyen algunos de los tipos de archivos más comunes que se utilizan en Dreamweaver:

CSS

Los archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan para aplicar formato al contenido HTML y controlar la posición de los distintos elementos de la página.

GIF

Archivos de Formato de intercambio de gráficos, que tienen la extensión .gif. El formato GIF es un formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas transparentes y animaciones. Los archivos GIF contienen un máximo de 256 colores.

JPEG

Archivos de Grupo conjunto de expertos fotográficos (el nombre de la organización que creó el formato) que tienen la extensión .jpg y suelen ser fotografías o imágenes de tonalidades intensas. El formato JPEG es el más indicado para las fotografías digitales o digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de gradiente de color y, en general, cualquier imagen que requiera más de 256 colores.

XML

Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienen datos en formato original al que se puede aplicar formato mediante el lenguaje XSL (Lenguaje de hoja de estilos ampliable, Extensible Stylesheet Language).

Cuadro de diálogo Nuevo documento

El cuadro de diálogo Nuevo documento muestra todos los tipos de archivos compatibles, entre ellos PHP, XML y SVG.

También puede acceder a los diseños, las plantillas y los frameworks predefinidos desde este cuadro de diálogo.

Nota:

Todos los diseños con funciones de inicio están pensados para poder trabajar con sitios web interactivos y son compatibles con HTML-5.

Creación de un diseño HTML con una página en blanco

Puede crear una página que contenga un diseño CSS prediseñado o bien crear una completamente en blanco y realizar su propio diseño.

  1. Seleccione Archivo > Nuevo.

  2. En la categoría Nuevo documento, seleccione el tipo de páginas que quiere crear en la columna Tipo de documento. Por ejemplo, seleccione HTML para crear una página HTML sencilla.

  3. Seleccione un tipo de documento en el menú emergente Tipo de documento. En la mayoría de los casos, podrá utilizar la selección predeterminada, HTML5.

  4. Elija otras opciones en función del tipo de página que desee crear.

    • Ninguno: seleccione esta opción si desea crear un sitio web simple sin utilizar ningún framework.
    • Bootstrap: las plantillas de Bootstrap son diseños predefinidos con el framework de Bootstrap. Seleccione esta opción si desea crear sitios web interactivos con el framework de Bootstrap.

    Nota:

    Si va a crear páginas web interactivas, seleccione el framework de Bootstrap.

  5. Si no utiliza un framework:

    • Título de documento: introduzca el título del documento en este campo y Dreamweaver lo agregará automáticamente a la sección <head> del documento.
    • Tipo de documento: seleccione un tipo de documento en este menú emergente. En la mayoría de los casos, podrá utilizar la selección predeterminada, HTML5.

    Si selecciona una de las definiciones de tipo de documento XHTML en el menú Tipo de documento, las páginas serán compatibles con XHTML. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato de hipertexto ampliable, Extensible Hypertext Markup Language) es un replanteamiento del lenguaje HTML como aplicación XML. En general, la utilización de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad anterior y futura de los documentos web.

    Nota:

    Para obtener más información sobre XHTML, consulte el sitio web del World Wide Web Consortium (W3C), que contiene la especificación para XHTML 1.1: XHTML (www.w3.org/TR/xhtml11/) y XHTML 1.0 (www.w3c.org/TR/xhtml1/) basado en módulos, además de los sitios web del validador XHTML para archivos Web (http://validator.w3.org/) y archivos locales (http://validator.w3.org/file-upload.html).

    • Adjuntar CSS: adjunte un diseño CSS existente a la página. Para ello, haga clic en el icono Adjuntar hoja de estilos  , junto al panel Adjuntar archivo CSS, y seleccione una hoja de estilos CSS.
    Creación de una página HTML nueva sin usar un framework
    Creación de una página HTML nueva sin usar un framework

    Si desea crear una página nueva basada en su composición de Photoshop, seleccione Utilice Extract para crear una página a partir de sus composiciones de Photoshop. 

    Al seleccionar esta opción, se abre el panel Extract, donde podrá cargar un archivo PSD y comenzar a crear su página HTML.

  6. Si desea crear una página web interactiva con el framework de Bootstrap:

    • CSS de Bootstrap: indique si crear un nuevo CSS de Bootstrap o utilizar un archivo CSS existente. Si está utilizando un archivo CSS existente, indique la ruta al archivo. Asegúrese de que el archivo CSS se encuentre dentro de la carpeta raíz del sitio.
    • Adjuntar CSS: adjunte un diseño CSS existente a la página. Para ello, haga clic en el icono Adjuntar hoja de estilos  , junto al panel Adjuntar archivo CSS, y seleccione una hoja de estilos CSS.
    • Incluir un diseño ya creado: Seleccione esta opción si ya dispone de un diseño. Haga clic en Personalizar para editar los valores de la cuadrícula y los puntos de corte.
    Creación de una nueva página HTML con el framework de Bootstrap
    Creación de una nueva página HTML con el framework de Bootstrap

    Si desea crear una página nueva basada en su composición de Photoshop, seleccione Utilice Extract para crear una página a partir de sus composiciones de Photoshop. 

    Al seleccionar esta opción, se abre el panel Extract, donde podrá cargar un archivo PSD y comenzar a crear su página HTML.

  7. Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificación y la extensión del archivo.

  8. Haga clic en el botón Crear.

  9. Guarde el nuevo documento (Archivo > Guardar).

  10. En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo.

    Nota:

    Es recomendable guardar el archivo en un sitio de Dreamweaver.

  11. En el cuadro Nombre de archivo, introduzca un nombre para el archivo.

    Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos.

Creación de una plantilla en blanco

Puede utilizar el cuadro de diálogo Nuevo documento para crear plantillas de Dreamweaver. De forma predeterminada, las plantillas se guardan en la carpeta Templates del sitio.

Nota:

No se puede crear una plantilla sin haber creado un sitio primero. Para obtener más información acerca de los sitios y cómo crearlos, consulte Acerca de los sitios de Dreamweaver.

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Plantillas de sitio.

  3. Seleccione un tipo de documento del menú emergente DocType. En la mayoría de los casos, utilizará la selección predeterminada, XHTML 1.0 de transición.

    Si selecciona una de las definiciones de tipo de documento XHTML en el menú DocType (DTD), las páginas nuevas serán compatibles con XHTML. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato de hipertexto ampliable, Extensible Hypertext Markup Language) es un replanteamiento del lenguaje HTML como aplicación XML. En general, la utilización de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad anterior y futura de los documentos web.

    Nota:

    Para obtener más información sobre XHTML, consulte el sitio web del World Wide Web Consortium (W3C), que contiene la especificación para XHTML 1.1: XHTML (www.w3.org/TR/xhtml11/) y XHTML 1.0 (www.w3c.org/TR/xhtml1/) basado en módulos, además de los sitios web del validador XHTML para archivos Web (http://validator.w3.org/) y archivos locales (http://validator.w3.org/file-upload.html).

  4. Seleccione Actualizar página si cambia la plantilla y desea que la página se actualice automáticamente al editar la plantilla.

  5. Haga clic en el botón Crear.

  6. Guarde el nuevo documento (Archivo > Guardar). Si aún no ha añadido regiones editables a la plantilla, aparece un cuadro de diálogo que le indica que no hay regiones editables en el documento. Haga clic en Aceptar para cerrar el cuadro de diálogo.

  7. En el cuadro de diálogo Guardar como, seleccione un sitio en el que guardar la plantilla.
  8. En el cuadro Nombre de archivo, introduzca un nombre para la nueva plantilla. No es necesario que añada una extensión de archivo al nombre de la plantilla. Al hacer clic en Guardar, se añade la extensión .dwt a la nueva plantilla y se guarda en la carpeta Templates del sitio.

    Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos.

Creación de una página basada en una plantilla

Puede seleccionar y crear nuevos documentos, así como obtener una vista previa de ellos, utilizando una de las plantillas existentes o una de las plantillas de inicio de Dreamweaver. Puede utilizar el cuadro de diálogo Nuevo documento para seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver o utilizar el panel panel Activos para crear un documento nuevo a partir de una plantilla existente.

Creación de un documento basado en una plantilla

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de plantilla.

  3. En la columna Sitio, seleccione el sitio de Dreamweaver que contiene la plantilla que desea utilizar; a continuación, seleccione una plantilla de la lista de la derecha.

  4. Desactive Actualizar página cuando cambie la plantilla si no desea actualizar esta página cuando realice cambios en la plantilla en la que se basa.

  5. Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificación y la extensión del archivo.

  6. Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y descargar más contenido de diseño de páginas.

  7. Haga clic en Crear y guarde el documento (Archivo > Guardar).

Creación de un documento a partir de una plantilla en el panel Activos

  1. Abra el panel Activos (Ventana > Activos), si no está abierto.

  2. En el panel Activos, haga clic en el icono Plantillas  de la izquierda para ver la lista de plantillas del sitio actual.

    Nota:

    Si acaba de crear la plantilla que desea aplicar, quizá necesite hacer clic en el botón Actualizar para verla.

  3. Haga clic con el botón derecho (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en la plantilla que desea aplicar y, a continuación, seleccione Nuevo desde plantilla.

    El documento se abrirá en la ventana de documento.

  4. Guarde el documento.

Creación de una página basada en una plantilla de inicio de Dreamweaver

Dreamweaver incluye varios archivos de inicio desarrollados profesionalmente para aplicaciones móviles. Puede utilizar estos archivos de muestra como punto de partida para diseñar las páginas de sus sitios.

Cuando crea un documento basado en una plantilla de inicio, Dreamweaver crea una copia del archivo, con lo que no se sobrescribirán los archivos de inicio.

Puede obtener una vista previa de un archivo de muestra y leer una descripción breve de los elementos de diseño de un documento en el cuadro de diálogo Nuevo documento.

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Plantillas de inicio.

    Plantillas de inicio en Dreamweaver
    Plantillas de inicio en Dreamweaver

    Podrá ver los detalles de la página de muestra y su aspecto en el lateral derecho del panel a medida que va seleccionando distintas opciones.

  3. Haga clic en el botón Crear.

    El nuevo documento y todos sus archivos relacionados se abren en la ventana Documento.

  4. Guarde el archivo (Archivo > Guardar).

Creación de nuevos archivos de código para distintos idiomas de codificación

En Dreamweaver se pueden crear archivos de código para varios idiomas de codificación.

Para obtener más información sobre la codificación en Dreamweaver, consulte Acerca de la programación en Dreamweaver.

Siga estas instrucciones para crear un nuevo archivo de código en Dreamweaver:

  1. Seleccione Archivo > Nuevo documento.

  2. En Tipo de documento, seleccione el archivo de código que se desee crear.

  3. Seleccione el tipo de documento que quiera crear en la columna Tipo del documento (como un archivo PHP).

    Creación de una nueva página de PHP
    Creación de una nueva página de PHP

  4. Según el tipo de archivo que seleccione, se mostrarán otras opciones al crear un documento.

    Por ejemplo, si está creando un archivo PHP, puede seleccionar opciones para Tipo de documento y algunas opciones de CSS.

  5. Haga clic en el botón Crear . A continuación, guarde el documento (Archivo > Guardar).

Almacenamiento y recuperación de la última versión guardada de los documentos

Puede guardar un documento utilizando su nombre y ubicación actual o guardar una copia de un documento con un nombre y ubicación diferentes.

Nota:

Al asignar un nombre a un archivo, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.

Almacenamiento de un documento

  1. Siga uno de estos procedimientos:
    • Para sobrescribir la versión actual en el disco y guardar los cambios realizados, seleccione Archivo > Guardar.
    • Para guardar el archivo en una carpeta diferente o utilizar un nombre diferente, seleccione Archivo > Guardar como.
  2. En el cuadro de diálogo Guardar como que aparece a continuación, vaya a la carpeta en la que desea guardar el archivo.
  3. En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo.

  4. Haga clic en Guardar para guardarlo.

Almacenamiento de todos los documentos abiertos

  1. Seleccione Archivo > Guardar todo.

  2. Si tiene abiertos documentos sin guardar, se mostrará el cuadro de diálogo Guardar como para cada uno de ellos.

    En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo.

  3. En el cuadro Nombre de archivo, introduzca un nombre para el archivo y haga clic en Guardar.

Recuperación de la última versión guardada de un documento

  1. Seleccione Archivo > Descartar cambios.

    Aparecerá un cuadro de diálogo que le preguntará si desea descartar los cambios y volver a la última versión guardada.

  2. Haga clic en para volver a la última versión; haga clic en No para mantener los cambios.

    Nota:

    Si desea guardar un documento y, a continuación, salir de Dreamweaver, no podrá volver a la última versión de dicho documento al reiniciar Dreamweaver.

Configuración del tipo de documento y la codificación predeterminados preferencias

Si la mayoría de las páginas de su sitio son de un tipo de archivo concreto (como HTML, PHP o JavaScript), puede configurar las preferencias del documento de modo que se puedan crear automáticamente nuevos documentos del tipo de archivo especificado.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

    Nota:

    También puede hacer clic en el botón Preferencias del cuadro de diálogo Nuevo documento para configurar las preferencias del documento cuando cree un documento nuevo.

  2. Haga clic en Nuevo documento en la lista Categoría de la izquierda.

  3. Establezca o cambie las preferencias según convenga y haga clic en Aceptar para guardarlas.

    Documento predeterminado

    Seleccione el tipo de documento que desea que se utilice para las páginas que cree.

    Extensión predeterminada

    Especifique la extensión de archivo que prefiera (.htm o .html) para las páginas HTML que cree.

    Nota: Esta opción está desactivada para otros tipos de archivo.

    Tipo de documento predeterminado (DDT)

    Seleccione una de las definiciones de tipo de documento XHTML (DTD) para que las páginas nuevas sean compatibles con XHTML. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto en el menú.

    Codificación predeterminada

    Especifique la codificación que debe utilizarse al crear una página y al abrir un documento que no tiene ninguna codificación especificada.

    Si selecciona Unicode (UTF‑8) como codificación del documento, no será necesaria la codificación de entidades, ya que la codificación UTF‑8 puede representar todos los caracteres. Si selecciona cualquier otra codificación del documento, es posible que sea necesario recurrir a la codificación de entidades para poder representar determinados caracteres. Para obtener más información sobre las entidades de caracteres, consulte www.w3.org/TR/REC-html40/sgml/entities.html.

    Si selecciona Unicode (UTF‑8) como codificación predeterminada, puede incluir una marca de orden de bytes (BOM) en el documento seleccionando la opción Incluir firma Unicode (BOM).

    Una BOM está formada por entre 2 y 4 bytes situados al comienzo de un archivo de texto que identifican a un archivo como Unicode y, en este caso, el orden de los bytes siguientes. Dado que UTF‑8 carece de orden de bytes, la adición de una BOM UTF‑8 es opcional. Es obligatoria en el caso de UTF‑16 y UTF‑32.

    Formulario de normas Unicode

    Seleccione una de estas opciones si selecciona Unicode (UTF-8) como codificación predeterminada.

    Existen cuatro formularios de normas Unicode. El más importante es el formulario de normalización C porque es el más utilizado en el modelo de caracteres para la Web. Adobe ofrece los otros tres formularios de normas Unicode con el fin de proporcionar el conjunto completo.

    Mostrar el cuadro de diálogo Nuevo documento con Control+N

    Anule la selección de esta opción (“con Comando+N” para Macintosh) para crear automáticamente un nuevo documento del tipo de documento predeterminado cuando utilice el método abreviado.

    En Unicode, hay caracteres que visualmente son iguales pero que pueden almacenarse en el documento de diferentes formas. Por ejemplo, “ë” (e con diéresis) puede representarse como un carácter sencillo, “e con diéresis”, o como dos caracteres, “la e latina normal” + “diéresis de combinación”. Un carácter Unicode de combinación es aquél que se utiliza con el carácter anterior, por lo que la diéresis aparecerá sobre la “e latina”. Ambas formas dan como resultado la misma tipografía visual, pero se almacenan en el archivo de forma diferente.

    Normalización es el proceso mediante el cual se verifica que todos los caracteres que se pueden guardar de formas diferentes se guardan de la misma forma. Es decir, que todos los caracteres “ë” de un documento se guarden como “e con diéresis” sencilla o como “e” + “diéresis de combinación” y no de ambas formas en un documento.

    Para obtener más información sobre las normas de Unicode y los formularios específicos que pueden utilizarse, consulte el sitio web de Unicode en www.unicode.org/reports/tr15.

Cómo abrir y editar documentos existentes

Puede abrir una página web existente o un documento basado en texto, aunque no se hayan creado en Dreamweaver, y editarlos en la vista de Diseño o la vista de Código.

Si el documento abierto es un archivo de Microsoft Word guardado como HTML, puede utilizar Herramientas > Limpiar HTML de Word para eliminar las etiquetas de formato sobrantes que Word inserta en los archivos HTML.

Para limpiar código HTML o XHTML que no haya generado Microsoft Word, utilice Herramientas > Limpiar HTML. Para obtener más información, consulte Limpieza de archivos HTML de Microsoft Word.

También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto.

  1. Seleccione Archivo > Abrir.

    Nota:

    También puede utilizar el panel Archivos para abrir los archivos.

  2. Localice y seleccione el documento que desea abrir.

    Nota:

    Si todavía no lo ha hecho, es recomendable organizar los archivos que tiene pensado abrir y editar en un sitio de Dreamweaver, en lugar de abrirlos desde otra ubicación. Para obtener más información sobre los sitios de Dreamweaver, consulte Acerca de los sitios de Dreamweaver.

  3. Haga clic en Abrir.

    El documento se abrirá en la ventana de documento. Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma predeterminada en la vista Código. Puede actualizar el documento mientras trabaja con Dreamweaver y luego guardar los cambios en el archivo.

Dreamweaver le permite ver archivos relacionados con el documento principal sin perder el foco en el documento principal. Por ejemplo, si hay archivos CSS y JavaScript asociados a un documento principal, Dreamweaver le permite ver y editar estos archivos relacionados en la ventana de documentos mientras se mantiene visible el documento principal.

Para obtener más información sobre los archivos relacionados dinámicos, consulte Apertura de archivos relacionados dinámicamente.

Nota:

Cuando trabaje con archivos HTML, si desea realizar cambios rápidos en archivos CSS, JavaScript o PHP relacionados sin tener que desplazarse a ellos, puede utilizar la función de edición rápida. Para más información, consulte Edición rápida.

De manera predeterminada, Dreamweaver muestra los nombres de todos los archivos relacionados con un documento principal en la barra de herramientas Archivos relacionados, situada debajo del título del documento principal. El orden de los botones en la barra de herramientas sigue el orden de los vínculos de los archivos relacionados existentes en el documento principal.

Nota:

Aunque falte un documento relacionado, Dreamweaver continúa mostrando el botón correspondiente en la barra de herramientas Archivos relacionados. No obstante, si hace clic en el botón, Dreamweaver no mostrará nada.

Dreamweaver admite los siguientes tipos de archivos relacionados:

  • Archivos de script del lado del cliente
  • Server-Side Includes
  • Hojas de estilos CSS externas (incluidas hojas de estilos anidadas)

Siga uno de estos procedimientos:

  • En la barra de herramientas Archivos relacionados, situada en la parte superior del documento, haga clic en el nombre del archivo relacionado que desea abrir.

  • En la barra de herramientas Archivos relacionados, haga clic con el botón derecho del ratón en el nombre del archivo relacionado que desea abrir y seleccione Abrir como archivo independiente del menú contextual. Cuando abra un archivo relacionado mediante este método, el documento principal no permanecerá visible simultáneamente.

  1. Sitúe el punto de inserción en una línea o en un área a la que tenga constancia que afecta un archivo relacionado.

  2. Espere a que aparezca el indicador del navegador de código y luego haga clic en él para abrir el navegador de código.

  3. Pase el puntero del ratón por encima de los elementos del navegador de código para ver más información sobre ellos. Por ejemplo, si desea cambiar una propiedad de color CSS concreta pero desconoce en qué regla reside, puede encontrar la propiedad pasando el ratón por encima de las reglas disponibles en el navegador de código.

  4. Haga clic en el elemento que le interesa para abrir el correspondiente archivo relacionado.

Regreso al código fuente del documento principal

  1. Haga clic en el botón Código fuente en la barra de herramientas Archivos relacionados.

Al abrir un archivo relacionado desde las vistas Diseño o Código y vitas de diseño (vista dividida), el archivo relacionado se mostrará en una vista dividida.

Si desea personalizar la vista dividida, seleccione Vista > Dividida y elija una de las diversas opciones para la vista dividida.

Si desea ver los archivos relacionados solo en la vista de código, seleccione Código en la parte superior de la barra de herramientas.

Nota:

La vista de código estándar no permite ver documentos relacionados al mismo tiempo que el código fuente del documento principal.

Nota:

La Vista de código en la opción de visualización se refiere al código fuente del documento principal. Por ejemplo, si selecciona Ver > Vista Código arriba, Dreamweaver mostrará el código fuente del documento principal en la mitad superior de la ventana de documento. Si selecciona Ver > Vista de Código a la izquierda, Dreamweaver mostrará el código fuente del documento principal en la parte izquierda de la ventana de documento.

De forma predeterminada, cuando se abre un archivo HTML, Dreamweaver muestra los archivos relacionados en fichas independientes. Puede desactivar esta funcionalidad mediante el panel Preferencias.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

  2. En la categoría General, anule la selección de Activar archivos relacionados.

La función Archivos relacionados dinámicamente amplía la funcionalidad de la función Archivos relacionados al permitirle ver los archivos relacionados de páginas dinámicas en la barra de herramientas Archivos relacionados. Específicamente, la función Archivos relacionados dinámicamente le permite ver las diversas includes dinámicas necesarias para generar el código de tiempo de ejecución para frameworks CMS PHP de código abierto, como WordPress, Drupal y Joomla!

Para usar la función Archivos relacionados dinámicamente, debe tener acceso a un servidor de aplicaciones PHP local o remoto que ejecute WordPress, Drupal o Joomla! Un enfoque habitual para la comprobación de páginas consiste en configurar un servidor de aplicaciones PHP localhost y comprobar las páginas localmente.

Antes de comprobar las páginas, deberá realizar los siguientes pasos:

  • Configure un sitio de Dreamweaver y asegúrese de que ha rellenado el cuadro de texto URL web del cuadro de diálogo Configuración del sitio.

  • Configure un servidor de aplicaciones PHP.

    Nota: El servidor debe estar en ejecución antes de intentar trabajar con Archivos relacionados dinámicamente en Dreamweaver.

  • Instale WordPress, Drupal o Joomla! en el servidor de aplicaciones. Para obtener más información, véase:

  • En Dreamweaver, defina una carpeta local en la que descargar y editar los archivos CMS.

  • Defina la ubicación de los archivos instalados de WordPress, Drupal o Joomla como su carpeta remota y de prueba.

  • Descargue (obtenga) los archivos CMS de la carpeta remota.

Al abrir una página que está asociada a Archivos relacionados dinámicamente, Dreamweaver puede detectar los archivos automáticamente o dejarle que detecte los archivos manualmente (haciendo clic en un vínculo de la barra de información situada encima de la página). La configuración predeterminada es la detección manual.

  1. Elija Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh OS).

  2. En la categoría General, asegúrese de que está seleccionada la opción Activar archivos relacionados.

  3. Seleccione Manualmente o Automáticamente del menú emergente Archivos relacionados dinámicamente. También puede deshabilitar la detección por completo seleccionando Desactivado.

  1. Abra una página que tenga asociados Archivos relacionados dinámicamente (por ejemplo, la página index.php de la raíz del sitio de un sitio de WordPress, Drupal o Joomla!.

  2. Si la detección de Archivos relacionados dinámicamente se configura como manual (la configuración predeterminada), haga clic en el vínculo Detectar de la barra de información que aparece encima de la página en la ventana de documento.

    Si la detección de Archivos relacionados dinámicamente se activa automáticamente, aparecerá una lista de Archivos relacionados dinámicamente en la barra de herramientas Archivos relacionados.

El orden de los archivos relacionados y de los archivos relacionados dinámicamente en la barra de herramientas Archivos relacionados es el siguiente:

  • Archivos relacionados estáticos (archivos relacionados que no requieren ningún tipo de procesamiento dinámico)
  • Archivos relacionados externos (archivos .css y .js) asociados a archivos de include de servidor de ruta de acceso dinámica
  • Archivos de include de servidor de ruta de acceso dinámica (archivos .php, .inc y .module)

Dado que los Archivos relacionados y los Archivos relacionados dinámicamente suelen ser muy numerosos, Dreamweaver le permite filtrar los Archivos relacionados de manera que pueda localizar con precisión los archivos con los que desea trabajar.

  1. Abra una página que tenga asociados Archivos relacionados.

  2. Si es necesario, detecte los Archivos relacionados dinámicamente.

  3. Haga clic en el icono Filtrar archivos relacionados, situado en la parte derecha de la barra de herramientas Archivos relacionados.

  4. Seleccione los tipos de archivos que desea ver en la barra de herramientas Archivos relacionados. De forma predeterminada, Dreamweaver selecciona todos los Archivos relacionados.

  5. Para crear un filtro personalizado, haga clic en el icono Filtrar archivos relacionados y elija Filtro personalizado.

    El cuadro de diálogo Filtro personalizado solo permite filtrar nombres de archivo exactos (style.css), extensiones de archivo (.php) y expresiones con comodines mediante el uso de asteriscos (*menu*). Puede filtrar mediante múltiples expresiones con comodines separando las expresiones con un punto y coma (por ejemplo, style.css;*.js;*tpl.php).

Nota:

La configuración de filtro no permanece al cerrar el archivo.

Limpieza de archivos HTML de Microsoft Word

Puede abrir documentos guardados con Microsoft Word (Microsoft Word 97 o posteriores), como archivos HTML y, a continuación, utilizar Herramientas > Limpiar HTML de Word para eliminar el código HTML sobrante generado por Word.

El código que Dreamweaver elimina lo utiliza Word principalmente para aplicar formato y mostrar documentos en Word, por lo que realmente no es necesario para ver el archivo HTML.

Conserve una copia del archivo original de Word (.doc) como copia de seguridad, ya que es posible que no pueda volver a abrir el documento HTML en Word una vez aplicada la función de limpieza del archivo HTML.

Nota:

Para limpiar código HTML o XHTML que no haya generado Microsoft Word, utilice el comando Herramientas > Limpiar HTML.

  1. Guarde el documento de Microsoft Word como archivo HTML.

    Nota:

    En Windows, cierre el archivo en Word para evitar problemas al compartir el archivo.

  2. Abra el archivo HTML en Dreamweaver.

    Para visualizar el código HTML generado por Word, cambie a la vista de Código (Ver > Código).

  3. Seleccione Herramientas > Limpiar HTML de Word.

    Nota:

    Si Dreamweaver no logra determinar qué versión de Word se utilizó para guardar el archivo, seleccione la versión correcta en el menú emergente.

  4. Seleccione (o anule la selección de) las opciones de limpieza. Las preferencias que introduzca se guardarán como configuración de limpieza predeterminada.

    Dreamweaver aplica la configuración de limpieza al documento HTML y se abre un registro en el que se reflejan los cambios (a menos que desactive dicha opción del cuadro de diálogo).

    Opciones de limpieza HTML de Microsoft Word
    Opciones de limpieza HTML de Microsoft Word

    Quitar todo el formato específico de Word

    Elimina todos los códigos HTML específicos de Microsoft Word, incluidos los códigos XML de las etiquetas HTML, los metadatos y las etiquetas de vínculos personalizados de Word situados en la sección head del documento, el formato XML de Word, las etiquetas condicionales y su correspondiente contenido y los párrafos y márgenes vacíos de los estilos. Puede seleccionar cada una de estas opciones individualmente utilizando la ficha Detalladas.

    Limpiar CSS

    Elimina todos los códigos CSS específicos de Word, incluidos los estilos CSS en línea cuando el estilo padre tiene las mismas propiedades de estilo, los atributos de estilo que comiencen por “mso”, las declaraciones de estilos ajenos a CSS, los atributos de estilo CSS de las tablas y todas las definiciones de estilo no utilizadas de la sección del encabezado. Esta opción se puede personalizar más en la ficha Detalladas.

    Limpiar etiquetas <font>

    Elimina las etiquetas HTML y convierte el texto normal predeterminado a HTML de tamaño 2.

    Reparar etiquetas mal anidadas

    Elimina las etiquetas de formato de fuentes insertadas por Word fuera de las etiquetas de párrafo y encabezado (nivel de bloque).

    Aplicar formato de origen

    Aplica al documento las opciones de formato de origen que especifique en las preferencias de Formato HTML y en SourceFormat.txt.

    Mostrar registro al terminar

    Muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente después de concluir la limpieza.

  5. Haga clic en Aceptar o en la ficha Detalladas si desea seguir personalizando las opciones Quitar todo el formato específico de Word y Limpiar CSS y luego haga clic en Aceptar.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea