Sesión 5. Diseño libros interactivos (V Edición)
0 recomendaciones10 vistas
El documento describe el uso de la clase 'image_expand' para mejorar la presentación y accesibilidad de imágenes en una página web. Se abordan diferentes estilos y formatos para imágenes, incluyendo el uso de etiquetas <figure> y <figcaption>, y su aplicación en diversas posiciones y contextos. Además, se menciona la tarea de subir libros con requisitos específicos para una fecha establecida.
Sesión 5. Diseño libros interactivos (V Edición)
- 1. SESIÓN 5
- 2. Usando la clase image_expand Imágenes Imágenes de fondo en página o en párrafo
- 3. Imágenes con la clase image_expand <figure> <img loading="lazy“ class="image_expand“ onclick="openImage(this)" src="imagenes/2.jpg" width="50%"> <figcaption>Imagen con formato <b>image_expand </b></figcaption> </figure> la etiqueta <figure> mejora la accesibilidad de la página web para los usuarios , pues pueden leer la descripción proporcionada por la etiqueta <figcaption> y proporcionar una mejor comprensión del contenido
- 4. Imágenes con la clase image_expand y estilos <figure style="background-color: rgba(155,100,100,0.3); border: 2px solid red; width: 80%; padding: 10px"><br> <img class="image_expand" style="border-radius: 25px" onclick="openImage(this)" src="imagenes/2.jpg" width="50%"> <figcaption>Imagen con formato <b>image_expand </b> y estilo adicional</figcaption> </figure> A cualquiera de las tres etiquetas (<figure>, <image> y <figcaption>) le podemos modificar su estilo; por ejemplo, bordes en la imagen o una caja para <figure>
- 5. Imágenes con enlace a otro elemento <figure> <img loading="lazy“ class="image_link" onclick = "openInteractive('https://proyectodescartes.org/revista /numeros.html', '800', '600')" src="imagenes/Revista_Digital_RED_Descartes.svg" width="30%"> <figcaption>Haz clic en la imagen</figcaption> </figure>
- 6. Imágenes de fondo <div class="page" style="background-image: url('imagenes/10.jpg'); background-size: 640px 825px; color: yellow"> <p style="background- image:url('imagenes/6.jpg'); width: 300px; background-size:400px 400px; padding:10px; color: white; text-align: center;">Actualmente, los formatos de imagen se agrupan en dos. La primera agrupación… </p> Style= “width:250px; height:250px; margin- left:145px; background-image: url('../imagenes/6.jpg’); background-size: 250px 250px; padding:10px; font-size: 20px; color: yellow;”
- 7. Imágenes en diferentes posiciones <div style="position:absolute; left:340px; top:0px; width:300px; height:300px; background-image:url('imagenes/1.webp'); background-size:400px 400px; background- position:0px 0px; padding:10px; color: white">Un texto</div> <div style="position:absolute; left:340px; top:300px; width:300px; height:300px; background-image:url('imagenes/1.webp'); background-size:300px 300px; background- position:0px 0px; padding:10px; color: yellow">Otro texto</div>
- 8. Imágenes compartidas en dos páginas
- 10. .flota_d { float: right; margin: 0px -10px 0px 15px; padding: 5px; width: 50%; margin-top: 0px; } .flota_d figcaption { text-align: center; color: var(--text-color); margin-bottom: 0; } Imágenes flotantes
- 11. Tarea El viernes 12 de enero de 2024 deben estar subidos los libros con, al menos, ocho páginas del primer capítulo (títulos, párrafos) y, al menos, dos imágenes, una de ellas flotando a la izquierda de un párrafo ¡Feliz Navidad!