Maquetado 02

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

[Título del documento]
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 2: Maquete utilizando CSS externo.
Lo primero que aremos es para resolver este segundo ejercicio es crear una
carpeta con el nombren ejemplo02 y dentro de la carpeta crear un archivo
html con el nombre maqueta02.html y luego una carpeta para el estilo que
aplicaremos la carpeta se llamara css y dentro de esa carpeta crearemos un
archivo css llamado miestilo.css. Luego dehacer esos pasos nos debequedar
así:
Ahora empezaremos a hacer los códigos de la maqueta que contendrá un
encabezado, una capa de navegación, el contenido, una capa donde
contendrán las direcciones de interés, y un pie de página para esto aremos
la siguiente codificación de css:
#body{
width:900px;
background:#FFF;
margin:auto;
}

4ROEDIL MAMANI
Ahora aremos la codificación del encabezado de la pagina y le pondremos
el nombre de banner para ello insertaremos lo siguiente códigos:
#header{
border:solid 3px #000;
height:200px;
background-color: #F9C;
text-align:center;
}
Ahora generaremos el código html para el encabezado llamando los estilos
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>maqueta02</title>
<link rel="StyleSheet" href="css/estilos.css"
type="text/css">
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
</body>
</html>

5ROEDIL MAMANI
Luego de hacer la codificación no quedara así el encabezado
Ahora lo aremos el código de la opción de navegación dela parte derecha de
la pantalla y el código es el siguiente.
#navigation{
height:310px;
width:205px;
position:absolute;
margin:5px 0px 0px 0px;
background-color:#6C9;
}

6ROEDIL MAMANI
Ahora lo aremos el código de la opción de las direcciones de (link) este se
ubicara debajo de la las navegaciones es pantalla y el código es el siguiente.
#linklist{
height:310px;
width:205px;
float:left;
margin: 325px 0px 5px 0px;
background-color:#96F;
}
Ahora lo aremos el código de la opción de donde va ir el contenido de la
página (content) de la parte céntrica de la pantalla y el código es el siguiente.
#content{
height:630px;
width:680px;
float:right;
margin:5px 0px 5px 0px;
background-color:#69C;
}

7ROEDIL MAMANI
Y para terminar aremos pie de página de la parte de debajo de la página y el
código es la siguiente:
#footer{
height:100px;
width:895px;
margin: 645px 0px 0px 0px;
background-color:#FC9;
text-align:center;
}
El código del archivo html es la siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>maqueta02</title>
<link rel="StyleSheet" href="css/estilos.css"
type="text/css">
</head>
<body>

8ROEDIL MAMANI
<div id="body">
<div id="header">HEADER</div>
<div id="navigation">NAVIGATION</div>
<div id="linklist">LINKLIST</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>

9ROEDIL MAMANI
Finalmente nos quedara de este modo lo que hemos hecho:

Maquetado 02

Recomendados

Recomendados

Más contenido relacionado

Similar a Maquetado 02

Similar a Maquetado 02 (20)

Maquetado 02