Diseño de páginas web con FrontPage

III Elementos de diseño avanzado

5) HTML dinámico

El HTML Dinámico (DHTML) se refiere al uso de JavaScript, Hojas de Estilo en Cascada (CSS) y tecnología de navegador para hacer páginas más vibrantes y activas.  Los efectos del HTML dinámico que crea FrontPage de forma sencilla exigirían un alto grado de conocimiento de cada una de las tecnologías anteriormente citadas.  El problema del HTML dinámico es que su visualización es diferente en función del tipo de navegador que estemos manejando (Internet Explorer o Netscape Navigator).

Para añadir efectos DHTML debemos mostrar la barra de herramientas específica, seleccionando Ver, Barras de Herramientas, Efectos DHTML:

Podemos añadir efectos tanto a textos como a imágenes.

Texto animado

1. Seleccionamos el texto que se quiere animar.
2. En la barra de efectos DHTML podemos elegir entre cuatro alternativas

   	Clic: Hace que la animación ocurra cuando se haga clic en el texto
   	Doble clic: La animación ocurrirá tras un doble clic en el texto
   	Pasar el mouse: La animación ocurrirá cuando el ratón pasa por el texto
   	Carga de página: La animación se producirá cuando se carga la página.

3. Elegimos entre dos opciones: Volar hacia fuera (el texto se moverá de la forma que indiquemos) o Formato (cambia la fuente, tamaño, color, relleno,... del texto).

Ejemplos de texto con DHTML

Clic (formato)

Doble clic (volar)

Pasar el mouse (formato)

Carga de página (elástico)

Imágenes animadas

Podemos hacer que una imagen vuele, que su borde cambie de estilo o incluso que se cambie la imagen al situar el ratón encima de ella.

1. Seleccionamos la imagen que se quiere animar
2. En la barra de efectos seleccionamos las mismas alternativas que en el texto (clic, doble clic, pasar el mouse y carga de página), aunque con posibilidades diferentes
3. Por ejemplo, podemos hacer que al situar el ratón sobre una imagen, esta cambie a otra imagen.  Para ello insertamos una imagen, la seleccionamos y en la barra DHTML escogemos "Pasar el mouse", Aplicar "Intercambiar imágenes" y seleccionamos la imagen que deseamos aparezca.  Obtenemos el siguiente efecto:

Transiciones entre páginas

Al igual que con textos e imágenes, podemos aplicar efectos DHTML para establecer transiciones entre páginas, es decir, definir el paso de una página a otra.  Para ello seleccionamos Formato, Transición de Página, apareciendo el siguiente cuadro de diálogo

En este cuadro de diálogo seleccionaremos el efecto que deseamos al pasar a la página siguiente.   Al pulsar la flecha verde del final de esta página, para pasar a la siguiente, se realiza el efecto "Salida en círculo"