Hojas de estilo
 


Imaginemos que hemos creado un sitio web para nuestro cliente mas importante, nosotros entusiasmados, llevamos el proyecto, que tiene un estilo digno de Llongueras, se lo enseñamos al director de publicidad y nos dice que la página es muy bonita pero que el texto corporativo de la empresa es una Arial, tamaño 12 y color azul cielo (justo lo contrario de lo que le hemos enseñado). Nos quedamos a cuadros....Pensamos para nuestros adentros....Comenzar de nuevo.

Los estilos CSS sirven para eso, especificar con una sola etiqueta todos los valores, de en este caso el texto si los cambiamos, cambiaremos el texto de todas las páginas que esten vinculados a ese estilo.

Lo primero que vamos a hacer es editar una hoja de estilos, estas se diferencian de las páginas web en que tienen una extensión .css. Para ello abrimos el NotePad(o cualquier otro editor de texto plano) de windows y guardamos (en nuestra carpeta sitio) una página en blanco con la extensión .css , en este caso será "estilos.css" .

En Dreamweaver pulsamos desde el lanzador Mostrar estilos CSS .

Aparece un panel con los estilos, pulsamos sobre Abrir hojas de estilo y nos aparece un cuadro de diálogo donde aparecen una serie de opciones, elegimos vínculo y se nos abre un nuevo cuadro donde incluiremos la dirección del archivo "estilos.css" que habíamos creado.

 

Ahora elegimos editar, nuevo, crear estilo personal(introducimos un nombre para el estilo) y se abre un nuevo cuadro donde podremos elegir el tipo de texto, la fuente , el color, etc...


Elegimos guardar y Listo, ahora en el Panel de Estilos que tenemos abierto aparece el nuevo estilo(clase) que hemos creado. Esto parece un poco complicado al principio pero una vez que lo ensayéis tendremos una herramienta potentísima a la hora del diseñar...que nos ahorrará mucho tiempo.