OBS: El fondo gris corresponde al DIV Contenedor que contiene todas las capas, el siguiente es el código fuente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maquetación 1</title>
<style type="text/css">
#contenedor {
position: absolute;
width: 1024px;
height: 750px;
z-index: 1;
left: 12%;
top: 0px;
background-color: #999999;
}
#cabecera {
position: absolute;
width: 1024px;
height: 150px;
z-index: 1;
left: 0px;
top: 0px;
background-color: #FF9900;
}
#Menu {
position: absolute;
width: 1024px;
height: 30px;
z-index: 2;
top: 150px;
left: 0px;
background-color: #33CCFF;
}
#ContenidoA {
position: absolute;
width: 800px;
height: 500px;
z-index: 3;
left: 10px;
top: 190px;
background-color: #FFFFFF;
}
#ContenidoB {
position: absolute;
width: 195px;
height: 500px;
z-index: 4;
left: 820px;
top: 190px;
background-color: #66FF99;
}
#Pie {
position: absolute;
width: 1024px;
height: 35px;
z-index: 5;
top: 704px;
background-color: #9900FF;
left: 0px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="Menu"></div>
<div id="ContenidoA"></div>
<div id="ContenidoB"></div>
<div id="Pie"></div>
</div>
</body>
</html>
2.- Crearemos un nuevo archivo HTML y lo nombraremos "Maquetacion.html".
3.- Abriremos el panel de inserción:
4.- Insertaremos un DIV utilizando la siguiente opción arrastrando al documento:
5.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El estilo CSS es el siguiente:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
6.- Seleccionamos el DIV Contenedor e Insertamos otro DIV utilizando la siguiente opción arrastrando al documento:
7.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El estilo CSS es el siguiente:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
8.- Seleccionamos el DIV Contenedor e Insertamos otro DIV utilizando la siguiente opción arrastrando al documento:
9.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El estilo CSS es el siguiente:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
10.- Seleccionamos el DIV Contenedor e Insertamos otro DIV utilizando la siguiente opción arrastrando al documento:
11.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El estilo CSS es el siguiente:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
La vista de código debe ser la siguiente:
12.- Seleccionamos el DIV Contenedor e Insertamos otro DIV utilizando la siguiente opción arrastrando al documento:
13.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El estilo CSS es el siguiente:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
El estilo CSS es el siguiente:
El resultado es el siguiente:
14.- Seleccionamos el DIV Contenedor e Insertamos otro DIV utilizando la siguiente opción arrastrando al documento:
15.- Una vez que esté ubicado en la ventana de documento, lo seleccionamos y agregamos las siguientes propiedades
Lo seleccionamos:
Agregamos las siguientes propiedades:
El resultado es el siguiente:
La vista de código debe ser la siguiente:
OBS podemos ver que el DIV Contenedor contiene a todos los otros DIVs.
No hay comentarios:
Publicar un comentario