Se encuentra en:
Elementos gráficos
LIBP-0240 (Libro de pautas)
- Área: Manual de estilo para la SGISI
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Libro que trata sobre la personalización en el uso de gráficos.
Pautas
| Título | Carácter |
|---|---|
| Decorar títulos de contenidos | Obligatoria |
| Imagen de cabecera para conjunto de enlaces | Recomendada |
| Iconos | Obligatoria |
| Imágenes incluidas dentro de contenidos | Obligatoria |
Decorar títulos de contenidos
Añadir bajo los títulos de las páginas una imagen decorativa que ocupe todo el ancho del contenido.
Ejemplo:
Código html:
<h3>Contenido
<span class="destacado">con menú</span>
</h3>
Código CSS:
h3 {
background: url("../img/lines.gif") no-repeat scroll left 25px white;
height: 50px;
}
La imagen "lines.gif" y puede encontrarse en el recurso "Prototipos de pantalla para la SGISI " o en el caso práctico.
Imagen de cabecera para conjunto de enlaces
Añadir una imágen de cabecera para los conjuntos de enlaces.
Ejemplo de uso:
Código html:
<div class="image"> </div>
<h3>Enlaces <span class="destacado">Útiles</span></h3>
Código CSS:
.image{
background: url("../img/imgColumizq.jpg") no-repeat scroll 50% bottom transparent;
height: 73px;
}
La imagen "imgColumizq.jpg" y puede encontrarse en el recurso "Prototipos de pantalla para la SGISI " o en el caso práctico.
Imágenes incluidas dentro de contenidos
Mostrar las imágenes de los contenidos insertadas en un cuadro con color de fondo #F0F0F0, con pie de imagen de color #53863F.
Ejemplo de imagen insertada en un contenido:
Código html:
<div class="imagen">
<a href="/servicios/madeja/big.html">
<img alt="Descripcion de la imagen" src="/servicios/madeja/img/image01.jpg"><br/><span>Ampliar imagen</span>
</a>
</div>
Código CSS:
.imagen {
background-color: #F0F0F0;
border: 1px solid #D1D1D1;
float: right;
margin: 10px;
padding: 5px;
text-align: center;
}
a {
color: #53863F;
}
