2. Diseño gráfico y creatividad con el Diseñador web (II)

2.1. Comprensión del código generado

Como decíamos, vamos a partir del código CSS de la tarea inicial voluntaria (descargar el código).

Como vemos, salvo que uno esté muy acostumbrado a trabajar con CSS, resulta un código difícilmente comprensible.

Vemos que el código tiene algunos comentarios CSS (/*CSSbodyBGColor*/, por ejemplo).

Esos comentarios los utiliza el Diseñador Web para recuperar los valores introducidos.

Importante: si se edita el código generado o se eliminan esos comentarios, el Diseñador Web no será capaz de recuperar los valores anteriores, y nos veremos obligados a rellenar de nuevo todos sus campos.

No vamos a estudiar los nombres de los atributos ni valores del código generado, porque ya hemos visto cómo modificarlos y no son diferentes de los vistos en ejemplos anteriores.

Vamos a ver a qué elemento hace referencia cada uno de los selectores del código:

body.blue

El BODY con la clase blue ("blue" es la clase que tiene la etiqueta BODY por defecto en EducaMadrid).
En el ejemplo hemos cambiado su color de fondo.

.blue #wrapper y .blue #content-wrapper

Hay dos capas que albergan el contenido principal de la página ("wrapper" y "content-wrapper") La primera contiene todo; la segunda, el contenido central (el espacio en el que se colocan los recursos).

El CSS de ejemplo hace que "content-wrapper" no tenga fondo, y que "wrapper", el contenedor principal, tenga un color de fondo diferente: ese será el color de fondo que se vea.

También especificamos el ancho de la capa "wrapper": el ancho de nuestra página (965 píxeles).

.blue #banner

La capa con el identificador "banner" de la gama de color azul.

En el ejemplo hemos hemos definido una imagen de fondo, que no se repite y que está alineada a la izquierda y, verticalmente, en la parte superior.
También hemos dicho que la altura del "banner" será de 200 píxeles.

.blue #banner .logo a

Es el enlace que aparece en la cabecera de la página: el nombre del espacio web.
Encontramos este código:
.blue #banner .logo a {
    position:absolute;
    left:-9999px;
    overflow: hidden;
}
Ese código sirve para ocultar de forma accesible un elemento. El elemento no saldrá en pantalla, pero un lector de pantalla sí podría leerlo. Si hubiésemos utilizado este otro código, el lector de pantalla tampoco vería el enlace:
.blue #banner .logo a {
    display: none;
}

¿Por qué habrán ocultado ese enlace?Para hacer más fácil la incorporación de una cabecera personalizada. Por supuesto, si queremos que ese enlace esté presente, podemos hacerlo modificando el código CSS, aunque el propio Diseñador Web nos permite hacerlo marcando la opción "Mostrar el nombre de la web como texto en la cabecera" en la pestaña "Cabecera".

Como vemos, detrás de cada opción del Diseñador Web se esconden unas líneas de código CSS.

.blue a

Los enlaces del esquema de color azul.

Hemos especificado su color.

.blue .titles-list,.blue .cms-content-title,.blue .cms-content .header h1, etc.

Varios elementos, todos ellos títulos de contenidos. Como vemos, se utilizan varios selectores, separándolos por comas, para dar a todos los elementos seleccionados una apariencia común.

En el ejemplo, se cambia su color.

.blue #nav,.blue #nav ul

El menú de navegación.

Cambiamos el color de sus bordes y su color de fondo.

.blue #nav li:hover,.blue #nav li.sfhover,.blue #nav .current-section

Los dos primeros selectores hacen referencia a los elementos del menú al pasar sobre ellos; el último, a la sección actual.

Hemos cambiado su color de fondo.

.blue #nav a

Los enlaces del menú de navegación.

Modificamos el tamaño del texto.

.blue .portlet-title


El título de los recursos.

Modificamos su color y definimos una sombra para el texto.

Atención, porque esta sombra se define utilizando CSS3, y no todos los navegadores soportan CSS3. Si vemos nuestras páginas, por ejemplo, en una versión de Internet Explorer anterior a la 9, no se mostrará esta sombra.

.blue .portlet-icon-back

El enlace "Salir" que tienen los recursos para volver a la página de partida.

Se especifica su color (blanco, para que se vea bien sobre el color oscuro de la barra del recurso).
.blue .visor-de-contenidos .portlet-icon-back
El enlace "Salir" del recurso "Visor de contenidos".
Este recurso es especial. No lo añade el usuario en las páginas, pero se usa para mostrar contenidos. Como no tiene barra de título, el color de este enlace debe ser diferente. Si no no se vería correctamente (blanco sobre blanco...). Esto no hay que especificarlo; lo hace el Diseñador Web automáticamente.