Saltar navegación

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

Crear una cabecera para la web desde cero

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 18 de abril de 2022 por Francisca G.

401 visualizaciones

Creación de una cabecera, desde la búsqueda de la imagen, hasta su configuración en EducaMadrid

Más información Transcripción

Descargar la transcripción

Hola, vamos a ver aquí cómo crear una cabecera sencilla para nuestra web. 00:00:00
Tendrá una imagen y un texto. 00:00:04
Lo primero, buscar la imagen. 00:00:07
Y para eso es importante dirigirse a bancos de imágenes de uso libre, 00:00:10
que tengan una licencia que me garantice que puedo usarlas. 00:00:14
Entonces, yo por ejemplo uso mucho Pixabay, pixabay.com. 00:00:17
Me vengo a Pixabay y busco por ejemplo imágenes de química. 00:00:22
bien, porque la web va a ser temática de química, soy profe de física y química 00:00:26
entonces, bueno, tengo aquí muchas opciones 00:00:32
y lo que voy a hacer es buscar aquellas que tengan fondo transparente 00:00:34
me voy aquí a color, marco transparente 00:00:39
y así me garantizo crear un logo en mi web que tenga el fondo transparente 00:00:42
bueno, pues tengo muchas opciones 00:00:48
voy a usar por ejemplo esta que me gusta 00:00:49
aquí tengo la opción de descarga gratuita con una licencia Pixabay 00:00:52
que no es necesaria atribución y es libre para uso incluso comercial 00:00:59
cuando le doy a descargar me ofrece distintos tamaños 00:01:04
selecciono el más pequeñito de todos para mi cabecera 00:01:07
entonces aquí veo que me ha descargado la imagen 00:01:11
si voy aquí voy a poner por ejemplo matraces 00:01:16
que es como yo he llamado a mi imagen 00:01:21
bien, pues ahora me voy a ir a Pixel 00:01:25
que es el editor online, pixel.com 00:01:29
cuando entramos me ofrece el sencillo o el avanzado 00:01:32
yo voy a usar el avanzado en esta ocasión 00:01:36
puedo crear una nueva o cargar o tal 00:01:38
bueno, pues vamos a crear una imagen nueva 00:01:43
me ofrece distintos tamaños 00:01:45
yo le voy a dar, voy a poner aquí como nombre 00:01:48
cabecera y le voy a dar un ancho por ejemplo de 1200 y de altura 200 píxeles vale y le voy a 00:01:51
decir sin fondo para que tenga un fondo transparente vale y crear ya tengo aquí el esquema de mi 00:02:01
cabecera no está tamaño real está reducida pero bueno para editarla me viene bien entonces voy 00:02:09
a coger y aquí en la opción capa voy a añadir una imagen como capa que va a ser la imagen de 00:02:16
los matraces que he descargado antes está como es una imagen muy grande pues nada la redimensionó 00:02:23
la goma chiquitita la muevo la ajustó al tamaño de mi web bien y la tengo aquí la coloco más o 00:02:33
menos como a mí me guste. También puedo usar, por ejemplo, abrir otra que tenía yo 00:02:41
ya descargada de antes, abrir otra imagen como capa que son, por ejemplo, los tubos 00:02:48
de ensayo. La tenía yo ya descargada de antes, pues lo mismo. La hago más chiquitita y me 00:02:53
la traigo por aquí a la derecha y ya tengo un poco mi cabecera ya va cogiendo forma. 00:02:59
Bien, ahora voy a añadir un texto sin más, ¿vale? Le digo aquí, por ejemplo, empiezo, pulso donde lo quiero añadir, me dice que si quiere añadir otra capa, le digo que sí, añadir, y aquí escribo un texto que es la profe de química, ¿vale? 00:03:09
Y yo aquí ya puedo jugar o con el tamaño, puedo jugar con el color, etc. ¿Vale? Con el tipo de letra, lo que quiera. Bien. Y entonces, bueno, pues también voy a colocar por aquí, más o menos centradito, el texto, la profe de química. 00:03:30
Vale, y sin más, ahora ya lo que tengo que hacer es exportar, una exportación rápida como png me vale, la llamo cabecera.png, guardar, bien, y ya tengo la imagen creada. 00:03:46
Bien, ahora voy a la página, vamos a ver que me ha esperado la sesión, ahora voy a EducaMadrid y voy a configurar la cabecera, entonces me voy a editar en apariencia diseñador web y lo primero que tengo que hacer es en cabecera, pues buscar la imagen, imagen de cabecera. 00:04:02
Le doy a añadir imagen, seleccionar archivo, voy a la carpeta donde he creado mi cabecera, cabecera png y abrir y subir fichero. 00:04:32
Ahora me dice accede a los ficheros subidos desde listado, bueno pues me voy a listado y aquí tengo mi cabecera. 00:04:47
Entonces veo este circulito que viene aquí, lo tengo que pulsar y seleccionar. 00:04:54
Si pulso aquí encima, lo que me hará es abrirme la imagen. Tengo que pulsar este circulito y seleccionar. Ya la tengo seleccionada. Bien, ahora de altura, como le puse a mi cabecera, le puse 200 píxeles, pues le voy a poner 200 píxeles también. 00:05:00
Aquí yo ya veo cómo me va quedando, le voy a poner por ejemplo que sea una página que ocupe el 100%, ya la tengo ahí y ahora por ejemplo pues veo que le puse un texto blanco, voy a cambiar el color de fondo de la cabecera y le voy a poner un azulito, a ver cómo queda ahí, pues queda aquí, bastante mono. 00:05:16
y ahora le voy a ocultar el nombre para ocultar esto del tic 00:05:45
y voy a ocultar el buscador también porque también me está estorbando en mi cabecera 00:05:53
y ya estaría, eso sería todo 00:05:57
bueno, tengo que seleccionar un tema también para completar la tarea 00:06:01
tengo que seleccionar un tema que de hecho lo suyo es seleccionar el tema primero 00:06:05
y luego poner la cabecera, pero bueno, yo lo he hecho al revés 00:06:08
le doy a guardar y ya estaría, ya tengo aquí mi cabecera configurada 00:06:12
y eso es todo, espero que os sirva 00:06:20
Subido por:
Francisca G.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
401
Fecha:
18 de abril de 2022 - 16:01
Visibilidad:
Público
Centro:
C RECURSOS CENTRO FORMACIÓN CURSO EDUCAMADRID AVANZADO (M)
Duración:
06′ 24″
Relación de aspecto:
1.56:1
Resolución:
1316x846 píxeles
Tamaño:
22.05 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid