Práctica 3: Interacción con hojas de estilo en cascada

Diseño de Interfaces Hombre Máquina
Prácticas de laboratorio
Curso 2007/08
Práctica 3
Interacción con hojas de estilo en cascada
1 Objetivo
1.1 Creación de una hoja de estilo
La figura 1 muestra una página con información de una vivienda. En esta página se ha
colocado exclusivamente la información de la vivienda, sin aplicar ningún estilo.
Figura 1: página de la vivienda sin estilo
2
Diseño de Interfaces Hombre Máquina
Por otra parte, la figura 2 muestra la misma página anterior pero esta vez con el estilo
que se desea para la misma. Para obtener esta nueva versión de la página se ha
creado una hoja de estilo y se ha incluido en la página anterior colocando en el
encabezado de la misma un elemento LINK:
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
Figura 2: página de la vivienda con el estilo definido en la hoja de estilo
El objetivo de este apartado es crear la hoja de estilo necesaria para que la página se
muestre de la forma que se aprecia en la figura 2. Para ayudar a construir esta hoja de
estilo se indican los elementos a los que debe aplicarse un estilo y las propiedades que
deben definirse para ellos.
Estilos genéricos:
• BODY: tipo de letra arial, alineación de texto centrada.
• H1: tamaño 24 puntos, color de texto azul.
• H2: tamaño 12 puntos, color de texto blanco sobre fondo azul.
• P: alineación de texto justificada.
• UL: usar como marcador la imagen ‘bolaverde.gif’, alinear texto a la izquierda.
• ADDRESS: tamaño de texto relativo de 0.8em.
Práctica 3: Interacción con hojas de estilo en cascada
3
Estilos con nombre:
• imagen-casa (aplicado a la imagen de la casa): flotar a la izquierda.
• caracteristica (aplicado a los nombres de las características): estilo de fuente
itálica, color de texto azul.
Estilos de bloques:
• caracteristicas (aplicado a un bloque que encierra la lista de características):
borde de 1 píxel de grosor, línea de trazos y color azul, márgenes izquierdo y
derecho del 30%, margen inferior relativo de 1em.
1.2 Barra de navegación
En este apartado se va a crear una barra de navegación con botones para facilitar la
navegación entre una serie de páginas. En concreto, se tendrá una página principal y
tres páginas colgadas debajo de ella. La barra de navegación permitirá pasar de la
página principal a cualquiera de las otras tres, y desde cada una de éstas a las otras
dos y a la página principal.
En la figura 3 se muestra la página principal, que pertenece a una inmobiliaria. Cada
una de las páginas secundarias muestra información sobre una de las viviendas de que
dispone la inmobiliaria. Una de ellas se muestra en la figura 4, mientras que la figura 5
muestra la estructura de las páginas.
Figura 3: página principal de la inmobiliaria
4
Diseño de Interfaces Hombre Máquina
Figura 4: página que muestra los datos de una de las viviendas
lindanav.html
casa1.html
casa2.html
casa3.html
Figura 5: estructura de las páginas para el apartado 2
La barra de navegación de la página principal está formada por tres botones que llevan
a las páginas de las tres viviendas. Las barras de navegación de éstas añaden un
botón que lleva a la página principal (etiquetado como ‘Inicio’). Obsérvese que el botón
de la vivienda a la que corresponde la página se encuentra resaltado respecto a los
demás. Todos los botones están realizados con textos cuyo estilo se define en la hoja
de estilo estilo.css:
BODY {font-family: arial, sans-serif; text-align: center;}
P.titulo {font-size: 24pt; color: blue; margin-bottom: 0; margin-top: 0;}
P.subtitulo {font-size: 12pt; color: black; margin-top: 0;}
ADDRESS {font-family: times, serif;}
UL {list-style-type: none; margin-left: 0; padding-left: 0;
Práctica 3: Interacción con hojas de estilo en cascada
5
margin-top: 1.5em;}
LI {display: inline;}
A:link, A:visited {color: white; background-color: blue; font-family:
verdana, sans-serif; font-size: 1.2em; font-weight: bold;
text-decoration: none; padding: 0.1em 1em; border: 3px solid blue;}
A:hover {color: yellow;}
A.activo:link, A.activo:visited {color: blue; background-color: white;
font-family: verdana, sans-serif; font-size: 1.2em; font-weight: bold;
text-decoration: none; padding: 0.1em 1em; border: 3px solid blue;}
A.activo:hover {background-color: yellow;}
IMG.vivienda {float: left;}
P.codigo {font-style: italic; margin-bottom: 0; padding-bottom: 0;
text-align: left;}
P.descripcion {margin-top: 0; padding-top: 0; text-align: left;}
IMG.linea {clear: left;}
1.3 Superposición y ocultación de imágenes
En este apartado se va a mostrar cómo pueden superponerse varias imágenes y hacer
que cada una de ellas pueda mostrarse u ocultarse. La figura 6 muestra la página que
se pretende obtener, y que contiene un mapa con la localización de las distintas
propiedades de la Inmobiliaria Lindavista. El mapa es en realidad la superposición de 5
imágenes distintas: una imagen de fondo con el mapa propiamente dicho y cinco
imágenes que muestran la ubicación en el mapa de otros tantos tipos de propiedades:
pisos, apartamentos, chalets, locales y oficinas.
Al activar o desactivar la casilla de verificación correspondiente a un determinado tipo
de propiedades, las imágenes de éstas aparecen o desaparecen, respectivamente
(figura 7).
Figura 6: página del apartado 3 con todas las propiedades visibles
6
Diseño de Interfaces Hombre Máquina
Para conseguir este comportamiento hay que colocar en primer lugar las imágenes de
las distintas propiedades en la página mediante posicionamiento absoluto. Para ello se
utiliza el elemento DIV:
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaFondo" SRC="mapa-fondo.gif"></DIV>
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaPisos" SRC="mapa-pisos.gif"></DIV>
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaApartamentos" SRC="mapa-apartamentos.gif"></DIV>
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaChalets" SRC="mapa-chalets.gif"></DIV>
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaLocales" SRC="mapa-locales.gif"></DIV>
<DIV STYLE="position: absolute; top: 80px; left: 200px">
<IMG ID="mapaOficinas" SRC="mapa-oficinas.gif"></DIV>
Por otra parte se colocan las casillas de verificación dentro de un elemento FORM:
<FORM>
<INPUT TYPE="checkbox" NAME="pisos" CHECKED
ONCLICK="cambiaVisibilidad(mapaPisos)">Pisos<BR>
<INPUT TYPE="checkbox" NAME="chalets" CHECKED
ONCLICK="cambiaVisibilidad(mapaChalets)">Chalets<BR>
<INPUT TYPE="checkbox" NAME="apartamentos" CHECKED
ONCLICK="cambiaVisibilidad(mapaApartamentos)">Apartamentos<BR>
<INPUT TYPE="checkbox" NAME="oficinas" CHECKED
ONCLICK="cambiaVisibilidad(mapaOficinas)">Oficinas<BR>
<INPUT TYPE="checkbox" NAME="locales" CHECKED
ONCLICK="cambiaVisibilidad(mapaLocales)">Locales<BR>
</FORM>
Como se puede apreciar, al hacer click sobre una casilla se invoca a la función
cambiaVisibilidad pasando como parámetro el identificador de la imagen
correspondiente. Esta función, definida en la sección HEAD de la página, es la
siguiente:
<SCRIPT>
<!-function cambiaVisibilidad(imagen)
{
if (imagen.style.visibility == "hidden")
imagen.style.visibility = "visible";
else
imagen.style.visibility = "hidden";
}
// -->
</SCRIPT>
En la función se pregunta por el estado actual de la imagen y en función del mismo se
le asigna un nuevo estado modificando su propiedad visibility. Así, si la imagen está
oculta (hidden) se hace visible, mientras que si está visible se oculta.
Práctica 3: Interacción con hojas de estilo en cascada
7
Figura 7: página del apartado 3 con algunas propiedades visibles
Por otra parte, en este apartado se utiliza una hoja de estilo que tiene el contenido
siguiente:
BODY {font-family: verdana, arial, sans-serif; font-size: 0.8em;
color: white; background-image: url(fondocurvo.gif);
background-repeat: no-repeat;}
P.titulo {font-family: arial; font-size: 2.4em; margin: 0 0 0.5em 0;}
P.subtitulo {font-family: arial; font-size: 1.2em; margin: 0 0 0.5em 0;}
IMG {float: left; margin: 0 1em 0.5em 0.5em;}
2 Herramientas
•
•
Para la creación de las páginas web se utilizará el entorno de programación Eclipse.
Las páginas se guardarán en el disco duro del PC y para su visualización se
utilizará el propio entorno Eclipse o bien los navegadores Mozilla Firefox o Internet
Explorer.
3 Documentación
•
•
Apuntes del curso “Diseño de Páginas Web”, www.lsi.us.es/cursos/cursoweb
Los ficheros necesarios para esta práctica pueden descargarse de la página web de
la asignatura, http://www.lsi.us.es/docencia/pagina_asignatura.php?id=23