SlideShare una empresa de Scribd logo
1 de 6
“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

La actualidad más candente

La actualidad más candente (12)

Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3
 
Practica 4
Practica 4Practica 4
Practica 4
 
Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.
 
Practica 1
Practica 1Practica 1
Practica 1
 
Ejercicio 4
Ejercicio 4Ejercicio 4
Ejercicio 4
 
Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.
 
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
 
Ejercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externoEjercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externo
 
Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4
 
Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4
 

Destacado

HôTel Moulin Chambre Et Services
HôTel Moulin Chambre Et ServicesHôTel Moulin Chambre Et Services
HôTel Moulin Chambre Et ServicesGriselda Sassola
 
El museo del Louvre
El museo del LouvreEl museo del Louvre
El museo del Louvremarianmus
 
DIEUDONNE LUMA ETIENNE, POURQUOI?
DIEUDONNE LUMA ETIENNE, POURQUOI?DIEUDONNE LUMA ETIENNE, POURQUOI?
DIEUDONNE LUMA ETIENNE, POURQUOI?DieudonneLuma
 
Education & Technology : a worldwide love affair
Education & Technology : a worldwide love affairEducation & Technology : a worldwide love affair
Education & Technology : a worldwide love affairL'Atelier BNP Paribas
 
Conception et optimisation d'un micro-planeur
Conception et optimisation d'un micro-planeurConception et optimisation d'un micro-planeur
Conception et optimisation d'un micro-planeurOlivier Bictel
 
1. présentation le changement climatique bamako - 17 juin 2010 - renaat van...
1. présentation le changement climatique   bamako - 17 juin 2010 - renaat van...1. présentation le changement climatique   bamako - 17 juin 2010 - renaat van...
1. présentation le changement climatique bamako - 17 juin 2010 - renaat van...Renaat Van Rompaey
 
http://infirmiers.anesthesistes.com/
http://infirmiers.anesthesistes.com/http://infirmiers.anesthesistes.com/
http://infirmiers.anesthesistes.com/ecluis
 
Anaytics et le A/B Testing
Anaytics et le A/B TestingAnaytics et le A/B Testing
Anaytics et le A/B TestingSamuel Breton
 
Une Gomme Balloune
Une Gomme BallouneUne Gomme Balloune
Une Gomme Ballounecracodan
 
Eskape - Gestion Electronique de Documents - Présentation produit ELO
Eskape - Gestion Electronique de Documents - Présentation produit ELOEskape - Gestion Electronique de Documents - Présentation produit ELO
Eskape - Gestion Electronique de Documents - Présentation produit ELOEskape
 

Destacado (20)

HôTel Moulin Chambre Et Services
HôTel Moulin Chambre Et ServicesHôTel Moulin Chambre Et Services
HôTel Moulin Chambre Et Services
 
El museo del Louvre
El museo del LouvreEl museo del Louvre
El museo del Louvre
 
DIEUDONNE LUMA ETIENNE, POURQUOI?
DIEUDONNE LUMA ETIENNE, POURQUOI?DIEUDONNE LUMA ETIENNE, POURQUOI?
DIEUDONNE LUMA ETIENNE, POURQUOI?
 
Mbrand3 thema
Mbrand3 themaMbrand3 thema
Mbrand3 thema
 
mémoire
mémoiremémoire
mémoire
 
Education & Technology : a worldwide love affair
Education & Technology : a worldwide love affairEducation & Technology : a worldwide love affair
Education & Technology : a worldwide love affair
 
Coaching A2 O
Coaching A2 OCoaching A2 O
Coaching A2 O
 
Conception et optimisation d'un micro-planeur
Conception et optimisation d'un micro-planeurConception et optimisation d'un micro-planeur
Conception et optimisation d'un micro-planeur
 
1. présentation le changement climatique bamako - 17 juin 2010 - renaat van...
1. présentation le changement climatique   bamako - 17 juin 2010 - renaat van...1. présentation le changement climatique   bamako - 17 juin 2010 - renaat van...
1. présentation le changement climatique bamako - 17 juin 2010 - renaat van...
 
CV frans
CV fransCV frans
CV frans
 
Lean start up
Lean start upLean start up
Lean start up
 
Strip du soir ll111
Strip du soir ll111Strip du soir ll111
Strip du soir ll111
 
http://infirmiers.anesthesistes.com/
http://infirmiers.anesthesistes.com/http://infirmiers.anesthesistes.com/
http://infirmiers.anesthesistes.com/
 
Taller de fotografía
Taller de fotografíaTaller de fotografía
Taller de fotografía
 
CV Redhwan (1)
CV Redhwan (1)CV Redhwan (1)
CV Redhwan (1)
 
Anaytics et le A/B Testing
Anaytics et le A/B TestingAnaytics et le A/B Testing
Anaytics et le A/B Testing
 
Les 7 DifféRences
Les 7 DifféRencesLes 7 DifféRences
Les 7 DifféRences
 
Une Gomme Balloune
Une Gomme BallouneUne Gomme Balloune
Une Gomme Balloune
 
Curriculum vitae_Marc Bourgeois_2016
Curriculum vitae_Marc Bourgeois_2016Curriculum vitae_Marc Bourgeois_2016
Curriculum vitae_Marc Bourgeois_2016
 
Eskape - Gestion Electronique de Documents - Présentation produit ELO
Eskape - Gestion Electronique de Documents - Présentation produit ELOEskape - Gestion Electronique de Documents - Présentation produit ELO
Eskape - Gestion Electronique de Documents - Présentation produit ELO
 

Similar a Ejercicio 1 maquete utilizando css externo

Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3Merly QA
 
Practica 2
Practica 2Practica 2
Practica 2gabypaye
 
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.carlos_yurema
 
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ru Vilca
 
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.carlos_yurema
 
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ru Vilca
 
Ejercicio 2 maquete utilizando css externo.
Ejercicio 2 maquete utilizando css externo.Ejercicio 2 maquete utilizando css externo.
Ejercicio 2 maquete utilizando css externo.mayumi_noemi
 
Ejercicio 1 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo.Ejercicio 1 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo.mayumi_noemi
 
Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.rogelioapaza04
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.rogelioapaza04
 
Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Carlos Ccalla
 
Ejercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externoEjercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externoCarlos Ccalla
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Carlos Ccalla
 
Manual de maquetado 3
Manual de maquetado 3Manual de maquetado 3
Manual de maquetado 3robertocauna
 

Similar a Ejercicio 1 maquete utilizando css externo (17)

Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3
 
Ejercicio 3
Ejercicio 3Ejercicio 3
Ejercicio 3
 
Practica 2
Practica 2Practica 2
Practica 2
 
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.
 
Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.Ejercicio 3-maquete-utilizando-css-externo.
Ejercicio 3-maquete-utilizando-css-externo.
 
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
 
Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.Ejercicio2 maquete-utilizando-css-externo.
Ejercicio2 maquete-utilizando-css-externo.
 
Ejercicio 2 maquete utilizando css externo.
Ejercicio 2 maquete utilizando css externo.Ejercicio 2 maquete utilizando css externo.
Ejercicio 2 maquete utilizando css externo.
 
Ejercicio 1 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo.Ejercicio 1 maquete utilizando css externo.
Ejercicio 1 maquete utilizando css externo.
 
Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.
 
Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.Ejercicio 3 maquete utilizando css externo.
Ejercicio 3 maquete utilizando css externo.
 
Ejercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externoEjercicio 1 maquete utilizando css externo
Ejercicio 1 maquete utilizando css externo
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.
 
Ejercicio1
Ejercicio1Ejercicio1
Ejercicio1
 
Ejercicio1
Ejercicio1Ejercicio1
Ejercicio1
 
Manual de maquetado 3
Manual de maquetado 3Manual de maquetado 3
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.