maquetación

1. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
MAQUETACION EN HTML.

2. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

3. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

4. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

5. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

6. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

7. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

8. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017

9. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Comencemos a realizar nuestra página con código HTML, tomando como ejemplo la imagen
anterior:

10. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Agreguemos texto a cada div
Observemos hasta el momento, lo que el usuario visualizara por el navegador:
Definamos ahora estilo a nuestra página, desde el código HTML:

11. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Nos quedaría de esta forma:
Ahora pongamos el atributo float

12. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Grabemos y observemos desde el
navegador. Y luego coloquemos el float al menú izquierdo:
quedaría de esta
forma:

13. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
hagamos lo mismo con el menú derecho:
Nos quedaría de la siguiente manera:
Debemos colocar lo mismo en pie de página y colocar el atributo clear para que el footer pueda
estar en su lugar:
Observemos, como
baja:

14. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Como podemos visualizar, queda, un espacio vacío después del menú derecho, debemos cambiar
el ancho de los Div, para ello, cambiemos el espacio del menú izquierdo, del contenido y del
derecho, a través del atributo Width:
Quedando de la forma sigte.:
Centremos los títulos de la cabecera y barra:
Observemos:

15. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Hagamos lo mismo con contenido:
Poco a poco estamos llegando a lo deseado:
Agreguemos otros atributos:

16. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Debemos colocar un valor fijo a la imagen, para que no se modifique su tamaño, al momento de
cerrar y abrir ventanas, también coloquemos un fondo a la página:
Cambiemos el color del pie de página a blanco

17. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Coloquemos opciones a la barra, utilicemos una tabla
Generen el menú izquierdo:
Coloquemos el contenido e imagen:

18. PNF Informática/Electiva 1 Ejercicio de Maquetación Ing. Francys Barreto/I-2017
Coloquemos imagen en el menú derecho. Saquemos el pie de página de los otros div para que no
se afecte, y tenga su propio espacio
Finalmente Tenemos algo de lo deseado. En resumen:
1. Hacer lo más parecido al diseño deseado.
2. Analizar, crear un diseño inicial, en el cual, visualice como se
verá tu pagina
3. Comprendamos el uso del código html y propiedades de css:
float que organizara los elementos a la izquierda y a la
derecha y Clear que evitara que algunos elementos flotantes
se posicionen por encima, a la derecha o izquierda
4. Otra cosa que debemos saber es el uso de la etiqueta <div>
que dividirá nuestra página en diferentes secciones