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.

Propiedades de los contenedores

4,006 views

Published on

Uso de contenedores para el diseño de composiciones bajo estándar de diseño web.

Published in: Design
  • Be the first to comment

Propiedades de los contenedores

  1. 1. MAQUETACION aplicar atributos básicos de CSS para diagramar taller_medialunes 22 de agosto de 2011
  2. 2. tipos de selectores etiquetas: nativas de HTML identidad: posicionamiento, un elemento clase: múltiples elementos multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  3. 3. tipos de selectores etiquetas: no necesitan concatenador body{font-size: 24px;} multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  4. 4. tipos de selectores identidad: utiliza concatenador # #cabecera{width: 980px;} multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  5. 5. tipos de selectores clase: utiliza concatenador . .fotos{border: 1px solid #6a4a3c;} multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  6. 6. Recordemos algunas nociones básicas vistas la clase anterior respecto a atributos de diagramación/maquetación. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  7. 7. 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> reglas básicas multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  8. 8. 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> reglas básicas multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  9. 9. 3. el atributo float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o cabecera derecha de otros elementos adyacentes. Admite tres valores, right, left y none. enlaces cuerpo <div id=”contenedor”> <div id=”cabecera”></div> <div id=”enlaces”></div> pie <div id=”cuerpo”></div> <div id=”pie”></div> </div> #enlaces { width: 300px; float: left; } reglas básicas multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  10. 10. 4. maquetación a dos columnas cabecera para realizar una maquetación a dos columnas, los contenedores que funcionarán como columnas deben tener el atributo float enlaces cuerpo <div id=”contenedor”> <div id=”cabecera”></div> <div id=”enlaces”></div> pie <div id=”cuerpo”></div> <div id=”pie”></div> </div> #enlaces { width: 300px; float: left; } #cuerpo { width: 650px; float: right; } reglas básicas multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  11. 11. 3. el atributo clear se utiliza conjuntamente con float para indicar cabecera cuando un elemento flotante permite otros elementos flotantes junto a el. enlaces cuerpo <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; } #cuerpo { pie width: 650px; float: right; } #pie{ clear:both; } reglas básicas multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  12. 12. incorporación de imágenes definidas por HTML y determinadas por CSS multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  13. 13. <body> <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> la etiqueta HTML de imagen (img) define la incorporación de una imagen en un documento, que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos: </body> multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  14. 14. indica el nombre o ruta <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> src: Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  15. 15. indica el ancho <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> width: Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  16. 16. indica el alto <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> height: Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  17. 17. alternativa <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> alt: Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  18. 18. atributos de imágenes como administra CSS las imágenes multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  19. 19. nombre del selector #header { background-image: url(imagenes/fondo.jpg); } background-image: La propiedad background-image establece la imagen de fondo de un elemento. Cuando se define una imagen de fondo (background image), también debería definirse un background color (color de fondo) similar para aquellos que no cargan las imágenes. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  20. 20. define la ruta de la imagen #header { background-image: url(imagenes/fondo.jpg); } url: determina cual es la ubicación de la imagen que se va a utilizar en relación al documento HTML. multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  21. 21. nombre del archivo #header { background-image: url(imagenes/fondo.jpg); } (...): expresa el nombre del archivo de imagen que se va a utilizar y su extensión multimedia 1 - internet y sitios weblunes 22 de agosto de 2011
  22. 22. nombre del selector #header { background-image: url(imagenes/fondo.jpg); background-repeat: repeat-x; } background-repeat: determina como se repite la imagen de fondo de un elemento. l valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente multimedia 1 - internet y sitios weblunes 22 de agosto de 2011

×