maquetados en css con html

1. “Año de la Diversificación Productiva y del Fortalecimiento de la Educación”
MODULO :
UNIDAD DIDÁCTICA : Diseño Web
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : CHAMBI TIÑA, Alfaro
Javier
CICLO ACADÉMICO : V
SECCIÓN : “A”
SEMESTRE : 2015- III
JULIACA-PERÚ
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO
“TECNOTRONIC”
COMPUTACIÓN E INFORMÁTICA

2. 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

3. Ante nuestros nuevos desafíos Educativos es necesario proporcionar a los
estudiantes medios y materiales que permitan y faciliten el proceso, de
enseñanza.
Motivo por el cual pongo a disposición de los estudiantes de la carrera de
Computación e Informática, el presente material.
Este trabajo tiene como finalidad enseñar a los estudiantes como realizar
MAQUETADOS con CSS y HTML. Utilizaremos DREAMWEAVER donde verán
como realizar las líneas de código, para que y cuál es su función que realiza y
también podrán saber cómo llamar a la hoja de estilo cuando se trabaja con
CSS externo. Espero que sea útil este informe
PRESENTACIÓN

4. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 4
MAQUETACIÓN WEB.
UTILIZANDO CSS Y HTML.
EJERCICIO N° 1: maquetación utilizando CSS externo.
Para realizar la maquetación web tenemos que tener instalado nuestro
DREAMWEAVER para trabajar adecuadamente.
PASO 1:
Abrimos nuestro DRAMWEAVER.
Donde nos muestra la siguiente ventana en la cual seleccionaremos HTML con
el cual trabajaremos.
PASO 2:
Luego de elegir HTML nos muestra la siguiente ventana donde eliminaremos
los códigos que no nos sirven.
PASO 4:
Poner el título de tu archivo HTML en mi caso le puse MAQUETADO 1.
PASO 5:

5. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 5
Seguidamente guardamos nuestro archivo HTML en una carpeta. Presionamos
la tecla ctrl+s y listo nos muestra donde guardar.
Listo ahora crearemos un archivo CSS para crear las CAPAS.
Lo guardamos de igual forma en una carpeta con el nombre CSS.
Nombre de archivo style.css
PASO 6:
Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
Donde crearemos nuestras capas.
Usaremos las siguientes etiquetas:
position:absolute :mover las capas
background: #F9C : color de fondo de la capa
border: solid 1px #000 :número de pixeles del borde principal y
color de borde
margin-left:100px : cantidad que queremos que sea nuestro
margen izquierdo
width:647px : ancho
height:79px :alto
top: 20px :a que distancia superior:
font-size : 12px:tamaño de la letra
text-align:center : alinea el texto
padding:15px :distancia del texto con los bordes de la
capa

6. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 6
AHORA ESTA ES LA CODIFICACIÓN PARA NUESTRO MAQUETADO.
CODIFICACION:
#texto{
font-size: 12px;
text-align:center;
padding:15px;
}
#banner {
position:absolute;
background: #F00;
border: solid 1px #000;
margin-left:100px;
width:647px;
height:79px;
top: 2px;
left: 10px;
}
#navegacion{
position:absolute;
background: #060;
border: solid 1px #000;
margin-left:100px;
width:127px;
height:552px;
top: 83px;
left: 9px;
}
#contenido {
position:absolute;
background: #0CF;
border: solid 1px #000;

7. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 7
margin-left:100px;
width:406px;
height:549px;
top: 83px;
left: 136px;
}
#link{
position:absolute;
background: #63F;
border: solid 1px #000;
margin-left:100px;
width:117px;
height:550px;
left: 540px;
top: 83px;
}
#footer{
position:absolute;
background: #FC0;
border: solid 1px #000;
margin-left:100px;
width:647px;
height:93px;
left: 10px;
top: 634px;
}
PASO 7:
Luego de haber hecho esto nos dirigimos al archivo HTML.
<!DOCTYPE> /*indica el tipo de documento con el cual
estas trabajando*/
<html> /*define el texto html*/

8. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 8
<head> /*provee informacion sobre el documento*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
/*corrige errores de los caracteres
especiales*/
<link rel="stylesheet" href="css/style.css" type="text/css"> /*no olvidarse de
esta línea de código porque es muy importante cuando se trabaja con CSS
EXTERNO; nos sirve para llamar a enlazar con la carpeta css*/
<title>MAQUETADO1</title> /*se utiliza para el título de la página en este
caso será maquetado1*/
</head> /*cierre de la información del documento*/
<body> /*define el cuerpo del texto*/
<div id="header"></div> /*esta es la etiqueta div inicio y fin del texto
observa lo resaltado de celeste/ y lo que está de amarrillo es el nombre de la
capa que se encuentra en el css pero lo veremos en el ejemplo que a
continuación veremos.*/
<h1>HEADER</h1></div> /*la etiqueta h1 es para el texto tamaño*/
</body> /*fin del texto o cuerpo*/
</html>/ *cierre del texto html*/
PASO 8:
Ahora veremos la codificación y las etiquetas.
Codificación html con la etiqueta div id que llama a cada capa.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>MAQUETADO1</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="listlink"></div>
<div id="footer"></div>
</body>
</html>
PASO 9:

9. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 9
EJECUTAMOS CON F12
EJERCICIO N°2:
Utilizando CSS externo.
PASO 1:
Creamos un nuevo archivo HTML nos dirigimos archivo nuevo CREAR.

10. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 10
Listo :
Nos muestra la siguiente ventana donde eliminamos los códigos que no sirven.
Lo que está de rojo no sirve:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
PASO 2:
Le asignamos un título al archivo HTML.
Guardar con ctrl+s .
PASO 3:
Listo ahora crearemos un archivo CSS.

11. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 11
Con un nombre CSS.
PASO 4:
Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
Donde crearemos nuestras capas.
Dentro de las llaves están los atributos que se asignan a la capa:
Lo que haremos es lo siguiente:
Texto: En esta capa se asignara para el texto tamaño, alineación centrada,
distancia entre los bordes.
CAPAS:
Se asignara una posición absoluta para mover las capa, fondo de color verde,
borde de capa, margen izquierdo, distancia entre los bordes, ancho, alto,
espacio superior.
Y así solo cambiaran los colores tamaños alto y ancho.
CODIFICACIÓN DE LAS CAPAS:
#texto{
font-size: 5px;
text-align:center;
padding:50px;
color:#FFF;
}
#banner{
position:absolute;
border: solid 1px #CCC;

12. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 12
background: #F00;
padding:5px;
height:79px;
width: 642px;
left: 93px;
top: 11px;
}
#navigacion{
position:absolute;
background: #060;
border: solid 1px #009;
padding:5px;
width:172px;
height: 253px;
top: 102px;
left: 93px;
}
#contenidos{
position:absolute;
border: solid 1px #009;
background: #09F;
padding:5px;
width:458px;
height: 520px;
left: 277px;
top: 101px;
}
#llink{
position:absolute;
border: solid 1px #009;
background: #63C;
padding:5px;
width:173px;
height: 253px;

13. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 13
left: 93px;
top: 366px;
}
#footer{
position:absolute;
border: solid 1px #009;
background: #FC0;
padding:5px;
width:643px;
height: 86px;
left: 93px;
top: 631px;
}
PASO 5:
Seguidamente luego de haber hecho esto nos dirigimos al archivo HTML.
CODIFICACION HTML:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style1.css" type="text/css">
/*NO TE OLVIDES DE ESTA LINEA DE CODIGO PARA LLAMAR AL
ARCHIVO DONDE SE ENCUENTRA LAS CAPAS*/
<title>MAQUETADO2</title>
</head>
<body>
<div id="banner"><div id="texto"><h1>HEADER</h1></div></div>
<div id="navegacion"><div id="texto"><h1>NAVIGATION</h1></div></div>
<div id="contenido"><div id="texto"><h1 >CONTENT</h1></div></div>
<div id="link"><div id="texto"><h1>LISTLINK</h1></div></div>
<div id="footer"><div id="texto"><h1>FOOTER</h1></div></div>
</body>
</html>Lo de rojo son los nombres de las capas que se encuentran en el CSS.
PASO 6:

14. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 14
EJECUTAMOS EN EL NAVEGADOR CON F12
RESULTADO:
EJERCICIO N°3:
UTLIZANDO CSS EXTERNO.
PASO 1:
Creamos un nuevo archivo HTML nos dirigimos archivo nuevo.
Y seleccionaremos HTML con el cual trabajaremos
Luego de elegir HTML nos muestra una ventana donde eliminaremos los
códigos que no nos sirven. Los cuales son lo resaltado.
Seguimos el mismo procedimiento realizado anteriormente para poder trabajar.
PASO 2:
Colocarle un título al archivo HTML .
Guardamos ctrl+s en una carpeta.

15. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 15
PASO 3:
Listo ahora crearemos un archivo CSS..
PASO 4:
Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
Donde crearemos nuestras capas.
Como ya explique anteriormente los atributos ahora observen la codificación.
Ya que solo cambian los pixeles.
Nos dirigimos al archivo CSS Y codificamos las capas.
CODIFICACIÓN CSS:
#banner{
position:absolute;
border: solid 1px #CCC;
background: #F6C;
padding:15px;
height:76px;
width: 529px;
margin-left:100px;
top: 19px;
}
#texto{
font-size:5px;
text-align:center;
}
#navegacion{
position:absolute;
background: #3C6;
border: solid 1px #009;
padding:5px;
width: 550px;

16. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 16
height: 28px;
margin-left:100px;
top: 129px;
}
#contenidos{
position:absolute;
background: #3CC;
border: solid 1px #009;
padding:5px;
width: 550px;
height: 370px;
top: 167px;
margin-left:100px;
left: 10px;
}
#link{
position:absolute;
border: solid 1px #009;
background: #66F;
padding:5px;
width: 550px;
height: 27px;
margin-left:100px;
top: 550px;
left: 10px;
}
#footer{
position:absolute;
background: #CC3;
border: solid 1px #009;
padding:5px;
width: 550px;
height: 32px;
margin-left:100px;
top: 590px;
left: 11px;
}
PASO 5:
Seguidamente luego de haber hecho esto nos dirigimos al archivo HTML.
Ahora veremos la codificación y las etiquetas:

17. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 17
CODIFICACION: usando div id.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>MAQUETADO3</title>
</head>
<body>
<div id="banner"><div id="texto"><h1>HEADER</h1></div></div>
<div id="navegacion"><div id="texto"><h1>NAVIGATION</h1></div></div>
<div id="contenidos"><div id="texto"><h1>CONTENT</h1></div></div>
<div id="link"><div id="texto"><h1>LISTLINK</h1></div></div>
<div id="footer"><div id="texto"><h1>FOOTER</h1></div></div>
</body>
</html>
PASO 6:
Ejecutamos con f12
RESULTADO:

18. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 18
EJERCICIO N°4:

19. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 19
UTLIZANDO CSS EXTERNO.
De igual forma aremos los siguientes pasos.
PASO 1:
Creamos un nuevo archivo HTML nos dirigimos archivo nuevo.
Y seleccionaremos HTML con el cual trabajaremos
PASO 2:
Listo nos muestra la ventana siguiente:
Luego de elegir HTML nos muestra la siguiente ventana donde eliminaremos
los códigos que no nos sirven.
Todo lo resaltado no sirve:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

20. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 20
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
PASO 3:
No olvides poner el título de tu archivo HTML en mi caso le puse
MAQUETADO 4.
Guardamos ctrl+s en una carpeta.
PASO 5:
Listo ahora crearemos un archivo CSS para crear las etiquetas.
Lo guardamos de igual forma en una carpeta con el nombre CSS.
PASO 6:
Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
Donde crearemos nuestras capas.
Usaremos las siguientes etiquetas:
Nos dirigimos al archivo CSS Y codificamos las capas.
CODIFICACIÓN:
#header {
position:absolute;
border: solid 1px #000;
background: #09C;
width:435px;

21. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 21
height:62px;
margin-left:100px;
top: 6px;
}
#texto{
font-size:5px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
#nav {
position:absolute;
border: solid 1px #000;
background: #090;
width:379px;
height:20px;
left: 140px;
top: 27px;
}
#section {
position:absolute;
border: solid 1px #000;
background: #090;
margin-left:100px;
width:156px;
height:325px;
left: 10px;
top: 73px;
}
#nav {
position:absolute;
border: solid 1px #000;
background: #0C0;
width:123px;

22. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 22
height:144px;
left: 132px;
top: 100px;
}
#aside {
position:absolute;
border: solid 1px #000;
background: #060;
width:120px;
height:90px;
left: 134px;
top: 261px;
}
#section{
position:absolute;
border: solid 1px #000;
background: #06F;
margin-left:100px;
width:271px;
height:326px;
left: 173px;
top: 72px;
}
#header{
position:absolute;
border: solid 1px #000;
background: #0CF;
width:253px;
height:19px;
left: 286px;
top: 94px;
}
#article {
position:absolute;

23. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 23
border: solid 1px #000;
background: #09F;
width:252px;
height:108px;
left: 286px;
top: 121px;
}
#header {
position:absolute;
border: solid 1px #000;
background: #0FC;
width:236px;
height:20px;
left: 294px;
top: 145px;
}
#div {
position:absolute;
border: solid 1px #000;
background: #36C;
width:118px;
height:21px;
left: 293px;
top: 173px;
}
#aside{
position:absolute;
border: solid 1px #000;
background: #3FC;
width:114px;
height:22px;
left: 418px;
top: 173px;
}

24. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 24
#p{
position:absolute;
border: solid 1px #000;
background: #09F;
width:237px;
height:23px;
left: 294px;
top: 201px;
}
#article{
position:absolute;
border: solid 1px #000;
background: #69F;
width:250px;
height:102px;
left: 286px;
top: 252px;
}
#header {
position:absolute;
border: solid 1px #000;
background: #3FC;
width:233px;
height:18px;
left: 298px;
top: 272px;
}
#div {
position:absolute;
border: solid 1px #000;
background: #36C;
width:233px;
height:19px;
left: 297px;

25. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 25
top: 297px;
}
#p{
position:absolute;
border: solid 1px #000;
background: #6CF;
width:234px;
height:23px;
left: 296px;
top: 323px;
}
#footer{
position:absolute;
border: solid 1px #000;
background: #33F;
width:249px;
height:20px;
left: 289px;
top: 366px;
}
#footer{
position:absolute;
border: solid 1px #000;
background: #3FF;
margin-left:100px;
width:434px;
height:24px;
left: 11px;
top: 404px;
}
PASO7:
Seguidamente luego de haber hecho esto nos dirigimos al archivo HTML.
Ahora veremos la codificación y las etiquetas :
CODIFICACION: USANDO DIV ID.

26. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 26
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style4.css" type="text/css">
<title>maquetado4</title>
</head>
<body>
<div id="header"><div id="texto"><h1>header</h1></div></div>
<div id="nav"><div id="texto"><h1>nav</h1></div></div>
<div id="section"><div id="texto"><h1>section</h1></div></div>
<div id="nav"><div id="texto"><h1>nav</h1></div></div>
<div id="aside"><div id="texto"><h1>aside</h1></div></div>
<div id="section"><div id="texto"><h1>section</h1></div></div>
<div id="header"><div id="texto"><h1>header</h1></div></div>
<div id="article"><div id="texto"><h1>article</h1></div></div>
<div id="header"><div id="texto"><h1>header</h1></div></div>
<div id="div"><div id="texto"><h1>div</h1></div></div>
<div id="aside"><div id="texto"><h1>aside</h1></div></div>
<div id="p"><div id="texto"><h1>p</h1></div></div>
<div id="article"><div id="texto"><h1>article</h1></div></div>
<div id="header"><div id="texto"><h1>header</h1></div></div>
<div id="div"><div id="texto"><h1>div</h1></div></div>
<div id="p"><div id="texto"><h1>p</h1></div></div>
<div id="footer"><div id="texto"><h1>footer</h1></div></div>
<div id="footer"><div id="texto"><h1>footer</h1></div></div>
</body>
</html>
Como observaremos en nuestro resultado.
PASO 8:
Con f12
RESULTADO:

27. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 27

28. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 28

29. INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC”
CHAMBI TIÑA, Alfaro Javier – DISEÑO WEB Página 29