Diseño Web con Css

Argumento de Diseño Web con Css

Ralph G. Schulz trabaja en Berlín como docente, autor y desarrollador web independiente desde los primeros días de la www. El punto fuerte de los trabajadores de su agencia son la concepción y el desarrollo de ofertas web con las mínimas barreras posibles.
Su compromiso con los estándares Web y sus trabajos libres de barreras fueron premiados en el 2005 con el Premio Especial BIENE a uno de sus proyectos.0INTRODUCCIÓN

Parte A

Fundamentos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Capítulo 1 ¿POR QUÉ CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1 ¿Qué aporta separar la estructura del diseño? . . . . . . . . . . . 4

1.2 Un ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Capítulo 2 FUNDAMENTOS CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2 Vincular hojas de estilo en archivos HTML . . . . . . . . . . . . . . 20

2.3 Selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.4 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2.5 Valores para datos de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . 35

2.6 Jerarquía de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2.7 Herencia (inheritance) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Capítulo 3 CONCEPTOS CSS PARA CUADROS

Y SUS PROPIEDADES . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.1 El cuadro modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3.2 Parentesco entre cuadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.3 Representación de los cuadros . . . . . . . . . . . . . . . . . . . . . . . . 54

3.4 Posicionamiento de los cuadros . . . . . . . . . . . . . . . . . . . . . . . 58

3.5 Opciones de muestra de los cuadros . . . . . . . . . . . . . . . . . . . 68

Capítulo 4 CONSTRUCCIÓN DE PÁGINAS WEB . . . . . . . . . . . . . . 71

4.1 Planificar la estructura HTML . . . . . . . . . . . . . . . . . . . . . . . . . 72

4.2 Hojas de estilo para formatos y plantillas . . . . . . . . . . . . . . . 80

4.3 Hojas de estilo variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Capítulo 5 MÁS TRABAJO CON LOS NAVEGADORES . . . . . . . . . . 95

5.1 Navegadores en general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

5.2 Agujeros del navegador - Browser Bugs . . . . . . . . . . . . . . . . 103

5.3 Trucos y bifurcaciones en CSS . . . . . . . . . . . . . . . . . . . . . . . . 109

5.4 Agujeros frecuentes en Internet Explorer . . . . . . . . . . . . . . . 121

5.5 ¿Una reprimenda a Internet Explorer? . . . . . . . . . . . . . . . . . . 132

Parte B

Práctica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Capítulo 6 DISEÑO DE PÁGINAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

6.1 Asignación de fuentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6.2 Asignar color y fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

6.3 Áreas de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

6.4 ¿Fijo, fluido o elástico? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

6.5 Orden de los bloques de contenido . . . . . . . . . . . . . . . . . . . . 153

6.6 Centrar el diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

6.7 Diseños escalados horizontalmente . . . . . . . . . . . . . . . . . . . . 157

6.8 "Columnas" seguidas (Faux Columns) . . . . . . . . . . . . . . . . . 159

6.9 Llenar todo el alto de pantalla . . . . . . . . . . . . . . . . . . . . . . . . 162

6.10 Falsas columnas y altura completa . . . . . . . . . . . . . . . . . . . . . 166

6.11 Áreas fijas (Faux Frames) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Capítulo 7 ELEMENTOS DE PÁGINA . . . . . . . . . . . . . . . . . . . . . . . 181

7.1 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

7.2 Menús . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

7.3 Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

7.4 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

El modelo de tabla CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Capítulo 8 (NO SÓLO) GENERALIDADES . . . . . . . . . . . . . . . . . . . . 217

8.1 "Botones" de menú . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

8.2 Teaser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

8.3 Teaser escalable con vértices redondeados . . . . . . . . . . . . . . 221

8.4 Vínculos con iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

8.5 Listas con iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

8.6 Substitución de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

8.7 Mapas de imágenes (ImageMaps) con CSS . . . . . . . . . . . . . 229

8.8 Un pequeño cuadro info . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

8.9 Líneas de separación (regla horizontal) . . . . . . . . . . . . . . . . . 238

8.10 Tooltipp I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

8.11 Tooltipp II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

8.12 Iniciales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

8.13 Acrónimos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

8.14 Pasar páginas sin saltos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

8.15 Propietarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

8.16 Consejos para una variante de texto . . . . . . . . . . . . . . . . . . . 245

8.17 Consejos sobre estilos para una variante de impresión . . . . 248

8.18 Hojas de estilo ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

8.19 Obstáculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

8.20 Una breve mirada al futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Parte C

Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Capítulo 9 PROPIEDADES CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

9.1 Índice de propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

9.2 Colores y fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

9.3 Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

9.4 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

9.5 Propiedades de cuadro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

9.6 Opciones de muestra y "representación" . . . . . . . . . . . . . . . 283

9.7 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

9.8 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

9.9 Internacionalización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

9.10 Contenidos generados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

9.11 Diseño (layout) de página y salto de página . . . . . . . . . . . . . 296

9.12 Entorno de programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

9.13 Emisión de voz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300