Este documento presenta los pasos para maquetar una página web utilizando CSS externo. Describe 9 pasos para codificar las diferentes secciones y elementos de la página en el archivo CSS externo como el cuerpo, cabecera, capas 2-5. Luego, en los pasos 8-9, se codifica el archivo HTML para enlazarlo con el CSS y visualizar el resultado final en el navegador.

1. “Año de la diversificación productiva y del fortalecimiento de la educación”
INSTITUTO DE EDUCACIÓN SUPERIOR
TECNOLÓGICO PRIVADO
“TECNOTRONIC”
COMPUTACIÓN E INFORMÁTICA
UNIDAD DIDACTICA : DISEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : COILA FLORES, Yurema Lucero.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015

2. VISIÓN
En el 2018, El IESTP TECNOTRONIC es un Modelo Empresarial
Educativo de Excelencia Académica que lidera la
Educación Superior Tecnológica de la región sur del país.
MISIÓN
Formar profesionales competitivos en un ambiente de
Emprendimiento, Innovación, Eficiencia y Valores.

3. Ejercicio 2: Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:Trabajaremos en el archivo CSS.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°2:codificamos los siguientes códigos para el cuerpo asignado que es
lo siguiente.
#cuerpo{
width:900px;
background:#00C;
margin:auto;
}

4. Paso N°3:codificamos los siguientes códigos para la cabecera asignado que
es lo siguiente.
#cabecera{
width:895px;
height:200px;
background-color:#09F;
border:solid #F00;
}
Paso N°4:codificamos los siguientes códigos para la capa 2 asignado que es
lo siguiente.
#capa2{
width:200px;
height:300px;
background:#F60;
border:solid #F00;
}
Paso N°5:codificamos los siguientes códigos para la capa 3 asignado que es
lo siguiente.
#capa3{
width:200px;
height:300px;
background:#F33;
border:solid #F00;
}

5. Paso N°6:codificamos los siguientes códigos para la capa 4 asignado que es
lo siguiente.
#capa4{
left:430px;
top:213px;
position:absolute;
width:690px;
height:607px;
background:#F63;
border:solid #F00;
}
Paso N°7:codificamos los siguientes códigos para la capa 5 asignado que es
lo siguiente.
#capa5{
width:895px;
height:70px;
background-color:#F06;
border:solid #F00;
}

6. Paso N°8:Trabajaremos en el archivo HTML.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°9:codificamos los siguientes códigos para la práctica 2 (HTML)
asignado que es lo siguiente.

7. Paso N° 10:Es el resultado ejecutado en el navegador (ejercicio N°2)