Diseño de páginas web

Transcripción

1 Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso

2 Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan o se oculten con otra capa. Las capas se utilizan, en general, para hacer la página más dinámica, y crear diseños de páginas complejos, al ser fácil cambiar la posición de los elementos al arrastrarlos si se han colocado en capas. Resulta difícil definir qué es una capa: es como una página web dentro de otra página web, es decir, como un contenedor que podemos colocar en cualquier parte de la página, y que puede contener texto, imágenes, formularios, y hasta otras capas. Las capas se pueden apilar unas encima de otras, ocultar unas capas y mostrar otras, o se puede mover una capa por la pantalla. Proporcionan al diseñador un mayor control y flexibilidad para hacer la página más dinámica. A las capas se les puede colocar comportamientos, que permiten al internauta una mayor interactividad con la página. Las etiquetas más comunes y que se recomiendan para que sean visibles por los navegadores son div y span, para capas CSS y layer e ilayer para capas Netscape. Cada capa que se crea en la página tiene unas características predeterminadas, como tipo de etiqueta, visibilidad, altura y anchura, etc, que se pueden cambiar en Edición > Preferencias y seleccionando Capas. Si no queremos que las capas se superpongan, según se van creando, hay que activar la opción Evitar solapamiento en el panel Capas. Capas. Objetos en movimiento 10.-1

3 Insertar capas Para crear una capa podemos emplear las rutas: a) Insertar > Capa, y aparecerá ya dibujada b) Panel Objetos > Dibujar capa El recuadro que se ve es la propia capa, donde se puede teclear o insertar texto, imágenes, etc. El icono es una marca de capa, que si se selecciona y pulsa la tecla de Supr hace que la capa desaparezca, al igual que el pequeño rectángulo de la parte superior izquierda. Al hacer clic sobre uno de los bordes de la capa, el inspector de propiedades nos informa acerca de los datos de la capa: Cuando se utiliza esta opción el cuadro de la capa no aparece ya dibujado en la página, sino que debemos dibujarlo nosotros, haciendo clic en un punto, y arrastrar, sin soltar el botón del ratón, hacia la esquina opuesta. Capas. Objetos en movimiento 10.-2

4 Trabajar con capas Las capas se pueden mover, activar o cambiar su tamaño. Para ello lo primero que tenemos que hacer es seleccionarla. Selecciona una capa: En el panel Capas, haz clic en el nombre de la capa. También puedes seleccionarla haciendo clic en el manejador de selección, o en el borde de la capa. Para seleccionar varias capas: En el panel Capas, haz clic en dos o más nombres de capas mientras pulsas la tecla Mayús. Cuando haya varias capas seleccionadas, los manejadores de la última capa se resaltarán en negro, mientras que los manejadores de las demás capas estarán en blanco. Capas. Objetos en movimiento 10.-3

5 Propiedades de capas ID de capa: permite especificar un nombre para identificar la capa en el panel Capas. Iz y Sup (izquierda y superior), nos dicen la posición con respecto al ángulo superior izquierdo de la página o de la capa padre, si la capa es anidada. Las unidades de medida son: Píxeles (px detrás de la cantidad, sin espacios), picas (pc), puntos (pt), pulgadas (in), milímetros (mm), centímetros (cm) o mediante porcentaje (%). An y Al, para el tamaño (ancho y alto), con las mismas unidades que para Iz y Sup. Ïndice Z, para indicar el orden de colocación (qué capas tapan a cuáles). Vis, para elegir el modo inicial de la capa: * default: se verá o no según configuración del naveador. * inherit: usa la propiedad de visibilidad de la capa padre. * visible: muestra la capa siempre. * hidden: no muestra la capa nunca, oculto Im. fondo: especifica una imagen de fondo para la capa. Col. fondo: si se deja en blanco el fondo es transparente. Desb: determina lo que ocurre si el contenido de la capa excede de su tamaño, con las opciones visible, oculta, barras de desplazamiento (scroll) y auto, que las presenta solamente en caso necesario. Rec: define el área visible de la capa. Capas. Objetos en movimiento 10.-4

6 Conversión de capas en tablas Dreamweaver permite crear un diseño utilizando capas y convertirlas después en tablas, y que viene a ser parecido a trabajar como en vista de disposición usando celdas y tablas de disposición. Uno de los motivos de la conversión es que los navegadores 3.0 no admiten capas. No se puede convertir una sola tabla o una sola capa, ya que se aplica la operación a todas las tablas o a todas las capas de la página. No puede haber capas superpuestas. Al convertir las capas en una tabla, Dw crea columnas, filas y celdas para que coincidan con las capas de la página: las capas deben estar lo más juntas posibles para reducir el número de columnas y filas, y en el espacio que hay entre ellas utiliza GIF transparentes,y así veremos el archivo transparent.gif en la raíz de la carpeta del sitio. La ruta es la siguiente: Modificar > Convertir> Capas en tabla. En Diseño de tabla del cuadro de diálogo conviene activar las opciones Mínimo: contraer celdas vacías y Usar GIF transparentes. En Herr. de diseño, ha de estar activada la opción Evitar solapamiento de capas. Capas. Objetos en movimiento 10.-5

7 Conversión de tablas en capas Ruta: Modificar > Convertir > Tablas en capas. Aparece un cuadro de diálogo: Las opciones Mostrar cuadrícula y Ajustar a cuadrícula no suelen seleccionarse. Al pulsar en aceptar las tablas se convierten a capas. Las celdas vacías no se convierten a capas, a no ser que tengan color de fondo. Hay que tener en cuenta que los elementos de la página que se encuentren situados fuera de la tabla, también se colocan en capas. Capas. Objetos en movimiento 10.-6

8 Animar las capas. Objetos en movimiento Las líneas de tiempo crean la animación al hacer cambiar la posición, el tamaño, la visibilidad y el orden de apilamiento de las capas con el transcurso del tiempo. Además sirven también para realizar otras acciones cuando termine de cargarse la página. Ruta: Ventana > Líneas de tiempo para abrir el panel. Añadir objeto a línea de tiempo (en menú Modificar > Líneas de tiempo), o mejor arrastra la capa seleccionada al interior del panel Líneas de tiempo, y aparecerá una barra en el primer canal de la línea, y en la barra se mostrará el nombre de la capa. Cabezal de reproducción Número de fotogramas Cuadro clave Barra de animación Canales de animación Canal de comportamientos Capas. Objetos en movimiento 10.-7

9 Creación de una animación (1) Puedes activar No volver a mostrar este mensaje para que no aparezca más. Las líneas de tiempo solamente pueden mover capas, donde se insertan imágenes, texto o cualquier otro contenido. Una vez que tenemos la barra con el nombre de la capa en el inspector de Líneas de tiempo, se pulsa en el cuadro clave que se encuentra en el extremo de la barra, y que representa el final. Después desplaza la capa al lugar de la página en el que deberá estar cuando acabe la animación. Si se quiere que la capa se desplace describiendo una curva, se selecciona su barra de animación y se mantiene pulsada la tecla Control para agregar un cuadro calve en el punto de inserción. Si mantienes pulsado el botón Reproducir obtienes una vista previa de la animación de la capa en la página. Capas. Objetos en movimiento 10.-8

10 Creación de una animación (2) Crear una línea de tiempo arrastrando una ruta En lugar de crear una animación con puntos clave individuales podemos crear una animación con una ruta compleja. Para ello seguimos los siguientes pasos: 1.- Selecciona la capa y la colocas en el lugar donde deberá estar cuando se inicie la animación. 2.- Elige Modificar > Línea de tiempo >Registrar ruta de capa. 3.- Arrastra la capa por la página para crear una ruta. 4.- Suelta el botón del ratón donde quieras que se pare la animación. Para agregar o eliminar cuadros de la línea de tiempo, elige Agregar marco o Quitar marco en el menú Modificar > Línea de tiempo. Capas. Objetos en movimiento 10.-9