Trabajar con imágenes fluidas en Dreamweaver CS6

En la entrega anterior de esta serie, repasé las diferentes hojas de estilo asociadas con un diseño de cuadrícula fluido en Dreamweaver CS6. Durante este tutorial vamos a centrar nuestra atención en trabajar con imágenes en nuestro Xian Fluido proyecto.


Imágenes fluidas

Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!


Es una envoltura

Esta serie ha sido una inmersión profunda bastante extensa en la nueva característica Fluid Grid Layout de Dreamweaver CS6. Como señalé justo al comienzo de esta serie, la característica tiene la sensación de ser más un "trabajo en progreso" que una adición completa a la línea de Dreamweaver. Aun así, es un buen comienzo y espero verlo actualizado regularmente a través de Creative Cloud.

"Diseño web responsivo" y "Primero lo móvil" son conceptos que aparentemente surgieron de la nada, pero como tienen mucho sentido en un mundo web en el que el medio, teléfono inteligente, tableta y computadora de escritorio impulsan la experiencia del usuario, están firmemente establecidos. ellos mismos en toda la industria.

Los diseños de Fluid Grid son la primera "patada en la lata" de Adobe y, si trabajaste a través de esta serie, habrás descubierto que los conceptos de Ethan y Luke están firmemente arraigados en ellos. Crear grillas para dispositivos móviles, tabletas y computadoras de escritorio es la parte fácil del proceso. La parte difícil es el estilo. Es fácil de entender una vez que adquiera el concepto de Mobile First: realice un cambio de estilo en el Mobile CSS y cambie las "ondulaciones" a través de la tableta y los diseños de escritorio, pero descubrir cuál de los tres utiliza el panel CSS de Dreamweaver es No es inmediatamente evidente. Otro problema es que los diseños de cuadrícula fluida no admiten el anidamiento de elementos para crear diseños más complejos. Otras características "agradables de tener" incluyen la incapacidad de usar clases en lugar de ID y la posibilidad de usar elementos semánticos como encabezado o pie de página.

Como profesor, los diseños de Fluid Grid son un envío absoluto de Dios.

La imagen es otra área que podría beneficiarse de alguna atención. Arreglar el CSS no es un problema importante, pero requiere un conocimiento previo sobre cómo se manejan las imágenes en un mundo de Diseño Web Responsivo y cómo el código en el área de Mobile afecta las imágenes de la tableta y el escritorio. Esto no es exactamente fácil y tiene el potencial de convertirse en un punto de gran dolor para las personas nuevas en los diseños de Fluid Grid en Dreamweaver CS6.

Habiendo dicho eso, deberías saber que mis caracteres CSS son bastante básicos y mis primeros experimentos con Fluid Grid Layouts fueron un completo y absoluto desastre. Una vez que comencé a comprender los fundamentos de Responsive Web Desingn y Mobile First, me sentí más cómodo con los diseños de cuadrícula fluidos y mis viajes al dermatólogo para reimplantar los mechones de cabello que arranqué de mi cabeza y disminuí hasta un goteo. Una de las preguntas clave que puede hacer es: "¿Es esta una característica de nivel profesional?" Mi respuesta es "Todavía no". Puedo verlos usados ​​extensivamente para proyectos bastante sencillos pero no están listos para las grandes ligas.

Como profesor, los diseños de Fluid Grid son un envío absoluto de Dios porque, en Dreamweaver CS6, brindan a mis alumnos un enfoque visual del diseño web sensible y una base sólida en el concepto de Mobile First. Es posible que desee pensar en eso si está empezando a entrar en este campo nuevo y emergente.