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:
Mozilla
Firefox: el navegador que vamos a usar.
Firebug:
un complemento de Mozilla Firefox.
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:
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.
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.
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.
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.
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.
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
Comentarios
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.
Querias la capa A a la izquierda, y se te ha quedado a la derecha.
Un saludo!
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
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
#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
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
dentro del archivo.css
* {
padding: 0;
margin: 0 auto;
}
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.
Gracias
Mi email: aceitunero@hotmail.com
O mejor puedes publicarlo aquí y el resto de los usuarios podrán participar, ;-)
Un saludo
Antonio
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
Saludos
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
Publicar un comentario
Dejanos tu opinión o comentario, entre todos podemos aprender más sobre los temas que se tratan en este Blog. No te olvides seguidme en Twitter, YouTube o Facebook. Muchas gracias por tu tiempo. 👋😎