Guía del usuario Cancelar

Crear y abrir archivos

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver

 

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 ajustar las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de documento, puede elegirlo 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 Diseño o en la vista 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 tienen 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. Incluyen los datos en formato original a los que se pueden aplicar formato mediante el lenguaje XSL (Extensible Stylesheet Language, lenguaje de hoja de estilos ampliable).

Cuadro de diálogo Nuevo documento

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

También puede acceder a los diseños, las plantillas y los marcos de trabajo predefinidos en 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.

Crear 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 marco de trabajo.
    • Bootstrap: las plantillas de Bootstrap son diseños predefinidos con el marco de trabajo de Bootstrap. Seleccione esta opción si desea crear sitios web interactivos con el marco de trabajo de Bootstrap. Se crea un documento de Bootstrap 4.0.0 de forma predeterminada.
    Nota:

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

  5. Si no va a utilizar un marco de trabajo:

    • Título de documento: introduzca el título del documento en este campo y Dreamweaver lo añadirá 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 (Extensible Hypertext Markup Language, lenguaje de formato de hipertexto ampliable) 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 marco de trabajo
    Creación de una página HTML nueva sin usar un marco de trabajo

    Si desea crear una página nueva basada en su composición de Photoshop, seleccione Usar 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 marco de trabajo 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 marco de trabajo de Bootstrap
    Creación de una nueva página HTML con el marco de trabajo de Bootstrap

    Si desea crear una página nueva basada en su composición de Photoshop, seleccione Usar 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 ajustar 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 a la carpeta en la que desee 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 sobre 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 (Extensible Hypertext Markup Language, lenguaje de formato de hipertexto ampliable) 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 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 ajustar 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).

Crear 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 pulsa 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 el diseño de las páginas de sus sitios.

Al crear 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 documento (Archivo > Guardar).

Crear nuevos archivos de código para distintos lenguajes de codificación

En Dreamweaver se pueden crear archivos de código para varios lenguajes 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, verá 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 desee 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 a la carpeta en la que desee guardar el archivo.

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

Recuperar la última versión guardada de un documento

  1. Seleccione Archivo > Descartar cambios.

    Aparecerá un cuadro de diálogo donde se 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.

Ajustar el tipo de documento y las preferencias de codificación predeterminados

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 utilizar en las páginas que cree.

    Extensión predeterminada

    Indique 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

    Elija la codificación que debe utilizarse al crear una página y al abrir un documento que no tenga 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 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

    Desactive esta opción (“con Comando+N“ en 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 aquel 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.

    La 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 más información sobre la normalización 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.

Apertura de archivos relacionados

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 Abrir 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 obtener 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 de 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 interese para abrir el correspondiente archivo relacionado.

Volver 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 en las vistas Diseño o Código y vistas de diseño (vista dividida), el archivo relacionado aparecerá 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, en Dreamweaver se verá 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, en Dreamweaver se verá 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 pestañas 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.

Abrir archivos relacionados dinámicamente

La función Archivos relacionados dinámicamente amplía la funcionalidad de la opción Archivos relacionados al permitirle ver los archivos relacionados de páginas dinámicas en la barra de herramientas Archivos relacionados. Concretamente, la función Archivos relacionados dinámicamente le permite ver los diferentes includes dinámicos necesarios para generar el código de tiempo de ejecución para marcos de trabajo 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, elija una carpeta local en la que descargar y editar los archivos CMS.

  • Escoja 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.

Limpiar 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 en la pestaña Detalladas.

    Limpiar CSS

    Elimina todos los códigos CSS específicos de Word, incluidos los estilos CSS en línea cuando el estilo principal 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 pestaña 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 indique en las preferencias de Formato HTML y en SourceFormat.txt.

    Mostrar registro al terminar

    Se abre 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 pestaña Detalladas si desea seguir personalizando las opciones Quitar todo el formato específico de Word y Limpiar CSS y luego haga clic en Aceptar.

Logotipo de Adobe

Inicia sesión en tu cuenta