Este documento describe cuatro ejercicios de maquetación web utilizando HTML y CSS. Cada ejercicio incluye los pasos para codificar la estructura del sitio web, incluyendo la cabecera, menús, cuerpo y pie de página. El autor explica cómo utilizar Dreamweaver para desarrollar las páginas y ver los resultados en el navegador.

1. DISEÑO WEB
MAMANI CONDORI, Elmer Página 1
"Año delaDiversificación Productivay delFortalecimiento dela Educación”
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

2. DISEÑO WEB
MAMANI CONDORI, Elmer Página 2
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.

3. DISEÑO WEB
MAMANI CONDORI, Elmer Página 3
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.

4. DISEÑO WEB
MAMANI CONDORI, Elmer Página 4
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 sonlos siguientes códigos
Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

5. DISEÑO WEB
MAMANI CONDORI, Elmer Página 5
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:

6. DISEÑO WEB
MAMANI CONDORI, Elmer Página 6
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 sonlos siguientes códigos

7. DISEÑO WEB
MAMANI CONDORI, Elmer Página 7
Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

8. DISEÑO WEB
MAMANI CONDORI, Elmer Página 8
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:

9. DISEÑO WEB
MAMANI CONDORI, Elmer Página 9
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 sonlos siguientes códigos

10. DISEÑO WEB
MAMANI CONDORI, Elmer Página 10
Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.

11. DISEÑO WEB
MAMANI CONDORI, Elmer Página 11
MAQUETACIÓN WEB.

12. DISEÑO WEB
MAMANI CONDORI, Elmer Página 12
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.
Ejercicio 1: Maquete utilizando CSS externo.

13. DISEÑO WEB
MAMANI CONDORI, Elmer Página 13
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
Paso N° 3: Ahora realizaremos el menú 2 codificamos lo siguiente.

14. DISEÑO WEB
MAMANI CONDORI, Elmer Página 14
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.

15. DISEÑO WEB
MAMANI CONDORI, Elmer Página 15
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.

16. DISEÑO WEB
MAMANI CONDORI, Elmer Página 16
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.

17. DISEÑO WEB
MAMANI CONDORI, Elmer Página 17
Paso N° 14:Ahora hacerlo el cuadro dondeira del footer (parte de abajo) para
ello sonlos siguientes códigos
Paso N° 7: El resultado del ejercicio N° 1 ejecutado en el navegador.