Maquetación Con CSS y Divs
3
Maquetación con CSS y Divs La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad. En su momento se maquetaba con tablas, practica que no recomiendo en absoluto. Las tablas son para presentar datos de una manera ordenada, no para máquetar una página web. Hoy voy a explicar el modelo de columnas con un menú superior. El resultado final sería algo parecido a esto: Maquetación Web Como se puede observar el diseño est formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese que están contenidos en un “contenedor” (de color lila). Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación os copio el código del fichero HTML. Es realmente sencillo. Hay seis divs de los cuales uno contiene a los otros cinco. y dos de ellos están flotando a la derecha y a la izquierda respectivamente.
-
Upload
opositorgonzalez -
Category
Documents
-
view
4 -
download
1
description
Maquetación Con CSS y Divs
Transcript of Maquetación Con CSS y Divs
Maquetación con CSS y Divs
La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad. En su momento se maquetaba con tablas, practica que no recomiendo en absoluto. Las tablas son para presentar datos de una manera ordenada, no para máquetar una página web.
Hoy voy a explicar el modelo de columnas con un menú superior. El resultado final sería algo parecido a esto:
Maquetación Web
Como se puede observar el diseño est formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese que están contenidos en un “contenedor” (de color lila).
Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación os copio el código del fichero HTML. Es realmente sencillo. Hay seis divs de los cuales uno contiene a los otros cinco. y dos de ellos están flotando a la derecha y a la izquierda respectivamente.
El código del fichero HTML sería el siguiente:
<html><head>
<title>Maquetacion con CSS y Divs</title><link rel="stylesheet" href="maquetacion.css"
type="text/css"/></head><body>
<div id ="contenedor"><div id ="cabecera"></div><div id ="menu"></div><div id ="izquierda"></div><div id ="derecha"></div><div id ="pie"></div>
</div></body>
</html>
El código del CSS es el que tiene más sustancia.
#contenedor{ background-color:#F4ABF2; border:2px solid #FF0000;}#cabecera{ background-color:#E5BC7A; height:20%;}#menu{ height:10%; background-color:#C8CACC;}#izquierda{ height:50%; background-color:#BDD2EF; float:left; width:50%;}#derecha{ height:50%; background-color:#DAF7E2; float:right; width:50%;}#pie{ height:20%; background-color:#D3D1C1; clear:both;}
El clear nos coloca el div pie debajo de los dos que están flotando. Y arrastra al contenedor hasta el final de lo contenido
Nótese que hay medidas, tanto de alto como de ancho para poder probar el código y ver que maqueta correctamente.
