maquetación css
DESCRIPTION
Maquetación CSSTRANSCRIPT
![Page 1: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/1.jpg)
Cristian Riffo Huez
![Page 2: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/2.jpg)
Que es CSS Porqué CSS HTML Orden Lógico Normas y Accesibilidad Tablas Navegadores Qué debe saber un buen desarrollador
web Ejemplos y Otros Links de Interés
![Page 3: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/3.jpg)
+
![Page 4: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/4.jpg)
Separa Información del Estilo Fácil mantención Fácil manejo desde JavaScript Compatibilidad con dispositivos Accesibilidad (Personalización) Código HTML más limpio Programable
![Page 5: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/5.jpg)
Evolución del HTML XHTML
![Page 6: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/6.jpg)
<body><div> <h1><ul> <h2>
contenido
![Page 7: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/7.jpg)
![Page 8: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/8.jpg)
W3C WAI – WCAG (Web Accessibility Initiative, Web Content
Accessibility Guidelines) Contenido para todos
› Sin CSS› Sin Javascript› Sin Flash› Sin Imágenes› Sin Periféricos› Sistemas Operativos
![Page 9: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/9.jpg)
Con tablas es más fácil ¿Porqué no? Tableless Divs vs Tablas
![Page 10: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/10.jpg)
Navegadores del mercado› Firefox 2, 3› Internet Explorer 6, 7› Safari (Win, Mac)
Móviles
![Page 11: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/11.jpg)
![Page 12: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/12.jpg)
![Page 13: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/13.jpg)
CSS vs JavaScript CSS Zen garden
![Page 14: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/14.jpg)
porquero.blogspot.com www.guiaweb.gov.cl www.w3schools.com www.csszengarden.com delicious.com/popular/css www.mootools.net www.w3c.org developer.yahoo.com/yui/reset/
![Page 16: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/16.jpg)
Comportamiento hover CSS/JavaScript
JavaScript CSS
![Page 17: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/17.jpg)
Código html+javascript
<ul> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Inicio</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Quienes Somos</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Contacto</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’”onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’”><a href=“#”>Clientes</a></li></ul>
![Page 18: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/18.jpg)
Código html
<ul> <li><a href=“#”>Inicio</a></li> <li><a href=“#”>Quienes Somos</a></li>
<li><a href=“#”>Contacto</a></li> <li><a href=“#”>Clientes</a></li></ul>
Código CSS
li a:hover {background-image: url(pub/imgs/img0.jpg);
}
![Page 19: MaquetacióN Css](https://reader034.vdocuments.net/reader034/viewer/2022052322/557bdcadd8b42a8b3e8b5022/html5/thumbnails/19.jpg)
Ver archivo