Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1.Introduccion (diseño web con CSS)

666 views

Published on

¿Cómo diseñar páginas web accesibles y bonitas? La respuesta es CSS

Published in: Technology, Education
  • Be the first to comment

1.Introduccion (diseño web con CSS)

  1. 1. INTRODUCCIÓNY CONTEXTO<br />TEMA 1<br />
  2. 2. RAZONES PARA DISEÑARCON CSS<br />Páginas BUENAS<br />Cumplen los estándares del w3c<br />Son accesibles<br />Prevenir PROBLEMAS futuros<br />Páginas BONITAS<br />Se pueden conseguir diseños muy llamativos<br />Páginas BARATAS<br />Es un estándar del w3c, por lo cual es GRATIS<br />www.laramarcos.com<br />
  3. 3. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB<br />ELEMENTOS DINÁMICOS<br />Capas que aparecen y desaparecen<br />Elementos que se mueven al pasar por encima<br />Menús desplegables<br />JAVASCRIPT<br />www.laramarcos.com<br />
  4. 4. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB<br />FORMA<br />CONTENIDO<br />Párrafos<br />Listas<br />Tablas<br />Imágenes<br />Enlaces<br />Formularios<br />Tipos de letra<br />Alineación<br />Colores<br />Distribución<br />Decoración en las listas<br />CSS<br />XHTML<br />www.laramarcos.com<br />
  5. 5. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO<br />Dentro de la propia etiqueta de XHTML, como un atributo más<br />&lt;p style= “color: red”&gt;Hola&lt;/p&gt;<br />Dentro del propio documento .html<br /> &lt;head&gt;<br /> &lt;styletype=&quot;text/css&quot;&gt;<br /> p { color: red; } <br /> &lt;/style&gt; <br /> &lt;/head&gt;<br />www.laramarcos.com<br />
  6. 6. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO<br />En un archivo externo<br /> Su extensión será .css<br /> La MEJOR opción<br />.css<br />.html<br /> &lt;head&gt;<br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/estilos.css&quot; media=&quot;screen&quot; /&gt; <br />&lt;/head&gt;<br />p { color: red; } <br />www.laramarcos.com<br />
  7. 7. 1.3 diferencias formales según navegadores<br />El motor de los navegadores es el responsable de interpretar los lenguajes HTML y CSS<br />Unos motores son capaces de leer todas las reglas CSS y otros no<br />Los más avanzados son los motores de Safari y Opera<br />En cambio, IE6 contiene decenas de errores<br />www.laramarcos.com<br />
  8. 8. 1.3 diferencias formales según navegadores<br />Información de Javier Eguíluz<br />www.laramarcos.com<br />

×