CSS: Maquetación web con CSS: uso de float

CSS: Maquetación web con CSS: uso de float


hola bienvenido al vídeo maquetación web con css del curso introducción al desarrollo web mi nombre es elena torró y soy estudiante del grado en ingeniería multimedia de la universidad de alicante me puedes encontrar y contactar conmigo a través de mi blog www.torrid.com o de mi cuenta de twitter l narcolepsia en este vídeo voy a hablar sobre cómo estructurar una página web en diferentes columnas como ya he dicho antes utilizando css las hojas de estilo en cascada una página web está formada por bloques cada elemento es un bloque distinto y esos bloques pueden estar uno sobre otro dispuestos de manera ordenada o desordenada en la misma línea o en líneas distintas la correcta estructuración del contenido de la información está presente en muchos medios de comunicación como por ejemplo en un periódico y lo mismo ocurre con las páginas web para diseñar una página web además de un correcto uso de colores y de diseño es muy importante la distribución de los elementos una distribución correcta permitirá al usuario navegar por la web de manera intuitiva haciendo que la experiencia del usuario sea más satisfactoria para empezar explicaremos una propiedad que originalmente no estaba pensada para la maquetación web pero que se utiliza mucho para realizar los layouts la propiedad flow de cloud es una propiedad de css que permite que los elementos se coloquen en una determinada posición con respecto a los otros elementos de la web esta propiedad puede ser cloud no la posición por defecto del elemento en la página flow rights la posición flotante hace lugar más a la derecha posible cloud left la posición flotante hace lugar más a la izquierda posible y flow tiger beat que hace referencia al flow de su elemento padre pero su uso no es muy común así que no nos centraremos en él aquí podéis ver algunos ejemplos de la propiedad flow en este caso al posicionarse en su posición más a la derecha primero lo hace la caja 1 y así sucesivamente hasta la caja 4 por eso varía el orden y en este ejemplo primero la caja uno se coloca a la izquierda seguida de la caja 2 luego la caja 3 se coloca a la derecha seguida de la caja 4 empecemos con un ejemplo de lay out de dos columnas partiremos de un documento sencillo en html donde definiremos los siguientes elementos cabecera columna izquierda columna derecha y pie de página así lo veríamos en el navegador ahora vamos a colocarlo de manera que la columna izquierda y la columna derecha queden alineadas horizontalmente una al lado de la otra lo primero que debemos hacer en nuestro css es colocar la propiedad load left en los dif derecha e izquierda que son los que queremos alinear lo hacemos así porque queremos que se coloquen hacia la izquierda de la página web aparece la propiedad clear boat esta propiedad permite modificar el comportamiento por defecto del posicionamiento flotante es decir fuerza un elemento en este caso al pie de página a mostrarse debajo de cualquier caja flotante el siguiente paso es establecer el width de las columnas izquierda y derecha con porcentajes en este caso hemos definido el width de la columna izquierda con un tamaño del 23 por ciento y el de la derecha con un 72% en total el tamaño de las columnas junto con los márgenes debe sumar un 100% que es el máximo tamaño del ancho de la página este es el resultado la columna izquierda que podría ser el menú queda más pequeña que la columna derecha que podría ser el contenido y ambas están alineadas y porque hemos usado porcentajes porque así conseguimos un diseño adaptativo es decir que se adapte a las dimensiones de la pantalla como ves al hacer la pantalla más pequeña los elementos van adaptándose al tamaño es muy importante tener en cuenta un diseño adaptable ya que hoy en día existen muchos tipos de dispositivos con una gran variedad de tamaños de pantalla ahora añadiremos una nueva columna para poner un ejemplo del layout de tres columnas se trata del mismo ejemplo anterior al que le hemos añadido el dif centro lo utilizaremos como el dip que contendrá el contenido principal de nuestra web añadimos en el css el nuevo divx en este caso ya que habrá tres columnas tendremos que modificar el tamaño de las columnas izquierda y derecha para que queden alineadas como podemos comprobar ahora hemos estructurado la web de manera distinta es decir hemos creado un layout distinto hay muchas otras maneras de maquetar una página web pero una que no se debió usar es la maquetación con tablas la diferencia con las etiquetas de tabla en html es que estructurar una web con este tipo de tablas no cumple los estándares de accesibilidad estás acostumbrado a maquetar con tablas te voy a explicar cómo hacerlo de forma parecida pero con css si estás interesado en este tema puedes obtener más información en la siguiente página web existe otra propiedad de css conocida como display que también se usa en la maquetación web en este vídeo me centraré en las propiedades display table donde colocaremos los elementos como si se tratara de una tabla aquí vemos los distintos elementos que puede tener una tabla el título o una columna una fila o una celda vamos a maquetar la web como en el ejemplo anterior con tres columnas pero esta vez utilizando las propiedades de la tabla la cabecera será una h but caption y las columnas izquierda centro y derecha un h bou self de nuevo usaremos porcentajes para establecer las distintas dimensiones en este caso es más sencillo puesto que si emitimos el porcentaje de por ejemplo la celda derecha ésta se dibujará con el tamaño que le queda a la ventana por defecto lo que hace el diseño mucho más adaptable este es el resultado como veis es muy parecido a la anterior pero más adaptable y con un layout más limpio y así es como se vería en tamaños más pequeños de pantalla ves cómo se adapta de una resolución más pequeña hay una gran variedad de lay outs que puedes realizar con la propiedad display con los que podrás conseguir un buen diseño estructurado y adaptable recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y de su web punto es muchas gracias por tu atención

16 thoughts on “CSS: Maquetación web con CSS: uso de float”

  1. Hagan mas vídeos como este!! me ah ayudado mucho la información!! recién estoy empezando con estos conceptos y se hace difícil emplear adecuadamente las propiedades css y saber cual es la mejor opción, pero viendo este vídeo me ha aclarado bastante las ideas sobre esas propiedades :D, desde ya muchas gracias.

    Saludos y un abrazo grande desde Argentina! 🙂

  2. Muchisimas gracias!! Me has salvado la vida. Esta muy bien explicado. Saludos desde Mexico
    PD: tienes una voz hermosa

  3. Excelente trabajo, uno de los mejores vídeos que he visto. Sigan así. Gracias por hacer material educativo de alta calidad.

Leave a Reply

Your email address will not be published. Required fields are marked *