Curso de Dreamweaver MX

Como hemos repetido desde el principio, ésta versión DW 2004 está más dirigida hacia la utilización de Estilos CSS. Esta tendencia llega hasta tal punto que al aplicar formato a los textos (color, fuente, tamaño...) procura no utilizar nunca la etiqueta <font> ( que está en desuso) y aplica formato al texto a base de Estilos por medio de este casillero dentro del panel de Propiedades:

En este caso lo que se utiliza para definir el formato de texto son un tipo de ordenes de Estilo llamadas clases.
No hace falta que dominemos por ahora los Estilos CSS... Dreamweaver nos facilita el trabajo haciéndolo intuitivo e inmediato. ¡Vamos a verlo!

Es muy fácil,... Vamos a ver un ejemplo:

1. Tenemos un texto y selecciono parte de él para darle un formato específico:
   
   
2. Empezamos a elegir, por ejemplo, una fuente (Verdana), un tamaño (14 px), un color (verde) y que sea en negrita...
   
   
   A medida que vamos definiendo las características del texto vemos que en el casillero de Estilos esas características se van conformando como una Estilo, un tipo de texto... una clase.

Lo bueno de estos estilos/clases es que las puedo aplicar rápidamente a otros textos sin tener que ir eligiendo de nuevo la fuente, el tamaño, el color y todas las demás características que había elegido.

1. Selecciono otro pedazo de texto.
   
   
2. Para darle el mismo estilo que el anterior solo tenemos que elegir dicho estilo del menú desplegable del casillero Estilos ... y seleccionamos la clase "Estilo 1" que acabamos de crear.
   

A medida que vayamos dando formato al texto de nuestra página web lo más seguro es que creemos varias clases de texto, varios estilos. Así que es mejor que los diferenciemos dándoles un nombre que los identifique.

1. Desplegamos el menú del casillero de Estilos en el panel de Propiedades y elegimos la opción Cambiar nombre...
2. Se abrirá un cuadro de dialogo como el de más abajo. Solo tendremos que elegir el estilo en cuestión y darle un nuevo nombre.
   Por ejemplo, la clase de texto que hemos creado anteriormente "Estilo 1" la vamos a llamar "nombres" ya que va a ser el estilo de los nombres propios que destaque en el texto.
   
   
3. Pulsamos Aceptar. Se abrirá un panel Resultados con los cambios necesarios que se han realizado en el código para que reconozca el nuevo nombre del estilo.

Si deseamos que un texto deje de tener un estilo concreto es muy sencillo:

1. Seleccionamos el texto en cuestión.
2. Desplegamos la lista del menú de Estilo y elegimos la opción Ninguna.

Incluso habrá ocasiones en las que queramos eliminar cierto estilo de nuestra lista de estilos/clases.
Para quitar dicho estilo solo tenemos que seguir estos pasos:

1. Desplegamos la lista del menú de Estilo en el panel de Propiedades y seleccionamos la opción Administrar estilo...
   
   Por ejemplo, siguiendo con en este caso que tengo definidos varios estilos, me voy a propones eliminar la clase subtítulo.
2. Al pulsar esa opción se nos abre el cuadro de dialogo de Administrar estilos
3. Seleccionamos el estilo que queremos eliminar y pulsamos el botón Quitar
   
   Ese estilo se eliminará de la lista.
4. Por último pulsamos Lista para cerrar este cuadro.

Podemos utilizar los estilos de texto sin necesidad de saber lo que supone al código de la página. Pero siempre es mejor tener un dominio global del diseño que se está realizando... y el lenguaje que va por debajo es el que rige todo y nos dará la solución.

¿Cómo obedece el texto las ordenes de formato que el estilo le indica?... ¡Efectivamente¡ Mediante código.

Por ejemplo, seleccionamos un párrafo (<p>) y le aplicamos la clase "Titulo".

En el Selector de etiquetas se refleja que a ese párrafo se le ha aplicado una clase (precedida por un punto: p.Titulo).

Pero... ¿y si no aplicamos una clase a una etiqueta de párrafo sino a texto suelto?

El atributo class necesita una etiqueta donde insertarse así que Dreamweaver utiliza la etiqueta <span> para estos casos. No representa nada gráficamente, pero sirve para determinar entre ella un pedazo de código html (en este caso texto).

Finalmente, en la lección anterior vimos que para determinar las Propiedades de la página también utilizábamos reglas u ordenes de Estilo, y que éstas se alojaban en la cabecera de la página (en el HEAD).
Pues bien, el código de estas clases de texto también se aloja dentro de la etiqueta <HEAD> de la página.

¡¡ Al fin y al cabo, tanto las propiedades de página como las clases de texto, son Estilos !!