Este documento presenta el ejercicio número 2 de diseño web de un estudiante. Explica los 10 pasos para maquetar una página web utilizando hojas de estilo en cascada (CSS) externas. Estos incluyen codificar estilos para el cuerpo, cabecera, y cinco capas diferentes y luego enlazar el archivo CSS al archivo HTML. El documento también incluye la visión y misión de la institución educativa.

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 : DISSEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : CCALLA HUANCA, Diego Carlos.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015

2. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
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. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
Ejercicio 2: Maquete utilizando CSS externo.
Primero abrimos el programa dreamweavern para así podertrabajar, los pasos
son los siguientes.
Paso N°1:Trabajaremos en el archivo CSS.
Para esto usaremos los siguientes códigos.
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. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
Paso N°3:codificamos los siguientes códigos para la cabecera asignado que
es lo siguiente.
#capa1{
position: absolute;
width: 150px;
height: 200px;
border: solid 1px #000;
background-color: #FCC;
text-align: center;
float: left;
}
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;
}

5. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
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;
}
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. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
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. DISEÑO WEB CCALLA HUANCA, DIEGO CARLOS
DISEÑO WEB
Paso N° 10:Es el resultado ejecutado presionamos F12 (ejercicio N°2)