4. Diseño y configuración de la cabecera

Ya hemos visto la mayor parte del aspecto visual de nuestra web se define gracias al Diseñador Web y sin duda, gran parte de la personalidad de nuestro espacio, viene marcado por la cabecera que hayamos incorporado.

La cabecera es una imagen que debemos diseñar con herramientas externas a EducaMadrid. Podemos usar la herramienta que queramos, pero siempre debemos conseguir una imagen (en formato imagen .png o .jpg por ejemplo) que después incorporar en nuestra web gracias al Diseñador Web.

Un ejemplo de cabecera podría ser la siguiente imagen:

Cabecera

En este caso hemos configurado una imagen con fondo transparente, formada por dos imágenes y un texto:

  • La imagen de la izquierda, la de los puntitos de colores, podría perfectamente ser el logo de mi centro. Un logo que puedo tener ya diseñado y ser el que usamos en el centro para las cabeceras de los documentos por ejemplo. 
  • La imagen de la derecha,  en este caso la hemos descargado de internet, siempre asegurándonos de que tiene una licencia que permite su uso, para ello lo mejor es dirigirse a algún catálogo de imágenes libres.
  • La zona central está ocupada por un texto, con el nombre de mi centro y con distintos tamaños de fuente para conseguir más dinamismo.

Pues bien, vamos a ver en distintos videotutoriales cómo configurar todo esto usando un par de editores de imágenes. 

  • Por un lado vamos a usar GIMP, que es un programa gratuito y libre de edición de imágenes, del que hablamos en detalle en contenido de ampliación sobre Tratamiento y optimización de imágenes para Internet
  • Y como alternativa a GIMP, vamos a usar un editor de imágenes en línea, para el que no es necesario necesario instalar ningún programa nuevo en nuestro ordenador. Se trata de Pixlr Editor, para el que sólo necesitamos tener activado Flash Player en nuestro navegador.  (Puede que al acceder nos muestre un mensaje de que necesitamos activar Flash Player, en ese caso, debemos activarlo y esperar hasta acceder al editor).

En los siguientes vídeos, recogemos paso por paso la creación de esta cabecera, usando GIMP como herramienta de edición de imágenes, aunque si no la tienes instalada y prefieres usar una herramienta en línea que no necesites instalar, también encontrarás la opción en el Paso4:

  • Paso 1: Introducción al Diseñador web y la configuración de la cabecera:

  • Paso 2: Preparar las imágenes que componen la cabecera

  • Paso 3: Configurar y subir la cabecera a nuestra web

  • Paso 4: Configurar la cabecera usando Pixlr