Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Final-HTML-galería - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Julio G.

108 visualizaciones

Más información Transcripción

Descargar la transcripción

Utilizaremos un ejemplo de galería de w3schools.com para incluir en nuestro proyecto. 00:00:00
Podríamos hacerlo de cualquier otra forma, simplemente colocando diferentes imágenes. 00:00:09
Para ello nos proporciona el código. 00:00:15
Podemos ver cómo funciona. 00:00:19
Básicamente es una serie de estilos para unas etiquetas de clase galería que hemos creado, 00:00:22
en las cuales vamos a meter las imágenes y además un enlace a la imagen en grande 00:00:28
y una descripción de cada una de ellas. 00:00:36
Bien, vamos a copiar los estilos y una de nuestras páginas, que es la de galería, ya la he dejado preparada para trabajar sobre ella. 00:00:39
Bien, pues dentro de... Bueno, primero hemos copiado los estilos, vamos a llevarlos al documento CSS y los vamos a pegar. Luego veremos cómo los modificamos. De momento no afectan porque no hemos incluido todavía las etiquetas con la clase de galería. 00:01:11
La otra parte del código que queremos utilizar es el código HTML, que como veis, para cada imagen, esta sería para cada imagen, incluye un contenedor de clase galería, un enlace a la imagen, la propia imagen y un contenedor para la descripción. 00:01:34
voy a copiarlo, tal cual, voy a llevarlo 00:01:58
a mi documento, nosotros lo vamos a incluir 00:02:02
dentro del contenido central que estaba, recordad, en la etiqueta 00:02:05
article y vamos a añadirlo, ahí vemos 00:02:10
como aparecería nuestra imagen 00:02:14
esta imagen no la tenemos, por ello no aparece 00:02:18
pero así es como 00:02:21
como lo veríamos 00:02:25
vale, vamos ahora a añadir la imagen que realmente queremos utilizar 00:02:27
vamos a ir a nuestras imágenes, hemos creado 00:02:33
dentro de la carpeta imágenes he creado una carpeta galería 00:02:37
con las imágenes que quiero utilizar, en este caso no es 00:02:41
foret, voy a dejar blanco, importante que la url sea relativa 00:02:45
y vamos a darle a aceptar 00:02:49
Y ahí veríamos cómo queda una de las imágenes. 00:02:52
Bueno, simplemente vamos a copiar este bloque de etiquetas y lo vamos a pegar tantas veces como imágenes tengamos. 00:03:00
Yo voy a poner seis imágenes, lo pego seis veces. 00:03:14
ahí está, al principio 00:03:17
pego 6 veces y como he copiado 00:03:20
del código anterior 00:03:23
no me pega la misma imagen, simplemente 00:03:25
desde la opción de diseño de 00:03:26
BlueGryphon tendría que ir 00:03:28
seleccionando las imágenes 00:03:30
que quiero utilizar 00:03:32
bueno 00:03:34
lo ideal sería colocar un título y un 00:03:36
texto alternativo, yo por ahorrar tiempo 00:03:38
voy a permitir ponerlo en blanco 00:03:40
así voy a ir cambiando 00:03:42
las diferentes imágenes 00:03:44
ahí lo veis por orden 00:03:46
ahora deberíamos cambiar 00:03:49
la descripción para cada una de ellas 00:04:40
esto lo podríamos hacer directamente desde la opción de diseño 00:04:42
por ejemplo, si guardamos 00:04:45
y vemos el aspecto en el navegador 00:05:00
pues comprobaríamos que se nos crea 00:05:02
una galería de imagen totalmente 00:05:08
adaptable al tamaño de pantalla 00:05:12
Bien, si queremos modificar alguna de las características, podríamos hacerlo perfectamente desde el documento CSS que hemos utilizado teniendo en cuenta que es cada uno de los lectores que hemos ido colocando. 00:05:15
Por ejemplo, hemos utilizado un contenedor para cada una de las imágenes de un tamaño de 180 píxeles. Esto lo podríamos modificar y ponerlo a nuestro antojo. Por ejemplo, si quisiéramos solo tener tres imágenes, podríamos poner en porcentaje el tamaño de las imágenes de la galería, por ejemplo, al 25%. 00:05:36
Bien, podemos comprobar el efecto que produciría sobre el documento, y bueno, podríamos también aumentar la separación que hay entre imágenes, 00:05:57
recordad que eso sería dentro de ese pequeño contenedor 00:06:14
pues tiene un margen de 5 píxeles 00:06:22
podríamos ponerle un margen de 15 píxeles 00:06:25
y se apreciaría un mayor espacio 00:06:29
entre las imágenes que compone la galería 00:06:32
bueno, pues esta podría ser una opción 00:06:37
Aquí os dejo el código que vais a necesitar, os lo dejaría en la actividad para que podáis descargarlo. 00:06:47
Subido por:
Julio G.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
108
Fecha:
22 de febrero de 2021 - 18:28
Visibilidad:
Público
Centro:
IES LA CABRERA
Duración:
06′ 56″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
46.44 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid