Share
Dans la partie précédente de cette série, je passais en revue les différentes feuilles de style associées à une disposition de grille fluide dans Dreamweaver CS6. Au cours de ce tutoriel, nous allons nous intéresser au travail sur les images dans notre Xian fluide projet.
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Cette série a été une plongée en profondeur assez étendue dans la nouvelle fonctionnalité de mise en page de grille fluide de Dreamweaver CS6. Comme je l'ai indiqué tout au début de cette série, cette fonctionnalité donne l'impression d'être un "travail en cours" plutôt qu'un ajout à part entière à la gamme Dreamweaver. Malgré tout, c'est un bon début et je m'attends à le voir régulièrement mis à jour via Creative Cloud..
"Responsive Web Design" et "Mobile First" sont des concepts qui semblent être sortis de nulle part, mais parce qu'ils ont beaucoup de sens dans un monde Web où le smartphone, la tablette et le bureau de taille moyenne conduisent l'expérience utilisateur, ils ont fermement établi eux-mêmes à travers l'industrie.
Les schémas de grille fluides sont le premier "coup de pouce" d'Adobe et, si vous avez bien travaillé cette série, vous aurez découvert que les concepts d'Ethan et de Luke y sont fermement ancrés. La création de grilles pour mobiles, tablettes et ordinateurs de bureau est la partie la plus facile du processus. La partie difficile est le style. Il est facile de comprendre une fois que vous avez compris le concept de Mobile First: modifiez le style de Mobile CSS et modifiez-le en modifiant les dispositions de la tablette et du bureau, mais déterminez lequel des trois utilise le panneau CSS de Dreamweaver. pas immédiatement évident. Un autre problème est que les mises en page de grille fluide ne prennent pas en charge l'imbrication d'éléments pour créer des mises en page plus complexes. Parmi les autres fonctionnalités intéressantes, citons l’incapacité à utiliser des classes à la place des identifiants et la possibilité d’utiliser des éléments sémantiques tels que l’en-tête ou le pied de page..
En tant qu'enseignant, les dispositions de la grille fluide sont un envoi absolu de Dieu
L'imagerie est un autre domaine qui pourrait bénéficier d'une certaine attention. La lutte contre le CSS n’est pas un problème majeur, mais elle nécessite une certaine connaissance de la façon dont les images sont gérées dans un monde Responsive Web Design et de la façon dont le code dans la zone Mobile affecte les images de la tablette et du bureau. Ce n’est pas tout à fait facile et peut potentiellement devenir un problème majeur pour les débutants en matière de dispositions de grille fluide dans Dreamweaver CS6..
Cela dit, vous devez savoir que mes compétences CSS sont assez basiques et que mes premières expériences avec Fluid Layers Layouts ont été un désastre complet. Une fois que j'ai commencé à comprendre les principes fondamentaux de Responsive Web Desingn et Mobile First, je suis devenu plus à l’aise avec les schémas de grille fluide et mes visites chez le dermatoligiste pour réimplanter les touffes de cheveux que j’avais déchirées de ma tête, ralenti au ralenti. L'une des questions clés que vous vous posez peut-être est la suivante: "S'agit-il d'une fonctionnalité de niveau professionnel?" Ma réponse est "pas encore". Je peux les voir largement utilisés pour des projets relativement simples, mais ils ne sont pas tout à fait prêts pour les grandes ligues..
En tant qu'enseignant, les mises en page Fluid Grid sont un don absolu car, dans Dreamweaver CS6, elles offrent à mes étudiants une approche visuelle de la conception de sites Web réactifs et une base solide dans le concept de Mobile First. Vous voudrez peut-être penser à cela si vous commencez tout juste à vous lancer dans ce domaine nouveau et émergent.
Accentsconagua