Sobre este taller

Para este taller usamos la variante, con el ancho descrito como porcentaje. También utilizamos la técnica "Faux columns".

El código fuente se ordena de manera que en la primera parte aparece un simple logo (cabecera). Más tarde, una categoría de menú (mainmenu) incorporado, que se encuentra bajo la cabecera . Se sigue el texto (contenido) y el menú lateral (columna izquierda), que a su vez, están incluidos en un contenedor (mainbox). Para concluir, el teaser (columna derecha) y el  pie. Todo el diseño está gestionado por un recipiente (envoltura) cerrado, por ejemplo, con una anchura total y centrado.

Código fuente HTML


<html>
<head>...</head>
<body>

<div id="wrapper">
   <div id="header">
      <h1>LOGO / HEADER</h1>
   </div>
   
   <div id="mainmenu">
      <ul>
      <li>Entrada de menú</li>
      </ul>
   </div>

   <div id="mainbox">
      <div id="content">
         <h2>Título</h2>
         <p>Bloque de texto</p>
      </div>
      <div id="linkespalte">
         <ul>
         <li>Página de menú en form de lista</li>
         </ul>
      </div>
   </div>

   <div id="rechtespalte">
      <p>El Teaser</p>
   </div>

   <div id="footer">
      <p>FOOTER</p>
   </div>
</div>
 
</body>
</html>

Datos CSS

Básicamente, el archivo main.css de referencia contiene las dos instrucciones para importar los estilos reales:

@import url(layout.css);
@import url(formate.css);

Diseño básico para el taller || Diseño, Versión 1.0

Índice Capítulo 6
Contenido material adicional