EJEMPLO
DE DREAMWEAVER
En primer lugar vamos a crear un documento nuevo de
DreamWeaver, después desde las opciones de “propiedades de pagina”
daremos color al fondo de la pagina web.
El resultado de esta operación es,
El siguiente paso será desde la herramienta de
“tablas” crear una tabla con una fila y cuatro columnas,
después procederemos a insertar en cada celda de la tabla
una imagen diferente, mediante el icono de “imagen”,
Repetiremos la operación anterior hasta tener toda la
tabla llena de iconos, como muestra la siguiente imagen,
También
centraremos la tabla mediante la opción de “alinear” que aparece en la parte
inferior de la pantalla como se indicaba
en la imagen anterior.
después de este paso cambiaremos la barra de herramientas,
haciendo “clic” en la lista de barras de herramientas disponibles en
DreamWeaver,
El siguiente
paso es crear una capa en la que especificaremos unas características mediante
las diferentes opciones de configuración de la parte inferior de la pantalla de
DreamWeaver.
Desde
las opciones inferiores de la pantalla colocaremos los valores como muestra la
imagen ampliada,
El nombre de la capa le pondremos “terra”, también
seleccionaremos un color para el fondo de la capa, y finalmente colocaremos la
“visibilidad” de la capa a “hidden” (oculto), después de realizar este paso todavía
es visible la capa, pues estamos en el modo diseño, cuando realicemos la ejecución
en el navegador es cuando no se visualizara.
Dentro
de la capa escribiremos el siguiente texto,
Colocaremos
también las propiedades adecuadas para respetar el formato,
Dibujaremos
otra capa nueva encima de la anterior y le daremos otro color, y las características
que se muestran en la imagen siguiente,
Repetiremos
la misma operación con otras dos capas a las que daremos un nombre y color
diferente a cada una,
Y finalmente,
Finalmente
daremos a cada imagen de la tabla “el comportamiento” necesario para que al realizar un “clic” muestre la
capa adecuada.
Para
ello haremos “clic” en la imagen de “terra” y desde la parte derecha de la pantalla
en la pestaña de “comportamiento” haremos el siguiente paso,
Al
activar la opción de la lista “Mostrar – Ocultar capas” aparecerá la pantalla
para determinar el estado que le queremos dar a las capas,
Seleccionamos
cada capa y con el botón “mostrar” y “ocultar” colocaremos al igual que la
pantalla anterior.
Al aceptar la pantalla anterior de mostrar u ocultar
las capas, la persiana de “comportamientos” quedara de la siguiente manera,
El
siguiente paso es mostrar una vista “dividir”,
En este momento se visualiza el código del
“comportamiento” que hemos colocado anteriormente. Desde el código
rectificaremos el siguiente comando,
El
comando “onload” lo cambiaremos por “onclick”.
Repetiremos
la operación con las otras tres imágenes de la tabla,
Al
final la pantalla de código tendrá este aspecto,
Finalmente
almacenamos la pagina web y pulsamos la tecla F12 para
abrir el navegador,
Al hacer “clic” en un icono de la tabla se mostrara
solamente el contenido de la capa adecuada,
Cursos Curso de Mecanografia
Oposiciones
Curso de Contabilidad