6 de mayo de 2011

Maquetación de Páginas Web con Capas (Div)


En la actualidad la tendencia del diseño de las páginas Web es de realizar las mediante capas (div), al contrario de lo que sucedía hace unos años, las páginas Web se diseñaban mediante tablas (table), y en ellas se iba insertado las imágenes, textos o otras tablas, es decir, todo el contenido de la página Web, para diseñar la estructura de la página Web, esto suponía que a la hora de tener que reestructurar el diseño de la página Web hacía que fuese más fácil hacer de nuevo la Web, que buscar cada uno de los elementos y etiquetas que formaban la Web.

Para evitar todo esto se utiliza las capas y las hojas de estilo, que permiten estructurar la página de una forma cómoda y fácil, lo que permite tener mejor controladas las distintas partes de la estructura de nuestra página.


La estructura de una página Web suele estar formada por cuatro partes principales, que se pueden llamar, por ejemplo: contenedor, cabecera, cuerpo y pie. El contenedor contiene, como su nombre indica, todo el contenido de la página Web, es decir, la cabecera, el cuerpo y el pie, en esta parte se dará el ancho y el alto que va a tener la Web, en la cabecera estará el banner o el logotipo de la entidad con un ancho que no sea superior al que se le haya dado al contenedor y la altura que deseemos, en la parte del cuerpo se pondrá los contenidos de página Web, en esta parte podemos subdividirla en varias columnas y filas pero teniendo en cuenta los dicho anteriormente, que las suma del ancho las columnas y el la suma de la altura de las filas no supere las dimensiones del contenedor, finalmente en la parte del pie se suele poner información de contacto de la entidad, un banner, avisos legales, etc...

Cómo se Maqueta una página Web con Capas (Div)

Veamos como se maqueta una página Web y la creación de una plantilla con HTML y CSS, explicando los conceptos principales de cada paso y este ejemplo explica como se maqueta una página Web con capas (div) y CSS.

Lo primero tenemos que tener instalado son tres herramientas fundamentales:
  1. Mozilla Firefox: el navegador que vamos a usar.
  2. Firebug: un complemento de Mozilla Firefox.
  3. HTML Validator: otro complemento de Mozilla Firefox.
Una vez que tenemos estas herramientas, tenemos que tener claro en cuantas partes vamos a dividir nuestra página Web, y cada una de estas parte van a ser las distintas capas que conformarán la plantilla de la página Web, un truco para que nos resulte luego más cómodo diseñar la plantilla de página Web es hacer un dibujo que nos sirva de diagrama de las distintas partes que tiene la platilla, y así se verá mejor las distintas capas que tendremos que ir creando para la confección del diseño de la plantilla.

La distribución de la Web de este proyecto sería la siguiente:





Una vez que tengamos la idea general de como va a estar distribuida la plantilla de la Web comencemos por crear un documento CSS con el block de notas o el programa que vayamos a usar y le damos un nombre con la extensión *.css, por ejemplo: style.css.

Una vez que tenemos el documento empezamos por orden a darle propiedades a los estilos que van a tener las distintas capas:

  1. El Contenedor de la plantilla es donde incluiremos todo el contenido de la plantilla, que en la hoja de estilos del proyecto se llama:

#contenedor {width: 850px; height: auto;}

Un ancho de 850 pixeles y de alto automático.

  1. La Cabecera de la plantilla es donde incluiremos una imagen y el logotipo (banner), que en la hoja de estilos del proyecto se llama:

#cabecera { width: 850px; height: 150px; }

Un ancho de 850 pixeles y de alto 150 pixeles.

  1. El Menú de la plantilla es donde contendrá los distintos botones que se usarán para ir de una página a otra de la Web y se llamará:

#menu {width: 850px; height: 50px;}

Un ancho de 850 pixeles y de alto 50 pixeles.

  1. Sidebar-a que se usarán para mostrar los textos y comendatarios de la Web y se llamará:

#sidebar-a { width: 500px; height: 400px;}

Un ancho de 500pixeles y de alto 400 pixeles.

  1. Sidebar-b que se usarán para mostrar las imágenes o otros banner o un Google Maps y se llamará:

#sidebar-b { width: 350px; height:400px;}

Un ancho de 350 pixeles y de alto 400 pixeles.

  1. Pie o Footer que se usarán para mostrar información de la entidad y otros botones de navegación por la Web y se llamará:

#footer {width: 850px; height: 80px;}

Un ancho de 850 pixeles y de alto 80 pixeles.

Ahora creamos el documento HTML y lo llamaremos plantilla.html, y la usaremos para luego ser renombrado con el nombre de los distintas páginas Web que contenga el sitio Web.
Al documento HTML, enlazamos nuestra hoja de estilos (CSS) con la siguiente línea de código que se insertará dentro del <head> del documento de la siguiente forma:

<head>
Etiquetas de titulo, meta…
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

También podríamos importar el documento de la hoja de estilos (CSS) con la siguiente línea y en el mismo lugar:

<style type="text/css" media="all">@import "css/style.css";</style>

Entre la etiqueta de <body> del documento HTML, escribiremos las siguientes líneas de código:

<div id="contenedor">
<div id="cabecera">Cabecera del banner</div>
<div id="menu">Botonera</div>
<div id="sidebar-a">Columna A</div>
<div id=" sidebar-b "> Columna B </div>
<div id="footer">Pie de la página</div>
</div>

Una vez creado estos pasos vemos como queda nuestra plantilla pero antes tendremos que darle un color de fondo a cada capa, con la etiqueta background-color, para que podamos ver la posición en la que se quedan las capas:




Como observas en la imagen por naturaleza las capas se colocan automáticamente una debajo de la otra, por lo que hay que obligar a las capas que nos interesen a que floten una a lado de la otra, que es realmente lo que nos interesa, para que nuestra plantilla Web tenga un aspecto más visible y aceptable. Para ello tenemos que añadir a la hoja de estilo la etiqueta float:

#sidebar-a {background-color: #CC0099; float: right; width: 350px; height: 400px ;}

Básicamente la etiqueta float es una etiqueta con la propiedad que hace que la capa flote a la derecha o a la izquierda, en el caso de nuestra plantilla hacemos que la capa sidebar-a flote a la izquierda mejorando notablemente el aspecto de la plantilla, pero tenemos que avisar a la capa que hay por debajo, que en nuestro caso es footer, que rompa o limpie la orden del elemento que flota, esta etiqueta es clear, y que tiene la propiedad de posicionar la capa siguiente debajo de la capa anterior que tenía la propiedad float y podemos indicar a la etiqueta clear que afecte sólo a los elementos que floten a la derecha (left), a la izquierda (right) o a ambas lados (both).

En este caso usaremos clear: both, por lo que el estilo (CSS) que define a la capa footer quedaría de la siguiente forma:

#footer {clear:both; background-color:#330000; width: 850px; height: 80px;}




Ya puedes ver en la imagen el aspecto de nuestra plantilla ha mejorado notablemente, y lo único que nos queda por hacer es quitar los distintos colores de fondo de las capas para ir añadiendo los estilos de los textos, alineaciones, márgenes, posicionamientos, etc, que irán conformando la estructura de nuestra plantilla, pero el trabajo principal o el esqueleto de nuestra plantilla está realizado, ahora sólo queda ir puliendo los detalles de forma y contenido de la plantilla.

Espero que os sea de ayuda a todos un saludo:

Antonio

20 comentarios:

  1. Hola me ha gustado mucho.

    En el paso 6 cambia:
    Un ancho de 300 pixeles y de alto 80 pixeles.

    Y pon en su lugar:
    Un ancho de 850 pixeles y de alto 80 pixeles.

    Me sera de ayuda, siempre he tenido problemas con la altura, ahora veo que la capa "madre" debe de ser auto, e ir dando altura a las internas al gusto.

    Muchas gracias y un saludo.

    ResponderEliminar
  2. Uhm, una cosa mas, el float lo tienes que hacer a la izquierda, por que se te han quedado las capas centrales al reves de como las querias.

    Querias la capa A a la izquierda, y se te ha quedado a la derecha.

    Un saludo!

    ResponderEliminar
  3. En el paso 6 cambia es verdad he puesto:
    Un ancho de 300 pixeles y de alto 80 pixeles.

    Pero en realidad es: ancho 850 pixeles y 80 pixeles de alto como se muestre en el código del paso 6:
    #footer {width: 850px; height: 80px;}

    Gracias ya lo arreglo.

    Es cierto la capa del contenedor tiene que ser auto en la altura (height: auto)para que la capa se vaya ampliando automaticamente.

    Gracias por tu comentario y un saludo.

    Antonio

    ResponderEliminar
  4. El float lo tengo a la izquierda, porque sólo tengo dos columnas y así sólo le doy la propiedad a un sola capa, si lo hiciese a la derecha la propiedad float: left tendría que afectar a tantas capas como quiero que floten, te pongo un ejemplo:

    Tenemos 2 capas para el cuerpo que se llaman: A y B

    Pues bien la propiedad float: left; tiene que afectar a las dos capas, ejemplo:

    #A, #B{
    float: left;
    }

    Pues bien la propiedad float es a la izquierda solo afecta a la capa que queremos que flote, ejemplo:

    #B{
    float: right;
    }

    Porque una de ellas ya por su naturaleza mantiene su posición y lo que hacemos es mover la otra a la izquierda, ok

    No se te olvide poner a la capa de pie la propiedad de clear: both; para indicar que se rompe la propiedad de flotación.

    Espero que te haya aclarado un poco las ideas, y gracias por comentar.

    Un saludo;

    Antonio

    ResponderEliminar
  5. ya cree las capas como estan en el ejemplo, per a la hora de motrar enun sitio web no salen bien salen horribles, salen todo debaratado, si hiso ese ejemplo tambien tuvo k haberlo vereficado en sitios web.. ¿XQ SERA ESE PROBLEMA?,,..........MMMMMMMMMMMM

    ResponderEliminar
  6. Los estilos del ejemplo está verificados, pero ten en cuenta que si los quieres usar para crear una maqueta para un sitio Web, falta estilos y propiedades para dar formato, a los textos, la posición de las capas, etc, como por ejemplo:

    #contenedor {
    width: 850px;
    height: auto;
    text-align:center;
    }

    Que lo que haría es que todas las capas queden en el centro...

    Si tienes dudas sobre CSS, te paso un manual de referencia que te será de mucha ayuda:

    http://www.librosweb.es/referencia/css/index.html

    Y perdona por no haber contestado antes. Un saludo:

    Antonio

    ResponderEliminar
  7. Hoy en día las páginas web son más modernas, ya no se hacen con solo tablas ahora la gran mayoría de páginas web se hacen con menús y con divisiones, en algunos sitios web el menú está al lado izquierdo mientras que el contenido y las imágenes están al lado derecho, en otras páginas el menú se ve arriba en tanto que el contenido más las imágenes se ven abajo, aunque vale aclarar que no todas las páginas web cuentan con imágenes. La cuestión del diseño de páginas web es crear un sitio donde el lector pueda comprender con claridad el tema a tratar en el sitio web.

    ResponderEliminar
    Respuestas
    1. Hoy las páginas Web no sólo han dejado de usar las tablas, y usan capas como bien explicas amigo.

      La tendencia del diseño Web, es "Responsive Web Design", que no utiliza en los valores de los atributos de los CSS los pixel, sino usan valores que siempre ha existido pero los diseñadores por comodidad y para no complicarnos la vida haciendo cálculos, nunca hemos usado o apenas usábamos, como son % y em.

      Este nuevo forma de maquetar una Web, es la tendencia que todos buen diseñador tiene que tener en cuenta a la hora de realizar sus proyectos y diseños.

      Un saludo y gracias por tu oponión

      Eliminar
  8. MUCHAS GRACIAS, ME SIRVIO DE MUCHO LA INFORMACION

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentar y por dar tu opinión.

      Eliminar
  9. Muy clarito y detallado todo.Diferencia entre div id y div class. Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias a ti, por comentar tu opinión siempre es agradable un apoyo y palabras de felicitación.

      Eliminar
  10. creo que te falto algo importante, el auto centrado dentro del tema maquetacion web y por ultimo las etiquetas html 5
    dentro del archivo.css
    * {
    padding: 0;
    margin: 0 auto;
    }

    ResponderEliminar
    Respuestas
    1. Cierto pero lo que tu expones sería crear un archivo CSS, para resetar todos las propiedades y valores de las etiquetas de HTML.

      Tengo que reconocer que el artículo está un poco desfasado porque en el se explica como maquetar con HTML4.

      De todas formas tienes mucha razón, es fundamental hacer un archivo CSS, para resetar todas las etiquetas, como por ejemplo y lo digo porque en su día me dio la lata con el Explorer y las imágenes *.PNG:

      img{
      border: none;
      }

      Muchas gracias por tu comentario, un saludo.

      Eliminar
  11. Buenas noches tengo un problema con la capa sidebar-a cuando le doy float:right me va toda a la derecha no queda alineada con las demas y tengo el pie de pagina bien por favor ayuda y para centrar todo que etiqueta pongo
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ruben no tengo problema en ayudarte, pero necesitaría ver el código CSS para ver lo que sucede, ok..

      Mi email: aceitunero@hotmail.com

      O mejor puedes publicarlo aquí y el resto de los usuarios podrán participar, ;-)

      Un saludo

      Antonio

      Eliminar
  12. Hola muy buena explicación, por ultimo como puedo hacer que esta pagina aparezca centrada en la pantalla?

    ResponderEliminar
    Respuestas
    1. Hola amigo:

      Añade el siguiente estilo a la etiqueta div:

      div {
      margin: auto;
      padding: 0;
      }

      Espero que te sea de utilidad y que comentes más dudas o preguntas. Gracias.

      Un saludo

      Eliminar
    2. Gracias por tu respuesta, si funciono, tengo otra pregunta, es necesario maquetar todas las paginas una por una, que llevara una web o solo basta con la maquetacion de la primera (index).

      Saludos

      Eliminar
    3. Perdona que no te haya contestado antes, es que estoy un poco liado, y además no me llego tu pregunta al correo.

      Lo más lógico, es que hagas una maqueta y a partí de esa maqueta, vayas haciendo y añadiendo los CSS, que necesites, sobre todo por el tema de el tiempo, si tienes que ir página por página... ufffff te puedes volver loco...

      Espero que te haya servido de orientación y perdona que haya tardado tanto en contestar.

      Un saludo

      Antonio

      Eliminar

No olvides dejar tu comentario y gracias por tu tiempo ;-)