Ejercicios de DHTML
Pedro Angel Castillo Valdivieso
Fco. Javier García Castellano

Tema 2: CONTROLAR CSS CON DHTML.

Definir varios bloques CSS y acceder a sus propiedades mediante el D.O.M. para visualizarlas en una ventana de mensaje.
Definir varios bloques CSS y acceder a sus propiedades mediante el D.O.M. para visualizarlas en otra ventana del navegador con document.write().
Definir varios bloques CSS y acceder a sus propiedades mediante el D.O.M. modificándolas de algún modo, por ejemplo, incrementar las coordenadas u ocultar cierto bloque, etc, ante un evento de ratón.

Tema 3: LAYERS.

Definir varios layers (CSS o LAYER) de diferentes colores, unos dentro de otros, de forma que se vea claramente cuales "descienden" de los otros.
Definir varios layers con posición absoluta y otros con posición relativa utilizando tanto sintáxis CSS como el tag LAYER. Intentar formar una figura más o menos compleja colocando layers de forma absoluta, por ejemplo:
##### # - - # # . # # o # ###
suponiendo que "#" , "o" , "." y "-" son layers de distinto tamaño y color.
Definir varios layers y en alguno de ellos incluir una página HTML externa usando SRC (LAYER) o source-include (CSS).
A partir de la página anterior, hacer que ante un evento de ratón, se cargue otra página.

Definir varios layers en una página. Acceder mediante JS a la visibilidad de éstos de forma que cuando el ratón pase sobre un link de la página, se oculten todos los elementos; y al salir de dicho link, vuelvan a hacerse visibles.
Definir varios layers en una página. Acceder mediante JS a la visibilidad de éstos de forma que según el link pulsado (de varios que formarán una especie de menú), se visualice un texto o imagen diferente, pero siempre en la misma posición.
Definir varios layers y ajustar su z-index para que estén situados en diferentes planos (usar posiciones absolutas); y hacer uso de JS para que ante un evento de ratón en un link, cambien esa ordenación.
Definir un layer (más o menos grande), y hacer uso del clipping para reducirlo hasta un tamaño muy pequeño, tras lo cual comenzaremos a agrandarlo hasta que vuelva a su tamaño original.
Usar timeOuts, la propiedad clip, y cualquier otra cosa que sea necesaria.
Utilizar los métodos necesarios del objeto Layer para hacer que, dependiendo de ciertos eventos en ciertos elementos (links) a modo de menú, un layer previamente definido en la página, cambie de posición, cambie de tamaño, pase a estar sobre o debajo de otro layer, y modifique su contenido cargando un documento HTML.

Construir una página que detecte el nombre y versión del navegador que estamos utilizando y lo muestre de dos formas diferentes: mediante un alert() y haciendo uso de la función write(), escribiendo directamente en el documento.
Definir varios layers en un página y acceder a varias propiedades suyas de diversos modos, por ejemplo, haciendo comprobaciones del DOM soportado, mediante variables que referencien a los elementos, evaluando la expresión completa en cada momento, etc.
Diseñar una página en la que se incluya contenido para N4 y para el resto de navegadores a través de los tags <LAYER> y <NOLAYER>
Diseñar una página en la que se incluya contenido para los distintos navegadores en función de la versión de éstos, mediante la función write()
Diseñar un sitio web para el que se crearán distintas versiones de páginas: para navegadores con versión 4, y con versión 3. Hacer uso de Meta-Refresh y de redirección dinámica.

Diseñar una página en la que, ante algún evento, se cree un nuevo layer.
Ampliar la página anterior para poder indicar mediante elementos en un formulario, las características del nuevo layer.
Diseñar una página en la que, ante algún evento, se modifique el contenido de un layer. Utilizar las funciones document.write() y document.close().

Diseñar una página en la que, al cargarse, comience una animación de varias imágenes o textos por toda la ventana del navegador. Por ejemplo, varios dibujos que se desplazan de abajo hacia arriba o de derecha a izquierda.
Diseñar una página en la que colocaremos varios links los cuales, cuando el puntero se coloque sobre ellos, se deben desplazar hacia otra parte de la ventana, para hacer complicado el que sean pulsados.
Diseñar una página en la que los links no tengan la raya del subrayado, pero que cuando el puntero pase sobre ellos se muevan ligeramente para indicar que están ahí.
Diseñar una página en la que dispongamos de un menú (con formularios o con links) y dependiendo de la opción que pulsemos nos cargue una u otra página de código HTML. Es aconsejable utilizar un layer y el método load()
Diseñar una página en la que haya varios layers que podamos desplazar por el documento pinchando sobre ellos con el puntero y arrastrándolos, esto es, hacer una aplicación de drag&drop.
Continuar el ejemplo de la ventana al estilo de Windows95 para hacer que respondan también los botones de maximinar y minimizar.
Continuar el ejemplo del scroll en un layer para incluirle, en lugar de dos links para subir/bajar, dos flechitas y una barra de scroll. Se trata de darle un aspecto más profesional.


Pedro Angel Castillo Valdivieso: pedro@geneura.ugr.es Fco. Javier García Castellano: fjgc@decsai.ugr.es Equipo GeNeura Departamento de Arquitectura y Tecnología de los Computadores Universidad de Granada tlf: +34-58-243163 fax: +34-58-243230