Arbeiten mit flüssigen Bildern in Dreamweaver CS6

In der vorherigen Ausgabe dieser Serie habe ich die verschiedenen Stylesheets, die einem Fluid-Raster-Layout in Dreamweaver CS6 zugeordnet sind, durchgegangen. In diesem Tutorial richten wir unsere Aufmerksamkeit auf die Arbeit mit Bildern in unserem Fluid Xian Projekt.

Flüssige Bilder

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes oder YouTube abonnieren!

Es ist ein Wrap

Diese Serie war ein ziemlich tiefer Einblick in die neue Funktion Fluid Grid Layout von Dreamweaver CS6. Wie ich gleich zu Beginn dieser Serie herausgestellt habe, fühlt sich das Feature eher als "work in progress" an, als eine vollwertige Ergänzung der Dreamweaver-Reihe. Trotzdem ist es ein ziemlich guter Anfang und ich erwarte, dass er regelmäßig über die Creative Cloud aktualisiert wird.

"Responsive Web Design" und "Mobile First" sind Konzepte, die scheinbar aus dem Nichts entstanden sind, aber weil sie in einer Web-Welt, in der das Medium Smartphone, Tablet und Desktop das Benutzererlebnis bestimmt, so viel Sinn machen, haben sie sich fest etabliert sich in der gesamten Branche.

Die Fluid-Grid-Layouts sind der erste "Kick at the can" von Adobe. Wenn Sie sich durch diese Serie gekümmert haben, haben Sie entdeckt, dass die Konzepte von Ethan und Luke fest in ihnen verankert sind. Das Erstellen von Rastern für Mobilgeräte, Tablets und Desktops ist der einfache Teil des Prozesses. Der schwierige Teil ist das Styling. Es ist leicht zu verstehen, sobald Sie das Konzept von Mobile First kennen: Nehmen Sie eine Stiländerung an Mobile CSS vor, und diese Änderung "kräuselt" sich durch die Tablett- und Desktop-Layouts. Sie erfahren jedoch, welcher der drei Elemente das Dreamweaver-CSS-Bedienfeld verwendet nicht sofort ersichtlich. Ein weiteres Problem ist, dass Fluid-Grid-Layouts keine Elementverschachtelung unterstützen, um komplexere Layouts zu erstellen. Andere "nice to have" -Features umfassen die Unfähigkeit, Klassen anstelle von IDs zu verwenden und semantische Elemente wie Kopf- oder Fußzeile verwenden zu können.

Als Lehrer sind Fluid-Grid-Layouts eine absolute Gabe von Gott

Imaging ist ein weiterer Bereich, der von etwas Aufmerksamkeit profitieren könnte. Das Wrangling von CSS ist kein großes Problem, aber es erfordert etwas Vorwissen darüber, wie Bilder in einer Responsive Web Design-Welt behandelt werden und wie sich Code im Mobile-Bereich auf Tablets und Desktop-Images auswirkt. Dies ist nicht ganz einfach und hat das Potenzial, zu einem großen Schmerzpunkt für Benutzer zu werden, die mit dem Layout von Fluid-Grids in Dreamweaver CS6 neu sind.

Allerdings sollten Sie wissen, dass meine CSS-Fähigkeiten ziemlich einfach sind, und meine ersten Experimente mit Fluid Grid Layouts waren eine vollständige Katastrophe. Als ich anfing, die Grundlagen von Responsive Web Desingn und Mobile First zu verstehen, wurde ich mit Fluid Grid Layouts und meinen Reisen zum Dermatologen sehr zufrieden, um die Haarbüschel zu reimplantieren, die ich mir aus dem Kopf gerissen hatte. Eine der wichtigsten Fragen, die Sie sich vielleicht stellen, ist: "Ist dies eine Funktion für Profis?" Meine Antwort lautet "Noch nicht". Ich kann sehen, dass sie für ziemlich unkomplizierte Projekte ausgiebig genutzt werden, aber für die großen Ligen sind sie nicht bereit.

Als Lehrer sind Fluid-Grid-Layouts ein absolutes Muss, weil sie meinen Studenten in Dreamweaver CS6 eine visuelle Annäherung an Responsive Web Design und eine solide Grundlage im Konzept von Mobile First bieten. Vielleicht möchten Sie daran denken, wenn Sie gerade erst in dieses neue und aufstrebende Feld einsteigen.