Documentos de Académico
Documentos de Profesional
Documentos de Cultura
DESCRIPCIÓN DE LA EVIDENCIA
Con base en los conocimientos adquiridos en los objetos de aprendizaje: “Introducción al
diseño web con html “y el refuerzo realizado en el laboratorio: “diseño de interfaces web”
se deberá realizar el diseño y desarrollo de las interfaces web del proyecto de desarrollo
en curso.
Para presentar la evidencia se deben seguir los siguientes pasos:
Paso 1: realizar el diseño de las interfaces web. Para realizar este diseño se puede
apoyar en dibujos a mano alzada, o usar algunas de las herramientas para realizar
bosquejos. El resultado de este proceso es la maquetación o “layout” del sitio web y
servirá para generar los archivos html y css.
Paso 2: definir los estilos que usarán los elementos HTML del diseño. La hoja de estilos
del sistema deberá llamarse “estilos.css”.
Paso 3: generar los archivos html de los formularios del proyecto. Las páginas web
deben contemplar los siguientes aspectos:
Los formularios deben estar asociados a una opción del menú principal.
2
Nota: no deben usarse tablas html para el diseño de los campos de los formularios. Este
diseño se debe usar con los estilos en cascada.
Paso 4: Comprimir los archivos html y css en formato .zip y subirlo a la plataforma.
RTA//
1. CODIGO WEB
<!DOCTYPE html>
<html>
<head>
<title>Pagina Web</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<nav>
<div class="logo">ADM DISEÑO Y CONSTRUCCION</div>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Acerca de nosotros</a></li>
<li><a href="">Portafolio</a></li>
</ul>
</nav>
<section></section>
</body>
</html>
3
2. ESTILO
body{
margin: 0;
padding: 0;
font-family: Arial;
}
nav{
position: fixed;
top:0;
left:0;
width:100%;
height: 100px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #fff;
4
}
nav .logo{
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
nav ul{
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a{
line-height: 80px;
color:#fff;
padding: 12px 30px;
text-decoration: none;
font-size:14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a:hover{
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
}
5
section{
width: 100%;
height: 100vh;
background: url(FONDO.jpg);
background-size: cover;
background-position: center;
}
3. WEB