Saltar navegación

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

Personalizar la cabecera del sitio web

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 28 de marzo de 2025 por EducaMadrid

36 visualizaciones

Procedimiento para personalizar la cabecera de nuestro sitio web a través del Diseñador web.

Más información Transcripción

Descargar la transcripción

En este tutorial vamos a ver cómo personalizar la cabecera de nuestro sitio web a través 00:00:06
del diseñador web. Desde la pestaña cabecera del diseñador web podemos modificar distintos 00:00:11
aspectos que combinándolos nos permiten personalizar nuestro espacio web. Por ejemplo, podemos 00:00:16
mostrar en nuestra cabecera el título de la web junto con una imagen pequeña o bien 00:00:21
con una que ocupe todo el espacio para la misma. Otra opción es aplicar un color a 00:00:25
la cabecera y mostrar solo el nombre del espacio web. Esto que acabamos de indicar son solo 00:00:29
unos ejemplos. Otro de los aspectos que podemos modificar de la cabecera es la altura que queremos 00:00:34
que tenga para ajustarla a nuestras necesidades. Es importante señalar que toda imagen incluida 00:00:39
en una página web, ya sea informativa, funcional o decorativa, debe ser ligera, no más de 50 00:00:44
kilobytes, para no ralentizar la carga de la página. Además, para poder emplear los recursos 00:00:50
que encontremos por la web, debemos tener en cuenta los derechos de autor y licencias de uso. En 00:00:55
nuestra documentación de ayuda podemos encontrar información en este sentido. Una vez dicho esto 00:01:00
vamos a ver cómo modificar la cabecera. Lo primero que tenemos que hacer es acceder al diseñador web 00:01:05
desde el bloque superior editar, en el panel izquierdo abrimos el bloque de apariencia y 00:01:11
seleccionamos diseñador web. Una vez abierto el diseñador vamos a activar la previsualización 00:01:15
para ver cómo irán quedando en la cabecera los cambios que vamos aplicando. Pulsamos sobre la 00:01:20
pestaña cabecera que es la que nos interesa y podemos empezar personalizando el formato y 00:01:24
tamaño de la letra de nuestro sitio. Para ello en nuestro caso debemos tener en cuenta que ya 00:01:29
tenemos una cabecera creada por defecto a partir de la plantilla franjas pero como sabemos podemos 00:01:33
editar igualmente distintos elementos así que en nuestro caso vamos a hacer clic en mostrar el 00:01:39
nombre de la web, ahí ya vemos que aparece primero de historia, también vamos a quitar esta imagen de 00:01:44
Duca Madrid, para ello en el campo de imagen borramos la información que hay, vemos que se nos 00:01:48
cambia a esta por defecto y para cambiarla a un color en particular de fondo hacemos clic sobre 00:01:53
el cuadradito selector de color y en nuestro caso vamos a poner un azul grisáceo similar al de los 00:01:58
lados hacemos clic en ok para que se pueda leer mejor el nombre de nuestra página vamos a ir 00:02:03
modificando el color del texto por ejemplo a un color blanco podemos modificar también el tamaño 00:02:08
del texto ahora vemos que está demasiado arriba así que podemos darle un margen superior de 50 00:02:12
píxeles ya se nos queda un poco más centrado también podemos darle un margen izquierdo de 00:02:18
otros 50 píxeles incluso podemos aplicar un color de sombra que en nuestro caso pues un gris aquí 00:02:22
tendríamos un diseño sencillo pero funcional y rápido si estamos conformes con los cambios 00:02:27
pulsamos en guardar y salir hacemos clic en aceptar y ya vemos los cambios en nuestro sitio 00:02:32
web pero como el diseñador web ofrece muchas posibilidades vamos a indagar un poco más con 00:02:36
otras opciones de personalización para ello abrimos de nuevo el diseñador web tenemos la 00:02:41
previsualización activada volvemos a la pestaña de cabecera y vamos a añadir una pequeña imagen 00:02:45
a la izquierda que simbolice nuestro sitio web para ello tendremos que subir una imagen haríamos 00:02:50
clic en el icono del disco duro virtual se nos abre otra ventana y para subir una imagen de 00:02:55
nuestro ordenador hacemos clic en añadir imagen después en examinar y en nuestro caso vamos a 00:02:59
añadir esta imagen de unos libros le podemos añadir un título y una descripción a nuestra 00:03:04
imagen y después hacemos clic en subir fichero para seleccionar la imagen volvemos a listado 00:03:08
y seleccionamos la imagen de los libros después hacemos clic en seleccionar si al subir nuestra 00:03:13
imagen vemos que no nos aparece en la cabecera podemos hacer clic en el botón de previsualizar 00:03:17
y volver a darle a previsualizar ya vemos que se ha subido nuestra imagen ahora sí que se ve entera 00:03:22
pero podemos ajustarla en nuestro caso la ajustamos un poco más centrada al nivel de primero de 00:03:26
historia y como vemos que primero de historia está encima podemos darle más margen izquierdo para que 00:03:31
se lea mejor y quede mejor bien ahora vamos a probar otra forma de diseñar la cabecera en este 00:03:36
caso vamos a necesitar una imagen que cubra toda la cabecera que actúe como un fondo para ello 00:03:42
debemos tener en cuenta que es preciso que la imagen que subamos tenga el mismo ancho que 00:03:47
nuestra página. Como decíamos el ancho lo podemos ver en la pestaña general. De nuevo para seleccionar 00:03:51
una imagen hacemos clic en el icono, hacemos clic en añadir una imagen, examinar, añadimos un título 00:03:57
y hacemos clic en subir fichero. Volvemos al listado, en nuestro caso es un fondo de papel, 00:04:02
de cuaderno. Hacemos clic en seleccionar y de nuevo si vemos que no se ha cambiado la 00:04:08
previsualización hacemos clic en previsualizar. Ahí vemos cómo quedaría pero observamos que ahora 00:04:12
el título de la web no es legible por lo tanto podemos volver a cambiar el color del texto, 00:04:16
podemos darle un poco más de margen izquierdo, un poco menos para que esté pegado a la línea roja y 00:04:21
lo vamos a poner un poquito más arriba para que esté situado sobre una línea de las del cuaderno. 00:04:25
Vamos probando hasta que consigamos el resultado que queremos aunque también recordamos que tenemos 00:04:30
la opción de que no se muestre el nombre de la web. Para ello volveríamos a hacer clic sobre mostrar 00:04:35
el nombre de la web. Una vez tengamos la cabecera a nuestro gusto pulsamos sobre guardar y salir y 00:04:40
ahí vemos cómo queda aplicado el cambio en nuestra web. Por último también podemos subir una imagen 00:04:45
que ya tenga el nombre del centro incorporada y en ese caso desmarcaríamos la opción de 00:04:50
mostrar el título de la web en la cabecera. 00:04:54
Idioma/s:
es
Etiquetas:
EducaMadrid
Autor/es:
Samuel Gómez
Subido por:
EducaMadrid
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
36
Fecha:
28 de marzo de 2025 - 13:45
Visibilidad:
Público
Enlace Relacionado:
https://ayuda.educa.madrid.org/books/gesti%C3%B3n-de-espacios-web-del-portal-educativo/page/dise%C3%B1ador-web-20#bkmrk-cabecera
Duración:
05′ 04″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
121.99 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid