SlideShare una empresa de Scribd logo
“Año de la diversificación productiva y del fortalecimiento de la educación”
INSTITUTO DE EDUCACIÓN SUPERIOR
TECNOLÓGICO PRIVADO
“TECNOTRONIC”
COMPUTACIÓN E INFORMÁTICA
UNIDAD DIDACTICA : DISSEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : QUISPE APAZA, Mery.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 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.
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 3
EJERCICIO 1
Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:abrimos nuevo CSS.
Paso N°2:codificamos los siguientes códigos css.
#header{
width:725px;
height:100px;
border: solid 1px #000;
background-color: #6FF;
top:30px:;
text-align: center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 4
Paso N°3:codificamos los siguientes códigos css.
#capa1{
width:180px;
height:400px;
background: #9C3;
border: solid 1px #009;
padding: 5px 7px 10px 15px;
padding: 5px;
float:left;
text-align: center;
}
Paso N°4:codificamos los siguientes códigos css.
#capa2{
width:330px;
height:400px;
background: #6FF;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
float: left ;
text-align:center;
}
Paso N°5:codificamos los siguientes códigos css.
#capa3{
width:180px;
height:400px;
background: #669;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
float: left;
text-align:center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 5
Paso N°6:codificamos los siguientes códigos css.
#footer{
width:725px;
height:100px;
border:solid 1px #000;
background-color:#FCC;
float:left;
text-align:center;
}
Paso N° 7: Ahora cerrarlo el cogido del (style) para ello es el siguiente
código.
</style>
Paso N° 8: Ahora colocamos los siguientes códigos dentro de (body), para
finalizar el primer ejercicio.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAQUETADO</title>
<link rel="stylesheet" href="css1.css" type="text/css" />
</head><body>
<div id="header">
HEADER
</div>
<div id="capa1">
NAVIGATION
</div>
<div id="capa2">
CONTENT
</div>
<div id="capa3">
LINKLIST
</div>
<div id="footer">
FOOTER
</div></body></html>
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 6
paso N° 9: El resultado del ejercicio N° 1 ejecutado en el navegador.

Más contenido relacionado

DOCX
Ejercicio3
DOCX
Ejercicio3
DOCX
Ejercicio2
DOCX
Practica 2
DOCX
Practica 3
DOCX
Ejercicio 1
DOCX
Ejercicio2 maquete utilizando css externo.
Ejercicio3
Ejercicio3
Ejercicio2
Practica 2
Practica 3
Ejercicio 1
Ejercicio2 maquete utilizando css externo.

La actualidad más candente (12)

DOCX
Ejercicio3
DOCX
Practica 4
DOCX
Ejercicio 3 maquete utilizando css externo.
DOCX
Practica 1
DOCX
Ejercicio2 maquete utilizando css externo.
DOCX
Ejercicio 3-maquete-utilizando-css-externo.
DOCX
Ejercicio2 maquete-utilizando-css-externo.
DOCX
Ejercicio 1 maquete utilizando css externo
DOCX
Ejercicio4
DOCX
Ejercicio4
Ejercicio3
Practica 4
Ejercicio 3 maquete utilizando css externo.
Practica 1
Ejercicio2 maquete utilizando css externo.
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio 1 maquete utilizando css externo
Ejercicio4
Ejercicio4
Publicidad

Destacado (20)

PDF
Competitividad para pequeños productores
PPTX
CALENTAMIENTO GLOBAL
PPTX
Melanie jara cervigón
DOCX
evaluacion
PDF
Tabla de habilidades tomada de cañedo iglesias
PDF
PPTX
Ahuntsic syn opp
PPTX
LeLynx. Par Martin Coriat, LeLynx
PDF
Anaytics et le A/B Testing
PPT
Servist
PDF
Parution LE-PRESCRIPTEUR-FEVRIER 2017 Pages Arbia
PDF
Desarrollociudadano01
PDF
Twitter en bibliothèques - étude pour la bibliothèque M. Serres de Centrale Lyon
PDF
VENDIDO Avril 2007 Thibaut Bayart
PDF
Grupo de Trabajo: "Datos económicos básicos asociados Anepma, indicadores y p...
PDF
Cañeros no te dejes engañar.
PPTX
Proyecto de grado
PPT
Integración de recursos educativos web 2
PPTX
Historia de la robotica
PPT
Conferencia Inaugural “Nuevos objetivos propuestos por la Comisión Europea en...
Competitividad para pequeños productores
CALENTAMIENTO GLOBAL
Melanie jara cervigón
evaluacion
Tabla de habilidades tomada de cañedo iglesias
Ahuntsic syn opp
LeLynx. Par Martin Coriat, LeLynx
Anaytics et le A/B Testing
Servist
Parution LE-PRESCRIPTEUR-FEVRIER 2017 Pages Arbia
Desarrollociudadano01
Twitter en bibliothèques - étude pour la bibliothèque M. Serres de Centrale Lyon
VENDIDO Avril 2007 Thibaut Bayart
Grupo de Trabajo: "Datos económicos básicos asociados Anepma, indicadores y p...
Cañeros no te dejes engañar.
Proyecto de grado
Integración de recursos educativos web 2
Historia de la robotica
Conferencia Inaugural “Nuevos objetivos propuestos por la Comisión Europea en...
Publicidad

Similar a Ejercicio 1 maquete utilizando css externo (17)

DOCX
Ejercicio 3
DOCX
Ejercicio3
DOCX
Practica 2
DOCX
Ejercicio 3-maquete-utilizando-css-externo.
DOCX
Ejercicio 3-maquete-utilizando-css-externo.
DOCX
Ejercicio2 maquete-utilizando-css-externo.
DOCX
Ejercicio2 maquete-utilizando-css-externo.
DOCX
Ejercicio 2 maquete utilizando css externo.
DOCX
Ejercicio 1 maquete utilizando css externo.
DOCX
Ejercicio 3 maquete utilizando css externo.
DOCX
Ejercicio 4 maquete utilizando css externo.
DOCX
Ejercicio 3 maquete utilizando css externo.
DOCX
Ejercicio 1 maquete utilizando css externo
DOCX
Ejercicio 4 maquete utilizando css externo.
DOCX
Ejercicio1
DOCX
Ejercicio1
DOCX
Manual de maquetado 3
Ejercicio 3
Ejercicio3
Practica 2
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio 2 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo
Ejercicio 4 maquete utilizando css externo.
Ejercicio1
Ejercicio1
Manual de maquetado 3

Ejercicio 1 maquete utilizando css externo

  • 1. “Año de la diversificación productiva y del fortalecimiento de la educación” INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PRIVADO “TECNOTRONIC” COMPUTACIÓN E INFORMÁTICA UNIDAD DIDACTICA : DISSEÑO WEB DOCENTE : HANCCO QUISPE, Elar E. ESTUDIANTE : QUISPE APAZA, Mery. CICLO ACADÉMICO : V SEMESTRE : 2015 III Juliaca - Puno – Perú. 2015
  • 2. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 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. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 3 EJERCICIO 1 Maquete utilizando CSS externo. Primero lo tenemos abierto el programa dreamweavern para así podertrabajar, los pasos sonlos siguientes. Paso N°1:abrimos nuevo CSS. Paso N°2:codificamos los siguientes códigos css. #header{ width:725px; height:100px; border: solid 1px #000; background-color: #6FF; top:30px:; text-align: center; }
  • 4. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 4 Paso N°3:codificamos los siguientes códigos css. #capa1{ width:180px; height:400px; background: #9C3; border: solid 1px #009; padding: 5px 7px 10px 15px; padding: 5px; float:left; text-align: center; } Paso N°4:codificamos los siguientes códigos css. #capa2{ width:330px; height:400px; background: #6FF; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; float: left ; text-align:center; } Paso N°5:codificamos los siguientes códigos css. #capa3{ width:180px; height:400px; background: #669; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; float: left; text-align:center; }
  • 5. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 5 Paso N°6:codificamos los siguientes códigos css. #footer{ width:725px; height:100px; border:solid 1px #000; background-color:#FCC; float:left; text-align:center; } Paso N° 7: Ahora cerrarlo el cogido del (style) para ello es el siguiente código. </style> Paso N° 8: Ahora colocamos los siguientes códigos dentro de (body), para finalizar el primer ejercicio. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MAQUETADO</title> <link rel="stylesheet" href="css1.css" type="text/css" /> </head><body> <div id="header"> HEADER </div> <div id="capa1"> NAVIGATION </div> <div id="capa2"> CONTENT </div> <div id="capa3"> LINKLIST </div> <div id="footer"> FOOTER </div></body></html>
  • 6. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 6 paso N° 9: El resultado del ejercicio N° 1 ejecutado en el navegador.