Ejercicio 4

“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

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.

Ejercicio 4: Maquete utilizando CSS externo.

QUISPE APAZA, Mery Página 2


Primero lo tenemos abierto el programa dreamweavern para así poder trabajar,

los pasos son los siguientes.

Paso N°1:

Para esto es los siguientes códigos que nos servirán para poder hacerlo el

ejercicio N°4

Paso N°2: codificamos los siguientes códigos css.

#header{width:725px;height:100px;border: solid 1px #000;background-color: #999; text-align: center;}




#nav{

background: #999;border: solid 1px #000;width: 700px;height: 30px;position: absolute; left: 1px;margin: 20px;top: 47px;text-align: center;}

Paso N°4: codificamos los

siguientes códigos css.

#main { width:250px; height:500px; margin: 5px; padding: 6px; border: 1px solid #8888bb; background: #ccccff; float: left; }


#nav1{background: #666;width: 210px;height: 240px;border: 1px solid #000; position: absolute;left: 23px;margin: 20px;top: 123px;



}


#nav2{background: #FFF;width: 170px;height: 150px;border: 1px solid #000; position: absolute;left: 45px;margin: 20px;top: 381px;

}


#main1 {

width:420px;height:490px;margin: 5px; padding: 12px; border: 1px solid #8888bb; background: #ccccff; float: left;

}



#capa1{width: 400px;height: 40px;border: 1px solid #000; position: absolute;left: 282px;margin: 20px;top: 122px;}




#arcticle{width: 400px;height: 150px;border: 1px solid #000; position: absolute;left: 281px;margin: 20px;top: 204px;

}



#actile1{width: 370px;height: 30px;border: 1px solid #000; position: absolute;left: -5px;margin: 20px;top: 7px;

}


#actile2{width: 210px;height: 20px;border: 1px solid #000; position: absolute;left: -5px;margin: 20px;top: 55px;

}




#actile3{width: 140px;height: 20px;border: 1px solid #000; position: absolute;left: 226px;margin: 20px;top: 55px;

}


#arcticle4{width: 370px;height: 30px;border: 1px solid #000; position: absolute;left: -4px;margin: 20px;top: 89px;

}


#cuadrado{width: 400px;height: 150px;border: 1px solid #000; position: absolute;left: 285px;margin: 20px;top: 379px;

}




#cuadrado1{width: 370px;height: 30px;border: 1px solid #000; position: absolute;left: -5px;margin: 20px;top: 7px;

}


#cuadrado2{width: 370px;height: 20px;border: 1px solid #000; position: absolute;left: -5px; margin: 20px;top: 52px;

} Paso N°17: codificamos los siguientes códigos css.

#cuadrado3{width: 370px;height: 30px;border: 1px solid #000;position: absolute;left: -6px;margin: 20px;top: 87px;

}




#art{width: 400px;height: 40px;border: 1px solid #000; position: absolute;left: 287px;margin: 20px;top: 556px;

}


#header1{

width: 725px;height: 90px;border: 1px solid #000; position: absolute;left: -10px;margin: 20px;top: 622px; }



Paso N°20: codificamos los siguientes códigos para la práctica 2 (HTML)

asignado que es lo siguiente.

<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Documento sin título</title><link rel="stylesheet" href="css.css" type="text/css" /></head><body><div id="header"> <div id="nav"> </div></div><div id="main"> <div id="nav1"> </div><div id="nav2"> </div></div><div id="main1"><div id="capa1"></div><div id="arcticle"><div id="actile1"></div><div id="actile2"> </div><div id="actile3"></div><div id="arcticle4"> </div></div><div id="cuadrado"><div id="cuadrado1"></div><div id="cuadrado2"></div><div id="cuadrado3"></div></div><div id="art"></div></div><div id="header1"></div></body></html>



Paso N°21: ahí nos muestra el resultado ejecutado en el navegador del

(ejercicio N°4)


Ejercicio 4

Documents

Transcript of Ejercicio 4