Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Diseñador Web
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Instrucciones para personalizar la apariencia de la página web con el diseñador web.
En este tutorial vamos a ver cómo personalizar la apariencia de nuestro sitio web a través del diseñador web.
00:00:06
El diseñador web es un asistente que permite definir la apariencia de la web de manera sencilla y rápida sin tener conocimientos de código CSS.
00:00:12
Bien, para abrir el diseñador web, una vez estamos en nuestro sitio web, pulsamos sobre editar en el panel superior y dentro del apartado apariencia encontramos el botón diseñador web.
00:00:22
Aquí se abre el asistente para que comencemos a personalizar la apariencia de nuestra web.
00:00:32
Antes de empezar a usarlo recomendamos acceder a la pestaña de ayuda ya que en ella encontraremos consejos y recomendaciones tales como activar el botón previsualizar para ver los cambios que vamos incorporando.
00:00:37
Esta opción nos permite ver esos cambios en una página de ejemplo que se abre en segundo plano y que nos dará una idea de cómo quedarán reflejados en nuestra web.
00:00:48
También veremos otros botones útiles como el de guardar y salir, opción que tendremos que pulsar para cuando queramos guardar los cambios que hayamos incorporado.
00:00:56
El diseñador web cuenta con una serie de diseños a los que accedemos desde la pestaña temas y por cada diseño vemos varias opciones.
00:01:05
Para previsualizar estos diseños y ver cómo quedarían en nuestra web podemos pulsar sobre el icono de la lupa que significa previsualizar.
00:01:12
En el icono de la exclamación encontramos más información acerca de un tema en particular
00:01:19
y también nos indica que podemos descargar este tema o apariencia y leer el archivo info.txt
00:01:24
Para descargarlo haríamos clic en el icono de las flechas
00:01:30
Como vemos nos descarga un archivo zip con distinta información
00:01:33
Por último para seleccionar uno de estos temas en nuestra página web haríamos clic en el icono del tick verde
00:01:36
Para terminar de aplicarlo deberemos hacer clic en guardar y salir
00:01:43
Nos muestra un mensaje de aviso y aceptamos
00:01:47
Se recarga nuestra página y ya nos aparece con el estilo que hemos seleccionado.
00:01:49
A continuación, accedemos de nuevo al diseñador web para personalizar este diseño predefinido.
00:01:53
Aunque en nuestro caso hemos aplicado un diseño, no es necesario aplicar uno para usar el diseñador web.
00:01:58
Podemos crear nuestro diseño desde cero, completando los datos que vamos a ver a continuación.
00:02:03
Aunque antes debemos indicar que en nuestra documentación de ayuda se puede consultar toda la información sobre el diseñador web.
00:02:08
Bien, desde la pestaña General podemos personalizar los datos referidos a los aspectos generales de la página, como son el ancho, la posición de la misma, si queremos que tenga un color de fondo o una imagen, o definir el formato de los textos y de los enlaces de los datos generales de la página.
00:02:14
Desde la pestaña cabecera definimos las características que queremos que tenga la cabecera de nuestra web.
00:02:31
Podemos definir si queremos que se muestre o no el nombre de nuestra web, ahí lo vemos primero de historia,
00:02:37
así como el formato que queremos que tenga.
00:02:42
También podemos cambiar la imagen de la cabecera, pero este proceso lo veremos detenidamente en otro tutorial.
00:02:44
También podemos editar cómo queremos que se vea este camino de migas que les aparece a los visitantes de nuestra web,
00:02:51
o directamente podemos ocultarlo.
00:02:56
Si vamos a realizar muchos cambios en la apariencia, es recomendable que pulsemos sobre guardar y salir cada vez que estemos seguros de mantener el cambio realizado para que el trabajo no se pierda.
00:02:58
De nuevo, volvemos a entrar al diseñador web para seguir diseñando el aspecto de nuestra web.
00:03:08
Desde la pestaña menús, definimos el aspecto que tendrá el menú principal de nuestra página.
00:03:13
Nuestro sitio web cuenta con un menú que tiene subpáginas y aquí podemos escoger ocultar las páginas de segundo nivel cuando ponemos el cursor encima.
00:03:18
Si queremos que el menú aparezca de manera vertical, tendremos que haber incorporado previamente el recurso mapa del web en una columna estrecha y podremos personalizar su presentación.
00:03:26
Aquí ya lo habríamos añadido y si quisiéramos que solo se mostrara este menú, haríamos clic en mostrar solo este menú.
00:03:36
Desde la pestaña recursos, definimos el aspecto que tendrán los recursos y aplicaciones que mostremos en nuestra web.
00:03:43
Por ejemplo, podemos configurarlo para que se muestren los recursos sin borde, el espacio que queremos definir entre los recursos, el redondeado de las esquinas y muchas más opciones de personalización.
00:03:49
Desde la pestaña contenidos definimos la presentación que tendrán los contenidos creados con el administrador de contenidos.
00:04:00
Podemos seleccionar un tipo de fuente con la que se mostrarán los títulos y otro distinto para los textos de esos contenidos, así como el color con el que se mostrarán.
00:04:06
En este apartado tablas podemos definir el aspecto que tendrán las tablas que proporcionan
00:04:14
información adicional en algunos tipos de contenidos, como por ejemplo el tipo de contenido
00:04:19
publicación. Desde la pestaña pie de página definimos los aspectos relacionados con la
00:04:24
parte inferior de nuestra página. Como vemos podemos especificar la altura, añadir una
00:04:29
imagen, cambiar los colores y demás. Desde la pestaña móvil podemos definir el aspecto
00:04:34
que tendrá nuestra página cuando se vea desde un dispositivo móvil. EducaMadrid
00:04:39
ofrece una vista móvil común para todas las páginas web elaboradas con las herramientas
00:04:43
propias del portal educativo Liferay. De este modo, podemos tener elaborada nuestra página
00:04:47
web con un diseño y apariencia personalizada accesible desde un PC y al visualizarla desde
00:04:51
un dispositivo móvil de forma automática, el diseño cambia a la vista que por defecto
00:04:56
ofrece la herramienta, garantizando así su correcta visualización desde este tipo de
00:05:00
dispositivos. En otro tutorial explicaremos cómo personalizar la vista móvil. Desde
00:05:05
la pestaña avanzado podremos incorporar código CSS para complementar la personalización de
00:05:09
nuestra página. En este caso recomendamos sólo hacerlo si tenemos conocimientos avanzados sobre
00:05:14
CSS. Como decíamos al principio una vez que hemos finalizado nuestro proceso de diseño pulsamos
00:05:20
sobre guardar y salir para guardar los cambios. En el caso de que no queramos aplicar ninguno de
00:05:25
los cambios realizados pulsamos sobre descartar cambios. En nuestro caso vemos que se han aplicado
00:05:29
algunos cambios de los que hemos ido haciendo como eliminar el borde de los contenidos y hacer
00:05:34
bordes más redondeados. Si en algún momento queremos realizar alguna modificación en la
00:05:38
apariencia pero queremos asegurarnos de no perder lo que ya tenemos, recomendamos guardar la
00:05:43
apariencia que habíamos realizado previamente. Para ello deberemos abrir de nuevo el diseñador
00:05:47
web y hacer clic en copia de seguridad. Aquí leemos con atención las instrucciones para guardar
00:05:52
esta copia de seguridad así como para restablecerla. En resumen es copiar y guardar este código en un
00:05:57
bloc de notas o un programa similar en nuestro ordenador. Y si en algún momento quisiéramos
00:06:03
volver al diseño inicial proporcionado por EducaMadrid, accederemos de nuevo al diseñador
00:06:07
web y pulsamos sobre borrar mi diseño. Efectivamente nos muestra un aviso en el que nos indica
00:06:11
que esta operación no puede deshacerse y el diseño se eliminará definitivamente.
00:06:16
Por último, antes de acabar, vamos a ver brevemente algunos ejemplos de páginas de
00:06:21
web de centros reales que han usado el diseñador web para personalizar su página. En este
00:06:26
caso vemos la del CEIP San Sebastián, que ha empleado la misma plantilla que nosotros
00:06:31
en el tutorial, pero como vemos la ha personalizado con el diseñador web. Y ahora vemos otros dos
00:06:35
ejemplos distintos que han utilizado plantillas diferentes del diseñador web y las han personalizado.
00:06:41
- Idioma/s:
- Etiquetas:
- EducaMadrid
- Autor/es:
- Samuel Gómez
- Subido por:
- EducaMadrid
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 77
- Fecha:
- 10 de marzo de 2025 - 13:00
- 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
- Duración:
- 06′ 59″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 221.23 MBytes
