View
4.689
Download
5
Category
Preview:
DESCRIPTION
Uso de contenedor
Citation preview
CSSInstrucciones que debe seguir un navegador para presentar la información
taller_mediaviernes 26 de agosto de 2011
Separar al máximo la forma (presentación) y el fondo (datos)
multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
contenido
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
maquetación
viernes 26 de agosto de 2011
SINTAXISCOMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR
multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
css ordena la visualización del contenido
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
css ordena la visualización del contenido
viernes 26 de agosto de 2011
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
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
multimedia 1 - internet y sitios web
body{ background-color:#FFFFFF;}
Selector: Etiqueta ¿Dónde?
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
etiqueta
documentobody{ background-color:#FFFFFF;}
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
#encabezado{ background-color:#666666;}
Selector: Identificador individual ¿Dónde?
vez por documento
1viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
id
documentobody{ background-color:#666;}
viernes 26 de agosto de 2011
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
multimedia 1 - internet y sitios web
class
documentobody{ background-color:#00FFCC;}
viernes 26 de agosto de 2011
para trabajar con CSS
multimedia 1 - internet y sitios web
reglas básicas
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
reglas básicas
JERARQUÍAautor - usuario - navegador
<h1>Hola</h1>
viernes 26 de agosto de 2011
multimedia 1 - internet y sitios web
reglas básicas
JERARQUÍAautor - usuario - navegador
<h1>Hola</h1>
Hola
viernes 26 de agosto de 2011
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
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
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
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
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
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
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
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
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
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
multimedia 1 - internet y sitios web
contenedores
viernes 26 de agosto de 2011
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
<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
multimedia 1 - internet y sitios web
imaginemos los divs como cajas
viernes 26 de agosto de 2011
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
multimedia 1 - internet y sitios web
veamos algo mas gráfico
viernes 26 de agosto de 2011
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
multimedia 1 - internet y sitios web
menu
banner
cuerpo
footer
}
}
}
viernes 26 de agosto de 2011
<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
multimedia 1 - internet y sitios web
si pasamos esto a CSS
viernes 26 de agosto de 2011
#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
floatclear
multimedia 1 - internet y sitios web
2 atributos básicos
viernes 26 de agosto de 2011
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
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
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
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
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
Recommended