Maquetado 03

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 3: Maquete utilizando CSS externo.
Lo primero que aremos es para resolver este segundo ejercicio es crear una
carpeta con el nombren ejemplo03 y dentro de la carpeta crear un archivo
html con el nombre maqueta03.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;border-radius:10px;
}

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;
height:200px;
background-color:#F9F;
text-align:center;
}
Ahora lo aremos el código de la opción de navegación después del banner
pantalla y el código es el siguiente.
#navigation{
height:30px;
padding:5px;
border:solid 3px ;
margin-top:5px;
background-color: #6C9;
text-align:center;
}

5ROEDIL MAMANI
Ahora lo aremos el código dela opciónde dondeva ir el contenido(content)
y estará ubicado después de las navegaciones en la página de la parte
céntrica de la pantalla y el código es el siguiente.
#content{
height:450px;
padding:5px;
border:solid 3px ;
margin-top:5px;
background-color:#6CC;
text-align:center;
}
Ahora lo aremos el código de la opción de las direcciones de (link) este se
ubicara debajo de los contenidos en pantalla y el código es el siguiente.
#linklist{
height:30px;
padding:5px;
border:solid 3px ;
margin-top:5px;
background-color:#C9C;
text-align:center;
}

6ROEDIL MAMANI
Y para terminar aremos pie depágina dela parte de debajo dela página
y el código es la siguiente:
#footer{
height:30px;
padding:5px;
border:solid 3px;
margin-top:5px;
background:#FC9;
text-align:center;
}
El código del archivo html es la siguiente:
<!DOCTYPE html>
<html xmlns>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>maqueta03</title>
<link rel="StyleSheet" href="css/estilos.css"
type="text/css">
</head>
<body>

7ROEDIL MAMANI
<div id="body">
<div id="header">HEADER</div>
<div id="navigation">NAVIGATION</div>
<div id="content">CONTENT</div>
<div id="linklist">LINKLIST</div>
<div id="footer">FOOTER</div>
</body>
</html>
Finalmente nos quedara de este modo lo que hemos hecho:

Maquetado 03

Más contenido relacionado

Destacado

Similar a Maquetado 03

Maquetado 03