Este documento presenta las instrucciones paso a paso para crear el diseño de una página web utilizando CSS externo. Explica 21 pasos que incluyen codificar varias clases y IDs de CSS para dar formato a diferentes secciones como header, nav, article, y footer, y luego enlazar la hoja de estilos CSS al documento HTML para mostrar el diseño completo en el navegador.

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

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. Ejercicio 4: Maquete utilizando CSS externo.
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. 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;
}

5. 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;
}
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;

6. 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;
}
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{

7. 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;
}
Paso N°12:codificamos los siguientes códigos css.
#actile3{
width: 140px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: 226px;
margin: 20px;

8. 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;
}
Paso N°15:codificamos los siguientes códigos css.
#cuadrado1{
width: 370px;

9. height: 20px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 52px;
}
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; }

10. 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{
background:#666;
width: 725px;
height: 90px;
border: 1px solid #000;
position: absolute;
left: -10px;
margin: 20px;
top: 622px;
}
Paso N°20:codificamos los siguientes
códigos de HTML.
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css"type="text/css">

11. <title>Documento sin título</title>
</head>
<body>
<div id="header">
<div id="nav">nav</div>
header
</div>
<div id="main">
<div id="nav1"> nav</div>
<div id="nav2">aside </div>
section
</div>
<div id="main1">
<div id="capa1">header</div>
<div id="arcticle">
<div id="actile1">header</div>
<div id="actile2">div </div>
<div id="actile3">aside</div>
<div id="arcticle4">p </div>
article
</div>
<div id="cuadrado">
<div id="cuadrado1">header</div>
<div id="cuadrado2">div</div>
<div id="cuadrado3">p</div>
article
</div>
<div id="art">footer</div>
section
</div>
<div id="header1">footer</div>
</body></html>

12. Paso N°21:ahí nos muestra el resultado ejecutado en el navegador del
(ejercicio N°4)