El documento presenta un ejercicio de diseño web utilizando CSS externo. Explica los 9 pasos para crear la estructura básica de una página que incluye un encabezado, tres capas laterales y un pie de página. Primero se definen los estilos CSS para cada sección y luego se agregan las divisiones correspondientes dentro del cuerpo de la página HTML. El objetivo es maquetar la página aplicando posicionamiento y diseño con hojas de estilo externas.

1. Diseñoweb
VIRGINIA HANCCOMORMONTOY
Año de la Promoción de la Industria Responsable y del Compromiso Climático”
INSTITUTO DE EDUCACION SUPERIOR TECNOLOGICO PRIVADO
“TECNOTRONIC”
ESPECIALIDAD:
COMPUTACION E INFORMATICA:
UNIDAD DIDÁCTICA:
DISEÑO WEB
DOCENTE:
PROF: HANCCO QUISPE, Elar E.
PERTENECE A:
HANCCO MORMONTOY,VirginiaDemecia
SEMESTRE:
V
SECCION:
A
JULIACA-PUNO-PERÚ
2015

2. Diseñoweb
VIRGINIA HANCCOMORMONTOY
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ñoweb
VIRGINIA HANCCOMORMONTOY
Ejercicio1: Maquete utilizando CSS externo.
Primero abrimos dreamweaver.
Paso N°1: abrimos nuevo HTML
Paso N° 2: Lo primero hacerlo la header.
ponemos el siguiente código:
<style type="text/css">
Luego asemos los siguientes códigos para la header los cuales son:

4. Diseñoweb
VIRGINIA HANCCOMORMONTOY
#header{
width:725px;
height:100px;
border: solid 1px#000;
background-color: #03F;
top:30px:;
text-align: center;
}
Paso N° 3: Ahora hacerlo capa1 (capa1) son los siguientes códigos.
#capa1{
width:180px;
height:400px;
background:#339;
border:solid1px #009;
padding:5px 7px 10px 15px;
padding:5px;
float:left;
text-align:center;
}
Paso N° 4: Ahora hacerlo la capa 2 (capa 2) siguientes códigos.

5. Diseñoweb
VIRGINIA HANCCOMORMONTOY
#capa2{
width:330px;
height:400px;
background:#C06;
border:solid1px #000;
padding:5px 7px 10px 15px;
padding:5px;
float:left;
text-align:center;
}
Paso N° 5: Ahora hacerlo el capa 3 (capa 3) siguientes códigos.
#capa3{
width:180px;
height:400px;
background:#96C;
border:solid1px #000;
padding:5px 7px 10px 15px;
padding:5px;
float:left;
text-align:center;
}
Paso N° 6: Ahora hacerlo el cuadro donde ira del footer, sonlos siguientes
códigos.

6. Diseñoweb
VIRGINIA HANCCOMORMONTOY
#footer{
width:725px;
height:100px;
border:solid 1px #06C;
background-color:#936;
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.
<divid="header">
HEADER
</div>
<divid="capa1">
NAVIGATION
</div>
<divid="capa2">
CONTENT
</div>
<divid="capa3">
LINKLIST
</div>
<divid="footer">
FOOTER
</div>
</body>
</html>

7. Diseñoweb
VIRGINIA HANCCOMORMONTOY
Paso N° 9: ahora veamos el resultado del ejercicio numero 1: