Seleccione Archivo > Nuevo.
- Guía del usuario de Dreamweaver
- Introducción
- Dreamweaver y Creative Cloud
- Espacios de trabajo y vistas de Dreamweaver
- Configuración de sitios
- Acerca de los sitios de Dreamweaver
- Configuración de una versión local del sitio
- Conectar con servidores de publicación
- Configuración de un servidor de prueba
- Importación y exportación de la configuración de un sitio de Dreamweaver
- Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
- Funciones de accesibilidad en Dreamweaver
- Ajustes avanzados
- Configuración de las preferencias de sitio para transferir archivos
- Especificación de la configuración del servidor proxy en Dreamweaver
- Sincronizar la configuración de Dreamweaver con Creative Cloud
- Uso de Git en Dreamweaver
- Administrar archivos
- Creación y apertura de documentos
- Administración de archivos y carpetas
- Carga de archivos al servidor y descarga desde el mismo
- Desprotección y protección de archivos
- Sincronizar archivos
- Comparación de archivos para detectar diferencias
- Ocultación de archivos y carpetas en el sitio de Dreamweaver
- Activación de Design Notes para sitios de Dreamweaver
- Prevención de la posible actuación repentina de Gatekeeper
- Maquetación y diseño
- Usar ayudas visuales al diseñar
- Información sobre el uso de CSS para diseñar la página
- Diseño de sitios web interactivos con Bootstrap
- Creación y uso de consultas de medios en Dreamweaver
- Presentación de contenido en tablas
- Colores
- Diseño interactivo mediante diseños de cuadrícula fluida
- Extract en Dreamweaver
- CSS
- Aspectos básicos de las hojas de estilos en cascada
- Diseño de páginas con el Diseñador de CSS
- Uso de preprocesadores de CSS en Dreamweaver
- Configuración de las preferencias de estilos CSS en Dreamweaver
- Mover reglas CSS en Dreamweaver
- Conversión de CSS en línea en una regla CSS en Dreamweaver
- Uso de etiquetas div
- Aplicación de degradados al fondo
- Creación y edición de efectos de transición de CSS3 en Dreamweaver
- Formatear código
- Contenido de página y activos
- Definición de las propiedades de la página
- Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
- Uso de texto
- Buscar y reemplazar texto, etiquetas y atributos
- Panel DOM
- Editar en la Vista en vivo
- Codificación de documentos en Dreamweaver
- Selección y visualización de elementos de la ventana de documento
- Configuración de las propiedades de texto en el inspector de propiedades
- Revisión ortográfica de una página web
- Uso de las reglas horizontales en Dreamweaver
- Añadir y modificar combinaciones de fuentes en Dreamweaver.
- Trabajo con activos
- Inserción y actualización de fechas en Dreamweaver
- Creación y gestión de activos favoritos en Dreamweaver
- Insertar y editar imágenes en Dreamweaver
- Adición de objetos multimedia
- Adición de vídeos en Dreamweaver
- Insertar vídeo HTML5
- Insertar archivos SWF
- Adición de efectos de sonido
- Insertar audio HTML5 en Dreamweaver
- Trabajar con elementos de bibliotecas
- Uso de texto árabe y hebreo en Dreamweaver
- Establecimiento de vínculos y navegación
- Widgets y efectos de jQuery
- Programación de sitios web
- Acerca de la programación en Dreamweaver
- Entorno de programación en Dreamweaver
- Configuración de las preferencias de programación
- Personalización de los colores del código
- Escritura y edición de código
- Sugerencias de código y completado de código
- Contraer y expandir código
- Reutilizar código con fragmentos
- Depuración de código mediante linting
- Optimización del código
- Edición de código en Vista de diseño
- Trabajo con el contenido de Head para páginas
- Inserción del lado del servidor incluida en Dreamweaver
- Uso de bibliotecas de etiquetas en Dreamweaver
- Importación de etiquetas personalizadas a Dreamweaver
- Uso de comportamientos de JavaScript (instrucciones generales)
- Aplicación de comportamientos JavaScript incorporados
- Acerca de XML y XSLT
- Realización de transformaciones XSL del lado del servidor en Dreamweaver
- Realización de transformaciones XSL en el lado del cliente en Dreamweaver
- Adición de entidades de caracteres para XSLT en Dreamweaver
- Formatear código
- Flujos de trabajo de varios productos
- Instalación y uso de extensiones para Dreamweaver
- Actualizaciones integradas en Dreamweaver
- Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
- Trabajo con Fireworks y Dreamweaver
- Edición de contenido en sitios de Dreamweaver con Contribute
- Integración de Dreamweaver Business Catalyst
- Crear campañas de correo electrónico personalizado
- Plantillas
- Acerca de las plantillas de Dreamweaver
- Reconocimiento de plantillas y documentos basados en plantillas
- Crear una plantilla de Dreamweaver
- Crear regiones editables en plantillas
- Creación de tablas y regiones repetidas en Dreamweaver
- Usar regiones opcionales en plantillas
- Definición de atributos de etiqueta editables en Dreamweaver
- Creación de plantillas anidadas en Dreamweaver
- Edición, actualización y eliminación de plantillas
- Exportar e importar contenido xml en Dreamweaver
- Aplicación o eliminación de una plantilla de un documento existente
- Edición de contenido en plantillas de Dreamweaver
- Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
- Configuración de preferencias de resaltado en regiones de plantillas
- Ventajas de usar plantillas en Dreamweaver
- Móvil y multipantalla
- Sitios, páginas y formularios web dinámicos
- Aspectos básicos de las aplicaciones web
- Configuración del ordenador para desarrollo de aplicaciones
- Solución de problemas de conexiones a bases de datos
- Eliminación de secuencias de comandos de conexión en Dreamweaver
- Diseñar páginas dinámicas
- Introducción a las fuentes de contenido dinámico
- Definir fuentes de contenido dinámico
- Añadir contenido dinámico a las páginas
- Cambio de contenido dinámico en Dreamweaver
- Visualización de registros de bases de datos
- Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
- Añadir comportamientos de servidor personalizados en Dreamweaver
- Crear formularios con Dreamweaver
- Uso de formularios para recopilar información de los usuarios
- Crear y activar formularios de ColdFusion en Dreamweaver
- Crear formularios web
- Compatibilidad mejorada con HTML5 para elementos de formulario
- Desarrollar un formulario con Dreamweaver
- Creación visual de aplicaciones
- Creación de las páginas maestra y de detalles en Dreamweaver
- Crear páginas de búsqueda y resultados
- Crear una página de inserción de registros
- Crear una página de actualización de registros en Dreamweaver
- Creación de páginas de eliminación de registros en Dreamweaver
- Usar comandos ASP para modificar una base de datos en Dreamweaver
- Crear una página de registro
- Crear una página de inicio de sesión
- Creación de una página para acceso exclusivo de usuarios autorizados
- Protección de carpetas en ColdFusion con Dreamweaver
- Uso de componentes de ColdFusion en Dreamweaver
- Prueba, vista previa y publicación de sitios web
- Solución de problemas
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.
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.
-
-
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.
-
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.
-
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.
-
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.
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.
-
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.
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.
-
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.
-
Haga clic en el botón Crear.
-
Guarde el nuevo documento (Archivo > Guardar).
-
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.
-
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.
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.
-
Seleccione Archivo > Nuevo.
-
En el cuadro de diálogo Nuevo documento, seleccione la categoría Plantillas de sitio.
-
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).
-
Seleccione Actualizar página si cambia la plantilla y desea que la página se actualice automáticamente al editar la plantilla.
-
Haga clic en el botón Crear.
-
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.
-
En el cuadro de diálogo Guardar como, seleccione un sitio en el que guardar la plantilla.
-
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
-
Seleccione Archivo > Nuevo.
-
En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de plantilla.
-
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.
-
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.
-
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.
-
Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y descargar más contenido de diseño de páginas.
-
Haga clic en Crear y guarde el documento (Archivo > Guardar).
Crear un documento a partir de una plantilla en el panel Activos
-
Abra el panel Activos (Ventana > Activos), si no está abierto.
-
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.
-
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.
-
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.
-
Seleccione Archivo > Nuevo.
-
En el cuadro de diálogo Nuevo documento, seleccione la categoría Plantillas de inicio.
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.
-
Haga clic en el botón Crear.
El nuevo documento y todos sus archivos relacionados se abren en la ventana Documento.
-
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:
-
Seleccione Archivo > Nuevo documento.
-
En Tipo de documento, seleccione el archivo de código que se desee crear.
-
Seleccione el tipo de documento que quiera crear en la columna Tipo del documento (como un archivo PHP).
-
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.
-
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.
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
-
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.
-
En el cuadro de diálogo Guardar como que aparece a continuación, vaya a la carpeta en la que desee guardar el archivo.
-
En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo.
-
Haga clic en Guardar para guardarlo.
Almacenamiento de todos los documentos abiertos
-
Seleccione Archivo > Guardar todo.
-
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.
-
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
-
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.
-
Haga clic en Sí 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.
-
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.
-
Haga clic en Nuevo documento en la lista Categoría de la izquierda.
-
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.
-
Seleccione Archivo > Abrir.
Nota:También puede utilizar el panel Archivos para abrir los archivos.
-
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.
-
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.
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.
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)
Abrir un archivo relacionado en la barra de herramientas Archivos relacionados
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.
Abrir un archivo relacionado en el navegador de código
-
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.
-
Espere a que aparezca el indicador del navegador de código y luego haga clic en él para abrir el navegador de código.
-
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.
-
Haga clic en el elemento que le interese para abrir el correspondiente archivo relacionado.
Volver al código fuente del documento principal
-
Haga clic en el botón Código fuente en la barra de herramientas Archivos relacionados.
Cambio de la visualización de 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.
La vista de código estándar no permite ver documentos relacionados al mismo tiempo que el código fuente del documento principal.
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.
Desactivación de archivos relacionados
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.
-
Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
-
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.
Configuración de preferencias de archivos relacionados dinámicamente
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.
-
Elija Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh OS).
-
En la categoría General, asegúrese de que está seleccionada la opción Activar archivos relacionados.
-
Seleccione Manualmente o Automáticamente del menú emergente Archivos relacionados dinámicamente. También puede deshabilitar la detección por completo seleccionando Desactivado.
Detección de archivos relacionados dinámicamente
-
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!).
-
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)
Filtro de archivos relacionados
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.
-
Abra una página que tenga asociados Archivos relacionados.
-
Si es necesario, detecte los Archivos relacionados dinámicamente.
-
Haga clic en el icono Filtrar archivos relacionados, situado en la parte derecha de la barra de herramientas Archivos relacionados.
-
Seleccione los tipos de archivos que desea ver en la barra de herramientas Archivos relacionados. De forma predeterminada, Dreamweaver selecciona todos los Archivos relacionados.
-
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).
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.
Para limpiar código HTML o XHTML que no haya generado Microsoft Word, utilice el comando Herramientas > Limpiar HTML.
-
Guarde el documento de Microsoft Word como archivo HTML.Nota:
En Windows, cierre el archivo en Word para evitar problemas al compartir el archivo.
-
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).
-
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.
-
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).
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.
-
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.