Además de poder modificar los diferentes códigos de una página en forma directa sobre el mismo, Adobe Dreamweaver presenta una serie de herramientas que facilita el manejo de los mismos. En este artículo, veremos una herramienta que todo aquel que pretenda hacer de Dreamweaver su herramienta de diseño web, debe conocer a fondo, ya que es uno de los elementos más útiles que tiene este excelente programa. Se trata del Panel de Estilo CSS.
Para probar como funciona, deberemos crear una página de ejemplo. Para este trabajo, hemos creado una página XHTML 1.1 y un archivo CSS, con dos columnas flotantes con barra lateral izquierda, encabezado y pie.
El panel de estilo CSS
Cuando dicho panel no se encuentra abierto desde el inicio del programa, se puede abrir de dos formas. La primera, yendo a Ventana / Estilo CSS de la barra de herramientas estándar. La segunda, consiste en emplear las teclas del método abreviado: Mayús + F11. Cuando se abra el panel, puede hacerlo en varias posiciones diferentes, pero en todos los casos, siempre se abrirá en el mismo sitio que se le ha cerrado por última vez. Puede formar parte de una columna en cualquiera de las dos posiciones, puede ocupar un lugar entre las barras de herramientas que se encuentran en la parte superior de la vista, en la parte inferior o como ventana.
En la parte superior del panel, se encuentran dos botones destinados a seleccionar el modo en que se visualizará. Cuando seleccionamos “Todo”, en la parte central del panel podemos ver un listado completo de las reglas CSS que se encuentran en el archivo, mientras que si se selecciona “Actual”, se muestra la regla CSS del elemento seleccionado y las reglas que tienen influencia (las reglas de los elementos “padres”) en el elemento seleccionado. La siguiente imagen nos muestra la ventana en los dos modos de visualización.
Como vemos en la imagen anterior, cuando el panel se encuentra en modo “Actual”, aparece un sub-panel en el centro llamado “Reglas”. En la parte superior derecha de dicho sub-panel, hay dos íconos. Cuando hacemos clic en el izquierdo, se muestra la información de la regla seleccionada, mientras que cuando se hace clic en el ícono derecho, se ve la regla del elemento y sus padres.
Al pie del panel y a la izquierda, aparecen tres íconos cuya finalidad es cambiar el modo en que se visualizan las propiedades de las reglas CSS. Seleccionando el primero, se muestran todos los atributos posibles clasificados de acuerdo al tipo de atributo (Fuente, fondo, bloque, borde, cuadro, lista, posición, extensiones y tablas, contenido, comillas). En azul aparecen los atributos que tienen valores definidos, mientras que en negro se muestran aquellos que no tienen un valor establecido. Cuando se selecciona el segundo botón, los atributos también aparecen todos, pero ordenados alfabéticamente. También en este caso, los atributos que tienen valor definido se muestran en azul, mientras que los atributos no empleados (con su valor por defecto) se encuentran en negro. Seleccionando el tercer botón, solo se mostrarán los atributos con un valor definido.
También en el pie del panel pero a la derecha, también aparecen tres íconos. El primero permite adjuntar un nuevo archivo de estilo CSS. Cuando se selecciona esta opción, se abre un cuadro donde aparece, en primer lugar, un campo donde introduciremos la URL del archivo CSS. Debajo de éste, se encuentran dos selectores que nos permiten señalar como se vinculará el archivo de estilo con la página (vincular o importar). Aún más abajo podremos señalar el tipo de medio o medios para los cuales nos encontramos diseñando la página (para su visualización en pantalla, móvil, proyector, sistema Braille). En la parte inferior del cuadro, Dreamweaver nos dice que tiene hojas de estilo de muestra, las que podremos emplear como inicio de nuestro trabajo y modificarlas.
El segundo botón permite la introducción de una nueva regla CSS. Cuando seleccionamos esta opción, se abre un cuadro dividido en secciones. En la primera, podremos elegir el tipo de selector que emplearemos (class, id, modificar el existente o redefinir un elemento HTML). En la siguiente sección se define el nombre del selector y en la última sección, se definirá el lugar donde se introducirá la regla (en qué archivo CSS o si se desea incluir en el encabezado del HTML).
Modificación de estilos con el panel de estilo CSS
Cuando se desea ingresar una nueva regla CSS para un nuevo elemento, se emplea el botón ya descrito ubicado en el pie del panel. A modo de ejemplo, haremos una prueba sobre el archivo ya creado, introduciendo una imagen a la cual le modificaremos algunos atributos. Podremos el área de trabajo de Dreamweaver en modo “dividir” para poder visualizar tanto el código como el diseño. Luego seleccionaremos en la barra de herramientas estándar “Insertar / Imagen”. Seleccionaremos la imagen cualquiera y le colocaremos el texto alternativo (por ser un ejemplo, esto no es absolutamente necesario, pero es conveniente hacer las cosas en la forma correcta, de modo de ir acostumbrándose a la forma de hacerlo) e insertaremos la imagen.
Ahora introduciremos una nueva regla CSS, haciendo clic en el segundo botón de la derecha del pie del panel. Se abrirá el cuadro correspondiente, donde en el primer campo seleccionaremos “Etiqueta. Redefine un elemento HTML”. En el campo destinado al nombre del selector, aparecerá automáticamente “img” (lo que quiere decir que daremos atributos válidos para todas las imágenes del documento, excepto para aquellas que tengan reglas CSS definidas). En el último campo, seleccionaremos el archivo CSS de la página y haremos clic en “Aceptar”.
Una vez hecho esto, se abrirá un nuevo cuadro, el que se encuentra dividido en dos secciones verticales. A la izquierda, aparece un listado de las categorías o tipos de atributos que podremos definir, mientras que a la derecha, se encuentra la sección donde introduciremos los valores correspondientes a los atributos. En primer lugar, definiremos las dimensiones de las imágenes, haciendo clic en primer lugar en la categoría “bloque”. A la derecha, definiremos los valores para los diferentes atributos. Para el ejemplo, hemos decidido un ancho y una altura de 100px, un relleno (“padding”) de 5px para todos los lados de las imágenes, hacer que flote a la izquierda y márgenes de 5, 10, 5 y 0px arriba, a la derecha, abajo y a la izquierda respectivamente.
Luego le daremos un borde, haciendo clic en la categoría “borde”. Definiremos “solid” para el estilo de borde, 1px para el ancho y #03F para el color. El resultado (con la imagen seleccionada por ustedes) deberá ser parecido al siguiente ejemplo:
Las propiedades también pueden ser agregadas o modificadas en el propio panel. Para modificar una propiedad, basta con hacer clic sobre ella e introducir un nuevo valor. Para agregar una nueva propiedad, se debe hacer clic en el campo “Añadir propiedad”, ubicado al final de la lista de propiedades de la regla seleccionada. Una vez realizado esto, aparecerá un selector donde podremos elegir la propiedad. Al hacer clic sobre ella, la nueva propiedad aparecerá en el listado, donde le deberemos agregar el valor que deseemos.