Successfully reported this slideshow.

Maquetación css Parte 1

3,397 views

Published on

Conceptos básicos de maquetación web basada en el lenguaje css. utilización de etiquetas de contenidos y rótulos de presentación de datos.

Published in: Design
  • Be the first to comment

Maquetación css Parte 1

  1. 1. maquetación aplicar atributos básicos de CSS para diagramar patricio rodríguez m. @taller_mediamartes 28 de agosto de 2012
  2. 2. tipos de selectores etiquetas: nativas de HTML identidad: posicionamiento, un elemento clase: múltiples elementos multimedia 1 - internet y sitios webmartes 28 de agosto de 2012
  3. 3. como funcionamartes 28 de agosto de 2012
  4. 4. tipos de selectores etiquetas: no necesitan concatenador body{font-size: 24px;}martes 28 de agosto de 2012
  5. 5. martes 28 de agosto de 2012 } body
  6. 6. tipos de selectores identidad: utiliza concatenador #, determina posición de un objeto único #introduccion{width: 980px;}martes 28 de agosto de 2012
  7. 7. #introduccionmartes 28 de agosto de 2012
  8. 8. identidad: determina posición de un objeto únicomartes 28 de agosto de 2012
  9. 9. tipos de selectores clase: utiliza concatenador ., son objetos que se reiteran en cuanto a su uso y estructura .fotos{border: 1px solid #6a4a3c;}martes 28 de agosto de 2012
  10. 10. clase: son objetos que se reiteran en cuanto a su uso y estructuramartes 28 de agosto de 2012
  11. 11. nociones básicas de maquetación con cssmartes 28 de agosto de 2012
  12. 12. 1. la maquetación se realiza por medio de contenedores cabecera HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div>martes 28 de agosto de 2012
  13. 13. 2. los contenedores (<div>) sin atributos funcionan por cabecera apilamiento HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div>martes 28 de agosto de 2012
  14. 14. 3. el atributo float permite sacar a un elemento del cabecera flujo del documento, y posicionarlo a la izquierda o enlaces cuerpo derecha de otros elementos adyacentes. Admite tres valores, pie right, left y none. <div id=”contenedor”> <div id=”cabecera”></div> <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> #enlaces { </div> width: 300px; float: left; }martes 28 de agosto de 2012
  15. 15. 4. el atributo clear cabecera se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros enlaces cuerpo elementos flotantes junto a el. #enlaces { <div id=”contenedor”> width: 300px; <div id=”cabecera”></div> float: left; <div id=”enlaces”></div> } <div id=”cuerpo”></div> <div id=”pie”></div> </div> #cuerpo { pie width: 650px; float: right; } #pie{ clear:both; }martes 28 de agosto de 2012
  16. 16. <div id=”contenedor”> <div id=”cabecera”></div> cabecera <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> </div> enlaces cuerpo #enlaces { width: 300px; float: left; } pie #cuerpo { width: 650px; float: right; } #pie{ clear:both; }martes 28 de agosto de 2012
  17. 17. preguntas??martes 28 de agosto de 2012

×