ESTILOS CON MICROSOFT EXPRESSION WEB

INTRODUCCIÓN.........................................................................................................2 LAS HOJAS DE ESTILO.............................................................................................4 LOS ESTILOS...............................................................................................................5 CÓMO TRABAJAR MICROSOFT EXPRESSION WEB y CSS ...............................7

STYLE APPLICATION .......................................................................................... 7 DEFINIR LOS ESTILOS EN UNA HOJA DE ESTILOS EXTERNA......................10 APLICANDO ESTILOS CON EL PANEL STYLE APPLICATION Y LA BARRA

DE HERRAMIENTAS STYLE..................................................................................16 MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS Y CON EL

PANEL MANAGE STYLES......................................................................................24 PANEL MANAGE STYLES ................................................................................. 24 VENTANAS CSS PROPERTIES Y TAG PROPERTIES .................................... 26

REDEFINIR UNA ETIQUETA O TAG HTML ........................................................29 CSS REPORTS ...........................................................................................................32

1

INTRODUCCIÓN

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión enXHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página, y además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <h1> : color, fuente, alineación del texto, tamaño, y otras características no visuales como definir el volumen de un sintetizador de voz, por ejemplo.

La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.

• Los navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.

• Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.

• El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño.

Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium. Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores. CSS2, sin embargo, está solo parcialmente implementado en los más recientes.

2

3

LAS HOJAS DE ESTILO Habitualmente, las hojas de estilo se definen en un fichero externo y diferente a la página web y cada página web tiene un link o referencia a este fichero por medio de la etiqueta <link> Sin embargo, hay tres caminos diferentes para aplicar los estilos: a) Fichero externo: Es el método más eficaz sobre todo cuando la Web es extensa. Se crea un fichero de estilos -una hoja de estilos- y se almacena en un fichero diferente y cada página html hará referencia a la hoja de estilos mediante la etiqueta <link>. Cuando se desea hacer alguna modificación en la presentación de la página basta con cambiar la hoja de estilos y los cambios se realizan de manera automática. Una misma hoja de estilos servirá para muchas páginas web o para todo el sitio, por lo que los cambios son tan sencillos de realizar cuando nuestro sitio consta de una sola página que cuando contiene 500. Es en este modo de trabajo en donde se ve más claramente que la presentación y el contenido están separados. La etiqueta a la que se ha hecho referencia tiene más o menos este “aspecto”. <link rel="stylesheet" type="text/css" href="hojadeestilos.css" /> b) En el propio fichero html: Es posible definir los estilos en la propia página web utilizando la etiqueta <style> en el interior de la cabecera de la página, es decir, dentro de la etiqueta <head>. El problema de esta forma de trabajo se presenta en grandes Webs, ya que cuando se desean hacer los cambios, hay que ir también página a página. En esta forma la presentación y los contenidos están de manera separada, sin embargo están definidos en cada página con lo que – a mi modo de ver- no hay plena separación. En el siguiente bloque de código, se presenta un ejemplo de cómo sería un estilo muy sencillo definido de esta manera: <style type="text/css"> .menu { width: 150px; float: left; } #mainContenido { margin-left: 165px; } p{ background-color:lime; list-style:upper-roman; } </style> c) En línea: Es posible definir el estilo en la propia etiqueta de un elemento. El aspecto del estilo de un elemento párrafo definido de esta forma podría ser el siguiente: <p style="color: #FF0000; font-family: 'Lucida Sans', sans-serif; background-color: #FFFF00">

4

LOS ESTILOS Una hoja de estilos consiste en un fichero de texto donde se definen una serie de reglas que determinan el aspecto o presentación de nuestra página web. Estas reglas consisten en propiedades de fuentes, propiedades de posicionamiento, propiedades de bordes de los elementos, etc. Por ejemplo: body{ color: red; font-size: 10px; } p{ background-color:lime; list-style:upper-roman; } .miClase { width: 150px; float: left; } #mainID { margin-left: 165px; }

Figura 1 Un estilo típico contiene un selector y un bloque donde se definen los estilos. En nuestro ejemplo anterior, selectores serían body, p, .miClase o #mainID y bloque sería el código que está entre llaves por cada selector. Cada línea de un bloque se estructura de la siguiente forma: propiedad: valor; Por ejemplo: color: red Los estilos se pueden aplicar de tres formas diferentes, que se corresponden con los tres tipos de selectores:

a) Clases: Las clases permiten definir un estilo y asignarle un nombre. Dicho nombre se coloca como atributo en todos los objetos o elementos de nuestra página o páginas web en los que se desee aplicar dicho estilo. Por ejemplo, si definimos el fichero .css siguiente: h3{

font-size: 10px; } .miClase{ font-family:"Lucida Sans"; color:red;

5

} #miID {

margin-left: 165px; font-family:"Courier"; color: yellow;

}

Figura 2

o bien, si en el <head> de nuestro fichero html incluimos el bloque <style> h3{

font-size: 10px; } .miClase{ font-family:"Lucida Sans"; color:red; } #miID {

margin-left: 165px; font-family:"Courier"; color: yellow; } <style>

Figura 3

si deseamos que un párrafo determinado tenga el tipo de letra Lucida Sans y color rojo, insertaríamos como atributo en dicho párrafo el nombre de la clase miClase, sin el punto inicial:

<p class=miClase”> Esto es un párrafo </p>

b) Identificador: El estilo se aplica al elemento cuyo atributo atributo id sea un

identificador determinado. Por ejemplo, si en un fichero incluimos el código de la figura 2 o en el interior de la página html, en la cabecera, añadimos el código de la figura 3, el objeto cuyo id sea miID tendrá ese margen izquierdo, y el tipo de letra será Courier y amarilla. Así, el párrafo siguiente tendrá ese “aspecto”:

<p id=miID”> Esto es un párrafo </p>

c) Redefinición de las etiquetas: Cada elemento tiene una presentación por

defecto. Por ejemplo, los elementos <h1> tienen un tamaño de letra diferente que los elementos <h3> aunque el tipo de letra por defecto sea el mismo. Para variar la presentación por defecto basta con redefinirlos bien en la hoja externa o bien en la propia página. Si incluimos como antes los códigos de las figuras 2 o 3 como anteriormente hemos dicho, en el navegador, las propiedades definidas anteriormente variarán la presentación de todos los elementos <h2> de nuestro sitio Web o de la página respectivamente.

6

Muchos diseñadores web ignoran la posibilidad de implementar en contenido y la presentación de sus sitios de manera separada. Es además muy posible que no salgan de este error hasta que deseen realizar cambios en la presentación de sus sitios. Realmente, cuando se implementa un nuevo sitio y la herramienta que utilicemos en el diseño no nos aporte estas posibilidades, la tarea de separar los contenidos de la presentación se hace realmente complicada y se comprende bien que muchos diseñadores tiren “por la calle de en medio” para definir su presentación uniendo contenido y presentación. Para mí, en este momento, Microsoft Expression Web es la mejor herramienta del mercado para trabajar de esta forma, es decir, el paquete que más ayuda al diseñador Web a separar el contenido de la presentación en sus sitios web. Sin embargo, es necesario comprender bien cuando se deben aplicar los estilos en línea, en el propio documento o en una hoja de estilos externa. Además, en Microsoft Expression Web es necesario comprender bien cuándo se aplican los estilos de manera automática o manual. Como regla general, se puede decir que crear páginas Web utilizando los estilos en línea o en la propia página permite que la implementación o creación de las páginas sea más rápida ya que casi todo el trabajo de presentación lo puede hacer Microsoft Expression Web de manera automática y el diseñador no tiene que ocuparse de ello. Definir los estilos en una hoja de estilos externa significa que hay que definir “manualmente” –aunque Microsoft Expression Web nos ayuda con ventanas de diálogo donde prácticamente todo se puede hacer al golpe de ratón- dichos estilos para cada elemento de la página o sitio. Con esta forma de trabajo la creación es más lenta, pero sin embargo, como contrapartida, se gana muchísimo tiempo, se cometen muchos menos errores y, yo me atrevería a decir, que se mejora enormemente la posibilidad de mejorar la presentación del sitio o página cuando se desean realizar cambios en la presentación En resumen: en la primera forma el trabajo de creación es más rápido pero resulta verdaderamente complejo modificar la presentación de nuestras páginas.

CÓMO TRABAJAR MICROSOFT EXPRESSION WEB y CSS

STYLE APPLICATION Microsoft Expression Web permite definir la forma de trabajo –en línea, en el propio documento o página o en un fichero externo- y cómo aplicar estilos –manual o automáticamente-. Para ello, proporciona una barra de herramientas:

7

Para añadir esta barra a la barra de herramientas podemos clicar con el botón derecho del ratón sobre la caja de herramientas y elegir Style Application o bien en el menú, seleccionar View/Toolbar/Style Application. • Barra Style Application:

Este elemento tiene dos opciones: automática o manual.

a) Automática: si se elige esta opción, el resto de las opciones de esta barra de herramientas se inhabilita. Esto significa que si se selecciona un elemento en la página web y se le aplica, por ejemplo un tamaño de letra 14 y letra Courier –pulsando los botones de la propia barra de herramientas mientras el elemento está seleccionado- Microsoft Expression Web crea de manera automática una clase en la cabecera del propio documento o página y asocia esa clase al elemento seleccionado. Es decir, se selecciona un elemento y se crea la presentación o los estilos del elemento seleccionado pulsando en las diferentes opciones de presentación de la propia barra de herramientas. Esta forma de trabajo está lejos de ser flexible.

b) Manual: con esta opción, se habilitan el resto de las opciones de la barra donde se permite elegir cómo Microsoft Expression Web debería crear y como consecuencia, aplicar, los estilos en la página Web. Así, se puede elegir si se crea el estilo en línea, en el propio documento o página o se añade el estilo a un fichero externo de extensión css. Estas opciones están disponibles en la barra, en el menú Target Rule.

• Target Rule: En el caso de ahber elegido que el estilo se aplique de forma manual, hay que decidir cómo se crea el estilo: esto se hace desde el menú Target Rule. Si se eligiese la opción Auto en Style Application Target Rule estaría deshabilitada. Las formas de crear el estilo se obtienen pulsando en TargetRule. Nos aparecen las siguientes posibilidades:

a) New Auto Class: se define una clase en la cabecera del propio documento o página

y se van añadiendo propiedades conforme se van pulsando en la barra de herramientas como el tipo de letra, su color o su tamaño, el color del fondo, etc…

b) New Style in line: Conforme se pulsa en las distintas opciones de la barra Microsoft Expression Web se define un estilo en línea.

c) Apply New Style: Microsoft Expression Web (MEW a partir de ahora) abre una ventana de diálogo que nos permite definir el estilo de manera totalmente visual, a golpe de ratón.

8

Esta ventana la explicaremos con más detalle más adelante, pero ahora adelantamos que es la opción más flexible de todas porque además de ayudarnos mucho a la hora de diseñar nuestros estilos de manera visual, nos permite:

o Crear el estilo –en línea, en la propia página o en un documento externo-. o Crear una clase o un identificador donde definir el estilo. o Modificar, sobrescribiendo, los estilos que vienen por defectos de los

elementos Web. Ya veremos más adelante que esta ventana la podemos abrir también desde otros lugares del propio entorno. A continuación, puede verse el video Barra StyleApplication de 9m. 08seg. de duración. Es un video de introducción sobre cómo aplicar los estilos con MEW. Se estudia con detalle la barra de herramientas Style Application

• Reuse Properties: Si, por ejemplo, seleccionamos un elemento y elegimos un tipo de fuente Arial en la barra de herramientas, dependiendo de la opción seleccionada en Target Rule, MEW crea un estilo –por defecto las va llamando style1, style2, etc.- y lo aplica al elemento seleccionado. Si ahora seleccionamos un segundo elemento y aplicamos fuente Arial también MEW reconoce que esta propiedad ya está en el estilo style1 y no crea un nuevo estilo y utiliza style1 en el nuevo elemento. Si el botón Reuse Properties está deshabilitado, MEW crea una nueva clase –style2- para ese elemento aunque la definición sea la misma.

• Show Overlay: Con el botón pulsado, se presenta un recuadro de puntos alrededor

del elemento seleccionado. Es una opción meramente visual. La verdad es que los autores de este manual no entendemos muy bien el porqué de esta opción.

9

Microsoft Expression Web permite elegir entre crear el estilo en línea, en el propio documento o página o definir el estilo al comienzo del documento. Dependiendo de las necesidades de nuestra Web y del modo personal de trabajar escogeremos una u otra forma de trabajar pero, en todo caso, aconsejamos vivamente “perder tiempo” en explorar todas las posibilidades de esta barra de herramientas porque posteriormente no sólo nos permitirá trabajar de distintos modos cuando estemos diseñando sino que sabremos perfectamente qué código añade MEW por nosotros de modo automático. Esta última consideración es muy importante porque nos permite controlar en todo momento el aspecto de nuestra Web y nos aporta la posibilidad de trabajar directamente sobre el código de los estilos.

DEFINIR LOS ESTILOS EN UNA HOJA DE ESTILOS EXTERNA Antes de comenzar a estudiar este punto, creo que es muy útil ver los siguientes videos: Cómo definir una hoja de estilos externa con MEW (Duración: 3m. 48seg.) En este video se hace una introducción para explicar una de las maneras de definir uno o varios estilos en una hoja de estilos externa. Se aprovecha para explicar algunas peculiaridades de la interfaz de usuario de MEW y para explicar cómo definir un atributo en un elemento web. Cómo definir un estilo in line o en línea con MEW (Duración 3m. 19seg.) Cómo definir un estilo en el propio documento con MEW (Duración 3m. 26seg.). Se explica una manera sencilla de definir un estilo en la cabecera del propio documento Esta es la opción más flexible y potente a la hora de trabajar con estilos y verdaderamente es este modo de trabajar donde se condensa el verdadero sentido del trabajo con CSS. Para construir una hoja de estilos externa, podemos trabajar de dos formas:

a) Visualmente, es decir, a golpe de ratón, con la ventana de diálogo de Estilos. Esta ventana se puede abrir de dos formas:

a. En el panel de tareas Apply Styles, pulsar sobre New Style

10

b. En la barra de herramientas de ApplyStyles, con la opción Manual

seleccionada, escoger Apply New Style en Target Rule.

b) Directamente, escribiendo el código en un fichero y salvándolo con la extensión css. En esta forma de trabajo, MEW nos ofrece una ayuda muy grande y a las personas que nos gusta escribir el código personal y directamente y que no sea el programa el que lo haga por nosotros encontraremos en MEW una herramienta excelente que ayuda al diseñador pero que le permite controlar su trabajo, es decir lo que el programa escribe o no de manera automática. Posteriormente, es necesario vincular el fichero web con el de estilos. Esto se hace por medio de la etiqueta <link>.

Vamos a ver todo esto con un ejemplo:

1. Creamos una página web. Nada más crearla, lo mejor es guardar esta página. Parra ello pulsamos sobre el botón guardar de la barra de herramientas o bien File/Save en el menú principal. Nos pedirá un nombre y, por ejemplo, podemos llamar a nuestra página AplicarEstilos.htm –ver nota sobre la diferencia entre las extensiones htm y html-. Una vez guardada nuestra página, insertamos un elemento <h5> y tres párrafos. Para añadir estos elementos, podemos hacerlo escribiendo directamente el código en el fichero html –y esto es perfectamente posible porque MEW nos ayuda mucho- o bien podemos hacerlo desde la barra de herramientas Common de MEW –si no la tenemos en el entorno de trabajo podemos pulsar View/Toolbar/Common o bien pulsar el botón derecho del ratón sobre una parte vacía de la barra de herramientas de MEW y seleccionar Common-. Una vez aquí, basta con pulsar sobre el ComboBox primero de esta barra –como se aprecia en la figura siguiente- y seleccionar Heading <h5> y Paragraph <p> respectivamente para insertar esos elementos.

A los párrafos les llamaremos respectivamente, pUno, pDos y pTres. Para ello, en el panel de Tag Properties -si por lo que sea no podemos ver este panel, lo podemos abrir en el menú Task Panes/Tag Properties- definimos para esos tres elementos los atributos id pUno, pDos y pTres respectivamente, como se indica en la figura.

11

A continuación escribimos un título –el que queramos- y tres contenidos –uno por cada párrafo-.

2. En la barra de herramientas de Style Application, seleccionamos Manual y en Target Rule, Apply New Style… Se os abrirá entonces la ventana de diálogo que nos ayuda a definir los estilos de manera visual, a golpe de ratón.

3. En esta ventana de diálogo podemos definir un estilo en línea, en el propio documento o en un fichero externo. Para definir un nuevo estilo, tenemos varias opciones que vamos a ir explicando:

a. Define in: nos permite definir el tipo de estilo que vamos a crear. Tenemos varias posibilidades:

i. Current Page: En la página actual. En general, añade un estilo en la etiqueta <style> de la cabecera de la página. Si el foco está en la página css porque estamos trabajando en ella, añade el estilo a esta hoja de estilos.

ii. New Style Sheet: Crea una nueva hoja de estilos externa.

12

iii. Existing Style Sheet: Añade el estilo a una hoja de estilos ya existente. Dicha hoja la seleccionaremos en la opción URL que está situada a la derecha de la ventana, en la parte superior. Permite también crear un estilo en línea. Lo vemos en el siguiente punto.

b. Selector: Permite dar cualquier nombre a un selector, tanto si se trabaja con clases (.miClase) como con Identificadores (#miIdentificador) como si se desea sobrescribir o redefinir un determinado estilo de un elemento cualquiera (por ejemplo un <h5> o <p>. Permite también crear un estilo en línea, seleccionando in line en Selector.

c. En la parte inferior de esta ventana hay tres botones. Tanto Aceptar como Cancelar tienen el sentido que se espera de ellos y Apply nos permite aplicar ese estilo al elemento que esté seleccionado, sin que se cierre la ventana.

Siguiendo nuestro ejemplo, en Selector escogemos New Style Sheet –nueva hoja de estilos-, indicamos un nombre para nuestro estilo –por ejemplo .miEstilo- y deseleccionamos la opción Apply New Style Document Selection, porque sólo queremos crear el estilo, no aplicarlo.

d. Ahora definimos el estilo para el elemento que esté seleccionado en

Selector. Basta con ir seleccionando distintas “categorías” en la lista Category: opciones para la fuente, el fondo, los bordes, etc… Las diferentes categorías dan lugar a distintas opciones en la parte derecha de esta zona central. Un poco más adelante seguiremos hablando de Category. En este caso, estamos definiendo el estilo de la etiqueta .miEstilo. Por ejemplo, seleccionamos una letra Lucida, Sans, un tamaño de fuente X-Large, un color de la letra rojo. Más o menos, la ventana quedaría así:

13

4. Pulsamos el botón Ok y se nos presenta la ventana

Para preguntarnos si queremos que en el documento htm actual se haga una referencia a esta hoja de estilos recién creada en la cabecera del documento. Respondemos que sí, porque si respondemos negativamente no se nos “lincarán” ambos documentos. En la cabecera de la página web se nos añade la línea

<link rel="stylesheet" type="text/css" href="unsaved:///Untitled_1.css" />

Los dos ficheros –htm y css- quedan vinculados por esta etiqueta <link> que indica que este documento html tiene una hoja de estilos asociada de tipo texto e indica la ruta donde se almacena dicho fichero. A continuación, guardamos nuestro documento Web –o el css, es igual- y se nos pide un nombre para nuestro fichero css. Por ejemplo, lo llamaremos Estilos.css. Vemos que en la línea que nos ha añadido antes en el fichero html, se actualiza el nombre del fichero css.

5. En la ventana de diálogo para definir visualmente los estilos hay otras opciones.

14

a. Category: Aquí se selecciona el tipo de elemento para el que se desea

definir el estilo –fuente, fondo, posicionamiento, etc.- del elemento seleccionado en Selector –en la figura, es el elemento párrafo <p>. En la figura se ha definido una serie de opciones para este elemento: la fuente –porque es la que está seleccionado- y el fondo –se indica con letra negrita el hecho de haber seleccionado algo de esa propiedad-.

b. Preview: este recuadro es meramente visual, y se utiliza para que el usuario pueda ver el aspecto de su estilo en esta pequeña ventana.

c. Description: En esta caja de texto se escribe el código que define este estilo y que se va a añadir a nuestro fichero css o a nuestro propio documento o al elemento –dependiendo de la opción seleccionada en Define in-.

6. Aceptamos y el aspecto de nuestro documento debería ser, más o menos- el siguiente:

15

Vemos que nada más cerrar la ventana se ha actualizado el aspecto o presentación de nuestra página y en dicha página no hay nada que haga suponer que hemos definido una presentación para nuestros elementos de párrafo. Sólo la etiqueta <link> define, como hemos dicho- la referencia a un fichero css que define este aspecto. Dicho fichero tiene el suiente contenido:

p { background-color: #FF0000; font-family: "Lucida Sans", sans-serif; font-size: x-large; font-style: italic; color: #0000FF; text-decoration: overline; }

Aquí es donde de verdad se aprecia que la presentación está separada del contenido. Bastaría con cambiar, por ejemplo, el color de fondo para que nada más guardar el fichero css, cambiarán todos los fondos de todos los párrafos de todas las páginas que hagan referencia a esta hoja de estilos.

Poco a poco iremos estudiando cada una de las propiedades de esta ventana de diálogo.

APLICANDO ESTILOS CON EL PANEL STYLE APPLICATION Y LA BARRA DE HERRAMIENTAS STYLE

16

Es conveniente ver los dos videos siguientes antes de estudiar este punto. Formas de aplicar estilos (Duración: 8m. 57seg.) En este videotutorial se explica de manera pormenorizada tres diferentes maneras de aplicar un estilo definido por medio de una clase a distintos elementos: por medio de la ventana Tag Properties, por medio de la barra de herramientas Styles y por último, por medio del panel de tareas Apply Styles. Se explica también cómo eliminar la aplicación de un estilo a un elemento o cómo borrarlo. Se utiliza un ejemplo de una página htm con tres párrafo. Se definen de manera visual dos clases para definir dos estilos y se aplican a los diferentes elementos. Panel ApplyStyles (Duración: 10m. 20seg.) En este video tutorial se explica con detalle el panel Apply Styles, que se utiliza para aplicar o borrar estilos en nuestra página. Una vez que hemos definido un estilo en una hoja de estilos externa… ¿cómo aplicarlo? Hay varias maneras de hacerlo. Con MEW esta tarea resulta muy sencilla. Para verlo, vamos a hacer un ejemplo. Nos vamos a apoyar en el ejemplo anterior, donde tenemos definidos un elemento h5 como título y tres párrafos cuyos IDs son respectivamente pUno, pDos y pTres. Hemos definido un estilo para la clase .miEstilo. Antes de empezar, es absolutamente necesario tener seleccionado “Manual” en la barra de herramientas Style Application.

a) En primer lugar abrimos el fichero htm o html. b) Como antes hemos dicho hay varias formas de aplicar estilos:

a. Ventana o panel Tag Properties. (Si el lector no lo tiene en pantalla, puede visualizarlo sin más que pulsar desde el menú Task Pane/Tag Properties). Para ello, seleccionamos el párrafo pUno y, en la ventana Tag Properties, seleccionamos en el atributo class, la clase .miEstilo como se describe en la figura. (En este combo box aparecerán todas las clases que tengamos definidas).

Podemos ver que en cuanto se selecciona .miEstilo, cambia el aspecto de ese párrafo pUno.

b. Barra de Herramientas Styles. Si no está en la barra de herramientas podemos visualizarla desde el menú View/Toolbar/Styles. Esta barra nos da información sobre el elemento seleccionado. Si seleccionamos el párrafo pUno, el aspecto de esa barra será:

17

En el caso de hacerlo sobre pDos, sólo aparecerá información sobre el elemento sobre el ID, pero no en el elemento class porque no tiene ninguna clase asignada. Una vez explicado esto ya se puede aplicar el estilo. Sólo es necesario seleccionar nuestro elemento –en este caso vamos a seleccionar el párrafo pDos- y, en el ComboBox correspondiente a class de esta barra de herramientas, elegimos la clase que queramos aplicar, en nuestro caso, .miEstilo. De manera inmediata se aplica al elemento pDos la clase .miEstilo.

c) Panel de tareas Apply Styles. Es con mucha diferencia la manera más flexible de aplicar un estilo. (Si no vemos este panel, lo podemos visualizar desde el menú Task Pane/Apply Styles). En este panel se listan los estilos actualmente definidos en nuestro proyecto y una aproximación gráfica del estilo seleccionado. El aspecto de la ventana es el siguiente:

Para aplicar un estilo a un elemento:

a. Seleccionamos el elemento. Por ejemplo, pTres. b. Pulsamos sobre el estilo –la clase .miEstilo, en la figura superior el

elemento en rojo- en el panel Apply Styles. De manera instantánea se aplica el estilo a nuestro elemento. Si deseamos no aplicar dicho estilo, seleccionamos el elemento y pulsamos, en esta misma ventana sobre la opción Clear Styles. En ese momento el aspecto del elemento se transforma en el estilo por defecto para ese elemento.

En este Panel hay muchas más opciones. Ya hemos dicho que se trata del lugar más flexible del programa para trabajar con los estilos. No sólo nos permite “aplicar estilos” a un deteminado elenemto, sino que podemos crear o definir nuevos estilos, “atachar” o rfefernciar una hoje de estilos a un

18

determiknado fichero htm o html, categorizar las vistas de los estilos, borrar estilos, renombrarlos, editarlos, etc. A continuación vamos a ir enumerando las distintas funcionalidades de este panel Apply Styles.

1. New Style. Abre la caja de diálogo Nuevo estilo en la ventana de diálogo de estilos, que anteriormente hemos explicado, que permite definir de manera visual, a golpe de ratón nuestros estilos, tanto en línea, como en el propio documento como en una hoja de estilos externa.

19

2. Attach Style Sheet… Abre una caja de diálogo que nos

permite lincar o referenciar una hoja de estilos externa a una determinada página web si es que esa hoja no está ya referenciada. Podemos referenciar uno o varios fichero css, a una o varias páginas web y lincar o importar –ya veremos la diferencia más adelante- dicho fichero.

Al pulsar sobre Browse… aparece la típica ventana de

diálogo, que nos sirve para especificar dicho fichero css.

3. Botón Options… Opciones para definir las distintas vistas de este panel. Me parece que es muy útil la categorización por orden o el tipo. Permite también un fondo aunque, la verdad, a mí me parece inútil esta opción.

4. Si pulsamos con el botón derecho sobre un determinado elemento o estilo de la lista aparecen un menú contextual

20

con una serie de opciones realmente útiles. La lista es más o menos –depende del elemento o estilo- la siguiente:

• Appy Style: sirve para aplicar el estilo al elemento seleccionado.

• Go To Code: Abre la hoja de estilos o lleva la selección a la cabecera del fichero html donde está definido dicho estilo. A mí me parece muy útil porque permite trabajar directa y rápidamente con el código.

• Select All Instances Selecciona todos los objetos –y nos indica además el nº de objetos- que tienen aplicado el estilo en cuestión sobre el que estamos pulsando con el botón derecho.

• New Style… Abre la ventana de diálogo Nuevo estilo, ya explicada anteriormente. Creo que no tiene mucho sentido tener esta opción aquí.

• New Style Copy… Crea una copia del estilo actual, sobre el que estamos trabajando, y nos abre la ventana de diálogo de nuevo estilo con las opciones del estilo actual definidas. A partir de aquí esmuy fácil añadir, cambiar o definir un nuevo estilo basado en el anterior. Creo que es muy útil esta opción.

• Modify Style… A mi modo de ver la opción más útil de este menú contextual. No abre la ventana de diálogo de nuevo estilo, tal y como se dejó, es decir, con el estilo ya definido en esa ventana, y en ella podemos modificar nuestro estilo.

• Rename… Cambia el nombre de la clase o del estilo. Lo modifica no sólo en esta ventana sino también en todo el código donde aparezca dicho elemento.

• Delete. Borra el estilo actual. • Clear Style: Borra del código la referencia a la clase o

ID. No borra el estilo, sólo deja de aplicarlo a ese elemento.

21

• Remove Link. Permite desvincula o desrefernciar nuestra hoja de estilos externa del fichero web o página html.

• Attach Style Sheet… Justo lo contrario. Permite vincular la hoja de estilos con la página web. Añade a la cabecera de la página una etiqueta <link> donde se define el vínculo a la hoja de estilos.

• Manage Style Sheet Links... Abre la ventana de la figura desde donde es possible gestionar las vinculaciones de las páginas web y las hojas de estilo. Desde aquí puede cambiarse la referencia de la página actual.

• Remove Class, Remove ID, Remove in Line Style. A

mí me parece que esta opción se utiliza mucho. Sirve para borrar la referencia a la clase, el ID o el estilo en línea que está seleccionado. Se puede hacer desde el código pero a mí me parece muy cómodo hacerlo desde aquí.

5. Características: En esta ventana –y también en la de

Manage Styles que veremos más adelante y que sirve para gestionar los estilos- hay una simbología que creo que es interesante conocer: • Puntos verdes: representa a una clase. • Punto rojo: representa un ID o identificador. • Punto azul: representa un estilo de una etiqueta o tag. • Punto amarillo: representa un estilo en línea • @nombre: representa un fichero css importado.

Cuando los puntos de diferentes colores están rodeados por un círculo, significa que ese estilo se ha aplicado en la página actual.

22

Esta ventana nos ayuda también a identificar los diferentes estilos porque nos representa el aspecto de cada uno ellos. En las dos siguientes figuras se puede ver un ejemplo de cada uno de los elementos anteriores. La ventana nos representa en diferentes bloques los estilos que están definidos en las hojas de estilo y los estilos definidos en la página actual, ya sea en línea, en el propio documento o importados. En la primera de las representaciones nunca se representan los estilos de los elementos, ya que éstos no se pueden aplicar –están aplicados por sí mismos-.

23

MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS Y CON EL PANEL MANAGE STYLES

PANEL MANAGE STYLES El panel de tareas Manage Styles está disponible en el menú Task Pane/Manage Styles. Funcionalmente, este panel es muy parecido al panel Apply Styles pero sin embargo proporciona una alternativa cuando se tienen muchos estilos definidos. Este panel tiene:

a) CSS Style List o listado de estilos del sitio web. Se puede acceder desde aquí a cualquiera de los estilos que tengamos definido en nuestro sitio Web. Clicando con el botón derecho sobre cualquiera de los estilos –ya sea de la página actual o bien de la hoja de estilos- se puede acceder a muchas posibilidades en el menú contextual.

24

Por ejemplo, si pulsamos con el botón derecho sobre el estilo .otroEstilo, aparece el menú:

Desde aquí se puede aplicar estilos al elemento de la página que tengamos seleccionado (Apply Style), ir al código del propio estilo para modificarlo (Go To Code), seleccionar todas las instancias donde aparece este estilo (Select All Instances), crear un nuevo estilo por medio de la ventana de diálogo Nuevo estilo (New Style), crear un nuevo estilo que sea exactamente igual a éste pero que podamos construirlo a partir de él (New Style Copy), modificar el estilo actual ejecutando la ventana de nuevo estilo (Modify Style), renombrar –en este

25

caso- el nombre de la clase (Rename Class), borrar el estilo o la clase (Delete), quitar o añadir la referencia de la página web a nuestra hoja de estilos (Remove Link & Attach Style Sheet), y por último, manejar o controlar las referencias de nuestra página a una o varias hojas de estilo (Manage Style Sheet Links). No explicamos estas posiblidades ahora porque he hablado de ellas en el punto anterior de forma detallada.

b) Select Style Preview. En esta pequeña zona de este panel se presenta el aspecto que tiene el estilo seleccionado.

c) Botón Options. Ya se ha explicado en el anterior punto. d) New Style. Ya se ha explicado en el anterior punto e) Attach Style Sheet. Ya se ha explicado en el anterior punto

Panel Manage Styles (Duración: 9m. 44seg.) En este video tutorial se explica la funcionalidad del Panel Manage Styles. Para hacerlo, me apoyo en un sencillo ejemplo que permite ir describiendo sus distintas opciones.

VENTANAS CSS PROPERTIES Y TAG PROPERTIES Esta ventana proporciona una alternativa cuando se desea hacer pequeñas modificaciones o añadir alguna o algunas propiedades a un estilo existente sin “relanzar” la ventana de diálogo de estilos. Su aspecto es el de la figura:

a) En la parte superior parecen tres botones o iconos:

26

El primero nos permite ver las propiedades CSS por categorías, el segundo nos ordenas dichas propiedades por orden alfabético y la tercera nos presenta en la parte superior las propiedades CSS que han sido definidas o modificadas y el resto listadas por categorías o por orden alfabético según se tenga pulsado el primer o segundo botón. En la figura anterior puede verse que se tiene pulsado el primer botón –listado por categorías- y el tercero por lo que se sitúan en la parte superior de dicha lista las tres propiedades CSS que se han definido. El texto está en color azul cuando una propiedad se ha definido y en la parte derecha de la ventana aparece el valor de dicha propiedad.

b) En la parte que está situada un poco más hacia abajo, Current Rule, se

informa de cómo se ha aplicado el estilo –en línea, en el propio documento o en un a hoja de estilos externa y en éste último caso se informa del nombre del fichero css y un poco más abajo el selector que se ha utilizado –una etiqueta, una clase, un identificador, etc (en este caso la clase .miEstilo). Si se pulsa sobre el nombre del fichero css se accede al código de la hoja de estilos.

En la zona CSS Properties se listan todas las propiedades susceptibles de ser definidas. Una pequeña cruz en la izquierda de una propiedad indica que esta propiedad tiene sub-propiedades o propiedades que dependen o están relacionadas con esta propiedad. Si se pulsa sobre la cruz se desglosan estas propiedades y aparece un pequeño recuadro con un guión indicando que la lista está desplegada. La ventana no es exactamente la misma si se trata de un estilo definido en una hoja de estilos o definido en la propia página o en línea. Por ejemplo, en la figura se puede ver ahora un estilo en línea, definido en un párrafo cuyo identificador es pTres- que sólo ha cambiado una propiedad –el color de la letra- y están listadas las propiedades por orden alfabético y en la parte superior de la lista se encuentra la propiedad definida. Ahora aparece en la primera zona la leyenda Applied Rules que nos informa de los elemento que tienen aplicado este estilo y un botón que antes no aparecía –Summary- porque se trataba de un estilo definido en una hoja de estilos.

27

Si se pulsa sobre el botón Summary la ventana cambia su contenido:

28

Ahora nos aparecen sólo las propiedades que afectan a este estilo. Haya que tener en cuenta que este botón permanecerá en estado pulsado si no lo volvemos a pulsar. Si esta ventana está vacía es porque el foco de la aplicación no se encuentra sobre algún estilo en el panel Manage Styles. Panel CSS Properties (Duración: 7m. 54seg.) Se explica en detalle el Panel CSS Properties. A través de un ejemplo, se enseña que sirve para obtener información de un elemento que se haya seleccionado pero también y sobre todo, para realizar pequeñas modificaciones en un determinado estilo ya definido sin tener que ejecutar la ventana de edición de estilos o hacerlo directamente sobre el código. En el video tutorial Tag Properties (Duración: 6m. 27seg.) se explica con detalle la utilización de la ventana Tag Properties y cómo trabajar con ella. A través de un ejemplo se enseña que sirve, sobre todo, para trabajar con el código HTML y no con estilos aunque también podría modificarse un estilo desde esta ventana.

REDEFINIR UNA ETIQUETA O TAG HTML Por defecto, los elementos HTML tienen un estilo pre-definido. Por ejemplo, el elemento <h1> tiene un tamaño y un color de letra por defecto. Los mismo sucede con

29

cualquier elemento. ¿Es posible modificar estos estilos predefinidos?. La respuesta es afirmativa y vamos a hacer un ejemplo para comprender cómo hacerlo. El elemento <body> por ejemplo, tiene un estilo definido por defecto. La fuente o letra por defecto es Times New Roman, de color negro. Por otro lado tiene unos márgenes determinados arriba, abajo, izquierda y derecha. Vamos a modificar la apariencia que el elemento <body> tiene por defecto. Para entender cómo redefinir etiquetas HTML utilizando CSS con MEW. Para ello se deben seguir estos pasos:

a) Desde el panel Apply Styles o Manage Styles, pulsamos sobre New Style y se abrirá la ventana de diálogo de estilos.

b) En Define in: seleccionar Existing Style Sheet si es que estamos trabajando ya con una hoja de estilos externa o New Style Sheet si es una nueva. En URL seleccionamos la página HTML en el primero de los casos en el elemento. En el menú Selector, elegimos la etiqueta <body> que es el elemento al que queremos redefinir el estilo por defecto.

30

c) Cambiamos ahora en la ventana alguna propiedades: La categoría Font Arial/Helvetiva en la opción Font-Family. El tamaño o Font-Size Small y Color Rojo. La categoría Box quitar Same for All for margin en el checbox correspondiente e introducir el valor 35 for left. Esto añadirá 25 píxeles de espacio en la parte izquierda de la página.

d) Al pulsar sobre el botón Ok el aspecto de la página se modifica porque se ha redefinido el estilo de la etiqueta <body> . Por otro lado podemos ver que se ha definido el código en la hoja de estilos externa. Además se añade la etiqueta body a la lista de estilos en el panel Manage Styles, con un icono azul, que significa que hemos redefinido el estilo de una etiqueta: también puede verse en la ventana que aparecen en letra azul las propiedades que se han modificado las propiedades CSS Properties.

31

En el video tutorial Redefinir Etiquetas (Duración: 5m. 27seg.) se explica cómo redefinir el estilo que por defecto se aplica a cada uno de los elemento HTML. Para ello, nos apoyamos en un ejemplo muy sencillo y se modifican algunas de las propiedades CSS que están predefinidas por defecto para el elemento body. También se explica con detalle cómo quedan reflejados estos cambios en en los paneles Apply Styles y Manage Styles así como en la ventana CSS Properties.

CSS REPORTS En ocasiones, es posible tener algunos errores en nuestro código y que la visualización de nuestra página no se vea afectada por este error. Un ejemplo sencillo se da cuando a un elemento determinado se asocia un nombre de una clase que no existe. En este caso, si se visualiza la página con cualquier visualizador, no tenemos manera de saber que tenemos un fallo en nuestro código. MEW nos proporciona un herramienta que permite chequear nuestro código para saber si tiene errores. Dicha herramienta se denomina CSS Reports. Esta herramienta nos permite conocer las clases indefinidas, los estilos no utilizados, lo errores, etc. Para ejecutar esta herramienta lo podemos hacer de dos maneras: desde el menú Task Panes/CSS Reports o bien desde el menú Tools/ CSS Reports. La única diferencia entre ambas es que en la segunda la aplicación se ejecuta directamente y en la primera de las opciones tenemos que hacerlo sobre la ventana que se nos abre. Si la plaicación se ejecuta de la segunda forma, es decir, desde el menú Tools/CSS Reports s eabre la ventana de la figura siguiente. Si lo hemos hecho desde el panel,

32

tenemos que ejecutar la aplicación, pulsando sobre el botón PLAY situado en la esquina superior izquierda del panel, en color verde.

En pestaña Errors, seleccionamos la o las páginas que deseemos chequear y seleccionamos todas las opciones de la parte derecha de la ventana. Al pulsar sobre el botón Check, el panel CSS Reports nos da una información del tipo del de la figura:

En el video tutorial Chequear Estilos (Duración 4m. 11seg.) se explica esta herramienta que proporciona MEW para chequear nuestras páginas. Con ella se puede acceder a errores que sería muy difícil detectar visualizando el código directamente o ejecutando nuestras páginas web.

33