ejr1

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

2. TECNOTRONIC
2
DISEÑO WEB | APAZA APAZA, ROGELIO
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
3
DISEÑO WEB | APAZA APAZA, ROGELIO
EJERCICIO 1:Maquete utilizando CSS EXTERNO.
Ejecutamos Adobe Dreamweaver CS6.
PASO N°1: abrir nuevo HTML
PASO N° 2: Empezamos por el encabezado.
Escribimos el siguiente código:
<style type="text/css">
Luego escribimos los siguientes códigos para la cabecera los cuales son:
#cabecera{
background:#F03;
border:groove;
width:1000px;
height:150px;
margin:auto;
}

4. TECNOTRONIC
4
DISEÑO WEB | APAZA APAZA, ROGELIO
PASO N° 3: Ahora escribimos el código para el margen izquierdo son los siguientes:
#margen-izquierdo{
background: #F93;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 172px;
margin: auto;
top: 162px;
}
Paso N° 4: Ahora escribimos el codigo (margen-centro).
#margen-centro{
background: #F63;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 505px;
margin: auto;
top: 162px;
}
PASO N° 5: Ahora escribimos el codigo (margen-derecho).
#margen-derecho{
background: #F90;
border: groove;
width: 330px;
height: 500px;
position: absolute;
left: 839px;
margin: auto;
top: 163px;
}
PASO N° 6: Ahora hacerlo el cuadro donde ira del footer.
#footer{
background: #F33;
border: groove;
width: 1000px;
height: 100px;
position: absolute;
left: 171px;
margin: auto;
top: 666px; }

5. TECNOTRONIC
5
DISEÑO WEB | APAZA APAZA, ROGELIO
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>
PASO N° 9: Ahora veremos el resultado final: