Maquetado 04

DICEÑO WEB “I.E.S.T.P TECNOTRONIC”
1ROEDIL MAMANI
COMPUTACIÓN E INFORMÁTICA
GESTIÓN Y APLICACIÓNES PARA INTERNET Y PRODUCCION MULTIMEDIA.
DICEÑO WEB.
DOCENTE : Elar E. HANCCO QUISPE.
ESTUDIANTE : Roedil MAMANI SONCCO.
CICLO ACADÉMICO : V-A
SEMESTRE : 2015-I.
Juliaca - Puno – Perú.2015

2ROEDIL MAMANI
DEDICATORIA
A Dios, por darme salud, amor, y su infinita bondad
para seguir adelante con mis estudios sin rendirme.
A nuestro padres, y hermanos por ser empeñoso,
respetuoso, y no rendirse dando todo por ser el mejor.
(Mamani Soncco, roedil).
A mis compañeros de trabajo quienes me apoyaron y
me ayudaron a elaborar este proyecto
A mi docente, quien es nuestros guía en el aprendizaje,
dándonos los últimos conocimientos para nuestro buen
desenvolvimiento en la sociedad.
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.
VALORES
Trabajo en equipo, Puntualidad, Confianza, Persona, Innovación, Rentabilidad y
Excelencia

3ROEDIL MAMANI
Ejercicio 4: Maquete utilizando CSS externo.
Esteves aremos un maqueta miento completo en un sola capa convarios
campas usando el ancho y largo de cada cuadro y el bordede cada uno y la
posición de los recuadros también usaremos el tamaño del bordey
finalmente usaremos el color de cada cuadrito y los códigos del archivo css
mi estilo.css es :
#cuerpo{
width:900px;
background:#FFF;
margin:auto;
}
#header{
border:solid 3px #999;
height:200px;
padding-top:130px;
background:#36F;
}
#header1{
width:870px;
margin:auto;

4ROEDIL MAMANI
top:130px;
padding:150px 0px 0px 10px;
background:#3FF;
}
#menu1{
height:630px;
width:200px;
position:absolute;
margin:5px 0px 0px 0px;
margin-top:10px;
background:#36F;
}
#menu2{
height:630px;
width:200px;
float:left;
margin: 325px 0px 5px 0px;
}
#menu3{
height:630px;

5ROEDIL MAMANI
width:680px;;
float:right;
margin-top:10px;
background:#36F;
}
#header-a{
border:solid 3px #FFF;
height:40px;
width:640px;
margin:auto;
background:#3FF;
}
#article{
border:solid 3px#000000;
height:200px;
margin-top:60px;
widt: 640px;
background:#3FF;
}
#header-b{

6ROEDIL MAMANI
height:40px;
margin:auto;
background:#3F6;
}
#div-a{
height:40px;;
width:480px;
margin-top:15px;
float:left;
background:#3F6;
}
#div-b{
height:40px;;
width:180px;
margin-top:15px;
float:left;
background:#3F6;
}
#header-c{

7ROEDIL MAMANI
height:40px;
margin-top:70px;
background:#3F6;
}
#article-1{
height:150px;
margin-top:40px;
background:#3FF;
}
#header-1b{
height:20px;
margin-top:5px;
background:#3F6;
}
#div-1a{
height:20px;
margin-top:15px;
background:#3F6;
}

8ROEDIL MAMANI
#header-1c{
height:20px;
margin-top:25px;
background:#3F6;
}
#footer-end{
height:20px;
margin-top:25px;
background:#3FF;
}
#submenu1{
height:250px;
width:150px;
padding:5px;
margin:auto;
background:#3FF;
}
#submenu2{
height:250px;

9ROEDIL MAMANI
width:150px;
margin:auto;
margin-top:50px;
background:#3FF;
}
#footer{
height:40px;
width:900px;
margin: 645px 0px 0px 0px;
background:#36F;
}

10ROEDIL MAMANI
Como vemos hay ya tenemos el código del css ahora solo nos falta los
códigos del archivo html para así poderejecutar el trabajo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>EJERCICIO-4</title>
<link rel="StyleSheet" href="css/estilos.css"
type="text/css">
</head>
<body>
<div id="cuerpo">
<div id="header">HEADER
<div id="header1">NAV</div>
<div id="menu1">SECTION
<div id="submenu1">NAV2</div>
<div id="submenu2">ASIDE</div>
</div>
<div id="menu3">SECTION2
<div id="header-a">HEADER2</div>
<div id="article">ARTICLE

11ROEDIL MAMANI
<div id="header-b">HEADER3 </div>
<div id="div-a"> DIV</div>
<div id="div-b"> ASIDE2</div>
<div id="header-c">PP </div>
</div>
<div id="article-1">ARTICLE2
<div id="header-1b"> HEADER4</div>
<div id="div-1a">DIV2 </div>
<div id="header-1c"> PP</div>
</div>
<div id="footer-end"> FOOTR</div>
</div>
<div id="footer">FOOTER02</div>
</body>
</html>

12ROEDIL MAMANI
Finalmente ya casi acabando obtenemos el resultado

Maquetado 04

Recomendados

Recomendados

Más contenido relacionado

Similar a Maquetado 04

Similar a Maquetado 04 (20)

Maquetado 04