Ya hace varias versiones que es posible trabajar con diseños basados en CSS (Cascade Style sheets) dentro de Dreamweaver, pero en la versión CS3 la integración del programa con esta tecnología es realmente buena y resulta muy cómodo diseñar páginas web basadas en CSS aún siendo neófito en el tema.

Una de las ventajas que siempre ha tenido Dreamweaver es la capacidad de construir la composición de la página de forma visual sin dejar por ello de atender la parte de código. Hay diseñadores web que argumentan (en realidad muchos de ellos simplemente repiten lo que han oído) que Dreamweaver genera un código HTML muy sucio, no estoy de acuerdo, en todo caso es el usuario el que genera el código sucio ya que lo único que hace Dreamweaver es traducir a líneas de programación nuestras acciones en la parte visual. Es tan impropio como decir, “ese automóvil conduce muy mal”, en todo caso será el conductor. Es cierto que quizás algunas extrapolaciones de diseño visual a código podrían mejorarse, pero de ahí a decir que no hace código límpio va un gran trecho. En general opino que Dreamweaver siempre ha generado un código HTML, Java Script y CSS bastante manejable, y desde luego la versión CS3 en este aspecto ha mejorado, sobretodo en lo que se refiere al código Java Script creado por los widgets del spry de AJAX.

A mi particularmente me gusta trabajar con el modo compartido visual-código. De es forma trabajas en la parte visual pero estás controlando en todo moemnto lo que ocurre en la parte de código.

split

Una de las características que más me gustan del nuevo Dreamweaver CS3 son las nuevas plantillas de creación de páginas basadas en CSS que permiten crear muy facílmente lo que en diseño web se conoce como “diseño líquido” aquel en el que la página o partes de la página pueden redimensionarse y adaptarse al tamaño de la ventana del navegador.

Echémos un vistazo rápido a estas opciones.

1. DISEÑO LÍQUIDO

liquido.gif

Esta opción crea un espacio de maquetación líquido, es decir su ancho se adapta al ancho de la pantalla y se mide en porcentaje. El contenido de texto y la ubicación de las imágenes se adaptan a dicho porcentaje.

liquidex.jpg

2. DISEÑO ELÁSTICO

emspace.gif

En esta ocasión el ancho de la columna de maquetación se adapta al ancho de los caractéres y se mide en espacios eme (el espacio que ocupan 2 m en una tipografía concreta).

elasticex.jpg

3. DISEÑO SÓLIDO

soilid.gif

Por último está la opcíon de una columna sólida con un ancho fijo de píxeles en pantalla independientemente del tamaño del texto de de la ventana del navegador.

solidex.jpg

 

Aparte de estos tres típos de maquetación básica, Dreamweaver CS3 nos ofrece múltiples combinaciones de columnas donde es posible combinar partes sólidas, flexibles y líquidas.

varis.gif

Como ya se ha comentado todos estos diseños están basados en estilos CSS. Cuando creamos una página es posible decirle si queremos incluir el código CSS en la propia página o si queremos crear un documento CSS independiente. Esta última opción es muy útil ya que podremos asignar la misma hoja de estilos a múltiples páginas del sitio web, luego un sólo cambio en la hoja de estilos actualizará automáticamente todas las páginas del sitio. Una vez creado el fichero CSS es posible crear nuevas páginas que estén vinculadas a esa hoja de estilos.

csslayout1.gif