Dreamweaver MX 2004 desde cero(4)
Autor：Eve Cole
Fecha de actualización：2009-05-31 21:02:51
El uso de capas <BR> Una capa es un área de una página web. Puede haber varias capas en una página web. Su mayor atractivo es que cada capa se puede superponer y puede decidir si cada capa es visible. Al mismo tiempo, capacidad para personalizar las relaciones jerárquicas entre capas. Después de dominar la tecnología de capas, podrá proporcionar potentes capacidades de control de páginas para páginas web.
Crear capa
Para ilustrar la función de la capa, primero creamos un efecto de ejemplo simple como se muestra en la Figura 1 (Figura 1).
Figura 1
El primer paso es crear una nueva página en Dreamweaver MX 2004 y ejecutar el comando "Insertar → Objetos de capa → Capa". En este momento, aparecerá un marco rectangular negro en la ventana de edición, que es la capa insertada. Cuando el mouse se mueve sobre la línea del marco rectangular, el mouse cambiará a una forma de flecha cruzada. Cuando se hace clic con el mouse, aparecerán 8 cuadrados sólidos negros alrededor de la línea del marco y habrá un cuadrado vacío en la esquina superior izquierda, lo que indica. que esta capa está seleccionada.
Consejo: use el mouse para arrastrar el cuadrado sólido para cambiar el tamaño de la capa y arrastre el cuadrado vacío en la esquina superior izquierda para cambiar la posición de la capa.
El segundo paso es hacer clic con el mouse en la capa e ingresar "Noticias de educación informática de China" y luego configurar el texto en azul en la ventana del panel de propiedades.
El tercer paso es hacer clic en el borde de la capa para seleccionar la capa, luego ejecutar el comando "Editar → Copiar" para copiar la capa actual, luego hacer clic con el mouse en otras áreas en blanco de la ventana de edición y ejecutar "Editar → Pegar". comando, de modo que en la ventana de edición aparezca otra capa, pero actualmente se superponen y es necesario mover la capa antes de poder ver las dos capas.
El cuarto paso es cambiar el color del texto de una de las capas a negro y mover la posición de la capa para que las posiciones de las dos capas difieran en unos pocos píxeles, produciendo así un efecto de sombra (Figura 2).
Figura 2
Después de completar las operaciones anteriores, presione el botón "F12" para obtener una vista previa y podrá ver el efecto que se muestra en la Figura 1 en el navegador IE.
Capas anidadas
La llamada capa anidada se refiere a una capa creada en otra capa. Por ejemplo, lo que se muestra en la Figura 3 es una capa anidada típica (Figura 3). De hecho, crear este tipo de capa anidada es muy simple. Simplemente cree una capa principal, haga clic dentro de la capa con el mouse e inserte una capa nuevamente. Sin embargo, las capas anidadas no significan que la subcapa deba estar dentro de la capa principal. Existe una relación de herencia entre ellas.
Figura 3
La función de la herencia es mantener la visibilidad de la subcapa consistente con la de la capa principal. Dado que muchos efectos especiales de páginas web dinámicas se logran controlando la visibilidad de la capa, cuando la visibilidad de la capa principal cambia, la visibilidad de la capa principal cambia. La subcapa cambia. La visibilidad también cambia. Además, la relación de herencia también puede mantener sin cambios la posición relativa de la capa secundaria y la capa principal. Por ejemplo, si arrastramos la capa principal para moverla, la capa secundaria también se moverá con ella. Esto será muy útil al hacer dinámica. páginas web.
Orden Z de capa
En comparación con las tablas, la mayor ventaja de las capas es que pueden superponerse. Para indicar qué capa está arriba y cuál debajo, se debe establecer un número de serie para cada capa. Este número de serie es el "orden Z". Lo que significa es que además de las coordenadas X e Y de la pantalla, se agrega artificialmente un eje Z perpendicular a la pantalla.
Como se muestra en la Figura 4, las cuatro capas en el área izquierda son obviamente diferentes de las cuatro capas en el área derecha. También es muy sencillo ajustar el orden de las capas. Simplemente use el mouse para hacer clic y colocarlas en la parte inferior. , media y la capa superior servirán. Sin embargo, este método de operación parece un poco problemático cuando hay muchas capas y es inconveniente ajustarlo más tarde, por lo que podemos realizar ajustes a través del panel de capas.
Figura 4
Primero ejecute el comando "Ventana → Capas" para activar el panel de capas. En este momento, puede ver la ventana del panel que se muestra en la Figura 5 (Aquí, simplemente seleccione la capa cuyo número de serie debe cambiarse y presione). mouse y arrástrelo hacia arriba o hacia abajo. Arrastre y suelte el mouse cuando aparezca una línea horizontal entre las dos capas que desea insertar, para que pueda cambiar el "orden Z" de cada capa.
Figura 5
Consejo: Haga clic directamente en el valor del cuadro "Z" para cambiarlo al nivel de capa requerido.
Crear tablas usando capas
Aunque usar capas para ubicar elementos de páginas web es mucho más conveniente que usar tablas, solo los navegadores IE 4.0 y superiores admiten la función de capas. Por lo tanto, para permitir que los amigos que usan navegadores más antiguos vean el trabajo que usted ha creado con tanto esfuerzo. la mejor manera es convertir la capa en una tabla.
El primer paso es seleccionar la casilla de verificación "Evitar superposiciones" en la parte superior de la ventana que se muestra en la Figura 5, para que cada capa no pueda superponerse entre sí; de lo contrario, aparecerá un mensaje de advertencia durante el proceso de conversión.
El segundo paso es ejecutar el comando "Modificar → Convertir → Capas en tabla". En este momento, puede ver la ventana que se muestra en la Figura 6 (Figura 6). En el área "Diseño de tabla", seleccione "Más preciso". "Usar GIF transparentes" respectivamente. La primera crea una celda para cada capa mediante una conversión precisa para garantizar que la distancia entre cada celda llene la última fila de la tabla convertida con una imagen GIF transparente, lo que garantiza que todas. navegadores Todos tienen la misma apariencia.
Figura 6
El tercer paso es completar la operación de conversión de capa a tabla después de presionar el botón "Aceptar".
Consejo: Dreamweaver MX 2004 también proporciona la función de conversión de tablas a capas y los pasos son similares.
Si desea que sus propias páginas web sean coloridas, debe dominar la tecnología de capas. De lo contrario, encontrará muchas dificultades al crear páginas web dinámicas en el futuro. Por lo tanto, se recomienda que estudie en profundidad la introducción anterior. dominar las capas.
