Share
I den forrige delen av denne serien gikk jeg over de forskjellige stilarkene som var knyttet til et flytnettnetting i Dreamweaver CS6. Under denne opplæringen skal vi gjøre oppmerksom på å jobbe med bilder i vår Fluid Xian prosjekt.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Denne serien har vært en ganske omfattende dyp dykk i den nye Fluid Grid Layout-funksjonen til Dreamweaver CS6. Som jeg påpekte rett ved starten av denne serien, har funksjonen følelsen av å være mer av et "arbeid pågår" enn et fullverdig tillegg til Dreamweaver-linjen. Likevel, det er en ganske god start, og jeg regner med å se det jevnlig oppdatert gjennom Creative Cloud.
"Responsive Web Design" og "Mobile First" er konsepter som tilsynelatende kom ut fra ingensteds, men fordi de gir så mye mening i en webverden hvor medie-smarttelefonen, nettbrettet og skrivebordet driver brukeropplevelsen, har de en fast etablering seg selv gjennom hele bransjen.
Fluid Grid Layouts er Adobes første "kick at the can", og hvis du har jobbet deg gjennom denne serien, har du oppdaget at Ethans og Luke konsepter er fast forankret i dem. Opprette nett for mobil, nettbrett og skrivebord er den enkle delen av prosessen. Den harde delen er stylingen. Det er lett å forstå når du får begrepet Mobile First - gjør en stilendring til Mobile CSS, og det endrer "krusninger" gjennom tabletten og skrivebordslayoutene - men å finne ut hvilken av de tre som bruker Dreamweaver CSS-panelet, er ikke umiddelbart tydelig. Et annet problem er at Fluid Grid Layouts ikke støtter elementnesting for å skape mer komplekse layouter. Andre "fine å ha" funksjoner inkluderer manglende evne til å bruke klasser i stedet for ID og å kunne bruke semantiske elementer som topptekst eller bunntekst.
Som lærer er Fluid Grid layouter en absolutt Gud sende
Imaging er et annet område som kan ha nytte av noe oppmerksomhet. Wrangling CSS er ikke et stort problem, men det krever litt forkjennskap rundt hvordan bildene håndteres i en Responsive Web Design-verden, og hvordan koden i mobilområdet påvirker nettbrettet og skrivebordsbildene. Dette er ikke helt enkelt og har potensial til å bli et stort smertepunkt for folk som er nye til Fluid Grid-oppsett i Dreamweaver CS6.
Når du sier det, bør du vite at CSS-skiltene mine er ganske grunnleggende, og mine første eksperimenter med Fluid Grid Layouts var en komplett og total katastrofe. Når jeg begynte å ta tak i grunnlaget for Responsive Web Desingn og Mobile First, ble jeg mer komfortabel med Fluid Grid Layouts og mine turer til dermatoligisten for å reimplantere klumperne av håret jeg rev ut av hodet mitt, senket til en dråpe. Et av de viktigste spørsmålene du kanskje spør er: "Er dette en progradsfunksjon?" Mitt svar er "Ikke ennå." Jeg kan se dem brukt mye for ganske ukompliserte prosjekter, men de er ikke helt klar for de store ligaene.
Som lærer er Fluid Grid-oppsett en absolutt Gud sende fordi de i Dreamweaver CS6 gir studentene mine en visuell tilnærming til Responsive Web Design og en solid jording i konseptet Mobile First. Du vil kanskje tenke på det hvis du bare begynner å komme inn på dette nye og nye feltet.
Accentsconagua