Práctica 2.3 - Diseño de layouts
Índice
1 Introducción
El objetivo de este ejercicio es poner en práctica las técnicas de diseño de layouts explicadas en la teoría.
2 Tiempo asignado
6 horas de clase.
3 Material de la práctica
Los modelos de layouts para realizar esta práctica están disponibles en el siguiente enlace: diseños práctica 2.3.
4 Desarrollo de la práctica
A partir de un documento HTML básico formado por DIVS, diseña las plantillas que se muestran en el documento indicado en el apartado 3 utilizando cada uno de las siguientes técnicas estudiadas en la unidad 2.2:
- Float
- Inline-block
- Display Table
- Flexbox
4.1 Aspectos a tener en cuenta
- Puedes utilizar los archivos creados en la práctica 1.4 como base.
- Debes utilizar unidades relativas para crear los diseños (layout fluido).
- Si utilizas capas vacías define una altura mínima (
min-height) en el CSS para que la capa se visualice correctamente. - Deberás modificar la estructura y añadir capas adicionales para realizar los distintos diseños. Por ello, los archivos HTML serán distintos para cada diseño.
- Es posible que tengas que utilizar distinto número de capas al utilizar una técnica u otra (es posible que algunas técnicas exijan un mayor uso de contenedores anidados que otras).
- Intenta no definir demasiados niveles de capas anidadas (uso excesivo de
divs).
4.2 Opcional
- Implementa los diseños utilizando el modelo de Grid Layout y comprueba su funcionamiento en el navegador Chrome activando la opción correspondiente.
- Realiza el diseño del layout de una web desarrollada por ti (puedes utilizar el diseño que tengas pensado para el módulo de Proyecto).
5 Resultado a entregar
- Se deben entregar los ficheros HTML y CSS comprimidos en un sólo archivo.
- El archivo estará en formato ZIP.
- El nombre del archivo será de la forma
apellido1-apellido2-nombre-practica2-3.zip(por ejemplo,prieto-alarcon-pedro-practica2-3.zip).
