que adquirirá el color que posteriormente seleccionemos. Cuando lo pulsemos aparecerá el selector de color tipo de todos los programas de Macromedia (si habéis utilizado alguno de ellos conoceréis el mecanismo de este selector):
Se puede definir el color para varios elementos de la página, entre los que se incluyen:
Para establecer el color de un elemento concreto, hay que cambiar sus propiedades. Por ejemplo, el color del texto es una propiedad de la fuente y el color de fondo de la página actual es una propiedad de página. También se puede definir el color para varios elementos de página (estilos de texto, fondos, hipervínculos o bordes de tabla) todo al mismo tiempo utilizando Estilos CSS. Estas características permiten establecer las propiedades de color para los estilos o elementos de página.
En cualquier momento que tengamos que seleccionar un color en Dreamweaver lo
haremos a través de este tipo de botón
que adquirirá el color que posteriormente seleccionemos.
Cuando lo pulsemos aparecerá el selector de color
tipo de todos los programas de Macromedia (si habéis utilizado alguno
de ellos conoceréis el mecanismo de este selector):
El cursor se convierte inmediatamente en un pequeño cuentagotas. En la esquina superior izquierda se verá una muestra del color por el que pasa encima, podemos seleccionar un color de la muestra o salir y seleccionar cualquier color existente en la pantalla. Para elegir el color basta con hacer clic en el color de nuestra elección.
Por medio de la flecha situada en la esquina superior derecha podemos elegir el tipo de paleta de colores que queremos ver en este selector. Hay que tener en cuenta que las paletas Cubo de color y Tono continuo son seguras para la Web. Mientras que SO Windows, SO Mac y Escala de grises no lo son. Si estamos utilizando una paleta que no es segura para la Web y elegimos Ajustar a valores seguros para la Web, Dreamweaver reemplazará el color seleccionado por el color seguro para la Web más cercano.
| ¡IMPORTANTE! Eligiendo un color seguro para la Web nos aseguramos de que ese color será visto de la misma manera en todos los navegadores. El número de colores seguros para la Web es de 216. Pero al elegir con el cuenta gotas un color de cualquier parte de la pantalla es posible que el que se reproduzca no sea el mismo que aquel en el que hemos hecho clic. Al estar los colores "ajustados para la web" reproducirá el color de la Web que más se le acerque. |
Si, una vez abierto este selector no nos decidimos por ninguno solo hemos de
pulsar este botón 
Puede que no nos interese ninguno de los colores de la muestra. No importa,
podemos seleccionar un color personalizado pulsando el botón
.
Desde el cuadro de diálogo que se despliega podemos crear un nuevo color de varios modos, uno muy utilizado es la introducción de los valores de Rojo, verde y azul del color buscado.
|
 |
Colores seguros para la Web. La paleta de colores. |
| ¡NOTA! Las etiquetas Web emplean colores por combinación de ROJO, VERDE y AZUL, el valor máximo para cada color es 255 (FF en hexadecimal), y el valor mínimo 0 (0 en hexadecimal). Por ejemplo un color codificado así #FF0000 es rojo puro, pues tiene FF (255 de rojo), 0 (00 de verde) y 0 (00 de azul). |
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:
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.
| |
|
Cómo se crea y aplica un Estilo de texto |
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.
Nota: |
| |
|
Cambiar el Nombre de un Estilo de texo |
Si deseamos que un texto deje de tener un estilo concreto es muy sencillo:
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:
Nota: |
| |
|
Administrar los Estilo de texto |
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.
|
Atributo |
Descripción |
|---|---|
<... class="..."> |
Determina la clase (class) de estilo a la que obedece la etiqueta en donde vaya insertada |
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 !!
| |
|
Estilos de texto y su traducción a HTML |
El uso predeterminado de Estilos para dar formato a los textos es una de las características más novedosas de DW 2004 respecto a su versión anterior, así que es mejor que hagamos un inciso para ver el asunto de una forma global, antees de terminar la lección.
A efectos de código web hay 2 formas de aplicar formato a un texto (darle color, tipografía, tamaño, etc.)
Pero... ¿Por qué se considera más avanzado el uso de Estilos?
El uso de Estilos tiene muchas otras utilidades y ventajas (las veremos a lo largo del curso). Por ello es una de las herramientas que los diseñadores web expertos más utilizan... DW 2004 se hace eco de ello incluyendolo como opción predeterminada.
| |
|
Etiqueta FONT y uso de ESTILOS |
Como hemos comprobado, DW 2004 utiliza estilos de forma predeterminda. Al elegir unas características para el texto o propiedades para la página... ¡zas! crea estilos en el HEAD.
Pero nosotros podemos elegir si queremos trabajar con Estilos o, por el contrario, queremos trabajar con etiquetas FONT y evitar que Dreamweaver crea estilos al elegir propiedades.
Para desactivar la opción predeterminada de uso de Estilos solo debemos elegir la opción de menú Edición > Preferencias...
...Y en el cuadro de dialogo que aparece vamos a la categoría General, y desactivamos la opción "Utilizar CSS en lugar de etiquetas HTML" .
Al desactivar esta opción estaremos trabajando como lo hace DW MX, lo que tiene, entre otras, estas consecuencias:
Para volver a activar esta opción solamente debemos volver a este menú y pulsar sobre la misma casilla.
Nota: |
| |
|
Desactivar la opción predeterminada de utilizar Estilos |
