LAS HOJAS DE ESTILO EN DREAMWEAVER MX

Transcripción

1 LAS HOJAS DE ESTILO EN DREAMWEAVER MX 1 - Introducción a las hojas de estilo en cascada (CSS) Las hojas de estilo en cascada, conocidas también como CSS (Cascade Style Sheets), nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio Web. En ellas los estilos se definen en una hoja externa, la CSS, y no en el propio documento HTML. Una vez creada una CSS, los documentos estarán controlados por la misma, que definirá una serie de valores de color, forma y tamaño, para algunas de las palabras y textos empleados en el sitio. Definir así los estilos de un sitio le da a éste 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 a esa hoja de estilo. 2 Crear una hoja de estilo Para crear una hoja de estilo CSS, teniendo abierto cualquier documento del sitio, pulsamos en el menú Ventana (Window) y en el menú que se despliegue pulsaremos Estilos CSS (CSS Styles). En la columna de la derecha se abrirá una ventana llamada Diseño (Design). A continuación pincharemos en el icono del lado inferior derecho de la ventana Design (Diseño) y aparecerá la ventana que se muestra en la siguiente página. Las hojas de estilo en Dreamweaver MX - 1 -

2 En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto, el programa le da el nombre.unnamed1). Tal y como vemos junto al denominador Tipo (Type) podemos elegir si lo que queremos es Definir un estilo personal (Make Custom Style), Redefinir una etiqueta HTML (Redefine HTML Tag) o si queremos Usar un selector CSS (Use CSS Selector). Por último podemos definir el estilo en una hoja externa (New Style Sheet File) o bien, que se aplique únicamente al documento en el que estamos trabajando (This document Only). Estas dos opciones son las que nos muestra la ventana de arriba junto al denominador Definir en (Define In). Durante esta lección únicamente nos ocuparemos de la opción de hoja externa (New Style Sheet File), dejando la segunda para más adelante. 2.1 Definir un estilo personal En este apartado nos ocuparemos de definir un estilo personal en nuestra hoja de estilo. Puesto que el programa, como podíamos apreciar en la imagen de arriba, ya nos selecciona unos valores por defecto, comenzaremos a trabajar con ellos. Es decir: Le daremos un nombre a nuestro estilo, por ejemplo, palabrasclave. Le indicaremos al programa que será un estilo personal (Make Custom Style). Crearemos nuestra hoja de estilo en una hoja externa (New. Style Sheet File). Cambiamos el nombre.unnamed1 (que el programa incluye por defecto) por.palabrasclave, que será el nombre que utilizaremos para nuestro primer estilo.(si no ponemos el punto al comienzo, no importa, ya que Dreamweaver lo hará por nosotros). Sin más, le damos a Aceptar (OK) y aparecerá la ventana que vemos en la siguiente página. Las hojas de estilo en Dreamweaver MX - 2 -

3 En esta ventana vemos que en el campo correspondiente a Guardar en (Save in) nos aparece la carpeta raíz del sitio. En este caso aparece la carpeta para este sitio de ejemplo que hemos denominado CursoDreamweaver. Escribiremos el nombre que le queramos dar al archivo en la casilla Nombre (File name), por ejemplo, hoja1.css y pulsaremos Guardar (Save). Las hojas de estilo en Dreamweaver MX - 3 -

4 Se abrirá la siguiente ventana para que definamos el estilo: En la columna derecha de esta ventana, vemos que tenemos varias categorías (Category) cuyo estilo podemos definir. En esta lección nos detendremos únicamente en la primera, Tipo (Type) pero el lector puede experimentar con cualquiera de las demás. Por ejemplo, podemos introducir los valores que se muestran en la imagen inferior. Las hojas de estilo en Dreamweaver MX - 4 -

5 A continuación, pulsamos en Aceptar (OK). En la siguiente imagen podemos observar la inclusión del estilo que acabamos de definir. Y, por otro lado, si pinchamos en Archivos (Files) en la columna de la derecha, podremos ver nuestra hoja de estilo (hoja1.css)dentro de los archivos del sitio. Si hacemos doble clic sobre el icono hoja en el código fuente. veremos los estilos definidos para nuestra Volvemos a nuestro documento para aplicar nuestro estilo. En primer lugar, seleccionaremos la palabra a la que se lo queramos aplicar, y abriremos de nuevo los Estilos CSS (CSS Styles). Para ello, tenemos dos opciones: podemos abrirlo desde Ventana (Window),seleccionando Estilos CSS (CSS Las hojas de estilo en Dreamweaver MX - 5 -

6 Styles) o directamente desde haremos clic en el estilo palabrasclave., en la columna derecha de la pantalla. A continuación, Mediante esta sencilla operación, 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 (en nuestro ejemplo ), cambiando los valores que introdujimos en un principio. Para definir otro estilo, dentro de la ventana hacemos clic en el icono y se abrirá la ventana Nuevo Estilo CSS (New CSS Style). Le ponemos un nombre (Name) a nuestro estilo, por ejemplo,.texto1 y lo definimos dentro de la hoja de estilo que a lo largo de este ejercicio venimos llamando hoja1.css. Para definirla dentro de esa hoja, no debemos olvidar activar la opción Definir en (Define In) e introducir el nombre de nuestra hoja en el campo contiguo. Por ejemplo, para definir este estilo, podemos introducir los valores que se muestran en la primera imagen de la siguiente página. Las hojas de estilo en Dreamweaver MX - 6 -

7 Imaginemos que queremos aplicar este estilo a todos los párrafos que escribamos en los documentos. Para hacerlo bastará colocar el cursor al comienzo del párrafo y hacer clic sobre el estilo. Se puede observar que, si dentro del párrafo, hay una palabra ya definida como palabrasclave el estilo de ésta no se va a modificar. Es decir, un estilo prevalece sobre el otro. Después de haber añadido el estilo nuestra hoja tiene, ahora, estos estilos definidos: A continuación vamos a dar un paso más. Vamos a aprender a vincular un documento con una hoja de estilo. Para ello, crearemos un nuevo documento y lo vincularemos con la hoja de estilo que ya tenemos creada (hoja1.css). En primer lugar, debemos abrir la ventana, de cualquiera de las formas que ya sabemos: podemos pulsar sobre Ventana (Window) y seleccionar Estilos CSS (CSS Styles) o pinchar directamente en, en la columna de la derecha, y se abrirá la misma de desplegándose el panel, tal y como apreciamos en la próxima imagen. Las hojas de estilo en Dreamweaver MX - 7 -

8 Ahora pinchamos en el icono relativo a (Attach Style Sheet) y se abrirá la siguiente ventana. Nuestra hoja está en el sitio Web en el que estamos trabajando. Por eso, no tenemos que seleccionar importar (Import), ya que no hay necesidad de importarla de ningún otro sitio. Le damos a Examinar (Browse) y se abre una ventana en la que seleccionaremos hoja 1.css, como se muestra en la imagen de abajo, y pulsaremos Aceptar (OK). Las hojas de estilo en Dreamweaver MX - 8 -

9 Volverá a salir la ventana anterior, aunque esta vez con la hoja ya introducida en el campo correspondiente a Archivo/URL (File/URL). Pulsamos en Aceptar (OK). Una vez finalizada esta operación, veremos que en la ventana Diseño (Design) de esa nueva página que hemos creado aparecerán todos los estilos definidos de la hoja1.css que acabamos de vincular. Esto nos permitirá aplicar, en ese nuevo documento, los estilos creados a las palabras o párrafos que nos interesen. Puede comprobar que el estilo texto1 se aplicará automáticamente conforme pulsamos la tecla Enter y creamos un nuevo párrafo. Para ver cómo se han introducido estos datos el código fuente pinchamos en el icono (Show code view) y vemos que en la cabecera del documento, entre las etiquetas <head> y </head>, se ha vinculado el documento con la hoja de estilo que hemos llamado hoja1.css. Más adelante, cada vez que hacemos uso de uno de los estilos definido dentro de esa hoja se genera una etiqueta <p class> o <span class> que afecta al párrafo o al texto seleccionado. Las hojas de estilo en Dreamweaver MX - 9 -

10 2.2 Redefinir una etiqueta HTML En este apartado aprenderemos a redefinir una etiqueta HTML mediante una hoja de estilo. Vamos a hacerlo sobre el documento que ya tenemos abierto y que anteriormente habíamos vinculado con la hoja de estilo hoja1.css. Para ello, nos dirigimos a la ventana Diseño (Design) de la columna de la derecha y pinchamos en el icono (New CSS Style) para crear un nuevo estilo. Se abrirá la siguiente ventana, que ya conocemos. Pero esta vez seleccionamos Redefinir etiqueta HTML (Redefine HTML Tag). Al seleccionar esa opción, nos aparecerá la siguiente ventana, en la que como vemos, cambia el denominador del primer campo, que ahora se llama Etiqueta (Tag). Puesto que hay muchos tipos de etiqueta, nos corresponde ahora escoger el tipo de etiqueta que queremos redefinir. Para ello, pinchamos en la flechita de Etiqueta (Tag) y se desplegará el menú que vemos en la siguiente página. Las hojas de estilo en Dreamweaver MX

11 Es probable que usted desconozca algunas o muchas de las etiquetas que aparecen en este listado, pero puede usted verlas en el listado de Etiquetas básicas del Curso de HTML. A modo de ejemplo, vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la seleccionamos y ésta es la ventana que obtenemos: A continuación le damos a Aceptar (OK) y aparecerá la ventana de Definir el estilo (CSS Style Definition) que ya conocemos de apartados anteriores, en la que introduciremos los valores que deseemos para definir el estilo de la etiqueta que hemos seleccionado. A modo de ejemplo, presentamos en la próxima página, la ventana de Definir estilo, ya con los valores que hemos escogido para nuestro ejemplo incluidos en los apartados correspondientes. Estos valores se refieren tanto al tamaño (Size),color (color) y tipo de fuente (Font),como a la Decoración (Decoration), que para nuestro ejemplo será ninguna (None). Las hojas de estilo en Dreamweaver MX

12 Una vez introducidos los datos, hacemos clic en Aceptar (OK). Qué hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del tamaño y del grosor, cuando haya un enlace, el vínculo no esté subrayado. Como esto lo hemos definido dentro de la hoja de estilo hoja1.css, lo que acabamos de hacer tiene influencia en todos los documentos vinculados con la hoja, también en los creados anteriormente. 2.3 Usar un selector CSS En este apartado aprenderemos a usar un selector CSS. Añadiremos un efecto al estilo que hemos creado: queremos que cuando pase el puntero del ratón por el vínculo, éste se subraye. Para ello, volvemos a pinchar en el icono y ahora marcamos Usar selector CSS (Use CSS Selector). Las hojas de estilo en Dreamweaver MX

13 Como vemos, al seleccionar Usar Selector CSS (Use CSS Selector) cambia el denominador del campo superior a Selector (Selector). A continuación pulsaremos sobre la flechita y del menú que se nos presenta (a:link, a:visited, a:hover y a:active) seleccionamos a:hover. Le damos a Aceptar (OK) y aparecerá la ventana de Definición de estilo (CSS Style Definition). En ella marcamos subrayado (underline) de entre las opciones de decoración (Decoration) y pulsamos Aceptar (OK). En la siguiente imagen se puede observar que lo que acabamos de hacer no se guarda como un estilo a aplicar. Las hojas de estilo en Dreamweaver MX

14 Pero de hecho, siempre que establezcamos un enlace se van a ir añadiendo al estilo en cuestión las características de estilo definidas. Sin embargo, si pinchamos en Editar estilos (Edit Styles), sí aparece la redefinición de la etiqueta <a>. Haciendo doble clic sobre este estilo, o sobre cualquier otro, podremos modificar las características del mismo. Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus posibilidades son muchas. Nosotros sólo nos hemos asomado a unas pocas de las utilidades que tiene esta herramienta. Se deja para el lector la experimentación y profundización a partir de las pistas dadas. Las hojas de estilo en Dreamweaver MX