Diagramación en web

CSS
Instrucciones que debe seguir un navegador para
presentar la información

taller_media
viernes 26 de agosto de 2011

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

multimedia 1 - internet y sitios web

contenido

maquetación

SINTAXIS
COMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR


css ordena la visualización del contenido

velocidad de carga
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.


tipos de selectores
etiquetas: nativas de HTML
identidad: posicionamiento, un elemento
clase: múltiples elementos


Selector: Etiqueta

¿Dónde?

body
{
background-color:#FFFFFF;
}


documento
body
{
background-color:#FFFFFF;
}

etiqueta

Selector: Identiﬁcador individual

¿Dónde?

#encabezado
{
background-color:#666666;
}

1
vez por documento


documento
body
{
background-color:#666;
}

id

Selector: Identiﬁcador común

¿Dónde?

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

+1
vez por documento


documento
body
{
background-color:#00FFCC;
}

class

reglas básicas
para trabajar con CSS


JERARQUÍA
autor - usuario - navegador

<h1>Hola</h1>

reglas básicas

JERARQUÍA Hola

<h1>Hola</h1>

reglas básicas

JERARQUÍA Hola

<h1>Hola</h1> HTML

h1

CSS
{
color:red;
}

reglas básicas

ESPECÍFICO
GENÉRICO
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>

reglas básicas

ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>

reglas básicas

ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>

body

CSS
{
color:red;
}

reglas básicas

ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>

body
{
color:red;
}

CSS
p
{
color:blue;
}

reglas básicas

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

BODY
{

}
color:red;
CSS

reglas básicas

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


contenedores

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


<body>
<div>

etiquetas de deﬁnición de un contenedor dentro de un
documento html

</div>
</body>

imaginemos los divs
como cajas


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

- Contenedor principal
- Cabezal
- Cuerpo
- Pie

estructura

veamos algo mas
gráﬁco


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

estructura

} menu

} banner

} cuerpo

footer


si pasamos esto a
CSS


#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;
}


2 atributos básicos
ﬂoat
clear

float
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.


FLOAT 1
<div id=“caja1”>1 </div> 2
3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>

#caja1
{

border-color:red
ﬂoat:left; CSS
}

reglas básicas

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

#caja1
{

border-color:red
ﬂoat:left; CSS
}

reglas básicas

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

#caja1
{
border-color:red
ﬂoat:left;

CSS
}
#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}

reglas básicas

FLOAT 1 2 3


#caja1
{
border-color:red
ﬂoat:left;

CSS
}
#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}

reglas básicas

Diagramación en web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Similar a Diagramación en web

Similar a Diagramación en web (14)

Más de iConstruye

Más de iConstruye (20)

Diagramación en web