Licenciada
Páginas: 8 (1910 palabras)
Publicado: 13 de marzo de 2013
MAQUETACIÓN CON DIVS
En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menú, etc.).
Hasta hace unos años la única manera de maquetar una página web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de maquetación fue evolucionando con los años hastallegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
CAPAS, LAYOUTS, O DIVS
Las capas, layouts o divs es lo mismo con distinto nombre, para tener un concepto mental más fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos meter lo que queramos dentro (imágenes, texto, animaciones, otro bloque, o todo almismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo la estructura que queremos.
Veamos un ejemplo gráfico:
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
* Capa 1: es la capa principal y contenedora
* Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)
*Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto mas en detalle).
CREANDO NUESTRO PRIMER DIV
La forma de crear una capa DIV es así:
<div> Aquí van los elementos </div>
Un código HTML quedaría así:
<html>
<head>
<title>Curso de maquetacion CSS</title>
</head>
<body>
<div>¡Esta es mi primer capa!</div>
</body>
</html>
DANDO FORMATO A UN DIV
Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:
<div id="capa1">¡Esta es mi primercapa!</div>
Como podemos ver, a esta capa le pusimos "capa1" de nombre, ahora solo nos falta crear la hoja de estilos y llamarlo de esta manera:
#capa1{
background-color:green;
}
esto hará que el color de fondo de esa capa sea verde, en la siguiente imagen se puede apreciar:
Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para hacerloagregaremos el atributo width a #capa1 de la siguiente forma:
#capa1{
width:210px;
background-color:green;
}
¿Que pasa si queremos que la capa sea mas alta?
Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta forma:
#capa1{
width:210px;
height:300px;
background-color:green;
}
FLOTAR Y ACOMODAR UN DIV
La maquetaciónpor divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float.
Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores:
* none: no flota la capa.
* left: flota la capa hacia la izquierda.
* right: flota la capa hacia la derecha.
Siguiendo con el ejemplo de lalección anterior, vamos a crear otra capa #capa2, le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas hacia la izquierda, quedaría así:
#capa1{
width:210px;
height:300px;
background-color:green;
float:left;
}
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
}
y el código HTML sería este:
<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa1">¡Esta es mi primer capa!</div>
<div id="capa2">¡Esta es mi segunda capa!</div>
</body>
</html>
Nota: asegúrate de escribir bien los ID, tanto en la...
En pocas palabras, maquetar una pagina web es pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menú, etc.).
Hasta hace unos años la única manera de maquetar una página web era mediante tablas HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de maquetación fue evolucionando con los años hastallegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
CAPAS, LAYOUTS, O DIVS
Las capas, layouts o divs es lo mismo con distinto nombre, para tener un concepto mental más fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos meter lo que queramos dentro (imágenes, texto, animaciones, otro bloque, o todo almismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo la estructura que queremos.
Veamos un ejemplo gráfico:
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
* Capa 1: es la capa principal y contenedora
* Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)
*Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima (float:left; margin: 10px; ya veremos esto mas en detalle).
CREANDO NUESTRO PRIMER DIV
La forma de crear una capa DIV es así:
<div> Aquí van los elementos </div>
Un código HTML quedaría así:
<html>
<head>
<title>Curso de maquetacion CSS</title>
</head>
<body>
<div>¡Esta es mi primer capa!</div>
</body>
</html>
DANDO FORMATO A UN DIV
Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:
<div id="capa1">¡Esta es mi primercapa!</div>
Como podemos ver, a esta capa le pusimos "capa1" de nombre, ahora solo nos falta crear la hoja de estilos y llamarlo de esta manera:
#capa1{
background-color:green;
}
esto hará que el color de fondo de esa capa sea verde, en la siguiente imagen se puede apreciar:
Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para hacerloagregaremos el atributo width a #capa1 de la siguiente forma:
#capa1{
width:210px;
background-color:green;
}
¿Que pasa si queremos que la capa sea mas alta?
Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta forma:
#capa1{
width:210px;
height:300px;
background-color:green;
}
FLOTAR Y ACOMODAR UN DIV
La maquetaciónpor divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float.
Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores:
* none: no flota la capa.
* left: flota la capa hacia la izquierda.
* right: flota la capa hacia la derecha.
Siguiendo con el ejemplo de lalección anterior, vamos a crear otra capa #capa2, le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas hacia la izquierda, quedaría así:
#capa1{
width:210px;
height:300px;
background-color:green;
float:left;
}
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
}
y el código HTML sería este:
<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa1">¡Esta es mi primer capa!</div>
<div id="capa2">¡Esta es mi segunda capa!</div>
</body>
</html>
Nota: asegúrate de escribir bien los ID, tanto en la...
Leer documento completo
Regístrate para leer el documento completo.