Maquetado 01

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

DICEÑO WEB “I.S.T.P. TECNOTRONIC”
2
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.

3
Ejercicio 1: Maquete utilizando CSS externo.
Lo primero que aremos es para resolver este ejercicio es crear una carpeta
con el nombren ejemplo01 y dentro de la carpeta crear un archivo html con
el nombre maqueta01.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;
}

4
Ahora aremos la codificación del encabezado de la pagina y le pondremos
el nombre de banner para ello insertaremos lo siguiente códigos:
#banner{
border:solid 3px #000;
height:200px;
background-color:#FCC;
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>MAQUETA01</title>
<link rel="StyleSheet" href="css/miestilo.css"
type="text/css">
</head>
<body>
<div id="body">
<div id="banner">BANNER</div>
</body>
</html>

5
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:610px;
width:200px;
padding:5px;
margin-top:5px;
float:left;
background-color: #6C9;
}

6
Ahora lo aremos el código de la opción de las direcciones de (link) de la
parte izquierda de la pantalla y el código es el siguiente.
#linklist{
height:610px;
width:200px;
padding:5px;
margin-top:5px;
float:right;
background-color:#69C;}
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:610px;
width:200px;
padding:5px;
margin-bottom:5px;
margin-top:5px;
margin-left:220px;
padding-left:250px;
background-color:#696;}

7
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;
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>MAQUETA01</title>
<link rel="StyleSheet" href="css/miestilo.css"
type="text/css">
</head>
<body>
<div id="body">

8
<div id="banner">BANNER</div>
<div id="navigation">NAVIGATION</div>
<div id="linklist">LINKLIST</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>
Finalmente nos quedara de este modo

Maquetado 01

Recomendados

Recomendados

Más contenido relacionado

Similar a Maquetado 01

Similar a Maquetado 01 (20)

Maquetado 01