Maquetarcss 151019105647 Lva1 App6892

Aplicaciones Web
ESTILOS CSS
IES Augustbriga 2 SMR Aplicaciones Web rmonago
MAQUETAR CON CSS

Ventajas:
Separacin del contenido de la pgina y el
diseo o estilo.
Ahorro en la transferencia, la declaracin de

estilos se almacenan en la cache del navegador y
slo se transfiere la primera vez que se visita la
pgina.
Facilidad para cambiar el aspecto de la pgina

sin necesidad de tocar el cdigo HTML
NUESTRA MAQUETA
CREAR LA PGINA HTML

Como primer paso, en la cabecera <head> del
documento HTML, enlazaremos con una hoja de estilos
externa.
<head>
<title>Aplicaciones Web</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>
CREAR LA PGINA HTML

Para el cuerpo de la pgina, definimos un color de fondo. Tambin
los mrgenes, la alineacin, adems de otros atributos, que luego
heredarn otros elementos, como el tipo de letra o el color del
texto.
BODY {
background : #C0D9D9;
font : 8pt Verdana, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
CAPA CONTENEDORA
Generalmente, se utiliza una capa principal, a la que hemos
llamado contenedor. Dentro de esta capa se colocan todos los
elementos que va a tener la pgina.
<div id="contenedor">
</div>
En el css
#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}
CAPAS
HTML DE LAS CAPAS

<html>
<head> <meta charset="utf-8">
<link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>
<body>
<div id="borde">
<div id="contenedor">
<div id="cabecera">cabecera</div>
<div id="navegador">navegador</div>
<div id="cuerpo> cuerpo
<div id="navabajo> navegador bajo</div>
</div>
<div id="lateral>lateral</div>
<div id="pie>Pie</div>
</div></div>
</body>
</html>
CABECERA DE LA PGINA
La imagen de la parte de arriba de la pgina la vamos a
colocar en un nico archivo grfico.
<div id="cabecera">
<img src=cabecera.jpg" width="700" height="106"
alt=Aplicaciones web" border="0">
</div>
En el CSS
#cabecera{
height : 106px;
width: 700px;
}
BARRA DE NAVEGACIN
La capa utilizada para definir la barra de
navegacin horizontal que hay debajo de la
cabecera.
<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">HTML</a> |
<a href="#" class="enlacenav">CSS</a> |
<a href="#" class="enlacenav">JavaScript</a>
</div>
BARRA DE NAVEGACIN
En el CSS.
#navegador{
background : #F5F4C3;
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE,

A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}
CONTENIDO DE PAGINA
<div id="cuerpo">
<h1>Ttulo de la pgina</h1>
<p> En este artculo vamos a conocer la maquetacin de paginas
utilizando Hojas de estilos en cascada </p>
<p> Como se ha podido aprender </p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>
CONTENIDO DE PAGINA
#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}
H1{ font-size: 12pt; }
#navabajo{ font-weight : bold; }

CAPA LATERAL
El contenido que vamos a situar dentro de esta capa lo veremos
por partes.
<div id="lateral">
... contenido lateral...
</div>
Los estilos son los siguientes:
#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}
CAPA LATERAL
Cada caja tendr este cdigo HTML, compuesto por un titulo y un
contenido de la caja:
<h2 class="titlat">Titulo de la caja</h2>
<div id="idunico" class="cuerpolateral">
Contenido de la caja
</div>
Los estilos:
.titlat{
background-color:#68729E; .cuerpolateral{
color:#ffffff; padding: 5px 4px 13px 10px;
font-size:8pt; }
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
PIE DE PGINA
<div id="pie">
Pruebas de maquetacin CSS
</div>
Esta capa tiene el siguiente estilo definido:
#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}
RESULTADO

Maquetarcss 151019105647 Lva1 App6892

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Maquetarcss 151019105647 Lva1 App6892

Uploaded by

Copyright:

Available Formats

Aplicaciones Web

MAQUETAR CON CSS

Ahorro en la transferencia, la declaracin de

Facilidad para cambiar el aspecto de la pgina

CREAR LA PGINA HTML

CREAR LA PGINA HTML

HTML DE LAS CAPAS

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE,

H1{ font-size: 12pt; }

#navabajo{ font-weight : bold; }

Los estilos son los siguientes:

Esta capa tiene el siguiente estilo definido:

You might also like