Академический Документы
Профессиональный Документы
Культура Документы
La antigua tcnica para maquetar una pgina, se basaba en tablas. Sin duda, en su
momento fu una herramienta til. Sin embargo, a medida que la Web a venido
evolucionando, esta misma tcnica a sido la culpable de muchos problemas para los
webmaster.
Google no indexa de igual manera las pginas con estructuras basadas en tablas.
Ahora, que ya conocemos todas estan desventajas de usar maquetacin basada en tablas,
podemos darnos cuenta que, comparada con la tcnica de maquetacin con DIVs, las
tablas son mas bien un estorbo en la optimizacin de nuestros sitios. Para maquetar
correctamente con DIVs debemos hacer uso extenso de CSS, algo que tal vez no nos
guste mucho, pero que reducir el tiempo de desarrollo considerablemente. Antes de
comenzar, debemos:
Para solucionar esto, el contenedor deber tener como atributo DISPLAY: TABLE
(generalmente). Esto har que el tamao del contenedor se adapte a sus elementos.
Adems, lo mejor ser que trabajemos con anchos fijos y no en porcentaje (aunque, con
un conocimiento ms amplio, yo lo recomendar), en pixeles, por que los exploradores
trabajan con algunas variaciones en las medidas (en especial Internet Explorer, que
"hasta pierde pixeles") el renderizado ser ms parecido de explorador a explorador.
Una recomendacin adicional, sera usar siempre clases CSS para cada seccin y
bloque, tratando de ir generalizando con los atributos para optimizar la pgina. Pero si
los atributos son pocos solamente en esa pgina se va a trabajar con un elemento con
atributos nicos, podra personalizarse colocando los atributos y valores CSS, dentro de
una parmetro STYLE, no olvidando utilizar estilos por defecto.
Ahora que ya sabemos lo esencial, vamos con el primer ejemplo, resolviendo dudas,
conforme avanzamos.
Actualizacin:
Como les he comentado, todos los ejemplos los he probado en Internet Explorer 6,
Mozilla Firefox 2 y Opera 9 (adicional, comento que ya los he visto en Safari 3 beta
para Windows). Al parecer, podra ocurrir un problema de renderizado con Internet
Explorer 5.5 o anterior. Las soluciones estaran en:
este ltimo dejar una porcin de su contenido por debajo del anterior. Debemos cuidar,
sobre todo los anchos totales de los elementos por linea. Recordemos que cuando
aplicamos valores a los margenes, el explorador suma el ancho fijo ms el margen; igual
que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que
cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamao
fijo del objeto.
Hay un ultimo valor CSS que esta en el ltimo elemento DIV. Se trata de CLEAR, que
se encarga de limpiar el comportamiento del DIV anterior para que no afecte a este.
<div
style
<div
<div
<div
<div
</div>
<div
<div
<div
<div
<div
<div
</div>
style
style
style
style
style
style
=
=
=
=
=
=
"display:
table;
"float:
left;
height:
250px;
"float: right; height: 70px;
"float: right; height: 173px;
"float: right; height: 50px;
"float: right; height: 115px;
width:
width:
width:
width:
width:
width:
500px;">
78px;"></div>
413px;"></div>
150px;"></div>
255px;"></div>
255px;"></div>
Aqu les dejo el cdigo de este ejemplo para que lo estudien. El punto de esta
maquetacin es saber que los bloques que se colocan en flotante, si no tienen un alto
igual, causaran que los siguientes caigan a la altura del ms alto. Esto puede ser una
ventaja o desventaja.
<div
<div
style
=
"display:
table;
style
=
"float:
left;
<div style = "float: left; height: 100px;
<div style = "float: left; height: 143px;
</div>
<div style = "float: left; height: 250px;
<div style = "float: left; height: 150px;
<div style = "float: right; height: 50px;
<div style = "float: right; height: 194px;
<div style = "float: right; height: 194px;
<div style = "float: right; height: 93px;
</div>
width:
500px;">
width:
104px;">
width: 102px;"></div>
width: 102px;"></div>
width:
width:
width:
width:
width:
width:
100px;"></div>
100px;"></div>
175px;"></div>
80px;"></div>
87px;"></div>
100px;"></div>
Solo como nota adicional, respecto a lo conveniente de maquetar con DIVs, es que
todos los ejemplos que les mostr en este tutorial fueron probados en: Mozilla Firefox
2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la misma
estructura.