diagramación en web

45
CSS Instrucciones que debe seguir un navegador para presentar la información taller_media viernes 26 de agosto de 2011

Upload: patricio-rodriguez-m

Post on 22-Apr-2015

4.660 views

Category:

Documents


5 download

DESCRIPTION

Uso de contenedor

TRANSCRIPT

Page 1: Diagramación en web

CSSInstrucciones que debe seguir un navegador para presentar la información

taller_mediaviernes 26 de agosto de 2011

Page 2: Diagramación en web

Separar al máximo la forma (presentación) y el fondo (datos)

multimedia 1 - internet y sitios webviernes 26 de agosto de 2011

Page 3: Diagramación en web

multimedia 1 - internet y sitios web

contenido

viernes 26 de agosto de 2011

Page 4: Diagramación en web

multimedia 1 - internet y sitios web

maquetación

viernes 26 de agosto de 2011

Page 5: Diagramación en web

SINTAXISCOMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR

multimedia 1 - internet y sitios webviernes 26 de agosto de 2011

Page 6: Diagramación en web

multimedia 1 - internet y sitios web

css ordena la visualización del contenido

viernes 26 de agosto de 2011

Page 7: Diagramación en web

multimedia 1 - internet y sitios web

css ordena la visualización del contenido

viernes 26 de agosto de 2011

Page 8: Diagramación en web

El código web de calidad se optimiza para que los elementos propios del diseño (fondos, estilos de texto, modalidades de presentación de elementos...) sea ligero, esto es, con pocas instrucciones se consiga el efecto visual deseado, y se reutilice múltiples veces.

multimedia 1 - internet y sitios web

velocidad de carga

viernes 26 de agosto de 2011

Page 9: Diagramación en web

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

multimedia 1 - internet y sitios web

tipos de selectores

viernes 26 de agosto de 2011

Page 10: Diagramación en web

multimedia 1 - internet y sitios web

body{ background-color:#FFFFFF;}

Selector: Etiqueta ¿Dónde?

viernes 26 de agosto de 2011

Page 11: Diagramación en web

multimedia 1 - internet y sitios web

etiqueta

documentobody{ background-color:#FFFFFF;}

viernes 26 de agosto de 2011

Page 12: Diagramación en web

multimedia 1 - internet y sitios web

#encabezado{ background-color:#666666;}

Selector: Identificador individual ¿Dónde?

vez por documento

1viernes 26 de agosto de 2011

Page 13: Diagramación en web

multimedia 1 - internet y sitios web

id

documentobody{ background-color:#666;}

viernes 26 de agosto de 2011

Page 14: Diagramación en web

multimedia 1 - internet y sitios web

.datos{ background-color:#00FFCC;}

Selector: Identificador común ¿Dónde?

vez por documento

+1viernes 26 de agosto de 2011

Page 15: Diagramación en web

multimedia 1 - internet y sitios web

class

documentobody{ background-color:#00FFCC;}

viernes 26 de agosto de 2011

Page 16: Diagramación en web

para trabajar con CSS

multimedia 1 - internet y sitios web

reglas básicas

viernes 26 de agosto de 2011

Page 17: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

JERARQUÍAautor - usuario - navegador

<h1>Hola</h1>

viernes 26 de agosto de 2011

Page 18: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

JERARQUÍAautor - usuario - navegador

<h1>Hola</h1>

Hola

viernes 26 de agosto de 2011

Page 19: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

JERARQUÍAautor - usuario - navegador

<h1>Hola</h1>

Hola

h1{ color:red;}

CSS

HTML

viernes 26 de agosto de 2011

Page 20: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

JERARQUÍAautor - usuario - navegador

<h1>Hola</h1>

Hola

h1{ color:red;}

CSS

HTML

viernes 26 de agosto de 2011

Page 21: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

ESPECÍFICOGENÉRICO<body> <h1>Hola</h1> <p>Contenido</p></body>

HTML

viernes 26 de agosto de 2011

Page 22: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

ESPECÍFICOGENÉRICO<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

viernes 26 de agosto de 2011

Page 23: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

ESPECÍFICOGENÉRICO<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

body{ color:red;}

CSS

viernes 26 de agosto de 2011

Page 24: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

ESPECÍFICOGENÉRICO<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

body{ color:red;}

p{ color:blue;}

CSS

viernes 26 de agosto de 2011

Page 25: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

ESPECÍFICOGENÉRICO<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

body{ color:red;}

p{ color:blue;}

CSS

viernes 26 de agosto de 2011

Page 26: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

SINTAXIS EXTRICTA<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

BODY{ color:red;} CSS

viernes 26 de agosto de 2011

Page 27: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

SINTAXIS EXTRICTA<body> <h1>Hola</h1> <p>Contenido</p></body>

HolaContenido

HTML

BODY{ color:red;} CSS

viernes 26 de agosto de 2011

Page 28: Diagramación en web

La etiqueta <div> o división de bloque es un elemento de html utilizado para definir secciones de un documento.

multimedia 1 - internet y sitios web

CONTENEDORES DIV

viernes 26 de agosto de 2011

Page 29: Diagramación en web

multimedia 1 - internet y sitios web

contenedores

viernes 26 de agosto de 2011

Page 30: Diagramación en web

Una etiqueta <div> define un bloque donde incluiremos información dentro de nuestro documento. A este bloque definido con la etiqueta <div> le asignaremos por medio del CSS, las propiedades de posición, tamaño, color, etc etc.

multimedia 1 - internet y sitios web

CONTENEDORES DIV

viernes 26 de agosto de 2011

Page 31: Diagramación en web

<body>

multimedia 1 - internet y sitios web

etiquetas de definición de un contenedor dentro de un documento html

</body>

<div>

</div>

viernes 26 de agosto de 2011

Page 32: Diagramación en web

multimedia 1 - internet y sitios web

imaginemos los divs como cajas

viernes 26 de agosto de 2011

Page 33: Diagramación en web

multimedia 1 - internet y sitios web

estructura

En una pagina web standard, se visualizan normalmente 4 cajas imaginarias:

- Contenedor principal- Cabezal- Cuerpo- Pie

viernes 26 de agosto de 2011

Page 34: Diagramación en web

multimedia 1 - internet y sitios web

veamos algo mas gráfico

viernes 26 de agosto de 2011

Page 35: Diagramación en web

multimedia 1 - internet y sitios web

estructura

Tenemos el cuerpo de la página, y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos.

viernes 26 de agosto de 2011

Page 36: Diagramación en web

multimedia 1 - internet y sitios web

menu

banner

cuerpo

footer

}

}

}

viernes 26 de agosto de 2011

Page 37: Diagramación en web

<body>

multimedia 1 - internet y sitios web

</body>

<div id="contenedor">

<div id="menu"></div>

<div id="banner"></div>

<div id="cuerpo"></div>

<div id="footer"></div></div>

viernes 26 de agosto de 2011

Page 38: Diagramación en web

multimedia 1 - internet y sitios web

si pasamos esto a CSS

viernes 26 de agosto de 2011

Page 39: Diagramación en web

#menu {height: 52px;width: 968px;background-color: #00F;}

#slices {height: 359px;width: 968px;background-color: #FF0;}

#cuerpo {height: 700px;background-color: #C60;}

#contenedor {width: 968px;}

#footer {height: 50px;width: 968px;background-color: #C09;}

multimedia 1 - internet y sitios webviernes 26 de agosto de 2011

Page 40: Diagramación en web

floatclear

multimedia 1 - internet y sitios web

2 atributos básicos

viernes 26 de agosto de 2011

Page 41: Diagramación en web

La propiedad float permite 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.

multimedia 1 - internet y sitios web

float

viernes 26 de agosto de 2011

Page 42: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

FLOAT<div id=“caja1”>1 </div>

<div id=“caja2”>2 </div>

<div id=“caja3”>3 </div>

#caja1{ border-color:red float:left;}

CSS

HTML

123

viernes 26 de agosto de 2011

Page 43: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

FLOAT<div id=“caja1”>1 </div>

<div id=“caja2”>2 </div>

<div id=“caja3”>3 </div>

#caja1{ border-color:red float:left;}

CSS

HTML

1 21 3

viernes 26 de agosto de 2011

Page 44: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

FLOAT<div id=“caja1”>1 </div>

<div id=“caja2”>2 </div>

<div id=“caja3”>3 </div>

#caja1{ border-color:red float:left;}#caja2{ border-color:blue float:left; width:25px;}

CSS

HTML

1 21 3

viernes 26 de agosto de 2011

Page 45: Diagramación en web

multimedia 1 - internet y sitios web

reglas básicas

FLOAT<div id=“caja1”>1 </div>

<div id=“caja2”>2 </div>

<div id=“caja3”>3 </div>

#caja1{ border-color:red float:left;}#caja2{ border-color:blue float:left; width:25px;}

CSS

HTML

1 2 3

viernes 26 de agosto de 2011