Propiedades de los contenedores

22
MAQUETACION aplicar atributos básicos de CSS para diagramar taller_media lunes 22 de agosto de 2011

description

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

Transcript of Propiedades de los contenedores

Page 1: Propiedades de los contenedores

MAQUETACIONaplicar atributos básicos de CSS para diagramar

taller_medialunes 22 de agosto de 2011

Page 2: Propiedades de los contenedores

etiquetas: nativas de HTMLidentidad: posicionamiento, un elementoclase: múltiples elementos

multimedia 1 - internet y sitios web

tipos de selectores

lunes 22 de agosto de 2011

Page 3: Propiedades de los contenedores

etiquetas: no necesitan concatenador

body{font-size: 24px;}

multimedia 1 - internet y sitios web

tipos de selectores

lunes 22 de agosto de 2011

Page 4: Propiedades de los contenedores

identidad: utiliza concatenador #

#cabecera{width: 980px;}

multimedia 1 - internet y sitios web

tipos de selectores

lunes 22 de agosto de 2011

Page 5: Propiedades de los contenedores

clase: utiliza concatenador .

.fotos{border: 1px solid #6a4a3c;}

multimedia 1 - internet y sitios web

tipos de selectores

lunes 22 de agosto de 2011

Page 6: Propiedades de los contenedores

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

Page 7: Propiedades de los contenedores

multimedia 1 - internet y sitios web

reglas básicas

1. la maquetación se realiza por medio de contenedores

<div id=”contenedor”><div id=”cabecera”></div><div id=”enlaces”></div><div id=”cuerpo”></div><div id=”pie”></div></div>

HTMLcabecera

enlaces

cuerpo

pie

lunes 22 de agosto de 2011

Page 8: Propiedades de los contenedores

multimedia 1 - internet y sitios web

reglas básicas

2. los contenedores (<div>) sin atributos funcionan por apilamiento

<div id=”contenedor”><div id=”cabecera”></div><div id=”enlaces”></div><div id=”cuerpo”></div><div id=”pie”></div></div>

cabecera

enlaces

cuerpo

pie

HTML

lunes 22 de agosto de 2011

Page 9: Propiedades de los contenedores

multimedia 1 - internet y sitios web

reglas básicas

3. el atributo floatpermite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none.

<div id=”contenedor”><div id=”cabecera”></div><div id=”enlaces”></div><div id=”cuerpo”></div><div id=”pie”></div></div>

cabecera

enlaces cuerpo

pie

#enlaces {width: 300px;float: left;

}

lunes 22 de agosto de 2011

Page 10: Propiedades de los contenedores

multimedia 1 - internet y sitios web

reglas básicas

4. maquetación a dos columnaspara realizar una maquetación a dos columnas, los contenedores que funcionarán como columnas deben tener el atributo float

<div id=”contenedor”><div id=”cabecera”></div><div id=”enlaces”></div><div id=”cuerpo”></div><div id=”pie”></div></div>

cabecera

enlaces cuerpo

pie

#enlaces {width: 300px;float: left;

}

#cuerpo {width: 650px;float: right;

}

lunes 22 de agosto de 2011

Page 11: Propiedades de los contenedores

multimedia 1 - internet y sitios web

reglas básicas

3. el atributo clearse utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el.

<div id=”contenedor”><div id=”cabecera”></div><div id=”enlaces”></div><div id=”cuerpo”></div><div id=”pie”></div></div>

cabecera

enlaces cuerpo

pie

#enlaces {width: 300px;float: left;

}

#cuerpo {width: 650px;float: right;

}

#pie{clear:both;}

lunes 22 de agosto de 2011

Page 12: Propiedades de los contenedores

definidas por HTML y determinadas por CSS

multimedia 1 - internet y sitios web

incorporación de imágenes

lunes 22 de agosto de 2011

Page 13: Propiedades de los contenedores

<body>

multimedia 1 - internet y sitios web

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>

<img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” />

lunes 22 de agosto de 2011

Page 14: Propiedades de los contenedores

multimedia 1 - internet y sitios web

src: Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.

<img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” />

indica el nombre o ruta

lunes 22 de agosto de 2011

Page 15: Propiedades de los contenedores

multimedia 1 - internet y sitios web

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.

<img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” />

indica el ancho

lunes 22 de agosto de 2011

Page 16: Propiedades de los contenedores

multimedia 1 - internet y sitios web

height: Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

<img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” />

indica el alto

lunes 22 de agosto de 2011

Page 17: Propiedades de los contenedores

multimedia 1 - internet y sitios web

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.

<img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” />

alternativa

lunes 22 de agosto de 2011

Page 18: Propiedades de los contenedores

como administra CSS las imágenes

multimedia 1 - internet y sitios web

atributos de imágenes

lunes 22 de agosto de 2011

Page 19: Propiedades de los contenedores

multimedia 1 - internet y sitios web

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.

#header {background-image: url(imagenes/fondo.jpg);}

nombre del selector

lunes 22 de agosto de 2011

Page 20: Propiedades de los contenedores

multimedia 1 - internet y sitios web

url: determina cual es la ubicación de la imagen que se va a utilizar en relación al documento HTML.

#header {background-image: url(imagenes/fondo.jpg);}

define la ruta de la imagen

lunes 22 de agosto de 2011

Page 21: Propiedades de los contenedores

multimedia 1 - internet y sitios web

(...): expresa el nombre del archivo de imagen que se va a utilizar y su extensión

#header {background-image: url(imagenes/fondo.jpg);}

nombre del archivo

lunes 22 de agosto de 2011

Page 22: Propiedades de los contenedores

multimedia 1 - internet y sitios web

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

#header {background-image: url(imagenes/fondo.jpg);background-repeat: repeat-x;}

nombre del selector

lunes 22 de agosto de 2011