DISEÑO WEB

"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 : DISEÑO WEB

DOCENTE : HANCCO QUISPE, Elar

ESTUDIANTE : MAMANI CONDORI, Elmer

CICLO ACADÉMICO : V.

SECCIÓN :”A”

SEMESTRE : 2014-I

Juliaca - Puno – Perú.

2014

MAMANI CONDORI, Elmer Página 1

DISEÑO WEB

MAQUETACIÓN WEB.

UTILIZANDO CSS Y HTML.

EJERCICIO N° 1: maquetación utilizando CSS externo.

Para realizar la maquetación web tenemos que tener instalado nuestro DREAMWEAVER para trabajar adecuadamente.

PASO 1:

Abrimos nuestro DRAMWEAVER.

Donde nos muestra la siguiente ventana en la cual seleccionaremos HTML con el

cual trabajaremos.

Paso N°2 codificamos los siguientes códigos (HTML) asignado que es lo

siguientes código.

MAMANI CONDORI, Elmer Página 2

DISEÑO WEB

Ejercicio 1: Maquete utilizando CSS externo.

Paso N° 1: Lo primero hacerlo el cuerpo del cuadro para eso lo primero ponemos el siguiente código que es:

Paso N° 2: para realizar la cabecera de nuestro maquetado codificamos lo siguiente

Paso N° 3: Ahora realizaremos el sidebar A par a eso codificamos lo siguiente.

Paso N° 4: Ahora realizaremos el sidebar B par a eso codificamos lo siguiente.

MAMANI CONDORI, Elmer Página 3

DISEÑO WEB

Paso N° 5: Ahora realizaremos el sidebar C par a eso codificamos lo siguiente.

Paso N° 6: Ahora hacerlo el cuadro donde ira del footer (parte de abajo) para ello son los siguientes códigos

Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

MAMANI CONDORI, Elmer Página 4

DISEÑO WEB

MAQUETACIÓN WEB.

UTILIZANDO CSS Y HTML.

EJERCICIO N° 2: maquetación utilizando CSS externo.

Para realizar la maquetación web tenemos que tener instalado nuestro DREAMWEAVER para trabajar adecuadamente.

Paso N°1 codificamos los siguientes códigos (HTML) asignado que es lo

siguientes código.

Ejercicio 1: Maquete utilizando CSS externo.

Paso N° 1: Lo primero hacerlo el cuerpo del cuadro para eso lo primero ponemos el siguiente código que es:

MAMANI CONDORI, Elmer Página 5

DISEÑO WEB

Paso N° 2: para realizar la cabecera de nuestro maquetado codificamos lo siguiente

Paso N° 3: Ahora realizaremos el sidebar A par a eso codificamos lo siguiente.

Paso N° 4: Ahora realizaremos el sidebar B par a eso codificamos lo siguiente.

Paso N° 5: Ahora realizaremos el sidebar C par a eso codificamos lo siguiente.

Paso N° 6: Ahora hacerlo el cuadro donde ira del footer (parte de abajo) para ello son los siguientes códigos

MAMANI CONDORI, Elmer Página 6

DISEÑO WEB

Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

MAMANI CONDORI, Elmer Página 7

DISEÑO WEB

MAQUETACIÓN WEB.

UTILIZANDO CSS Y HTML.

EJERCICIO N° 3: maquetación utilizando CSS externo.

Para realizar la maquetación web tenemos que tener instalado nuestro DREAMWEAVER para trabajar adecuadamente.

Paso N°1 codificamos los siguientes códigos (HTML) asignado que es lo

siguientes código.

Ejercicio 1: Maquete utilizando CSS externo.

Paso N° 1: Lo primero hacerlo el cuerpo del cuadro para eso lo primero ponemos el siguiente código que es:

MAMANI CONDORI, Elmer Página 8

DISEÑO WEB

Paso N° 2: para realizar la cabecera de nuestro maquetado codificamos lo siguiente

Paso N° 3: Ahora realizaremos el menú par a eso codificamos lo siguiente.

Paso N° 4: Ahora realizaremos el cuerpo par a eso codificamos lo siguiente.

Paso N° 5: Ahora realizaremos el linck par a eso codificamos lo siguiente.

Paso N° 6: Ahora hacerlo el cuadro donde ira del footer (parte de abajo) para ello son los siguientes códigos

MAMANI CONDORI, Elmer Página 9

DISEÑO WEB

Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

MAMANI CONDORI, Elmer Página 10

DISEÑO WEB

MAQUETACIÓN WEB.

UTILIZANDO CSS Y HTML.

EJERCICIO N° 4: maquetación utilizando CSS externo.

Para realizar la maquetación web tenemos que tener instalado nuestro DREAMWEAVER para trabajar adecuadamente.

Paso N°1 codificamos los siguientes códigos (HTML) asignado que es lo

siguientes código.

MAMANI CONDORI, Elmer Página 11

DISEÑO WEB

Ejercicio 1: Maquete utilizando CSS externo.

Paso N° 1: Lo primero hacerlo el cuerpo del cuadro para eso lo primero ponemos el siguiente código que es:

Paso N° 2: para realizar el menú 1 de nuestro maquetado codificamos lo siguiente

MAMANI CONDORI, Elmer Página 12

DISEÑO WEB

Paso N° 3: Ahora realizaremos el menú 2 codificamos lo siguiente.

Paso N° 4: para realizar el menú 1 de nuestro maquetado codificamos lo siguiente .

Paso N° 5: Ahora realizaremos el header - a par a eso codificamos lo siguiente.

Paso N° 6: Ahora realizaremos el Article par a eso codificamos lo Siguiente.

MAMANI CONDORI, Elmer Página 13

DISEÑO WEB

Paso N° 7: Ahora realizaremos el header - b par a eso codificamos lo siguiente.

Paso N° 8: Ahora realizaremos el div a par a eso codificamos lo siguiente.

Paso N° 9: Ahora realizaremos el article par a eso codificamos lo siguiente.

Paso N° 10: Ahora realizaremos el header – 1b par a eso codificamos lo siguiente.

MAMANI CONDORI, Elmer Página 14

DISEÑO WEB

Paso N° 11: Ahora realizaremos el div 1-a par a eso codificamos lo siguiente.

Paso N° 12: Ahora realizaremos el submenu1par a eso codificamos lo siguiente.

Paso N° 12: Ahora realizaremos el submenu2par a eso codificamos lo siguiente.

MAMANI CONDORI, Elmer Página 15

DISEÑO WEB

Paso N° 14: Ahora hacerlo el cuadro donde ira del footer (parte de abajo) para ello son los siguientes códigos

Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

MAMANI CONDORI, Elmer Página 16