Disposición de las partes principales de una web
Vamos a ver mediante un ejemplo como se hace la maquetación o disposición principal de una web.
Realizaremos una de las más típicas y a la vez más completas, se trata de una maquetación a tres columnas, que también tendrá una cabecera y un pie de página.
Buscando partes únicas en el documento
Sobre un boceto de la estructura general, similar a la imagen 4.0, lo primero que debemos hacer es ir dando nombre a aquellas partes principales irrepetibles del documento, aquellas que solo figurarán una vez.
Cabecera: Lo lógico será nombrar así a la cabecera de la web, el primero de los fragmentos principales que nos encontramos, y puesto que solo habrá una cabecera en cada documento, podremos identificarlo de forma única mediante un selector “id”, con el nombre “cabecera” con el que luego identificaremos al fragmento de bloque “div” en el xhtml.
Por lo tanto ya tenemos nuestro primer selector en la hoja de estilo.
#cabecera { }
Aun no le daremos reglas de estilo, por el momento seguiremos buscando más partes de la web que podamos identificar del mismo modo.
Cuerpo: La siguiente podría ser el cuerpo central del documento, también irrepetible y por lo tanto también lo identificaremos mediante un selector y atributo “id”.
#cuerpo { }
Pie: Este será el elemento de bloque inferior dela web, también irrepetible y también identificado mediante un “id”.
Aun quedan más partes únicas, por ejemplo las tres columnas que irán dentro del “cuerpo”, por lo tanto crearemos los selectores para las columnas izquierda, central, y derecha
#colIzq { }
#colCentr { }
#colDrch { }
Podemos ir creando simultáneamente a la hoja de estilo, el xhtml correspondiente, por lo tanto creamos un nuevo documento, comprobamos que tiene el DTD adecuado para el xhtml, le damos el título conveniente y lo guardamos por ejemplo como la página principal ( index.html ).
Seguidamente vinculamos la hoja de estilo en la que ya tenemos creados los primeros selectores, y pasamos a insertar los fragmentos de bloque <div> correspondientes a las partes principales de la web.
Identificamos individualmente cada <div> mediante el atributo id con el nombre del selector correspondiente <div id="nombre"...
Inicialmente creamos las tres partes principales, cabecera, cuerpo, y pie, por lo tanto en el body del documento tendríamos que tener lo siguiente:
<body> <div id="cabecera">cabecera</div> <div id="cuerpo">cuerpo</div> <div id="pie">pie</div> </body>
A continuación creamos las tres columnas que irán dentro del fragmento cuerpo.
En este punto debemos tener en cuenta las propiedades position, y float que tendrán las columnas, ya que de este aspecto depende el orden en que debemos insertar los correspondientes “div” para cada una de ellas.
Hay varias formas de maquetar esto, pero teniendo en cuenta que conocer bien el comportamiento de float requiere practicar bastante, seguiremos practicando con esta propiedad, así que maquetaremos el conjunto utilizando la propiedad float, y propiedades de posición principalmente estática .
Por lo tanto haremos flotante a la izquierda la columna izquierda, estática la central, y flotante a la derecha la columna derecha. Según esto debemos saber que el orden lógico en el que se deben insertar los div en el documento es izquierdo, derecho y central, para que ninguna de las columnas quede por debajo del contenido central.
<body>
<div id="cabecera">contenido para id "cabecera"</div>
<div id="cuerpo">contenido para id "cuerpo"
<div id="colIzq">contenido para id "colIzq"</div>
<div id="columCentr">contenido para id "columCentr"</div>
<div id="colDrch">contenido para id "colDrch"</div>
</div>
<div id="pie">contenido para id "pie"</div>
</body>
Referencia visual mediante color de fondo
Al principio una buena costumbre es darle un color de fondo distinto a cada parte principal de la web aunque no sea la estética definitiva de la misma.
Esto se hace para tener una referencia visual de lo que estamos haciendo en cada momento, sobre todo cuando estamos dando proporciones al conjunto, lo que evitará que llevemos sorpresas desagradables a mitad de camino, como problemas de alineación, o que una caja invada un espacio que no habíamos previsto para ella.
Próximos a finalizar, cuando ya apenas haya que tocar los estilos, podremos cambiar los colores de fondo a los del diseño definitivo.
Dando proporciones al conjunto
Es el momento de dar dimensiones, o mas bien proporciones ya que no debemos olvidar la importancia de las unidades relativas y porcentuales para que el conjunto sea mucho más accesible.
Una vez que hemos dado color de fondo a las partes, ya tenemos una referencia visual del ancho de cada parte, veremos entonces que la mayoría no hace falta tocarlas ya que por defecto están bien, ocupan el ancho total.
En cambio otras como las columnas hace falta modificarlas ya que solo ocuparán un porcentaje del ancho total.
Una vez proporcionadas las columnas tal como se indica en la imagen 4.2, ya tenemos la base de una maquetación líquida, adaptable a casi cualquier resolución, hasta el punto de que una sola hoja de estilo servirá para presentar la web en la mayoría de dispositivos.
Los porcentajes indicados en la imagen son orientativos, pudiendo adaptarlos a las necesidades de nuestra web.
A partir de este punto en el que ya tenemos definidas y proporcionadas las partes principales de la web, la mayoría de componentes restantes se harán mediante selectores de elemento, de clase, y contextuales.
Debemos ir añadiendo el resto de componentes de la web, como encabezados, listas, párrafos, menús de navegación vertical, horizontal, etc , recordar como se han explicado las barras de navegación horizontal en el apartado de la propiedad float.
Controlando el contenido líquido
Es importante saber controlar el comportamiento del contenido líquido, habrá ocasiones en que nos interese que se comporte como tal, habrá otras como hemos visto en la propiedad clear en que nos interese más un comportamiento de bloque, y otras simplemente nos interesará controlar el desbordamiento líquido del contenido, pero manteniendo los contenedores y contenidos alineados, veamos un ejemplo de esto último.
Respecto a la estructura principal de la web, solo nos queda una cosa por resolver, el desbordamiento del contenido central hacia los laterales una vez se supera el alto de las columnas, introduciéndose el contenido central debajo de estas tal como se muestra en la imagen siguiente.
Solución mediante relleno lateral
Hay varias soluciones posibles, la que veremos aquí consiste en ajustar el relleno lateral de la columna central igualándolo a la anchura de las respectivas columnas laterales.
Si tenemos una columna flotante derecha del 22% de ancho, daremos ese porcentaje de relleno derecho a la columna central, y haremos lo mismo respecto al relleno izquierdo y la columna izquierda. De este modo aunque el contenido central rebase la altura de las columnas, nunca se saldrá de los limites de la columna central.
A partir de este punto ya contamos con una base de conocimiento suficiente para resolver los principales contratiempos e imprevistos que irán surgiendo a medida que nuestra web se vaya haciendo más compleja.
Algunos consejos prácticos
Es importante mantener una hoja de estilo muy clara e intuitiva, con suficientes comentarios, y es esencial dar significado a los nombres de selectores. Dentro de una semana es posible que recordemos la utilidad de un selector llamado “#columCentral”, pero no recordemos para que era el llamado “#rd132”
Si un elemento se comporta de un modo no previsto, si lo que nos muestra el navegador no concuerda con las reglas de su selector, generalmente debemos buscar la explicación en otro selector relacionado con el primero por herencia o contextualidad ya que sus reglas de estilo pueden afectar al elemento actual. Este tipo de casos empiezan a ser más frecuentes a medida que nuestra web se va completando y complicando.
Cada vez se trabaja más para todo tipo de dispositivos con sus diferentes resoluciones y capacidades de procesamiento, y por lo tanto los contenidos rígidos, posiciones y dimensiones absolutas, y elementos excesivamente anidados, no son las prácticas más idóneas.