Ayuda ejercicios unidad 14: Capas


Ejercicio 1: Deportes

Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a través del menú Ventana, opción Archivos.

Apartado 2 Para abrir el documento index.htm hay que hacer doble clic sobre él, en el panel Archivos

Apartado 3 Sitúa el punto de inserción en cualquier sitio de la página, por ejemplo al final.

Ve al menú Insertar, opción Div.

En el cuadro de diálogo Insertar Div establece su ID escribiendo oferta. Luego pulsa el botón Nueva Regla CSS y cambia su propiedad Position a absoluta en la categoría Posición.

Acepta los cambios.

Haz clic en el interior de la capa y escribe Cerrar [x]. En el inspector de propiedades, crea un vínculo a #.

Pulsa Intro para crear otro párrafo y escribe el resto del texto: Este fin de semana, disfruta de clases gratuitas de aeróbic, simplemente por visitar nuestras instalaciones.

Apartado 4 Accede al Inspector de propiedades CSS. Con el punto de inserción dentro de la capa, observa que en regla de destino aparece #oferta (si no, cámbialo).

Pulsa el botón Editar regla. Las propiedades que debes cambiar son: el color de fondo a #CCFFCC, la alineación del texto centrada, y añadir un borde de color #648F62 5px y doble.

Crea otra regla para el selector compuesto #oferta p.cerrar Diseñador de CSS. Edita sus propiedades, reduciendo el tamaño de la fuente a un 85%, con un margen de 5px y alineado a la derecha.

Aplica la clase cerrar al primer párrafo de la capa.

Seleccionar la capa, pulsando sobre la imagen . Puedes modificar su tamaño con los controles del marco, o rellenando los campos An. y Al. del inspector de propiedades. Establece el ancho de la capa a 285px, y el alto a 130px.

Apartado 5 Pulsa sobre el icono y arrastra para mover la capa. Posiciónala verticalmente, un poco por debajo de los enlaces del menú.

Para posicionarla horizontalmente, escribe 30% en el campo Izq del inspector de propiedades.

Hacer clic sobre el botón Alinear al centro ,

Apartado 6 Con la capa seleccionada, marca Visible en el desplegable Vis. del Inspector de propiedades.

Apartado 7 Haz clic sobre el botón Guardar , y después sobre el botón Cerrar .

Más adelante haremos que el enlace Cerrar [x] oculte la capa.

Ejercicio 2: Animales

Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a través del menú Ventana, opción Archivos.

Apartado 2 Para abrir el documento gatos.htm hay que hacer doble clic sobre él, en el panel Archivos.

Apartado 3 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

Sitúa el punto de inserción la derecha de la imagen del gatito.

Ve al menú Insertar, opción Div.

En el cuadro de diálogo Insertar Div establece su ID escribiendo gatosemana. Luego pulsa el botón Nueva Regla CSS y cambia su propiedad Position a absoluta en la categoría Posición.

Acepta los cambios.

Haz clic derecho sobre la esquina .

Apartado 4 Situar el punto de inserción dentro de la capa.

Ve al menú InsertarImagen e inserta la imagen cerrar_gatosemana.png de la carpeta imagenes.

Pulsa Intro para saltar de línea. Ve al menú InsertarImagen e inserta la imagen gato1.gif de la carpeta imagenes.

Pulsa Intro para saltar de línea. Escribe el texto Éste es Golfo y es de Valencia.

Accede al Inspector de propiedades CSS. Con el punto de inserción dentro de la capa, observa que en regla de destino aparece #gatosemana (si no, cámbialo).

Pulsa el botón Editar regla. Las propiedades que debes cambiar son: la imagen de fondo eligiendo fondo_gatosemana.png de la carpeta imagenes, indicado que no haya repetición y que quede centrada en la posición-Y y en la posición-X. Cambia el tamaño del texto al 90%. Asígnale un padding de 5px y centra el contenido. Acepta los cambios.

Crea otra regla para el selector compuesto #gatosemana p.cerrar en el Diseñador de CSS. Edita sus propiedades, cambiando el margen a 15px a la derecha y arriba, y 0 al resto. Alinéalo a la derecha. Guarda los cambios.

Aplica la clase cerrar al primer párrafo de la capa.

Haz clic sobre la esquina para seleccionar la capa. Cambia el tamaño estirando los controles hasta que se vea correctamente. Muévela para situar la capa en la esquina de la celda.

Apartado 5 Guarda la página y pruébala en el navegador. Observa que si cambias el ancho de la ventana, la capa no se mueve con la celda. Vuelve a Dreamweaver.

Selecciona el contenido de la celda, y ve al menú Insertar, opción Div.

En el cuadro de diálogo Insertar Div, asegúrate que está selecciónada la opción Ajustar alrededor de la selección y pulsa Aceptar.

Dreamweaver no nos permite añadir directamente un estilo en línea al div. Ve al código fuente y cambia la etiqueta <div> por <div style="position: relative">.

Observa que la capa gatosemana ha cambiado su posición. Vuelve a ponerla en la esquina.

Apartado 5 Seleccionar hidden en Vis, del inspector de propiedades.

Apartado 6 Hacer clic sobre el botón Guardar , y después sobre el botón Cerrar . Comprueba cómo se ve en el navegador.

 


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.