Arbeta med flytande bilder i Dreamweaver CS6

I den tidigare delen av denna serie gick jag över de olika stilarken i samband med en flytnätlayout i Dreamweaver CS6. Under denna handledning kommer vi att uppmärksamma oss på att arbeta med bilder i vårt Fluid Xian projekt.

Fluidbilder

Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!

Det är en wrap

Denna serie har varit en ganska omfattande djupdykning i Dreamweaver CS6s nya Fluid Grid Layout-funktion. Som jag påpekade rätt i början av denna serie har funktionen känslan av att vara mer av ett "pågående arbete" än ett fullvärdigt tillskott till Dreamweaver-serien. Ändå är det en ganska bra start och jag förväntar mig att den uppdateras regelbundet via Creative Cloud.

"Responsive Web Design" och "Mobile First" är begrepp som uppenbarligen kom ut ur ingenstans, men för att de ger så mycket mening i en webvärld där mediabasertelefonen, surfplattformen och skrivbordet driver användarupplevelsen har de en fast etablering själva i hela branschen.

Fluid Grid Layouts är Adobes första "kick at the can", och om du arbetade dig igenom denna serie har du upptäckt att Ethans och Lukes koncept är fast förankrade i dem. Att skapa nät för mobil, surfplatta och skrivbord är den enkla delen av processen. Den svåra delen är styling. Det är lätt att förstå när du förstår begreppet Mobile First - gör en stiländring till Mobile CSS och det ändrar "ripples" genom tabletten och skrivbordslayouterna - men att avgöra vilka av de tre som använder Dreamweaver CSS-panelen är inte omedelbart uppenbart. En annan fråga är att Fluid Grid Layouts inte stöder elementhästning för att skapa mer komplexa layouter. Andra "trevliga att ha" funktioner inkluderar oförmågan att använda klasser istället för ID: n och kunna använda semantiska element som rubrik eller sidfot.

Som lärare är Fluid Grid-layouter en absolut gudsändning

Bildbehandling är ett annat område som kan dra nytta av viss uppmärksamhet. Wrangling CSS är inte ett stort problem, men det kräver viss förkunnelse kring hur bilder hanteras i en Responsive Web Design-värld och hur koden i mobilområdet påverkar tabletten och skrivbordsbilderna. Det här är inte helt enkelt och har potential att bli en stor smärtpunkt för nya människor i Fluid Grid-layouter i Dreamweaver CS6.

Med detta sagt borde du veta att mina CSS-skilar är ganska grundläggande och mina första experiment med Fluid Grid Layouts var en komplett och fullständig katastrof. När jag började förstå grunden för Responsive Web Desingn och Mobile First blev jag mer bekväm med Fluid Grid Layouts och mina resor till dermatoligisten för att återimplera hårkolvarna som jag rivit ut ur mitt huvud saktade till en trickle. En av de viktigaste frågorna du kan ställa är: "Är det här en progradsfunktion?" Mitt svar är "ännu inte". Jag kan se dem använda i stor utsträckning för ganska okomplicerade projekt men de är inte helt redo för de stora ligorna.

Som lärare är Fluid Grid-layouter en absolut gudsändning, eftersom de i Dreamweaver CS6 ger mina studenter en visuell inställning till Responsive Web Design och en solid grund i begreppet Mobile First. Du kanske vill tänka på det om du just börjar komma in i det nya och nya området.