Acerca de la programación en Dreamweaver

  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

 

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.

Nota:

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.

Nota:

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.

Logotipo de Adobe

Inicia sesión en tu cuenta