1.- Estilos CSS (I).
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. Por ejemplo el Tutorial Dreamweaver 4 de iniciación al editor, estaba controlado por una hoja de estilos que definía una serie de valores de color, forma, tamaño, para unas cuantas de las palabras y textos empleados en el sitio.
Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS
Se abrirá la siguiente ventana:
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). Conservar el punto de inicio del nombre.
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:
Cambiamos el .unnamed1 por .palabras_clave 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 en el que estoy trabajando la he llamado dreamweaver_intermedio, dentro de la cual, aparecen las carpetas _notes (en este nivel veremos, más adelante, el uso de esta carpeta), la carpeta donde guardo las imágenes im y, nada más, a no ser que hubiera ya otra hoja de estilos definida. 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
En la doble ventana de nuestro sitio, veremos que
se ha añadido la hoja que acabamos de crear: Pulsamos
de la Barra de Estado y accederemos a la
doble ventana 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 los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabras_clave.
El texto seleccionado pasará a estar escrito con los parámetros definidos.
Voy a hacerlo yo con todas las palabras que me parezcan importantes del documento que estoy escribiendo. Lógicamente, cuando leas esta frase, ya estará así desde el principio del mismo.
Si una vez definido el estilo, no nos gusta, podemos
modificarlo haciendo doble clic en el estilo correspondiente
de la ventana
.
Para definir otro estilo, dentro de la ventana
de Estilos CSS le damos al icono
y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo,
.texto 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 .
Observad que, si dentro del párrafo, hay una palabra ya definida como
palabra_clave 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: