“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)

Más contenido relacionado

DOCX
Ejercicio4
DOCX
Ejercicio4
PPTX
Ana maría olivari.ppt
PDF
Atelier dépôt dans HAL : libérez vos publications ! #OAW2014
PPTX
Ymn m4 u1
PDF
Ley 142 de_1994
PPTX
Pourquoi l'advergame est-il un contenu si extraordinaire? - Gabriel Mamou-Man...
PPT
Patinadores Colombianos
Ejercicio4
Ejercicio4
Ana maría olivari.ppt
Atelier dépôt dans HAL : libérez vos publications ! #OAW2014
Ymn m4 u1
Ley 142 de_1994
Pourquoi l'advergame est-il un contenu si extraordinaire? - Gabriel Mamou-Man...
Patinadores Colombianos

Destacado (20)

PDF
Forum_hotelier_Octobre2016
DOCX
Communique de presse : le Premier Ministre accélère l’agenda des réformes en...
PDF
Communique de presse de valerie corre
PPTX
LAS TIC
PDF
DanutZbarcea-article-Vision no 67
PDF
Education & Technology : a worldwide love affair
PDF
04 seccion 3
PPT
Coaching A2 O
PDF
Aplicaciones multimedia en la educación
PPTX
Trabajo "El Directorio- COncytec"
PPTX
Greenerwave is building a world where we can easily and safely connect people...
PDF
Automatiser la qualite
PDF
Tic y edu_superior
PDF
Des chercheurs en CM2 et sixième
PDF
Réseaux sociaux et business par ETO
PDF
Reportaje turistico píllaro gloria taco
PPT
PPTX
20150723 pitch 10 minutes kedge nursery ss
PDF
PPTX
Atelier d'éveil musical
Forum_hotelier_Octobre2016
Communique de presse : le Premier Ministre accélère l’agenda des réformes en...
Communique de presse de valerie corre
LAS TIC
DanutZbarcea-article-Vision no 67
Education & Technology : a worldwide love affair
04 seccion 3
Coaching A2 O
Aplicaciones multimedia en la educación
Trabajo "El Directorio- COncytec"
Greenerwave is building a world where we can easily and safely connect people...
Automatiser la qualite
Tic y edu_superior
Des chercheurs en CM2 et sixième
Réseaux sociaux et business par ETO
Reportaje turistico píllaro gloria taco
20150723 pitch 10 minutes kedge nursery ss
Atelier d'éveil musical
Publicidad

Similar a Ejercicio2 maquete utilizando css externo. (20)

DOCX
Ejercicio 4
DOCX
Ejercicio4
DOCX
Ejercicio 4-maquete-utilizando-css-externo.
DOCX
Ejercicio 4-maquete-utilizando-css-externo.
DOCX
Ejercicio 4-maquete-utilizando-css-externo.
DOCX
Ejercicio 4 maquete utilizando css externo.
DOCX
Ejercicio2 maquete utilizando css externo.
DOCX
Ejercicio 1-maquete-utilizando-css-externo
DOCX
Ejercicio 1-maquete-utilizando-css-externo
DOCX
Ejercicio 1-maquete-utilizando-css-externo
DOCX
Ejercicio2 maquete utilizando css externo.
DOCX
Ejercicio3
DOCX
Ejercicio2 maquete utilizando css externo.
DOCX
Javierqui-maquetados
DOCX
Practica 2
DOCX
Practica 2
DOCX
Practica 3
Ejercicio 4
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.
Ejercicio2 maquete utilizando css externo.
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio 1-maquete-utilizando-css-externo
Ejercicio2 maquete utilizando css externo.
Ejercicio3
Ejercicio2 maquete utilizando css externo.
Javierqui-maquetados
Practica 2
Practica 2
Practica 3
Publicidad

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)