- 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
Descubra cómo admite Dreamweaver los diferentes lenguajes de programación que se utilizan para crear sitios web.
Los lenguajes de programación más populares para diseñar y desarrollar sitios web totalmente funcionales son HTML, HTML5 y CSS para el lado del usuario y PHP, JavaScript, Java y jQuery para el lado del servidor.
Puede diseñar el aspecto de un sitio web (como fuentes y colores, por ejemplo) para todo el sitio, utilizando CSS. A continuación, puede utilizar HTML para insertar imágenes, texto, vídeos, formularios y otros elementos de contenido, todos juntos en una página web conjuntada.
Utilizando conjuntamente CSS y HTML, puede crear un sitio estático. Sin embargo, la mayoría de los sitios web requieren de algún tipo de interacción (como, por ejemplo, que un cliente rellene un formulario o efectúe un pago) y de una base de datos para almacenar todos los datos del sitio web.
Para crear estos canales de comunicación en el lado del servidor, necesitará un lenguaje de programación del lado del servidor (por ejemplo, PHP) que se comunique con la base de datos.
Lenguajes de programación compatibles con Dreamweaver
Además de las posibilidades de edición de texto, Adobe Dreamweaver proporciona diversas funciones, como por ejemplo sugerencias para el código, con el fin de ayudarle a codificar en los siguientes lenguajes:
- HTML
- PHP
- CSS
- JavaScript
Otros lenguajes, como Perl, no son compatibles con las funciones de programación específicas del lenguaje de Dreamweaver; por ejemplo, puede crear y editar archivos en Perl, pero las sugerencias de código no son aplicables a este lenguaje.
Modificación automática del código
Puede establecer opciones que indiquen a Dreamweaver que limpie automáticamente el código escrito por el usuario según los criterios que se hayan especificado. No obstante, nunca reescribe el código a menos que se hayan activado las opciones de reescritura de código o que realice una acción que cambie el código. Por ejemplo, Dreamweaver no modifica los espacios en blanco ni el uso de mayúsculas o minúsculas en los atributos a menos que utilice el comando Aplicar formato de origen.
Algunas de estas opciones de reescritura de código están activadas de forma predeterminada.
Las capacidades de Roundtrip HTML en Dreamweaver le permiten pasar los documentos de un editor de HTML basado en texto a Dreamweaver y a la inversa sin que se vean prácticamente afectados el contenido y la estructura del código fuente HTML original del documento. Entre dichos recursos figuran los siguientes:
Uso de un editor de texto de otro proveedor para editar el documento actual.
De forma predeterminada, Dreamweaver no realiza cambios en el código creado o editado en otros editores de HTML, aunque el código no sea válido, a menos que se activen las opciones de reescritura de código.
Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas XML), ya que carece de criterios para juzgar cuáles son válidas o no. Si una etiqueta no reconocida se superpone a otra (por ejemplo, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marca como un error, pero no reescribe el código.
Opcionalmente, puede establecer que Dreamweaver resalte en amarillo el código no válido en la Vista de código. Al seleccionar una sección resaltada, el inspector de propiedades muestra información sobre cómo corregir el error.
Código XHTML
Dreamweaver genera código XHTML y limpia el código XHTML existente de forma que cumpla la mayoría de los requisitos del lenguaje XHTML. Las herramientas que se necesitan para los pocos requisitos XHTML que quedan también se proporcionan.
algunos de los requisitos también son obligatorios en distintas versiones de HTML.
En la siguiente tabla se describen los requisitos XHTML que Dreamweaver cumple automáticamente:
Requisito XHTML |
Acciones que realiza Dreamweaver |
---|---|
Antes del elemento raíz del documento, debe haber una declaración DOCTYPE que haga referencia a uno de los tres archivos DTD (Definición de tipo de documento, Document Type Definition) para XHTML: strict (estricta), transitional (transitoria) o frameset (conjunto de marcos). |
Añade una declaración DOCTYPE de XHTML a un documento XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> O, si el documento XHTML tiene un conjunto de marcos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
El elemento raíz del documento debe ser html, y el elemento html debe designar el atributo namespace de XHTML. |
Añade el atributo namespace al elemento html de la siguiente forma: <html xmlns="http://www.w3.org/1999/xhtml"> |
Un documento estándar debe incluir los elementos estructurales head, title y body. Un documento de conjunto de marcos debe incluir los elementos estructurales head, title y frameset. |
En un documento estándar, incluye los elementos head, title y body. En un documento de conjunto de marcos, incluye los elementos head, title y frameset. |
Todos los elementos de un documento deben estar correctamente anidados. <p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p> |
Genera código correctamente anidado y, cuando limpia el XHTML, corrige la anidación de cualquier código no generado por Dreamweaver. |
Todos los nombres de elementos y atributos deben estar en minúsculas. |
Obliga a utilizar las minúsculas en los nombres de elementos y atributos HTML del código XHTML que genera y cuando limpia el XHTML, al margen de las preferencias especificadas para las etiquetas y atributos. |
Todos los elementos deben incluir una etiqueta de cierre, salvo que se especifique EMPTY (vacío) en la DTD. |
Inserta etiquetas de cierre en el código que genera, y cuando limpia el XHTML. |
Los elementos vacíos deben incluir una etiqueta de cierre o la etiqueta de apertura debe terminar con />. Por ejemplo, <br> no es válido, la forma correcta es <br></br> o <br/>. Los elementos vacíos son los siguientes: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta y param. Para la compatibilidad con navegadores que no admiten XML, debe haber un espacio delante de /> (por ejemplo, <br />, no <br/>). |
Inserta elementos vacíos con un espacio delante de la barra diagonal de cierre en el código que genera, y cuando limpia el XHTML. |
Los atributos no pueden abreviarse; por ejemplo, <td nowrap> no es válido; la forma correcta es <td nowrap="nowrap">. Esto afecta a los siguientes atributos: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly y selected. |
Inserta pares completos atributo-valor en el código que genera, y cuando limpia el XHTML. Nota: Si un navegador HTML no admite HTML 4, podría no interpretar estos atributos booleanos cuando aparecen en su forma completa. |
Todos los valores de atributo deben estar entre comillas. |
Coloca comillas en los valores de atributo en el código que genera y cuando limpia el XHTML. |
Los siguientes elementos deben incluir un atributo id y un atributo name. a, applet, form, frame, iframe, img y map. Por ejemplo, <a name="intro">Introduction</a> no es válido; la forma correcta es <a id="intro">Introduction</a> o <a id="section1" name="intro"> Introduction</a>. |
Establece el mismo valor para los atributos name e id, siempre que el atributo name esté definido por un inspector de propiedades, en el código que genera Dreamweaver y cuando limpia el XHTML. |
Para atributos con valores type enumerados, éstos deben aparecer en minúsculas. Un valor type enumerado forma parte de una lista especificada de valores permitidos; por ejemplo, los valores posibles del atributo align son: center, justify, left y right. |
Obliga a utilizar minúsculas en los valores type enumerados del código que genera, y cuando limpia el XHTML. |
Todos los elementos script y style deben incluir un atributo type. El atributo type del elemento script es obligatorio desde HTML 4, cuando el atributo language dejó de utilizarse. |
Establece los atributos type y language de los elementos script, y el atributo type de los elementos style, en el código que genera y cuando limpia el XHTML. |
Todos los elementos img y area deben incluir un atributo alt. |
Establece estos atributos en el código que genera y, cuando limpia el XHTML, informa de los atributos alt que faltan. |
Expresiones regulares
Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Utilícelas en las búsquedas para describir conceptos como líneas que comiencen por “var” y valores de atributo que contengan un número.
La tabla siguiente contiene los caracteres especiales de las expresiones regulares, su significado y ejemplos de uso. Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule el valor del carácter colocando una barra invertida delante de él. Por ejemplo, para buscar el asterisco en la frase some conditions apply*, el modelo de búsqueda deberá ser el siguiente: apply\*. Si no anula el valor del asterisco, encontrará todas las apariciones de “apply” (así como de “appl”, “applyy” y “applyyy”), no solo las que van seguidas de asterisco.
Carácter |
Texto buscado |
Ejemplo |
---|---|---|
^ |
Principio de entrada o línea. |
^T encontrará “T” en “This good earth”, pero no en “Uncle Tom’s Cabin” |
$ |
Fin de entrada o línea. |
h$ encontrará “h” en “teach”, pero no en “teacher” |
* |
El carácter anterior cero o más veces. |
um* encontrará “um” en “rum”, “umm” en “yummy” y “u” en “huge” |
+ |
El carácter anterior una o más veces. |
um+ encontrará “um” en “rum” y “umm” en “yummy”, pero no en “huge” |
? |
El carácter anterior una vez como máximo (es decir, indica que el carácter anterior es opcional). |
st?on encontrará “son” en “Johnson” y “ston” en “Johnston”, pero no en “Appleton” o “tension” |
. |
Cualquier carácter individual, salvo el de salto de línea. |
.an encontrará “ran” y “can” en la frase “bran muffins can be tasty” |
x|y |
x o y. |
FF0000|0000FF encontrará “FF0000” en bgcolor=”#FF0000” y “0000FF’” en font color=”#0000FF” |
{n} |
Exactamente n apariciones del carácter anterior. |
o{2} encontrará “oo” en “loom” y las dos primeras oes de “mooooo”, pero no “money” |
{n,m} |
Como mínimo n y como máximo m apariciones del carácter anterior. |
F{2,4} encontrará “FF” en “#FF0000” y las cuatro primeras efes de #FFFFFF |
[abc] |
Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [a-f] es equivalente a [abcdef]). |
[e-g] encontrará “e” en “bed”, “f” en “folly”, y ”g” en “guard” |
[^abc] |
Cualquier carácter que no esté entre paréntesis angulares. Especifique un rango de caracteres con un guión (por ejemplo, [^a-f] es equivalente a [^abcdef]). |
[^aeiou] encontrará inicialmente “r” en “orange”, “b” en “book” y “k” en “eek!” |
\b |
Límite de palabra (como un espacio o un retorno de carro). |
\bb encontrará “b” en “book”, pero no en “goober” ni “snob” |
\B |
Cualquiera que no sea un límite de palabra. |
\Bb encontrará “b” en “goober”, pero no en “book” |
\d |
Cualquier carácter de dígito. Equivalente a [0-9]. |
\d encontrará “3” en “C3PO” y “2” en “apartment 2G” |
\D |
Cualquier carácter que no sea de dígito. Equivalente a [^0-9]. |
\D encontrará “S” en “900S” y “Q” en “Q45” |
\f |
Salto de página. |
|
\n |
Salto de línea. |
|
\r |
Retorno de carro. |
|
\s |
Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o saltos de línea). |
\sbook encontrará ”book” en “blue book”, pero no en “notebook” |
\S |
Cualquier carácter individual que no sea un espacio en blanco. |
\Sbook encontrará “book” en “notebook”, pero no en “blue book” |
\t |
Tabulación. |
|
\w |
Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_]. |
b\w* encontrará “barking” en “the barking dog” y “big” y “black” en “the big black dog” |
\W |
Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_]. |
\W encontrará “&” en “Jake&Mattie” y “%” en “100%” |
Control+Intro o Mayús+Intro (Windows), o Control+Retorno o Mayús+Retorno o Comando+Retorno (Macintosh) |
Carácter de retorno. Desactive la opción Omitir espacio en blanco cuando realice esta búsqueda si no utiliza expresiones regulares. Observe que este método busca un determinado carácter, no un salto de línea. Por ejemplo, no busca etiquetas <br> ni <p>. Los caracteres de retorno aparecen como espacios en la vista de Diseño, no como saltos de línea. |
Utilice paréntesis para destacar agrupaciones dentro de la expresión regular a las que podrá hacer referencia posteriormente. A continuación, utilice $1, $2, $3, etc. en el campo Reemplazar con para hacer referencia a la primera, segunda, tercera y posteriores agrupaciones entre paréntesis.
en el campo Buscar, para hacer referencia a una agrupación entre paréntesis anterior en la expresión regular, utilice \1, \2, \3, etc. en lugar de $1, $2, $3.
Por ejemplo, si busca (\d+)\/(\d+)\/(\d+) y lo reemplaza por $2/$1/$3, cambiará el día y el mes de una fecha separada por barras y, de esta manera, el formato de fechas americano se convertirá al formato europeo.
Código de comportamiento de servidor
Cuando desarrolla una página dinámica y seleccione un comportamiento del servidor en el panel Comportamientos del servidor, Dreamweaver inserta uno o varios bloques de código en la página para que funcione el comportamiento del servidor.
Si cambia manualmente el código de un bloque de código, ya no podrá utilizar paneles como Vinculaciones o Comportamientos del servidor para editar el comportamiento del servidor. Dreamweaver busca patrones específicos en el código de la página para detectar comportamientos del servidor y mostrarlos en el panel Comportamientos del servidor. Si cambia el código de un bloque de código, Dreamweaver ya no puede detectar el comportamiento del servidor y mostrarlo en el panel Comportamientos del servidor. Sin embargo, el comportamiento del servidor se encuentra aún en la página y podrá editarlo en el entorno de programación de Dreamweaver.
Páginas relacionadas
- Sugerencias de código y completado de código
- Configuración de las preferencias de programación
- Personalización de los métodos abreviados de teclado
- Creación de páginas compatibles con XHTML
- Buscar y reemplazar texto
- Optimización del espacio de trabajo para desarrollo visual
- Visualización de registros de la base de datos