SlideShare uma empresa Scribd logo
1 de 7
“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 2
Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:Trabajaremos en el archivo CSS.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°2:codificamos los siguientes códigos css.
#header{
width:720px;
height:100px;
border: solid 1px #000;
background-color: #F9F;
text-align: center;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 4
Paso N°3:codificamos los siguientes códigos css.
#capa1{
position: absolute;
width: 150px;
height: 200px;
border: solid 1px #000;
background-color: #FCC;
text-align: center;
float: left;
}
Paso N°4:codificamos los siguientes códigos css.
#capa2{
position: absolute;
width: 560px;
height: 400px;
background: #6FF;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
text-align: center;
float: left;
left: 159px;
top: 109px;
}
Paso N°5:codificamos los siguientes códigos css.
#capa3{
position: absolute;
width: 140px;
height: 200px;
background: #669;
border: solid 1px #000;
padding: 5px 7px 10px 15px;
padding: 5px;
text-align: center;
top: 307px;
left: 8px;
}
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 5
Paso N°6:codificamos los siguientes códigos css.
#footer{
position: absolute;
width: 725px;
height: 100px;
border: solid 1px #000;
background-color: #FCC;
text-align: center;
float: left;
left: 6px;
top: 519px;
}
Paso N°8:Trabajaremos en el archivo HTML.
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°2
Paso N°9:codificamos los siguientes códigos para la práctica 2 (HTML)
asignado que es lo siguiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 6
<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>
<link rel="stylesheet" href="css2.css" type="text/css"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="capa1">
<p>NAVIGATION </p></div>
<div id="capa3">
LINKLIST
</div>
<div id="capa2">
CONTENT
</div>
<div id="footer">
FOOTER
</div></body></html>
COMPUTACION E INFORMATICA
QUISPE APAZA, Mery Página 7
Paso N° 10:Es el resultado ejecutado en el navegador (ejercicio N°2)

Mais conteúdo relacionado

Destaque

Sondage L'Atelier/IFOP "Mon entreprise et les comparateurs en ligne"
Sondage L'Atelier/IFOP  "Mon entreprise et les comparateurs en ligne"Sondage L'Atelier/IFOP  "Mon entreprise et les comparateurs en ligne"
Sondage L'Atelier/IFOP "Mon entreprise et les comparateurs en ligne"L'Atelier BNP Paribas
 
Comment VéRifier L’Activation Des Cookies
Comment VéRifier L’Activation Des CookiesComment VéRifier L’Activation Des Cookies
Comment VéRifier L’Activation Des Cookiesstamiu
 
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...laarveja
 
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
 
Organiser un jeu concours avec AWeber
Organiser un jeu concours avec AWeberOrganiser un jeu concours avec AWeber
Organiser un jeu concours avec AWeberSamuel Breton
 
Inversión, Financiamiento, Necesidad (formulación)
Inversión, Financiamiento, Necesidad (formulación)Inversión, Financiamiento, Necesidad (formulación)
Inversión, Financiamiento, Necesidad (formulación)carlosbarrantes2014
 
Bilan de Mandature 2011-2016
Bilan de Mandature 2011-2016Bilan de Mandature 2011-2016
Bilan de Mandature 2011-2016CCI Ardèche
 
Presentacion Legislacion Educativa (Recurso de Queja)
Presentacion Legislacion Educativa  (Recurso de Queja)Presentacion Legislacion Educativa  (Recurso de Queja)
Presentacion Legislacion Educativa (Recurso de Queja)morenom31
 
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéos
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéosSondage L'Atelier/IFOP: Les internautes et les jeux vidéos
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéosL'Atelier BNP Paribas
 
Adhesión a la Central de Contratación de FEMP
Adhesión a la Central de Contratación de FEMPAdhesión a la Central de Contratación de FEMP
Adhesión a la Central de Contratación de FEMPANEPMA
 
Lori Rhodes' Resume
Lori Rhodes' ResumeLori Rhodes' Resume
Lori Rhodes' ResumeLori Rhodes
 
Innovative Lesson Template
Innovative Lesson TemplateInnovative Lesson Template
Innovative Lesson TemplateJithin Sanjeev
 
Metodologia de juegos giulliana
Metodologia de juegos giullianaMetodologia de juegos giulliana
Metodologia de juegos giullianagiullianaillon
 

Destaque (20)

Sondage L'Atelier/IFOP "Mon entreprise et les comparateurs en ligne"
Sondage L'Atelier/IFOP  "Mon entreprise et les comparateurs en ligne"Sondage L'Atelier/IFOP  "Mon entreprise et les comparateurs en ligne"
Sondage L'Atelier/IFOP "Mon entreprise et les comparateurs en ligne"
 
Fleurs Cohabiter
Fleurs CohabiterFleurs Cohabiter
Fleurs Cohabiter
 
Comment VéRifier L’Activation Des Cookies
Comment VéRifier L’Activation Des CookiesComment VéRifier L’Activation Des Cookies
Comment VéRifier L’Activation Des Cookies
 
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...
Colección permacultura 07 reciclaje de basura compost, lombricultura, plastic...
 
Oleron
OleronOleron
Oleron
 
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...
 
Presentación1
Presentación1Presentación1
Presentación1
 
Organiser un jeu concours avec AWeber
Organiser un jeu concours avec AWeberOrganiser un jeu concours avec AWeber
Organiser un jeu concours avec AWeber
 
Inversión, Financiamiento, Necesidad (formulación)
Inversión, Financiamiento, Necesidad (formulación)Inversión, Financiamiento, Necesidad (formulación)
Inversión, Financiamiento, Necesidad (formulación)
 
Presentación1
Presentación1Presentación1
Presentación1
 
deans list
deans listdeans list
deans list
 
Bilan de Mandature 2011-2016
Bilan de Mandature 2011-2016Bilan de Mandature 2011-2016
Bilan de Mandature 2011-2016
 
Presentacion Legislacion Educativa (Recurso de Queja)
Presentacion Legislacion Educativa  (Recurso de Queja)Presentacion Legislacion Educativa  (Recurso de Queja)
Presentacion Legislacion Educativa (Recurso de Queja)
 
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéos
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéosSondage L'Atelier/IFOP: Les internautes et les jeux vidéos
Sondage L'Atelier/IFOP: Les internautes et les jeux vidéos
 
SEGURIDAD INDUSTRIAL
SEGURIDAD INDUSTRIALSEGURIDAD INDUSTRIAL
SEGURIDAD INDUSTRIAL
 
Adhesión a la Central de Contratación de FEMP
Adhesión a la Central de Contratación de FEMPAdhesión a la Central de Contratación de FEMP
Adhesión a la Central de Contratación de FEMP
 
Lori Rhodes' Resume
Lori Rhodes' ResumeLori Rhodes' Resume
Lori Rhodes' Resume
 
2010
20102010
2010
 
Innovative Lesson Template
Innovative Lesson TemplateInnovative Lesson Template
Innovative Lesson Template
 
Metodologia de juegos giulliana
Metodologia de juegos giullianaMetodologia de juegos giulliana
Metodologia de juegos giulliana
 

Semelhante a Ejercicio2 maquete utilizando css externo.

Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4Merly QA
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.yuris666
 
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_yurema
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ru Vilca
 
Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.Ejercicio 4 maquete utilizando css externo.
Ejercicio 4 maquete utilizando css externo.mayumi_noemi
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.rogelioapaza04
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externocarlos_yurema
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoRu Vilca
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoyuris666
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Carlos Ccalla
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.mamanieli
 
Practica 2
Practica 2Practica 2
Practica 2gabypaye
 
Practica 2
Practica 2Practica 2
Practica 2gabypaye
 
Practica 3
Practica 3Practica 3
Practica 3gabypaye
 

Semelhante a Ejercicio2 maquete utilizando css externo. (20)

Ejercicio 4
Ejercicio 4Ejercicio 4
Ejercicio 4
 
Ejercicio4
Ejercicio4Ejercicio4
Ejercicio4
 
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 4-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 4-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 4 maquete utilizando css externo.
Ejercicio 4 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
 
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externoEjercicio 1-maquete-utilizando-css-externo
Ejercicio 1-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
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Maquetado 01
Maquetado 01Maquetado 01
Maquetado 01
 
Maquetado 03
Maquetado 03Maquetado 03
Maquetado 03
 
Ejercicio3
Ejercicio3Ejercicio3
Ejercicio3
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Javierqui-maquetados
Javierqui-maquetadosJavierqui-maquetados
Javierqui-maquetados
 
Practica 2
Practica 2Practica 2
Practica 2
 
Practica 2
Practica 2Practica 2
Practica 2
 
Maquetado 02
Maquetado 02Maquetado 02
Maquetado 02
 
Practica 3
Practica 3Practica 3
Practica 3
 

Ejercicio2 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 2 Maquete utilizando CSS externo. Primero lo tenemos abierto el programa dreamweavern para así podertrabajar, los pasos sonlos siguientes. Paso N°1:Trabajaremos en el archivo CSS. Para esto es los siguientes códigos que nos servirán para poderhacerlo el ejercicio N°2 Paso N°2:codificamos los siguientes códigos css. #header{ width:720px; height:100px; border: solid 1px #000; background-color: #F9F; text-align: center; }
  • 4. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 4 Paso N°3:codificamos los siguientes códigos css. #capa1{ position: absolute; width: 150px; height: 200px; border: solid 1px #000; background-color: #FCC; text-align: center; float: left; } Paso N°4:codificamos los siguientes códigos css. #capa2{ position: absolute; width: 560px; height: 400px; background: #6FF; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; text-align: center; float: left; left: 159px; top: 109px; } Paso N°5:codificamos los siguientes códigos css. #capa3{ position: absolute; width: 140px; height: 200px; background: #669; border: solid 1px #000; padding: 5px 7px 10px 15px; padding: 5px; text-align: center; top: 307px; left: 8px; }
  • 5. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 5 Paso N°6:codificamos los siguientes códigos css. #footer{ position: absolute; width: 725px; height: 100px; border: solid 1px #000; background-color: #FCC; text-align: center; float: left; left: 6px; top: 519px; } Paso N°8:Trabajaremos en el archivo HTML. Para esto es los siguientes códigos que nos servirán para poderhacerlo el ejercicio N°2 Paso N°9:codificamos los siguientes códigos para la práctica 2 (HTML) asignado que es lo siguiente. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 6. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 6 <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> <link rel="stylesheet" href="css2.css" type="text/css"/> </head> <body> <div id="header"> HEADER </div> <div id="capa1"> <p>NAVIGATION </p></div> <div id="capa3"> LINKLIST </div> <div id="capa2"> CONTENT </div> <div id="footer"> FOOTER </div></body></html>
  • 7. COMPUTACION E INFORMATICA QUISPE APAZA, Mery Página 7 Paso N° 10:Es el resultado ejecutado en el navegador (ejercicio N°2)