Lucrul cu imagini fluide în Dreamweaver CS6

În tranșa anterioară a acestei serii, am trecut peste diferitele foi de stil asociate cu o structură de grilă fluidă în Dreamweaver CS6. În timpul acestui tutorial ne vom îndrepta atenția spre lucrul cu imaginile din cadrul nostru Fluid Xian proiect.

Fluid Imagini

Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!

Este o folie

Această serie a fost o scufundare adâncă într-o nouă caracteristică Fluid Grid Layout a Dreamweaver CS6. Așa cum am subliniat chiar la începutul acestei serii, caracteristica are senzația de a fi mai mult o "lucrare în desfășurare" decât o completă completă a liniei Dreamweaver. Chiar și așa, este un început destul de bun și mă aștept să-l văd actualizat în mod regulat prin Cloud-ul Creativ.

"Responsive Web Design" și "Mobile First" sunt concepte care aparent au ieșit din nicăieri, dar pentru că au un sens atât de mare într-o lume web unde smartphone-ul, tableta și desktop-ul mediu - conduc experiența utilizatorului, ele în întreaga industrie.

Modulele Fluid Grid are prima lovitură de la Adobe și, dacă te-ai descurcat în această serie, ai descoperit că conceptele lui Ethan și ale lui Luke sunt ferm înrădăcinate în ele. Crearea de rețele pentru mobile, tablete și desktop este partea ușoară a procesului. Partea grea este stilul. Este ușor de înțeles odată ce obțineți conceptul de Mobile First - faceți o schimbare de stil la Mobile CSS și această schimbare "se răsfrânge" prin tablete și layout-uri desktop - dar imaginându-vă care dintre cele trei folosind panoul Dreamweaver CSS este nu imediat evidente. O altă problemă este că Layout-urile Fluid Grid nu acceptă cuiburile elementelor pentru a crea structuri mai complexe. Alte caracteristici "drăguțe de a avea" includ incapacitatea de a folosi clase în loc de ID-uri și posibilitatea de a folosi elemente semantice, cum ar fi antet sau subsol.

Ca profesor, aspectul Fluid Grid este un Dumnezeu absolut trimis

Imagingul este un alt domeniu care ar putea beneficia de o anumită atenție. Confruntarea cu CSS nu este o problemă majoră, dar necesită o cunoaștere prealabilă în legătură cu modul în care sunt manipulate imaginile într-o lume responsabilă pentru designul web și modul în care codul din zona Mobile afectează imaginile tabletelor și desktop-urilor. Acest lucru nu este foarte simplu și are potențialul de a deveni un punct major de durere pentru persoanele noi în aspectul Fluid Grid în Dreamweaver CS6.

Acestea fiind spuse, trebuie să știți că abilitățile mele CSS sunt destul de fundamentale, iar primele mele experimente cu Fluid Grid Layouts au fost un dezastru complet și total. Odată ce am început să înțeleg fundamentele Responsive Web Desingn și Mobile În primul rând, am devenit mai confortabil cu Fluid Grid Layouts și călătoriile mele la dermatoligist pentru a reimplanta aglomerările de păr pe care mi le-am rupt din cap au încetinit până la o scurgere. Una dintre întrebările cheie pe care le întrebați este: "Este o caracteristică pro grad?" Răspunsul meu este "Încă nu." Le pot vedea folosiți pe scară largă pentru proiecte destul de necomplicate, dar nu sunt chiar pregătiți pentru marile ligi.

Ca profesor, aspectul Fluid Grid este un Dumnezeu absolut trimis deoarece, în Dreamweaver CS6, ele oferă studenților noștri o abordare vizuală a Responsiv Web Design și o bază solidă în conceptul de Mobile First. S-ar putea să te gândești la asta dacă începi să intri în acest domeniu nou și în curs de dezvoltare.