Cursos subvencionados para trabajadores
Realiza el curso gratis a través de tu empresa.
Cursos SubvencionadosCurso de Dreamweaver CS3
Estilos de texto.
Como hemos repetido desde el principio, DWCS3 está dirigido hacia la utilización de Estilos CSS.
Esta tendencia llega hasta tal punto que al aplicar formato a los textos (color, fuente, tamaño...)
procuraremos no utilizar nunca la etiqueta <font> ( que está en desuso) y aplicaremos 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... Dw nos facilita el trabajo haciéndolo intuitivo e inmediato. ¡Vamos a verlo!
Inscríbete ahora y accede a 3 unidades gratis
Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....
Definir un estilo para texto
Es muy fácil,... Vamos a ver un ejemplo:
- Tenemos un texto y seleccionamos parte de él para darle un formato específico:
- 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 podemos 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íamos elegido.
- Seleccionamos otro pedazo de texto.
- Para darle el mismo estilo que el anterior sólo tendremos que elegir dicho estilo del menú desplegable del casillero Estilos ... y seleccionamos la clase "Estilo 1" que acabamos de crear.
Inscríbete ahora y accede a 3 unidades gratis
Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....
Cambiar el nombre de Estilos 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.
- Desplegamos el menú del casillero de Estilos en el panel PROPIEDADES y elegimos la opción Cambiar nombre...
- Se abrirá un cuadro de dialogo como el de más abajo. Sólo tendremos que elegir el estilo en cuestión y darle un nuevo nombre.
Por ejemplo, a 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.
- 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.
 |
nombre de los estilos de texto |
|
Inscríbete ahora y accede a 3 unidades gratis
Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....
Estilos y el HTML
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 sí 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 !!
Inscríbete ahora y accede a 3 unidades gratis
Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....
Estilos vs. <FONT>
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,
antes 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.)
- Mediante la etiqueta <FONT>:
- Es una de las primeras etiquetas del código HTML.
- Necesita de atributos como face, color y size
- Mediante Estilos:
- Se considera más avanzada.
- Es en la que se basa DW
Pero... ¿Por qué se considera más avanzado el uso de Estilos?
- Porque es más "limpio" , es decir, produce menos código:
Para conseguí un texto como este:
... con etiquetas FONT tendría que utilizar atributos de color, tamaño (size) y fuente (face), el código resultante sería este:
En cambio con Estilos, para conseguir el mismo resultado solo utiliza este código:
- Porque es más preciso.
Hemos visto que los Estilos me permiten determinar un tamaño más preciso (en píxeles, puntos, etc.) y también tenemos más opciones para aplicar a las opciones de página.
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... DWcs3 se hace eco de ello incluyéndolo como opción predeterminada.
Inscríbete ahora y accede a 3 unidades gratis
Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....
Copyright 2008© ADRInfor S.L. Logroño | Tel: 941250116 Fax: 941236805 | Email | Politica de Privacidad | Aviso Legal