miércoles, 22 de abril de 2015

Estructurar una página web con DIVs

1.- El resultado que se espera obtener en este ejercicio es el siguiente:



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:




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:




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 estilo CSS es el siguiente:



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