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.

1. maquetación
aplicar atributos básicos de CSS para diagramar
patricio rodríguez m.
@taller_media
martes 28 de agosto de 2012

2. tipos de selectores
etiquetas: nativas de HTML
identidad: posicionamiento, un elemento
clase: múltiples elementos
multimedia 1 - internet y sitios web
martes 28 de agosto de 2012

3. como funciona
martes 28 de agosto de 2012

4. tipos de selectores
etiquetas: no necesitan concatenador
body{font-size: 24px;}
martes 28 de agosto de 2012

5. martes 28 de agosto de 2012
}
body

6. tipos de selectores
identidad: utiliza concatenador #, determina posición de
un objeto único
#introduccion{width: 980px;}
martes 28 de agosto de 2012

7. #introduccion
martes 28 de agosto de 2012

8. identidad: determina posición de un objeto único
martes 28 de agosto de 2012

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. clase: son objetos que se reiteran en cuanto a su uso y
estructura
martes 28 de agosto de 2012

11. nociones básicas
de maquetación
con css
martes 28 de agosto de 2012

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. 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. 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. 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. <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. preguntas??
martes 28 de agosto de 2012