Lavorare con le immagini fluide in Dreamweaver CS6

Nella puntata precedente di questa serie ho esaminato i vari fogli di stile associati a un layout a griglia fluida in Dreamweaver CS6. Durante questo tutorial concentreremo la nostra attenzione su come lavorare con le immagini nel nostro Fluido Xian progetto.

Immagini fluide

In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!

È un involucro

Questa serie è stata un'immersione profonda piuttosto estesa nella nuova funzionalità Layout griglia fluido di Dreamweaver CS6. Come ho sottolineato all'inizio di questa serie, la funzione ha la sensazione di essere più un "work in progress" che un'aggiunta completa alla linea Dreamweaver. Anche così, è un buon inizio e mi aspetto di vederlo regolarmente aggiornato tramite Creative Cloud.

"Responsive Web Design" e "Mobile First" sono concetti che sembrano usciti dal nulla, ma perché hanno molto senso in un mondo web in cui lo smartphone medio, il tablet e il desktop guidano l'esperienza dell'utente, hanno stabilito saldamente loro stessi in tutto il settore.

I Fluid Grid Layouts sono il primo "calcio al barattolo" di Adobe e, se hai lavorato in questa serie, avrai scoperto che i concetti di Ethan e Luke sono saldamente radicati in essi. La creazione di griglie per dispositivi mobili, tablet e desktop è la parte facile del processo. La parte difficile è lo stile. È facile capire una volta ottenuto il concetto di Mobile First: apportare una modifica di stile al CSS mobile e modificare le "increspature" attraverso i layout di tablet e desktop, ma capire quale dei tre utilizza il pannello CSS di Dreamweaver è non immediatamente evidente. Un altro problema è che Fluid Grid Layouts non supporta l'annidamento degli elementi per creare layout più complessi. Altre caratteristiche "belle da avere" includono l'incapacità di usare classi invece di ID e di poter usare elementi semantici come header o footer.

Come insegnante, i layout di Fluid Grid sono un Dio assoluto da inviare

L'imaging è un'altra area che potrebbe beneficiare di una certa attenzione. La discussione sul CSS non è un problema importante, ma richiede una certa conoscenza del modo in cui le immagini vengono gestite in un mondo di Responsive Web Design e di come il codice nell'area Mobile influenzi le immagini del tablet e del desktop. Questo non è esattamente facile e ha il potenziale di diventare un importante punto di sofferenza per le persone che non conoscono i layout di Grid fluido in Dreamweaver CS6.

Detto questo, dovresti sapere che i miei fogli di stile CSS sono abbastanza basilari e che i miei primi esperimenti con i layout a griglia fluida sono stati un completo e totale disastro. Una volta che ho iniziato a cogliere le basi di Responsive Web Desingn e Mobile First, sono diventato più a mio agio con Fluid Grid Layouts e le mie trasferte al dermatologista per reimpiantare i ciuffi di capelli che ho strappato dalla mia testa hanno rallentato fino a diventare un filo. Una delle domande chiave che potresti porre è: "È una funzionalità di livello professionale?" La mia risposta è "Non ancora." Posso vederli ampiamente utilizzati per progetti abbastanza semplici, ma non sono ancora pronti per i campionati più importanti.

Come insegnante, i layout di Fluid Grid sono un Dio assoluto perché, in Dreamweaver CS6, offrono ai miei studenti un approccio visivo al Responsive Web Design e una solida base nel concetto di Mobile First. Potresti volerlo pensare se stai appena iniziando a entrare in questo nuovo ed emergente campo.