1
00:00:06,900 --> 00:00:11,980
En este tutorial vamos a ver cómo personalizar la cabecera de nuestro sitio web a través

2
00:00:11,980 --> 00:00:16,660
del diseñador web. Desde la pestaña cabecera del diseñador web podemos modificar distintos

3
00:00:16,660 --> 00:00:21,179
aspectos que combinándolos nos permiten personalizar nuestro espacio web. Por ejemplo, podemos

4
00:00:21,179 --> 00:00:25,719
mostrar en nuestra cabecera el título de la web junto con una imagen pequeña o bien

5
00:00:25,719 --> 00:00:29,859
con una que ocupe todo el espacio para la misma. Otra opción es aplicar un color a

6
00:00:29,859 --> 00:00:34,759
la cabecera y mostrar solo el nombre del espacio web. Esto que acabamos de indicar son solo

7
00:00:34,759 --> 00:00:39,479
unos ejemplos. Otro de los aspectos que podemos modificar de la cabecera es la altura que queremos

8
00:00:39,479 --> 00:00:44,560
que tenga para ajustarla a nuestras necesidades. Es importante señalar que toda imagen incluida

9
00:00:44,560 --> 00:00:50,100
en una página web, ya sea informativa, funcional o decorativa, debe ser ligera, no más de 50

10
00:00:50,100 --> 00:00:55,039
kilobytes, para no ralentizar la carga de la página. Además, para poder emplear los recursos

11
00:00:55,039 --> 00:01:00,560
que encontremos por la web, debemos tener en cuenta los derechos de autor y licencias de uso. En

12
00:01:00,560 --> 00:01:05,879
nuestra documentación de ayuda podemos encontrar información en este sentido. Una vez dicho esto

13
00:01:05,879 --> 00:01:11,019
vamos a ver cómo modificar la cabecera. Lo primero que tenemos que hacer es acceder al diseñador web

14
00:01:11,019 --> 00:01:15,799
desde el bloque superior editar, en el panel izquierdo abrimos el bloque de apariencia y

15
00:01:15,799 --> 00:01:20,099
seleccionamos diseñador web. Una vez abierto el diseñador vamos a activar la previsualización

16
00:01:20,099 --> 00:01:24,540
para ver cómo irán quedando en la cabecera los cambios que vamos aplicando. Pulsamos sobre la

17
00:01:24,540 --> 00:01:29,040
pestaña cabecera que es la que nos interesa y podemos empezar personalizando el formato y

18
00:01:29,040 --> 00:01:33,579
tamaño de la letra de nuestro sitio. Para ello en nuestro caso debemos tener en cuenta que ya

19
00:01:33,579 --> 00:01:39,439
tenemos una cabecera creada por defecto a partir de la plantilla franjas pero como sabemos podemos

20
00:01:39,439 --> 00:01:44,319
editar igualmente distintos elementos así que en nuestro caso vamos a hacer clic en mostrar el

21
00:01:44,319 --> 00:01:48,680
nombre de la web, ahí ya vemos que aparece primero de historia, también vamos a quitar esta imagen de

22
00:01:48,680 --> 00:01:53,019
Duca Madrid, para ello en el campo de imagen borramos la información que hay, vemos que se nos

23
00:01:53,019 --> 00:01:58,340
cambia a esta por defecto y para cambiarla a un color en particular de fondo hacemos clic sobre

24
00:01:58,340 --> 00:02:03,920
el cuadradito selector de color y en nuestro caso vamos a poner un azul grisáceo similar al de los

25
00:02:03,920 --> 00:02:08,580
lados hacemos clic en ok para que se pueda leer mejor el nombre de nuestra página vamos a ir

26
00:02:08,580 --> 00:02:12,960
modificando el color del texto por ejemplo a un color blanco podemos modificar también el tamaño

27
00:02:12,960 --> 00:02:18,219
del texto ahora vemos que está demasiado arriba así que podemos darle un margen superior de 50

28
00:02:18,219 --> 00:02:22,199
píxeles ya se nos queda un poco más centrado también podemos darle un margen izquierdo de

29
00:02:22,199 --> 00:02:27,560
otros 50 píxeles incluso podemos aplicar un color de sombra que en nuestro caso pues un gris aquí

30
00:02:27,560 --> 00:02:32,719
tendríamos un diseño sencillo pero funcional y rápido si estamos conformes con los cambios

31
00:02:32,719 --> 00:02:36,879
pulsamos en guardar y salir hacemos clic en aceptar y ya vemos los cambios en nuestro sitio

32
00:02:36,879 --> 00:02:41,560
web pero como el diseñador web ofrece muchas posibilidades vamos a indagar un poco más con

33
00:02:41,560 --> 00:02:45,439
otras opciones de personalización para ello abrimos de nuevo el diseñador web tenemos la

34
00:02:45,439 --> 00:02:50,240
previsualización activada volvemos a la pestaña de cabecera y vamos a añadir una pequeña imagen

35
00:02:50,240 --> 00:02:55,500
a la izquierda que simbolice nuestro sitio web para ello tendremos que subir una imagen haríamos

36
00:02:55,500 --> 00:02:59,740
clic en el icono del disco duro virtual se nos abre otra ventana y para subir una imagen de

37
00:02:59,740 --> 00:03:04,259
nuestro ordenador hacemos clic en añadir imagen después en examinar y en nuestro caso vamos a

38
00:03:04,259 --> 00:03:08,039
añadir esta imagen de unos libros le podemos añadir un título y una descripción a nuestra

39
00:03:08,039 --> 00:03:13,180
imagen y después hacemos clic en subir fichero para seleccionar la imagen volvemos a listado

40
00:03:13,180 --> 00:03:17,280
y seleccionamos la imagen de los libros después hacemos clic en seleccionar si al subir nuestra

41
00:03:17,280 --> 00:03:22,000
imagen vemos que no nos aparece en la cabecera podemos hacer clic en el botón de previsualizar

42
00:03:22,000 --> 00:03:26,680
y volver a darle a previsualizar ya vemos que se ha subido nuestra imagen ahora sí que se ve entera

43
00:03:26,680 --> 00:03:31,699
pero podemos ajustarla en nuestro caso la ajustamos un poco más centrada al nivel de primero de

44
00:03:31,699 --> 00:03:36,719
historia y como vemos que primero de historia está encima podemos darle más margen izquierdo para que

45
00:03:36,719 --> 00:03:42,240
se lea mejor y quede mejor bien ahora vamos a probar otra forma de diseñar la cabecera en este

46
00:03:42,240 --> 00:03:47,180
caso vamos a necesitar una imagen que cubra toda la cabecera que actúe como un fondo para ello

47
00:03:47,180 --> 00:03:51,159
debemos tener en cuenta que es preciso que la imagen que subamos tenga el mismo ancho que

48
00:03:51,159 --> 00:03:57,669
nuestra página. Como decíamos el ancho lo podemos ver en la pestaña general. De nuevo para seleccionar

49
00:03:57,669 --> 00:04:02,889
una imagen hacemos clic en el icono, hacemos clic en añadir una imagen, examinar, añadimos un título

50
00:04:02,889 --> 00:04:08,189
y hacemos clic en subir fichero. Volvemos al listado, en nuestro caso es un fondo de papel,

51
00:04:08,310 --> 00:04:12,030
de cuaderno. Hacemos clic en seleccionar y de nuevo si vemos que no se ha cambiado la

52
00:04:12,030 --> 00:04:16,870
previsualización hacemos clic en previsualizar. Ahí vemos cómo quedaría pero observamos que ahora

53
00:04:16,870 --> 00:04:21,129
el título de la web no es legible por lo tanto podemos volver a cambiar el color del texto,

54
00:04:21,129 --> 00:04:25,930
podemos darle un poco más de margen izquierdo, un poco menos para que esté pegado a la línea roja y

55
00:04:25,930 --> 00:04:30,350
lo vamos a poner un poquito más arriba para que esté situado sobre una línea de las del cuaderno.

56
00:04:30,550 --> 00:04:35,410
Vamos probando hasta que consigamos el resultado que queremos aunque también recordamos que tenemos

57
00:04:35,410 --> 00:04:40,610
la opción de que no se muestre el nombre de la web. Para ello volveríamos a hacer clic sobre mostrar

58
00:04:40,610 --> 00:04:45,269
el nombre de la web. Una vez tengamos la cabecera a nuestro gusto pulsamos sobre guardar y salir y

59
00:04:45,269 --> 00:04:50,009
ahí vemos cómo queda aplicado el cambio en nuestra web. Por último también podemos subir una imagen

60
00:04:50,009 --> 00:04:54,430
que ya tenga el nombre del centro incorporada y en ese caso desmarcaríamos la opción de

61
00:04:54,430 --> 00:04:56,470
mostrar el título de la web en la cabecera.