Creación de sitios webs compatibles XHTML con ayuda de Macromedia Dreamweaver 8 - Paso 2: Edición de las hojas de estilos CSS

Mientras creamos los elementos necesarios para mostrar los contenidos que deseamos en nuestra página web, podemos realizar los cambios necesarios en la Hoja de estilos CSS para modificar nuestra plantilla de diseño y maquetación.

El inspector de propiedades CSS

Existen 3 formas para implementar CSS en una página web: en línea (dentro de la misma etiqueta), incrustado (uno para cada página web) o externo (llamado desde todas las páginas que conforman un sitio).

Aunque nuestra primera opción debería ser un CSS externo, tal como se ha creado en el ejemplo, gracias a Macromedia Dreamweaver 8 es muy fácil acceder a las propiedades de estilo de un elemento ya que las diferentes clases de estilos que hayamos definido en nuestro CSS apareceran en nuestro inspector de propiedades al lado de la etiqueta “Estilo”, sea un CSS incrustado o externo.

Podremos comprobar como sólo cambiando el estilo que queremos aplicar a nuestro elemento, se verá reflejado en la vista de diseño.

Cambios de la hoja de estilos desde Dreamweaver

Para realizar cambios en nuestro CSS tenemos distintas vías, editando directamente desde nuestro archivo CSS donde Dreamweaver nos ofrece un completo editor visual para archivos CSS o desde la vista de diseño gracias al panel CSS que encontraremos por defecto en la parte derecha superior de nuestra área de trabajo.

En este panel, encontraremos qué propiedades y valores se están aplicando al elemento seleccionado y podremos cambiar sus valores desde el subpanel Propiedades de...

Cabe destacar la excelente gestión que Dreamweaver realiza sobre los CSS debido a que como su nombe indica (Hojas de Estilos en Cascada) las propiedades se van heredando de los elementos “padres” a los elementos “hijos”. En Resumen de la selección, donde son visibles todas las propiedades que se aplican al elemento seleccionado, podremos escoger una propiedad a modificar, y automáticamente en “Acerca de” nos aparecerá de qué elemento hereda dicha propiedad y podremos cambiar su valor en “Propiedades de”.

Esta gestión nos será muy útil para la gestión de sitios complejos, debido a que no siempre es fácil detectar que propiedades se heredan en cada elemento y dónde habría que realizar el cambio de su valor.