Ejercicio paso a paso. Modificar las propiedades de una capa


Objetivo.

 

Practicar las operaciones que hay que realizar para crear una capa y modificar sus propiedades.

 

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

2 Haz clic sobre el menú Archivo.

3 Haz clic sobre la opción Abrir. Se abrirá una nueva ventana.

4 En Tipo:, elige Todos los archivos.

5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el botón Aceptar.

6 Añade a la página detrás de la etiqueta </table> el siguiente código:

<div id="gatosemana" style="position:absolute; width:320px; height:320px; z-index:1; left: 10px; top: 69px; background-color:#FFFF99; layer-background-color:#FFFF99;" >
<p
align="center">&nbsp;</p>
<p
align="center"><font size="4">Este es Golfo y es de Valencia</font></p>
<p
align="center"><img src="imagenes/gato1.gif" ></p>
<p
align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p>
</div>

 

Este código define una capa llamada gatosemana, de 320 píxeles de anchura (width:) y altura (height:), situada a 10 píxeles del margen izquierdo (left), y a 69 píxeles del margen superior (top).

La capa se mostrará a la distancia de los márgenes especificada mediante width y height por el atributo position:absolute.

La capa será de color amarillo (background-color:#FFFF99; layer-background-color:#FFFF99;)

7 Haz clic en la opción Guardar del menú Archivo.

8 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí.

9 Esta capa no la queremos ver de momento por eso añade visibility: hidden; después de layer-background-color:#FFFF99;.

10 Haz clic en la opción Guardar del menú Archivo.

11 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que la capa ya no aparece.

   Inicio 


.