El documento describe los pasos para maquetar una página web utilizando hojas de estilo en cascada (CSS) externas. El estudiante Mery Quispe Apaza explica 21 pasos para codificar las diferentes secciones y elementos de la página usando selectores de CSS y declaraciones para definir sus propiedades como anchura, altura, bordes, posición y colores. El objetivo es aplicar el CSS externo a la estructura HTML propuesta para diseñar la interfaz de la página.

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 : QUISPE APAZA, Mery.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015

2. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 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.
Ejercicio 4: Maquete utilizando CSS externo.

3. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 3
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°4
Paso N°2:codificamos los siguientes códigos css.
#header{
width:725px;
height:100px;
border: solid 1px #000;
background-color: #999;
text-align: center;
}

4. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 4
Paso N°3:codificamos los siguientes códigos css.
#nav{
background: #999;
border: solid 1px #000;
width: 700px;
height: 30px;
position: absolute;
left: 1px;
margin: 20px;
top: 47px;
text-align: center;
}
Paso N°4:codificamos los siguientes códigos css.
#main {
width:250px;
height:500px;
margin: 5px;
padding: 6px;
border:1px solid #8888bb;
background: #ccccff;
float: left;
}
Paso N°5:codificamos los siguientes códigos css.
#nav1{
background: #666;
width: 210px;
height: 240px;
border: 1px solid #000;
position: absolute;
left: 23px;
margin: 20px;
top: 123px;
}

5. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 5
Paso N°6:codificamos los siguientes códigos css.
#nav2{
background: #FFF;
width: 170px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 45px;
margin: 20px;
top: 381px;
}
Paso N°7:codificamos los siguientes códigos css.
#main1 {
width:420px;
height:490px;
margin: 5px;
padding: 12px;
border:1px solid #8888bb;
background: #ccccff;
float: left;
}
Paso N°8:codificamos los
siguientes códigos css.
#capa1{
width: 400px;
height: 40px;
border: 1px solid #000;
position: absolute;
left: 282px;
margin: 20px;
top: 122px;
}

6. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 6
Paso N°9:codificamos los siguientes códigos css.
#arcticle{
width: 400px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 281px;
margin: 20px;
top: 204px;
}
Paso N°10:codificamos los siguientes códigos css.
#actile1{
width: 370px;
height: 30px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 7px;
}
Paso N°11:codificamos los siguientes códigos css.
#actile2{
width: 210px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 55px;
}

7. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 7
Paso N°12:codificamos los siguientes códigos css.
#actile3{
width: 140px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: 226px;
margin: 20px;
top: 55px;
}
Paso N°13:codificamos los siguientes códigos css.
#arcticle4{
width: 370px;
height: 30px;
border: 1px solid #000;
position: absolute;
left: -4px;
margin: 20px;
top: 89px;
}
Paso N°14:codificamos los siguientes códigos css.
#cuadrado{
width: 400px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 285px;
margin: 20px;
top: 379px;
}

8. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 8
Paso N°15:codificamos los siguientes códigos css.
#cuadrado1{
width: 370px;
height: 30px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 7px;
}
Paso N°16:codificamos los siguientes códigos css.
#cuadrado2{
width: 370px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 52px;
}
Paso N°17:codificamos los siguientes códigos css.
#cuadrado3{
width: 370px;
height: 30px;
border: 1px solid #000;
position: absolute;
left: -6px;
margin: 20px;
top: 87px;
}

9. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 9
Paso N°18:codificamos los siguientes códigos css.
#art{
width: 400px;
height: 40px;
border: 1px solid #000;
position: absolute;
left: 287px;
margin: 20px;
top: 556px;
}
Paso N°19:codificamos los siguientes códigos css.
#header1{
width: 725px;
height: 90px;
border: 1px solid #000;
position: absolute;
left: -10px;
margin: 20px;
top: 622px;
}

10. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 10
Paso N°20:codificamos los siguientes códigos para la práctica 2 (HTML)
asignado que es lo siguiente.
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="css.css"type="text/css" />
</head><body>
<div id="header">
<div id="nav"> </div>
</div>
<div id="main">
<div id="nav1"> </div>
<div id="nav2"> </div>
</div>
<div id="main1">
<div id="capa1"></div>
<div id="arcticle">
<div id="actile1"></div>
<div id="actile2"> </div>
<div id="actile3"></div>
<div id="arcticle4"> </div>
</div>
<div id="cuadrado">
<div id="cuadrado1"></div>
<div id="cuadrado2"></div>
<div id="cuadrado3"></div>
</div>
<div id="art"></div>
</div>
<div id="header1"></div>
</body></html>

11. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 11

12. COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 12
Paso N°21:ahí nos muestra el resultado ejecutado en el navegador del
(ejercicio N°4)