Estilos en Cascada (CSS) con DreamWeaver

dreamweaver
Validar nuestro código en DreamWeaver
25 diciembre, 2014
dreamweaver
Estilos y Comportamientos en DreamWeaver
25 diciembre, 2014

Estilos en Cascada (CSS) con DreamWeaver

dreamweaver

Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.

Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

En la columna de la derecha se abrirá:

Ahora pincharemos en el icono de y aparecerá la siguiente ventana:

En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el programa le da el nombre .unnamed1).

Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de las etiquetas del lenguaje HTML. (Más adelante explicaremos la tercera opción: Usar selector CSS).

Por último podemos definir el estilo en una hoja externa o bien, que se aplique únicamente al documento en el que estamos trabajando.

Vamos a empezar trabajando los valores que están elegidos por defecto:

  • Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave
  • Será un estilo personal.
  • En una hoja externa.

Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo hará por nosotros) y, sin más, le damos a Aceptar. Aparecerá la siguiente ventana:

En esta ventana nos aparece la carpeta raíz del sitio, en este caso, la carpeta para este sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:

Se abrirá la siguiente ventana para que definamos el estilo:

Por ejemplo:

Y le damos a Aceptar

Podemos observar la inclusión del estilo que acabamos de definir:

Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:

 

Si hacemos doble clic sobre el icono veremos los estilos definidos en nuestra hoja:

Volvemos a nuestro documento para aplicar nuestro estilo: Seleccionaremos la palabra a la que se lo queramos aplicar, abriremos de nuevo (o vamos directamente a ) los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabrasclave.

El texto seleccionado pasará a estar escrito con los parámetros definidos.

Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en el estilo correspondiente .

Para definir otro estilo, dentro de la ventana le damos al icono y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

Esta es la definición que he hecho:

Este estilo lo quiero aplicar a todos los párrafos que escriba en los documentos. Para hacerlo bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilo. Observa que, si dentro del párrafo, hay una palabra ya definida como palabraclave el estilo de ésta no se va a modificar. Un estilo prevalece sobre el otro.

Para acabar este apartado, defino otro estilo para los títulos de los apartados y lo aplico. Nuestra hoja tiene, ahora, estos tres estilos definidos:

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *