El documento presenta el resumen de un proyecto de diseño web realizado por un estudiante. El proyecto consistió en maquetar una página web utilizando CSS externo, dividiendo la página en secciones como cabecera, navegación, contenido, lista de enlaces y pie de página. El estudiante siguió 9 pasos para crear la estructura básica de la página y el diseño de cada sección a través de código CSS.

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. TECNOTRONIC CCALLA HUANCA, DIEGO CARLOS
TECNOTRONIC
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. TECNOTRONIC CCALLA HUANCA, DIEGO CARLOS
TECNOTRONIC
Ejercicio 1: Maquete utilizando CSS externo.
Primero abrimos dreamweaver y asemos lo siguientes.
Paso N°1:abrimos nuevo HTML
Paso N° 2: Lo primero hacerlo la cabecera.
ponemos el siguiente código:
<style type="text/css">
Luego asemos los siguientes códigos para la cabecera los cuales son:
#cabecera{
background:#F03;
border:groove;
width:1000px;
height:150px;
margin:auto;
}

4. TECNOTRONIC CCALLA HUANCA, DIEGO CARLOS
TECNOTRONIC
Paso N° 3: Ahora hacerlo el cuadro izquierdo (margen izquierdo) son los
siguientes códigos.
#margen-izquierdo{
background: #F93;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 172px;
margin: auto;
top: 162px;
}
Paso N° 4: Ahora hacerlo el cuadro centro (margen-centro) siguientes
códigos.
#margen-centro{
background: #F63;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 505px;
margin: auto;
top: 162px;
}
Paso N° 5: Ahora hacerlo el cuadro derecho (margen-derecho) siguientes
códigos.
#margen-derecho{
background: #F90;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 839px;
margin: auto;
top: 163px;
}

5. TECNOTRONIC CCALLA HUANCA, DIEGO CARLOS
TECNOTRONIC
Paso N° 6: Ahora hacerlo el cuadro donde ira del footer, sonlos siguientes
códigos.
#footer{
background: #F33;
border: groove;
width: 1000px;
height: 100px;
position: absolute;
left: 171px;
margin: auto;
top: 666px;
}
Paso N° 7: Ahora cerrarlo el cogido del (style) para ello es el siguiente
código.
</style>
Paso N° 8: Ahora colocamos los siguientes códigos dentro de (body), para
finalizar el primer ejercicio.
<div id="cabecera"> HEADER</div>
<div id="margen-izquierdo"> NAVIGATION</div>
<div id="margen-centro"> CONTENT</div>
<div id="margen-derecho">LINKLIST</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>

6. TECNOTRONIC CCALLA HUANCA, DIEGO CARLOS
TECNOTRONIC
Paso N° 9: ahora veamos el resultado del ejercicio numero 1: