03 HTML - CSS Maquetar Con "Div" - Recursos Didácticos

Recursos didcticos
El ESFUERZO es el precio para APRENDER

03 HTML CSS maquetar con div
Maquetar o estructurar una pgina Web consiste en organizar su contenido para que cada elemento
aparezca en el lugar y con el formato que queramos.
El formato (los estilos) los dejamos para CSS y la estructura la organizamos en HTML.
Lo habitual es crear una hoja denominada plantilla.html con la estructura deseada y otra con los
estilos plantilla.css, para que sirvan de base al desarrollo de todas las pginas posteriores.
HTML Estructura.
Que elementos bsicos suele contener una pgina Web?.
Generalmente, tienen:
Una cabecera
En la que aparecer un logotipo y un ttulo o lema.
Un men de navegacin
Para acceder fcilmente a cualquier pgina del sitio Web.
Un cuerpo principal
Donde aparecer el contenido de la pgina.
Un pie
En el que se colocarn referencias del autor, copiright, etc.
03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma...
1 de 9 02/10/2013 2:28
Opcionalmente podrn incluir:
Una zona de anuncios
Para avisos sobre temas relacionados.
Una zona de enlaces
En la que se muestran Webs recomendadas.
etc, etc.
La siguiente gura muestra un posible diseo.
(hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/html-css-maquetar-
con-div/htmlestructurapweb/)
La zona denominada Global contiene a todas las divisiones y a su vez, est contenida en el body
de la pgina
Vamos a ver como conseguimos esta estructura utilizando la etiqueta div
Cdigo HTML:
<body>
<div id="global">
<div id="cabecera">
Contenido de la cabecera.
</div>
<div id="navegacion">
Contenido de men de navegacin.
</div>
<div id="principal">
Contenido de la pgina.
</div>
<div class="anuncios1">
Contenido de la zona de anuncios 1, ya que podemos poner ms.
</div>
<div id="pie">
Contenido del pie
</div>
</div>
</body>
Ten esto en cuenta. Si el bloque es nico para la pgina, lo que ocurre con: global, cabecera,
navegacin, principal y pie, la etiqueta div va acompaada de la palabra clave id. En caso
2 de 9 02/10/2013 2:28
contrario, deber incorporar la palabra clave class. Esto lo veremos cuando demos formato en CSS.
Por supuesto, dentro de cada bloque podrs crear cuantas divisiones necesites utilizando de nuevo
<div > </div> dentro del bloque correspondiente.
Crea un archivo plantilla.html con el contenido anterior y el resto de etiquetas necesarias, o puedes
copiar y pegar el que te indico a continuacin. Lo ejecutas y compruebas su resultado. Vers que lo
nico que aparecen son los textos en cada lnea. El formato se lo vamos a empezar a aplicar.
Cdigo HTML:
<html>
<head>
<title>Creando divisiones</title>
</head>
<body>
<div id="global">
<div id="cabecera">
</div>
</div>
</div>
</div>
<div id="pie">
Contenido del pie
</div>
</div>
</body>
</html>
CSS Formato (estilos).
Creadas las zonas vamos a darle formatos individualizados con CSS.
En primer lugar tenemos que crear el archivo .css y escribir las declaraciones, pero antes debemos
comprender los parmetros que rigen a cada bloque, as como las unidades de medida que se
emplearn para establecerlos, como poner colores, etc., etc..
3 de 9 02/10/2013 2:28
Conceptos del bloque.
La estructura de cualquier elemento considerado un bloque tienen los siguientes componentes.
(hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/html-css-maquetar-
con-div/htmlbloques/)
Contenido.
Este espacio ser el que albergar, en su totalidad, tanto al texto como a las imgenes que insertemos
entre las etiquetas <div > y </div> as como a cualquier otro bloque que pertenezca a l.
Ancho y alto (width height).
Especican exactamente las dimensiones que tendr la supercie que alberga el CONTENIDO.
Borde (border).
Determina la decoracin del bloque; es decir, si est recuadrado o no con lneas, en su totalidad o solo
en algunos de sus lados, si son visibles o no, el tipo de lnea que emplea, el color, etc.
Relleno (padding).
Consiste en el espacio que intermedia entre el borde y el contenido. Podramos interpretarlo como los
mrgenes interiores. Se controlan los cuatro a la vez, o de forma individualizada.
Margen (margin).
Controla la distancia entre el borde de nuestro bloque y los elementos del bloque contenedor; es decir,
del bloque en el que est introducido nuestro bloque en cuestin, dado que los bloques pueden ser ho
o padres de otros. Para no hacernos un lo, los margenes de toda la vida, el espacio en el que no
podemos escribir nada. Para diferenciarlo del padding, podramos decir que son los mrgenes
exteriores.
4 de 9 02/10/2013 2:28
Otras propiedades de nuestro bloque a tener en cuenta son:
Imagen de fondo (backgroun-image).
Muestra, como fondo, la imagen a la que se enlace, teniendo en cuenta que rellenar la supercie que
abarque tanto el CONTENIDO como el PADDING, si es que el tamao de la imagen da para ello,
aunque esto se podra solucionar.
Color de fondo (background-color).
Muestra, como fondo, el color que se le asigne. Abarca la misma supercie que la imagen de fondo,
pero por detrs de sta si estn los dos elementos establecidos. La imagen de fondo con zonas
transparentes permitirn ver el color de fondo, dado que ste quedara como la capa de nivel inferior.
Unidades de medida.
Para establecer las dimensiones, debemos utilizar las unidades.
Existen de tres tipos: absolutas (in, cm, mm, pt, pc), porcentajes (x%), y relativas (px, em, ex). De entre
ellas, emplearemos las relativas, ya que se adaptarn mejor a todos los dispositivos que visualicen las
pginas.
px = pxel (relativa a los puntos de la pantalla en la que se visualice la pgina).
em = ancho de la letra M mayscula de la fuente que se est utilizando.
ex = alto de la letra x de la fuente que se est utilizando.
Colores.
La forma ms extendida consiste en establecerlo por medio del cdigo RGB
rojo-verde-azul (Red-Green-Blue) en hexadecimal, anteponindole el smbolo #. Por ejemplo, el rojo
puro sera #FF0000.
Cualquier programa de edicin de imgenes puede facilitarnos la paleta de colores y su equivalente en
hexadecimal, el cual trasladaramos a nuestro cdigo.
Es posible establecer 17 colores indicando su nombre, pero est opcin, por su limitacin no se suele
emplear.
5 de 9 02/10/2013 2:28
Otra opcin consiste en utilizar una aplicacin especca como la que se puede encontrar en este blog
(hp://www.trucosblogger.com/2007/06/generador-hex-color.html).
Reglas CSS.
El formato que emplearemos para establecer los estilos de cada elemento se ajusta al siguiente patrn.
(hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/css-pwebreglacss/)
El selector puede corresponder a:
.- Una etiqueta convencional del HTML a la que le queremos modicar algn parmetro.
En este caso, el selector se corresponde exactamente con el nombre de la etiqueta; por ejemplo, h1,
que hacer referencia a los texto de ttulo.
.- Una etiqueta div acompaada por el identicador id, que maniesta la existencia nica de esa
etiqueta en toda la pgina Web; por ejemplo <div id=cabecera> </div>, ya que solo habr una
cabecera.
En este caso el selector ser el nombre de la etiqueta precedida por el smbolo #; por ejemplo
#cabecera.
.- Una etiqueta div acompaada por el identicador class, que indica la existencia nica o mltiple
de esa etiqueta en toda la pgina Web; por ejemplo <div class=anuncios1> </div>.
En este caso el selector ser el nombre de la etiqueta precedida por el smbolo .; por
ejemplo .anuncios1.
Las referencias y valores aplicables segn es stndar ocial CSS2 se pueden consultar aqu
(hp://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/), y aqu (hp://www.w3.org/TR/CSS21/) las
especicaciones. En este otro lugar (hp://www.librosweb.es/), puedes descargarte algunos libros
gratuitos en formato .pdf relacionados con el tema.
Vamos a iniciar una archivo de estilos para establecer dimensiones colores y posiciones a algunos de
nuestros bloques.
Cdigo CSS:
6 de 9 02/10/2013 2:28
body {
backgroundcolor: #E2F47C;
}
#global {
width:800px; height:800px;
margin: 0 auto 0 auto;
backgroundcolor: #ffbbbb;
}
.anuncios1 {
width:150px;
backgroundcolor: #B4ff68;
float: right;
}
Como podemos observar, entre los smbolos de llave van colocadas todas las declaraciones que se le
aplicarn a cada bloque, eso s, nalizadas con un punto y coma ; ya que de lo contrario tendramos
problemas.
Por ltimo, lo que nos queda es enlazar los dos archivos. Para ello, el archivo plantilla.html, debe
contener la siguiente lnea
<link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
dentro de las etiqueta <head> </head>
Los archivos nales, con algunos aadidos quedaran as:
Cdigo HTML: plantilla.html
7 de 9 02/10/2013 2:28
<!DOCTYPE html> <! SIN ESTO, NO RECONOCE html5>
<html lang="es">
<head>
<meta charset="utf8" />
<link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
<title>Recursos didcticos(jbfb)</title>
<! Insertar aqu mas Metatags>
</head>
<body>
<div id="global">
<div id="cabecera">
</div>
</div>
<p> prrafo vacio</P>
</div>
</div>
<div id="pie">
Contenido del pie
</div>
</div>
</body>
</html>
Cdigo CSS: plantilla.css
8 de 9 02/10/2013 2:28
body {
backgroundcolor: #E2F47C;
}
#global {
width:800px; height:800px;
backgroundcolor: #ffbbbb;
}
#cabecera {
width:800px;
backgroundcolor: #B40068;
}
#navegacion {
width:780px;
backgroundcolor: #B4CD00;
}
#principal {
width:650px;
backgroundcolor: #ffCD68;
float: left;
}
.anuncios1 {
width:150px;
backgroundcolor: #B4ff68;
float: right;
}
#pie {
width:800px;
backgroundcolor: #B4C355;
float: left;
}
Cpialos , archvalos y comprueba su resultado haciendo doble clic sobre el archivo plantilla.html. Si
quieres, pinchando aqu (hp://joaquin.16mb.com/ejemplosdelblog/maquetado.html)puedes ver el
resultado antes de hacerlo t.
A partir de ahora lo que tendramos que hacer es completar el contenido de cada bloque, y por
supuesto, cambiar los colores.

Continuar
Blog de WordPress.com. The Paperpunch Theme.
9 de 9 02/10/2013 2:28

03 HTML - CSS Maquetar Con "Div" - Recursos Didácticos

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

03 HTML - CSS Maquetar Con "Div" - Recursos Didácticos

Încărcat de

Drepturi de autor:

Formate disponibile

Recursos didcticos

El ESFUERZO es el precio para APRENDER

S-ar putea să vă placă și