View
75
Download
1
Category
Preview:
Citation preview
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
Recommended