“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
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.
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 3
EJERCICIO 1
Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:abrimos nuevo CSS.
Paso N°2:codificamos los siguientes códigos css.
#header{
width:725px;
height:100px;
border: solid 1px #000;
background-color: #6FF;
top:30px:;
text-align: center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 4
Paso N°3:codificamos los siguientes códigos css.
#capa1{
width:180px;
height:400px;
background: #9C3;
border: solid 1px #009;
padding: 5px 7px 10px 15px;
padding: 5px;
float:left;
text-align: center;
}
Paso N°4:codificamos los siguientes códigos css.
#capa2{
width:330px;
height:400px;
background: #6FF;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
float: left ;
text-align:center;
}
Paso N°5:codificamos los siguientes códigos css.
#capa3{
width:180px;
height:400px;
background: #669;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
float: left;
text-align:center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 5
Paso N°6:codificamos los siguientes códigos css.
#footer{
width:725px;
height:100px;
border:solid 1px #000;
background-color:#FCC;
float:left;
text-align:center;
}
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.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAQUETADO</title>
<link rel="stylesheet" href="css1.css" type="text/css" />
</head><body>
<div id="header">
HEADER
</div>
<div id="capa1">
NAVIGATION
</div>
<div id="capa2">
CONTENT
</div>
<div id="capa3">
LINKLIST
</div>
<div id="footer">
FOOTER
</div></body></html>
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 6
paso N° 9: El resultado del ejercicio N° 1 ejecutado en el navegador.

Ejercicio 1 maquete utilizando css externo

  • 1.
    “Año de ladiversificació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 QUISPEAPAZA, 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.
  • 3.
    COMPUTACION E INFORMATICA QUISPEAPAZA, Mery Página 3 EJERCICIO 1 Maquete utilizando CSS externo. Primero lo tenemos abierto el programa dreamweavern para así podertrabajar, los pasos sonlos siguientes. Paso N°1:abrimos nuevo CSS. Paso N°2:codificamos los siguientes códigos css. #header{ width:725px; height:100px; border: solid 1px #000; background-color: #6FF; top:30px:; text-align: center; }
  • 4.
    COMPUTACION E INFORMATICA QUISPEAPAZA, Mery Página 4 Paso N°3:codificamos los siguientes códigos css. #capa1{ width:180px; height:400px; background: #9C3; border: solid 1px #009; padding: 5px 7px 10px 15px; padding: 5px; float:left; text-align: center; } Paso N°4:codificamos los siguientes códigos css. #capa2{ width:330px; height:400px; background: #6FF; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; float: left ; text-align:center; } Paso N°5:codificamos los siguientes códigos css. #capa3{ width:180px; height:400px; background: #669; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; float: left; text-align:center; }
  • 5.
    COMPUTACION E INFORMATICA QUISPEAPAZA, Mery Página 5 Paso N°6:codificamos los siguientes códigos css. #footer{ width:725px; height:100px; border:solid 1px #000; background-color:#FCC; float:left; text-align:center; } 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. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MAQUETADO</title> <link rel="stylesheet" href="css1.css" type="text/css" /> </head><body> <div id="header"> HEADER </div> <div id="capa1"> NAVIGATION </div> <div id="capa2"> CONTENT </div> <div id="capa3"> LINKLIST </div> <div id="footer"> FOOTER </div></body></html>
  • 6.
    COMPUTACION E INFORMATICA QUISPEAPAZA, Mery Página 6 paso N° 9: El resultado del ejercicio N° 1 ejecutado en el navegador.