Como editar y crear propiedades CSS con Adobe Dreamweaver

Las facilidades de trabajo que ofrece Adobe Dreamweaver incluyen la edición y creación de reglas y propiedades CSS. Cuando nos encontramos realizando un diseño, necesitaremos inevitablemente generar nuevas reglas en la medida que se vayan introduciendo nuevos elementos dentro del mismo.

No tendría ningún sentido contar con un programa WYSIWYG para la creación de páginas web, si necesitáramos crear todo o buena parte de los códigos de los archivos CSS en forma manual. Adobe Dreamweaver brinda la posibilidad de realizar el ingreso de nuevas reglas y propiedades CSS y su posterior edición, sin necesidad de salir de la ventana de edición.

A continuación, explicaremos como utilizar esta herramienta. Para ejemplificar cada uno de los pasos que daremos, tomaremos la misma página de ejemplo que hemos utilizado para el artículo anterior. En caso de no haberlo leído, es conveniente que sigan los pasos allí descritos, para lo cual deberán acceder al artículo desde aquí.

Ubicación de las herramientas

Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, ya que desde allí podremos crear y modificar todos los estilos, mientras estamos visualizando los resultados.

Para abrir el cuadro, debemos hacerlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”. De inmediato, en la columna izquierda de la ventana del programa, donde seguramente ya se encontrarán otros cuadros, se abrirá el cuadro de edición CSS.

Para desplegar dicho cuadro, tal como se realiza con otros cuadros, basta con hacer clic en la pestaña correspondiente, desplegándose el cuadro en la misma columna. Para retirarlo de la ventana y trasladarlo a otra parte de la página, se hace mediante el método de arrastrar desde la propia pestaña.

El cuadro aparece dividido en tres secciones, cuyos tamaños pueden modificarse desde la ventana que encabeza cada una de estas secciones. La posición del cuadro dentro de la columna que contiene los cuadros puede modificarse también arrastrando con el puntero.

Edición de reglas CSS existentes

Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas.

Selección del elementos cuyas reglas y propiedades van a modificarse

Para seleccionar las reglas CSS a editarse, hay dos métodos que se pueden emplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro.

Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso, aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo. Por ejemplo, para editar las reglas y propiedades del encabezado (nos referimos a la capa encabezado), haremos clic en el borde del mismo. El resultado es igual al que se muestra en la imagen anterior.

Modificación e introducción de propiedades

En la parte superior del cuadro, hay dos pestañas que permiten seleccionar entre ver todas las reblas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.

En la división del centro, se muestran la regla involucrada y todos sus padres, hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.

En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en ella es posible introducir una nueva propiedad, escribiendo su nombre o seleccionándola del menú desplegable que aparece allí. Hagamos una prueba de ejemplo. Seleccionaremos la capa del encabezado de la página, haciendo clic en el borde. Luego, en la sección inferior haremos clic en “Añadir Propiedad” y buscaremos las propiedades de borde.

Seleccionaremos “border-color” y seleccionaremos el color de borde de la paleta de colores que aparece. Para el ejemplo, utilizaremos uno de los colores que ya nos encontramos empleando, que es el azul “#00C”. Luego introduciremos la propiedad “border-width” a la que le daremos 1px, y la propiedad “border-style”, introduciendo “solid”. Luego de finalizada esta introducción de propiedades, un borde azul debe aparecer alrededor de la cabecera.

Introducción de nuevas reglas

Para introducir una nueva regla, en el ejemplo deberemos crear un elemento nuevo, ya que todos los elementos que se encuentran en la página actual tienen definidas sus reglas y propiedades.

Introduciremos una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para ello deberemos colocar una nueva capa. En la vista de código, haremos clic a continuación de la etiqueta de cierre de la capa del encabezado. Luego daremos “enter” para que se genere una nueva línea en el código, donde introduciremos el nuevo elemento.

Luego haremos clic en “Insertar / Objetos de diseño / Etiqueta div”, abriéndose un nuevo cuadro flotante donde deberemos indicar el lugar donde colocaremos la etiqueta, el nombre de la clase y el Id (o uno solo de los dos, según sea el caso).

Luego de haber rellenado los datos, haremos clic en “Crear nueva regla”, tras lo cual aparece otro cuadro, donde en primera instancia seleccionaremos el tipo de selector que se trata (class, id, una etiqueta html o un selector compuesto) y el lugar donde va a quedar definida la nueva regla.

Tras hacer clic en “Aceptar”, se abrirá el cuadro donde se definen las propiedades de la nueva regla, en el cual colocaremos todas las propiedades que definan a la nueva regla. En este cuadro hay una columna izquierda, donde seleccionaremos la categoría de propiedades que introduciremos. Al hacer clic en ellas, aparecen las distintas propiedades a las cuales podremos ir dando los diferentes valores.

Para el ejemplo, definiremos las siguientes propiedades con los respectivos valores:

• Font-family: Arial, helvética, sans-serif
• Font-size: 12px
• Font-style: normal
• Line-height: 20px
• Font-weight: bold
• Font-variant: normal
• Text-transform: none
• Text-decoration: underline
• Color: #FFF

Luego seleccionaremos “Fondo” a la izquierda e introduciremos el siguiente valor y dejando el resto en blanco:

• Background-color: #06F

Luego iremos a cuadro, donde introduciremos el ancho de la nueva capa (la altura está dada por la propiedad “line-height”) en 99% para que junto al 1% del relleno derecho e izquierdo ocupen todo el ancho del diseño.

El resto de las categorías de propiedades y sus valores los dejaremos en blanco, ya que no serán necesarios para establecer la capa que albergue un menú. Al hacer clic en “Aceptar” volveremos al primer cuadro de creación de nuevas reglas, donde haremos clic en “Aceptar”. De esta forma quedará conformada la nueva capa, que aparecerá con un texto indicándonos que deberemos introducir un contenido.

Una vez que abramos el ejemplo en el navegador, deberemos ver la siguiente imagen:

Ahora que conocemos como introducir capas, agregar y modificar reglas y propiedades, veremos en el siguiente artículo la construcción de algunos elementos, como un menú y como darle formato al encabezado, para poco a poco ir dándole forma al nuevo diseño.