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 capacidades de edición de texto, Adobe Dreamweaver proporciona varias funciones, como sugerencias de código, para ayudarte a programar 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 en Dreamweaver; por ejemplo, puedes crear y editar archivos Perl, pero las sugerencias de código no se aplican a ese lenguaje.
Modificación automática del código
Puedes establecer opciones que indiquen a Dreamweaver que limpie automáticamente tu código escrito a mano según los criterios que especifiques. Sin embargo, tu código nunca se reescribe a menos que las opciones de reescritura de código estén habilitadas o realices una acción que cambie el código. Por ejemplo, Dreamweaver no altera tu espacio en blanco ni cambia las mayúsculas y minúsculas de los atributos a menos que uses el comando Aplicar formato de fuente.
Algunas de estas opciones de reescritura de código están activadas de forma predeterminada.
Las capacidades de HTML de ida y vuelta en Dreamweaver te permiten mover tus documentos de un lado a otro entre un editor HTML basado en texto y Dreamweaver con poco o ningún efecto en 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 hace cambios en el código creado o editado en otros editores HTML, incluso si el código no es válido, a menos que habilites las opciones de reescritura de código.
Dreamweaver no cambia las etiquetas que no reconoce, incluidas las etiquetas XML, porque no tiene criterios por los cuales juzgarlas. Si una etiqueta no reconocida se superpone a otra etiqueta (por ejemplo, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver la marca como un error pero no reescribe el código.
Opcionalmente, puedes configurar Dreamweaver para resaltar código no válido en la vista Código (en amarillo). Cuando seleccionas 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 nuevo y limpia el código XHTML existente de una manera que cumple con la mayoría de los requisitos XHTML. Las herramientas que necesitas para cumplir con los pocos requisitos XHTML que quedan también están disponibles.
Algunos de los requisitos también se exigen en varias versiones de HTML.
En la siguiente tabla se describen los requisitos XHTML que Dreamweaver cumple automáticamente:
Requisito XHTML |
Acciones que realiza Dreamweaver |
|---|---|
Debe haber una declaración DOCTYPE en el documento antes del elemento raíz, y la declaración debe hacer referencia a uno de los tres archivos de Definición de Tipo de Documento (DTD) para XHTML (estricto, transicional o 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 espacio de nombres XHTML. |
Añade el atributo namespace al elemento html, de la siguiente manera: <html xmlns="http://www.w3.org/1999/xhtml"> |
Un documento estándar debe tener los elementos estructurales head, title y body. Un documento de conjunto de marcos debe tener 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>Este es un <i>mal ejemplo.</p></i> <p>Este es un <i>buen ejemplo.</i></p> |
Genera código correctamente anidado y, al limpiar XHTML, corrige el anidado en código que no fue generado por Dreamweaver. |
Todos los nombres de elementos y atributos deben estar en minúsculas. |
Fuerza que los nombres de elementos y atributos HTML estén en minúsculas en el código XHTML que genera y al limpiar XHTML, independientemente de las preferencias de mayúsculas y minúsculas de etiquetas y atributos. |
Cada elemento debe tener una etiqueta de cierre, a menos que esté declarado en el DTD como EMPTY. |
Inserta etiquetas de cierre en el código que genera, y al limpiar XHTML. |
Los elementos vacíos deben tener 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 siguientes son los elementos vacíos: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, y param. Y para compatibilidad con versiones anteriores con exploradores que no tienen XML habilitado, debe haber un espacio antes del /> (por ejemplo, <br />, no <br/>). |
Inserta elementos vacíos con un espacio antes de la barra de cierre en etiquetas vacías en el código que genera, y al limpiar XHTML. |
Los atributos no se pueden minimizar; 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 de atributo-valor en el código que genera, y al limpiar XHTML. Nota: Si un explorador HTML no es compatible con HTML 4, podría fallar al interpretar estos atributos booleanos cuando aparecen en su forma completa. |
Todos los valores de atributo deben estar entre comillas. |
Coloca comillas alrededor de los valores de atributos en el código que genera, y al limpiar XHTML. |
Los siguientes elementos deben tener un atributo id así como 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 los atributos name e id al mismo valor, cuando el atributo name se establece por un inspector de propiedades, en el código que genera Dreamweaver, y al limpiar XHTML. |
Para atributos con valores de un tipo enumerado, los valores deben estar en minúsculas. Un valor de tipo enumerado es un valor de una lista especificada de valores permitidos; por ejemplo, el atributo align tiene los siguientes valores permitidos: center, justify, left, y right. |
Fuerza que los valores de tipo enumerado estén en minúsculas en el código que genera, y al limpiar XHTML. |
Todos los elementos de script y estilo deben tener un atributo type. (El atributo type del elemento script ha sido requerido desde HTML 4, cuando el atributo language se declaró obsoleto.) |
Establece los atributos type y language en elementos script, y el atributo type en elementos style, en el código que genera y al limpiar XHTML. |
Todos los elementos img y area deben tener un atributo alt. |
Establece estos atributos en el código que genera y, al limpiar XHTML, informa de los atributos alt que faltan. |
Expresiones regulares
Las expresiones regulares son patrones que describen combinaciones de caracteres en texto.Úsalas en las búsquedas del código para ayudar a describir conceptos como líneas que empiecen por "var" y valores de atributos que contengan un número.
La tabla siguiente enumera los caracteres especiales de las expresiones regulares, sus significados y ejemplos de uso.Para buscar texto que contenga uno de los caracteres especiales de la tabla, aplica escape al carácter especial usando una barra invertida delante.Por ejemplo, para buscar el asterisco real en la frase some conditions apply*, tu patrón de búsqueda podría verse así: apply\*.Si no escapas el asterisco, encontrarás todas las ocurrencias de "apply" (así como "appl", "applyy" y "applyyy"), no solo las seguidas de asterisco.
Carácter |
Texto buscado |
Ejemplo |
|---|---|---|
^ |
Principio de entrada o línea. |
^T coincide con "T" en "This good earth" pero no en "Uncle Tom's Cabin" |
$ |
Fin de entrada o línea. |
h$ coincide con "h" en "teach" pero no en "teacher" |
* |
El carácter anterior cero o más veces. |
um* coincide con "um" en "rum", "umm" en "yummy" y "u" en "huge" |
+ |
El carácter anterior una o más veces. |
um+ coincide con "um" en "rum" y "umm" en "yummy" pero nada en "huge" |
? |
El carácter anterior como máximo una vez (es decir, indica que el carácter anterior es opcional). |
st?on coincide con "son" en "Johnson" y "ston" en "Johnston" pero nada en "Appleton" o "tension" |
. |
Cualquier carácter individual, salvo el de salto de línea. |
.an coincide con "ran" y "can" en la frase "bran muffins can be tasty" |
x|y |
x o y. |
FF0000|0000FF coincide con "FF0000" en bgcolor="#FF0000" y "0000FF'" en font color="#0000FF" |
{n} |
Exactamente n apariciones del carácter anterior. |
o{2} coincide con "oo" en "loom" y las dos primeras o en "mooooo" pero nada en "money" |
{n,m} |
Al menos n, y como máximo m, ocurrencias del carácter anterior. |
F{2,4} coincide con "FF" en "#FF0000" y las cuatro primeras F en #FFFFFF |
[abc] |
Cualquier carácter de los incluidos entre corchetes.Especifica un rango de caracteres con un guión (por ejemplo, [a-f] equivale a [abcdef]). |
[e-g] coincide con "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] equivale a [^abcdef]). |
[^aeiou] inicialmente coincide con "r" en "orange", "b" en "book" y "k" en "eek!" |
\b |
Límite de palabra (como un espacio o un retorno de carro). |
\bb coincide con "b" en "book" pero no coincide con nada en "goober" o "snob" |
\B |
Cualquiera que no sea un límite de palabra. |
\Bb coincide con «b» en «goober» pero no coincide con nada en «book» |
\d |
Cualquier carácter de dígito. Equivalente a [0-9]. |
\d coincide con "3" en "C3PO" y "2" en "apartment 2G" |
\D |
Cualquier carácter que no sea de dígito. Equivalente a [^0-9]. |
\D coincide con "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 de espacio en blanco individual, incluido el espacio, tabulación, avance de página o avance de línea. |
\sbook coincide con «book» en «blue book» pero no con nada en «notebook» |
\S |
Cualquier carácter individual que no sea un espacio en blanco. |
\Sbook coincide con «book» en «notebook» pero con nada en «blue book» |
\t |
Tabulación. |
|
\w |
Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_]. |
b\w* coincide con "barking" en "the barking dog" y tanto "big" como "black" en "the big black dog" |
\W |
Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_]. |
\W coincide con "&" en "Jake&Mattie" y "%" en "100%" |
Ctrl+Intro o Mayús+Intro (Windows), o Ctrl+Retorno o Mayús+Retorno o Cmd+Retorno (Macintosh) |
Carácter de retorno. Asegúrese de desmarcar la opción Omitir diferencias de espacios en blanco al buscar esto, si no usa expresiones regulares.Ten en cuenta que esto coincide con un carácter particular, no con la noción general de salto de línea; por ejemplo, no coincide con una etiqueta <br> o una etiqueta <p>. Los caracteres de retorno aparecen como espacios en la vista Diseño, no como saltos de línea. |
Usa paréntesis para delimitar agrupaciones dentro de la expresión regular a las que hacer referencia posteriormente.Luego usa $1, $2, $3, etc. en el campo Reemplazar con para hacer referencia a las agrupaciones entre paréntesis primera, segunda, tercera y posteriores.
En el cuadro Buscar, para hacer referencia a una agrupación entre paréntesis anterior en la expresión regular, usa \1, \2, \3, etc. en lugar de $1, $2, $3.
Por ejemplo, buscar (\d+)\/(\d+)\/(\d+) y reemplazarlo con $2/$1/$3 intercambia el día y el mes en una fecha separada por barras, convirtiendo así entre fechas de estilo americano y fechas de estilo europeo.
Código de comportamiento de servidor
Cuando desarrollas una página dinámica y seleccionas un comportamiento del servidor en el panel Comportamientos del servidor, Dreamweaver inserta uno o más bloques de código en tu página para que el comportamiento del servidor funcione.
Si cambias manualmente el código dentro de un bloque de código, ya no podrás usar los paneles como Vínculos y Comportamientos del servidor para editar el comportamiento del servidor.Dreamweaver busca patrones específicos en el código de página para detectar comportamientos del servidor y mostrarlos en el panel Comportamientos del servidor.Si cambias el código de un bloque de código de cualquier manera, Dreamweaver ya no puede detectar el comportamiento del servidor y mostrarlo en el panel Comportamientos del servidor.Sin embargo, el comportamiento del servidor todavía existe en la página, y puedes editarlo en el entorno de código en Dreamweaver.
Temas similares
- 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
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
