Manual de Estilo Web Carlos III
Índice WEB CARLOS III 1. Home - Cabecera y footer - Navegación - Destacado Slide - Módulos y otros enlaces 2. Interior primer nivel (plantilla 1) 3. Interior primer nivel (plantilla 2) 4. Interior galería de imágenes 5. Interior segundo nivel (plantilla 1) 6. Interior segundo nivel (plantilla 2 listado) 7. Fuentes y colores básicos
1. Home: Cabecera y footer
1. Home: Cabecera y footer
1. Home: Navegación 2 1 3 1. Menú principal Cuerpo: 16pt 2. Enlaces Encabezado Cuerpo: 12pt Cuerpo: 14pt Color: #FFFFFF 3. Buscador Cuerpo: 12pt Color: #8b8f99 Tipografía bullets: Marcellus Cuerpo: 13pt - Botón: 40px de alto Color: #dee2ed Texto centrado - Rollover: 40px de alto Color: #bfc6d1 4. Enlaces de ineterés Cuerpo: 12pt Color: #590c09 4 5 5. Footer Tamaño: 960x55px Color: #FFFFFF
1. Home: Destacado Slide Destacado Slide Tamaño: 771x330px Margen blanco: 10px por cada lado Tamaño de imagen: 750x312px Caja de texto destacado: Cuerpo del titular: 26pt Cuerpo del texto seguido: 16pt - Marcador del Slide desactivo: color:#d8dce6 - Marcador del Slide activo: color:#b9becd
1. Home: Módulos y otros enlaces 1. Módulo con imagen - Titular: Cuerpo: 16pt Color: #590c09 - Texto seguido: - Tamaño de imagen: 136x111px Margen blanco de 5px por cada lado. Módulo básico - Titular: Cuerpo: 14pt Color: #590c09 - Texto seguido: - Link + noticias: Color: #20558A Rollover: #639EC8 2. Módulo especial con imagen - Tamaño de imagen: 344x144px Margen blanco de 5px por cada lado. - Texto: Cuerpo: 18pt - Link Ver más >>: Color: #20558A Rollover: #639EC8 3 3. Otros enlaces - Accesos directos y Eventos (Titular): Color de fondo caja: #f0d9d0 Cuerpo: 14pt Color: #590c09 - Enlaces: Cuerpo: 12pt Color: #20558A Rollover: #639EC8 4. Redes sociales Iconos: Tamaño: 24x24px Espacio entre iconos de 10px 1 4 2
2. Interior: primer nivel (plantilla 1) 1. Titular sección: Cuerpo: 25pt 1 - Breadcrumb: Color: #767677 2. Módulo información con imagen - Imagen: Tamaño: 134x154px Margen blanco de 5px por cada lado - Texto seguido: Cuerpo: 14pt 2 3 4 3. Módulo contenido con imagen - Tamaño de imagen: 180x100px Margen blanco de 5px por cada lado. - Cabecera titular contenido: Tamaño: 580x30px Color de fondo: #f0d9d0 Cuerpo: 16pt Color: #590e09 - Texto links: Cuerpo: 12pt 4. Módulo contenido 2 con imagen a la derecha - Tamaño de imagen: 144X102px Margen blanco de 5px por cada lado. - Cabecera titular contenido: Tamaño: 580x30px Color de fondo: #b8becc Cuerpo: 16pt Color: #000779 - Texto links: Cuerpo: 12pt Color de fondo de la caja: #e5e9ec
3. Interior: primer nivel (plantilla 2) 1. Titular sección: Cuerpo: 26pt 1 - Breadcrumb: Color: #777777 2. Módulo contenido - Texto seguido: Cuerpo: 14pt 2 3. Módulo imagen Tamaño: 753x308px Margen blanco de 7px por cada lado 3 4 4. Módulo información con imagen - Tamaño de imagen: 147x152px Margen blanco de 5px por cada lado. - Texto seguido: Cuerpo: 14pt
4. Interior: galería de imágenes 1. Menú galería: Altura del menú: 48px Texto centrado con un pixel de separación de color: #5e5e5e Cuerpo: 18pt -Rollover: Cuerpo: 18pt Color: #580d0a 1 2 2. Galería de imágenes - Thumbnails: Tamaño: 100x110px Margen blanco de 5px por cada lado y un borde de 1 px de color: #dbdbdb -Rollover thumbnails: Tamaño: 100x110px Margen de 5px por cada lado de color: #dbdbdb
4. Interior: galería de imágenes Galería de imágenes - Imagen seleccionada: La imagen aparecerá en un popup y se ajustará la ventana tanto si es vertical como horizontal. - Descriptivo de la imagen: Tipogrfía: Trebuchet MS Cuerpo: 24pt Color: #FFFFFF
5. Interior: segundo nivel 2 1. Módulos de texto: - Titular módulo: Cuerpo: 16pt Color: #590e09 -Texto seguido: Cuerpo: 14pt 1 3 2. Enlaces: - Tamaño de icono: 36x36px - Texto enlace: Color: #9a2925 3. Redes sociales: - Color de fondo de la caja: #ecedf1 - Tamaño de icono: 16x16px - Texto enlace: Cuerpo: 10pt Color: #9a2925
6. Interior: segundo nivel Tabla listado: Ancho: 760px - Titular listado: Bold Cuerpo: 17pt -Texto contenido tabla: Cuerpo: 17pt Color: #5b6668 - Colores de la tabla: Fondo encabezado: #b8becc Altura: 50px Linea separatoria de 1px Color: #a1a2a4 Celdas de contenido: #FFFFFF #e5e9ec Altura: 44px
7. Fuentes y colores básicos Tipografía Menú y titular: Marcellus Tipografía texto seguido y enlaces: Trebuchet MS Colores básicos: #000779 #580d0a #3a3a3a #b8becc #20558A #639EC8
www.uc3m.es