Trabajar con código en DW (fuente: ayuda de dreamweaver )

Las funciones de edición visual de Dreamweaver permiten crear páginas Web de forma rápida, sin escribir una sola línea de código. Además, Dreamweaver ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código y material de referencia para lenguajes sobre hojas de estilos en cascada (CSS), JavaScript y ColdFusion Markup Language (CFML) entre otros.

Configuración del entorno de codificación

Podemos adaptar el entorno de codificación de Dw para ajustarlo a nuestra manera de trabajar. Por ejemplo, podemos cambiar la visualización de los códigos, configurar distintos métodos abreviados de teclado o importar y utilizar la biblioteca de etiquetas que deseemos.

• Visualización del código: Podemos ver el código fuente del documento de varias formas: mostrarlo en la ventana de documento activando la vista Código, dividir la ventana de documento para mostrar tanto la página como el código asociado o trabajar en el Inspector de código, una ventana de codificación independiente.
• Utilización del espacio de trabajo orientado al codificador (sólo en Windows): podemos utilizar un espacio de trabajo muy parecido al de Macromedia HomeSite, pero con los grupos de paneles apilados en la parte izquierda de la ventana principal en lugar de en la parte derecha. En este diseño del espacio de trabajo, de forma predeterminada, el inspector de propiedades está contraído y la ventana Documento aparece en vista Código.
• Configuración de las preferencias de codificación: Es posible personalizar el entorno de codificación de Dreamweaver para adaptarlo a nuestras necesidades. Para ello, sólo tendremos que configurar las preferencias de formato de código, de reescritura, de aplicación de color, etc.
• Personalización de los métodos abreviados de teclado: Podemos utilizar los métodos a breviados de teclado que deseemos, tan solo tendremos que usar el editor de métodos abreviados de teclado y añadir los que necesitemos o a los que estemos más acostumbrados.

Codificación en Dreamweaver

El entorno de codificación en Dw permite escribir, editar y comprobar el código (en diversos lenguajes) de nuestras páginas. Dw no cambia el código escrito por el usuario a menos que active opciones específicas de reescritura de determinados tipos de código que no sea válido.

• Lenguajes compatibles: Además de las posibilidades de edición de texto, Dreamweaver proporciona diversas funciones, como por ejemplo sugerencias para el código, a fin de ayudarnos a codificar en determinados lenguajes. Estos lenguajes son:
  • HTML
  • XHTML
  • CSS
  • JavaScript
  • ColdFusion Markup Language (CFML)
  • Visual Basic (para ASP y ASP.NET)
  • C# (para ASP.NET)
  • JSP
  • PHP
• Reparación de formatos no válidos: Si el documento contiene código que no es válido, Dw muestra dicho código en la vista Diseño y, opcionalmente, lo resalta en la vista Código. Si seleccionamos el código en alguna de las vistas, el inspector de propiedades muestra información sobre por qué no es válido y cómo se puede arreglar. Podemos especificar preferencias en Dwr para la reescritura automática de diversos tipos de código no válido al abrir un documento.
• Código XHTML generado por Dreamweaver : Dw genera código XHTML y limpia el código existente, de forma que cumpla la mayoría de los requisitos del lenguaje XHTML. Dw también proporciona las herramientas que necesarias para cumplir los requisitos XHTML restantes.

Optimización y depuración de código

Podemos adaptar el entorno de codificación de Dw para ajustarlo a nuestra manera de trabajar. Por ejemplo, podemos cambiar la visualización de los códigos, configurar distintos métodos abreviados de teclado o importar y utilizar la biblioteca de etiquetas que deseemos.

• Limpieza del código: Dw puede eliminar automáticamente etiquetas vacías, combinar etiquetas font anidadas y en general mejorar códigos HTML o XHTML desordenados o ilegibles.
• Verificación de que las etiquetas y llaves están equilibradas: Podemos realizar una comprobación para asegurarnos de que las etiquetas, paréntesis (( )), llaves ({ }) y corchetes ([ ]) de la página estén equilibrados. Equilibrados significa que todos los paréntesis, etiquetas, llaves y corchetes de apertura tienen uno de cierre, y viceversa.
• Comprobación de la compatibilidad con los navegadores: Dw permite crear páginas Web con elementos que admiten todos los navegadores (por ejemplo, imágenes y texto), así como con elementos que sólo admiten los navegadores más recientes (por ejemplo, estilos CSS). La función Comprobar navegadores de destino, prueba el código de los documentos para ver si hay etiquetas, atributos, propiedades CSS o valores CSS que el navegador de destino no acepta. La comprobación no altera el documento.
• Validación de etiquetas: Podemos utilizar Dw para descubrir si nuestro código contiene errores de etiquetas o de sintaxis.

• Creación de páginas compatibles con XHTML: Cuando creamos una página nueva, posdemos hacer que sea compatible con XHTML. También podemos hacer que un documento HTML existente sea compatible con XHTML.

Edición de código en la vista Diseño

Dw permite crear y editar visualmente páginas Web sin tener que preocuparse del código fuente subyacente, pero a veces es necesario editar el código para tener un mayor control o para resolver problemas de la página Web. Dw permite editar parte del código desde la vista Diseño.

• Edición de código con el inspector de propiedad: Podemos utilizar el inspector de propiedades para inspeccionar y editar los atributos del texto o de los objetos de la página. Las propiedades mostradas en el inspector de propiedades se suelen corresponder con los atributos de las etiquetas: si se cambia una propiedad en el inspector de propiedades, normalmente esto produce el mismo efecto que si se cambia el atributo correspondiente en la vista Código.
• Cambio de atributos con el inspector de etiquetas: Podemos utilizar el inspector de etiquetas para editar etiquetas y objetos mediante una hoja de propiedades parecida a las que se pueden encontrar en otros IDE (Entorno de desarrollo integrado, Integrated Development Environment).

El inspector de etiquetas y el inspector de propiedades permiten ver y editar los atributos de las etiquetas. El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada etiqueta. El inspector de propiedades muestra sólo los atributos más habituales, pero proporciona un conjunto más amplio de controles para cambiar dichos valores de atributo; además, permite editar determinados objetos (como columnas de tabla) que no corresponden a etiquetas específicas.

Existen en la red incontables manuales, tutoriales y videos acerca del funcionamiento de photoshop. No te resultará difícil encontrarlos si sabes manejarte con los buscadores. Yo me he permitido seleccionar algunos videos de aulaclic.es, espero que te sean de utilidad.