“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 : CCALLA HUANCA, Diego Carlos.

CICLO ACADÉMICO : V

SEMESTRE : 2015 III

Juliaca - Puno – Perú.

2015

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.

CCALLA HUANCA, DIEGO CARLOS

TECNOTRONIC

Ejercicio 1: Maquete utilizando CSS externo.

Primero abrimos dreamweaver y asemos lo siguientes.

Paso N°1: abrimos nuevo HTML

Paso N° 2: Lo primero hacerlo la cabecera.

ponemos el siguiente código:

<style type="text/css">

Luego asemos los siguientes códigos para la cabecera los cuales son:

#cabecera{

background:#F03;

border:groove;

width:1000px;

height:150px;

margin:auto;

}

CCALLA HUANCA, DIEGO CARLOS

TECNOTRONIC

Paso N° 3: Ahora hacerlo el cuadro izquierdo (margen izquierdo) son los siguientes códigos.

#margen-izquierdo{background: #F93;border: groove;width: 330px;height: 500px;position: absolute;left: 172px;margin: auto;

top: 162px;}

Paso N° 4: Ahora hacerlo el cuadro centro (margen-centro) siguientes códigos.#margen-centro{

background: #F63;border: groove;width: 330px;height: 500px;position: absolute;left: 505px;margin: auto;top: 162px;}

Paso N° 5: Ahora hacerlo el cuadro derecho (margen-derecho) siguientes códigos.

#margen-derecho{background: #F90;border: groove;width: 330px;height: 500px;position: absolute;left: 839px;margin: auto;

top: 163px;}

CCALLA HUANCA, DIEGO CARLOS

TECNOTRONIC

Paso N° 6: Ahora hacerlo el cuadro donde ira del footer, son los siguientes códigos.#footer{

background: #F33;border: groove;

width: 1000px;height: 100px;position: absolute;left: 171px;

margin: auto;top: 666px;

}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.<div id="cabecera"> HEADER</div><div id="margen-izquierdo"> NAVIGATION</div><div id="margen-centro"> CONTENT</div><div id="margen-derecho">LINKLIST</div><div id="footer">FOOTER</div></div></body></html>

CCALLA HUANCA, DIEGO CARLOS

TECNOTRONIC

Paso N° 9: ahora veamos el resultado del ejercicio numero 1:

CCALLA HUANCA, DIEGO CARLOS

TECNOTRONIC