EDUCACION

1. Tema: INSERTAR CAPAS EN UNA PAGINA WEB.
A. Conceptos básicos:
 Un rollover o imagen de sustitución es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de
imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.
 Las capas no son más que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los
párrafos son elementos de bloque destinados a contener texto. Las capas, también llamadas layers o divisiones, se crean con la
etiqueta <div></div>.
 Cuando convertimos una capa en un elemento con posición absoluta (elemento
PA), se muestra así en Dreamweaver:
 Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el
recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.
 También pueden ser redimensionadas pulsando sobre los recuadros negros, y
arrastrándolos hasta conseguir el tamaño deseado.
 Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,
animaciones flash, y todos los elementos que puede contener un documento
HTML.
 Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.
B. Procedimiento:
Para crear una página web con marcos se siguen los siguientes pasos:
1) Inserta una imagen de sustitución, paraello
haremos clic sobre el menú insertar, objetos de
imagen y luego imagen de sustitución
2) Elegimos las dos imágenes y clic en insertar
3) Sitúa el punto de inserción a continuación de la
imagen de sustitución de email que habíamos
incluido en el marco izquierdo.
4) Haz clic sobre el menú Insertar.
5) Elige la opción Objetos de diseño, luego elige
la opción Div PA.
6) Haz clic derecho sobre la esquina superior
izquierda (el recuadro blanco), y en el menú contextual
elige Editar...
7) Escribe sugerencia como nuevo ID y pulsa
Aceptar.
8) Sitúa el punto de inserción dentro de la capa.
9) Escribe el texto no olvides mandarnos tus
dudas y sugerencias.
10) Selecciona la capa pulsando sobre el
cuadrado blanco que aparece en su esquina superior-
izquierda.
11) Utilizando los controles pararedimensionar y mover la capa, haz que quede debajo de la imagen, centrada, y que todo el texto
quepa dentro. Si lo prefieres, puedes introducir los valores:
a. En Iz escribe 56px.
b. En An escribe 150px.
c. En Al escribe 52px.
12) Haz clic en el contenido y ve al Inspector de propiedades CSS.
13) Asegúrate que está seleccionada como Regla de destino el nombre de la capa (por defecto #apDiv1, pero lo hemos cambiado a
#sugerencia), y pulsa el botón Editar regla.
Estudiante Grado 4º de Secundaria
Asignatura COMPUTACIÓN Fecha 07 / setiembre / 2016
PRACTICA CALIFICADA N° 21

2. 14) Edita las propiedades CSS para darle un
fondo blanco, un borde gris (#666) de
1px sólido, reducir el tamaño de la fuente
a un 90% y darle un padding de 5px.
Aceptalos cambios del editor de estilo.
15) Comprueba que la capa ha quedado
debajo de la imagen de sustitución, si no
haz clic en el cuadrado blanco de su
esquina superior-izquierda y arrástralo
hasta que quede centrado en el marco y
bajo la imagen de email. Comprueba
también que el tamaño permite leer todo
el texto.
16) Guarda y visualízalo en el navegador.
17) Selecciona la capa pulsando sobre el
cuadrado blanco que aparece en su
esquina superior-izquierda.
18) En Vis selecciona hidden.
19) Pulsa fuera de la capa paraque deje de
estar seleccionada y se le aplique el último cambio.
20) Haz clic sobre el botón Guardar de la barra de herramientas.
C. Conclusiones:
 ¿Para qué sirve las capas? (2 puntos)
 ¿Para qué sirve la imagen de sustitución?(2 puntos)