Proposta de disseny d'una maqueta o organització visual en dues columnes

Al llarg dels mòduls anteriors s'ha anat veient quins són els diferents elements XHTML i les propietats CSS que permeten definir una representació visual separada de l'estrucutra del document web. En aquest mòdul ja s'ha avançat la informació necessària per donar l'últim pas: crear l'esquema (layout) o maquetació del document web i deixar enrere, definitivament, la pràctica de la maquetació amb taules anidades.

En aquesta pràctica s'elaborarà un exemple de maquetació simple en dues columnes, una de més extensió, per al contingut, i un menú lateral, per a la navegació. Es definirà també una capçalera que inclogui el títol del document i finalment, un peu de pàgina.

Veieu l'esquema:

Esquema visual

Esquema visual

A la pràctica 1 del mòdul 2 es va parlar de l'element div com a divisor o contenidor de parts del codi del document. La seva finalitat és la de proporcionar una agrupació estructurada de les parts significatives del document.

Prenent com a base la distribució anterior, es pot descriure la primera organització del document de la següent manera:

<div id="capcalera">
	<!--  contingut de la capçalera  (logo, títol, navegació interna,...)-->
</div>

<div id="lateral">
   <!-- contingut del menú lateral (enllaços d'interès, informació,...) -->
   
</div>

<div id="contingut">
	<!-- contingut (el contingut de la pàgina) -->
</div>

<div id="peu">
	<!--  contingut del peu de pàgina  (informació sobre drets d'autoria, crèdits, aspectes legals)-->
</div>

Obriu l'arxiu layout1.html. Trobareu ja preparada l'estructura XHTML i la declaració dels selectors. A l'arxiu layout2.html s'ha afegit el contingut de les diferents seccions.

Esquema visual 2

Esquema visual bàsic

De moment us heu de centrar únicament en la maquetació. Abans de continuar, assignareu un mínim d'estil a les diferents divisions del document. Assigneu un fons i un color de text diferent per a cada grup. Aquest recurs visual us ajudarà i guiarà en la definició de la maqueta. Un cop que la tingueu definida, procedireu a modificar els seus valors, per ajustar-los de manera coherent a l'estil visual que voleu aconseguir.

#capcalera {
	background-color: #8989ff;
	color: #feff89;
}

#lateral {
	background-color: #ffcc89;
	color: #88bcff;
}

#contingut {
	background-color: #fff;
	color: #333;
}

#peu {
	background-color: #709c34;
	color: #fff;
}
Un cop definits el fons i el color de cada grup, determineu que l'amplada total del document sigui de 800 píxels i que quedi sempre centrat en pantalla. Per fer-ho, afegiu la següent regla al cos del document: 
body {
	margin:0 auto;
	width: 800px;
}

Podeu veure el resultat obrint al navegador l'arxiu layout3.html.

Esquema visual 2

Esquema visual bàsic

El següent pas serà dessignar l'amplada total de les dues divisions centrals, la del contingut i la de navegació lateral. A l'exemple que s'està treballant s'ha optat, tal com podeu veure a l'esquema, per una amplada del 75% per a la divisió del contingut i el 25% restant, per a la navegació lateral. Veieu, doncs, que s'han utilitzat percentatges com a valor d'amplada (width):

#lateral {
	background-color: #ffcc89;
	color: #88bcff;
	width: 25%;
}

#contingut {
	background-color: #fff;
	color: #333;
	width: 75%;
}

Ara només caldrà ubicar l'espai limitat per la caixa de navegació lateral a la dreta i, la caixa de contingut , a la seva esquerra. La propietat "float: right;" associada a la caixa de navegació lateral obligarà a aquesta a ubicar-se a l'extrem dret del flux normal dels elements i permet que, a la seva esquerra, la resta d'elements segueixin el flux normal de posicionament al voltant de l'element flotant.

S'ha afegit al selector #peu la propietat "clear: right", per eliminar l'efecte flotant, que pugui tenir sobre aquest, l'element de navegació lateral. 

#lateral {
	background-color: #ffcc89;
	color: #88bcff;
	width: 25%;
	float: right;
}

#contingut {
	background-color: #fff;
	color: #333;
	width: 75%;
}

#peu {
	background-color: #709c34;
	color: #fff;
	clear: right;
}

Veieu l'arxiu layout4.html:

Esquema visual 3

Esquema visual bàsic

Un cop arribats aquí, només us caldrà anar afegint els estils a cada un dels elements (de bloc i en línia) de la pàgina. Si obriu l'arxiu layout5.html, veureu un exemple fet a partir de la base que heu anat treballant en aquesta pràctica.

Esquema visual 3

Esquema visual final

Consideracions finals

Algunes de les modificacions que s'han fet per anar-li donant l'aspecte visual desitjat, són les següents:

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0