Saltar navegación

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

WebCentro: Diseñar una Cabecera para la web. Paso 3

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 24 de febrero de 2019 por tic.ismie

187 visualizaciones

Más información Transcripción

Descargar la transcripción

Bien, y ahora que ya tengo las dos imágenes, lo que voy a hacer es la composición. 00:00:00
Entonces para eso me voy a GIMP y lo que voy a hacer va a ser abrir, crear una nueva imagen 00:00:10
que le voy a dar el tamaño de la imagen de cabecera ya completa, tal cual yo la quiero. 00:00:21
entonces básicamente le voy a dar un tamaño de una anchura de 1300 píxeles una altura de 00:00:28
200 píxeles y en opciones avanzadas voy a decir que quiero rellenar con transparencia le doy a 00:00:35
aceptar y ya veo aquí que me ha creado pues una imagen lo estoy viendo al 66% es un esquema de 00:00:42
dónde yo voy a de dónde voy a incluirlas a diseñar mi cabecera bien pulsaría en archivo 00:00:50
abrir como capas y entonces con esta acción lo que voy a seleccionar son las dos imágenes que 00:00:58
tengo preparadas previamente tanto la del logo como la imagen de del arbolito las voy 00:01:05
a incorporar a mi imagen de cabecera. 00:01:12
Bien, lo que hago es seleccionar las dos imágenes que ya tenía creadas, le doy a 00:01:17
abrir y entonces ya veo que lo que ha sucedido es que aquí en la zona de 00:01:24
capas veo que tengo un fondo, que es un fondo transparente, y me ha añadido una 00:01:31
capa con la imagen del arbolito y una capa con la imagen de los puntos de 00:01:37
colores. Yo estas imágenes, estas capas las puedo hacer visibles o bien ocultarlas. Voy a hacer 00:01:42
visible de momento por ejemplo la imagen del arbolito y con este símbolo que es herramienta 00:01:50
de mover lo que puedo hacer es situar esta capa donde yo quiera. Yo la voy a traer por ejemplo 00:01:57
aquí a la zona de la derecha. Voy a hacer visible ahora la imagen de los puntos de colores y de 00:02:02
nuevo la voy a mover aquí hacia la izquierda. La puedo mover bien con el ratón o bien con 00:02:11
la ayuda del teclado, como yo quiera. Bien, ya tengo, de lo que es el diseño que yo tenía, 00:02:18
ya tengo la imagen situada a la izquierda y la imagen situada a la derecha. Ahora voy a 00:02:25
incluir ese texto. Entonces, para incluir un texto uso esta herramienta, que es la herramienta de 00:02:30
texto. Bien, tengo que elegir un tipo de letra. Yo voy a elegir, por ejemplo, esta que me 00:02:37
ha parecido interesante, esta de aquí, y voy a pinchar donde quiera escribir, centro 00:02:47
público bueno es un tamaño un poquito grande voy a ajustarle el tamaño así y una vez que ya ha 00:02:56
escrito mi texto yo puedo luego situarlo moverlo situarlo donde yo quiera ahora voy a añadir otro 00:03:09
texto para el cual voy a elegir una letra un poquito más gordita y voy a escribir aquí mi 00:03:17
colegio este texto lo que hemos dicho yo lo 00:03:28
puedo mover como yo quiera y lo que voy a hacer es este texto de aquí 00:03:33
lo que voy a hacer va a ser pues definirlo un poquito más grande 00:03:39
porque bueno pues quiero darle relevancia centro público mi colegio muy 00:03:46
bien ya tengo ahora mismo realmente la capa del árbol de la imagen del árbol 00:03:53
la capa de los puntos de colores y las dos capas de mis dos textos y siempre manteniendo este fondo 00:03:58
que aquí se ve un fondo de cuadritos que lo que representa es un fondo transparente ahora 00:04:06
simplemente tengo que darle archivo exportar como y usamos la opción de exportación cuidado no la 00:04:10
opción de guardar que lo que me guardaría es el proyecto de lo que quiero es exportar como lo que 00:04:19
voy a hacer va a ser darle un nombre a mi cabecera y la voy a guardar como png 00:04:25
eso es importante para que mantenga el fondo transparente el tipo de la imagen 00:04:31
tiene que ser bmp o sea tiene que ser no puede ser jpg quiero decir puede ser 00:04:37
puede ser de más formatos pero el formato recomendado es png bien pues la 00:04:44
voy a llamar por ejemplo mi cabecera punto png y le doy a exportar y ya está ya tengo mi cabecera 00:04:50
aquí bueno pues ajustó un poquito la calidad y ya tengo aquí mi cabecera exportada bien ahora 00:05:00
ya sólo me quedaría volver a mi centro venir aquí al menú editar diseñador web y ahora ya 00:05:08
simplemente en la pestaña de cabecera donde pone imagen pulsaría aquí voy a añadir la añadir una 00:05:20
imagen para localizarla con el botón examinar localizarla de mi ordenador voy a venirme aquí 00:05:34
el escritorio, cabecera, mi cabecera, pulso en abrir, pulso en subir fichero y veo aquí 00:05:42
la barra de progreso, me dice que ya ha terminado de subir, entonces me dice que accedo a los 00:05:56
ficheros subidos desde listado, me voy aquí a listado y veo que efectivamente aquí tengo 00:06:03
mi imagen, pulso aquí en este 00:06:09
circulito, seleccionar 00:06:11
ahora mismo ya 00:06:15
tengo seleccionada mi imagen 00:06:16
cuando yo pulso en guardar 00:06:19
y salir, veo 00:06:21
aquí ya mi imagen 00:06:23
incorporada 00:06:25
vale, entonces 00:06:26
tengo la imagen incorporada pero veo que 00:06:28
bueno, pues veo por aquí el nombre 00:06:31
del centro, veo que la imagen 00:06:33
no se ajusta 00:06:35
bien al tamaño 00:06:36
ni en anchura ni en altura. Todo esto de nuevo para ajustarlo pues vengo al diseñador web 00:06:39
y simplemente en la anchura pues voy a decir que la web ocupa el 100% de la página, ya 00:06:46
vemos que se ensancha. En cuanto a la cabecera voy a decir que no muestre el nombre de la 00:06:57
web como nombre de cabecera vemos que ya lo ocultado también voy a ocultar el 00:07:04
buscador marcando aquí y ahora ya voy a ajustar 00:07:10
también la altura para que en lugar de tener 150 píxeles tenga 200 que es el 00:07:16
tamaño que yo he definido para mi cabecera si quiero puedo ponerle mejor 00:07:22
el fondo blanco porque quede más más elegante y ya cuando tenga ya todo 00:07:27
definido guardar y salir y ya estaría ya tendría yo la web de 00:07:33
mi centro definida con su imagen de cabecera y el aspecto bueno pues pues va 00:07:39
cambiando que más cosas hemos hecho aquí bueno pues hemos ajustado por ejemplo 00:07:44
los menús lo que hemos hecho ha sido pues jugar con los colores siempre con 00:07:49
el diseñador web jugar con los colores de los menús con los colores de los 00:07:54
recursos hemos elegido un tema en fin aquí ya tenemos distintas opciones de 00:08:01
configuración pues para conseguir personalizar la apariencia 00:08:07
y conseguir el diseño de la web que más nos guste 00:08:11
Subido por:
tic.ismie
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
187
Fecha:
24 de febrero de 2019 - 21:09
Visibilidad:
URL
Centro:
Sin centro asignado
Duración:
08′ 25″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
318.43 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid