L'essentiel de Dreamweaver CC 2017

Définir les requêtes multimédias

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à la palette des requêtes multimédias, définissez avec précision l'ensemble des requêtes et des breakpoints majeurs ou secondaires à mettre en place. Vous verrez également comment optimiser la gestion de ces styles.
09:10

Transcription

La palette des requêtes multimédia est assez complète et va pouvoir nous apporter une grande souplesse d'édition au niveau de ce qu'on appelle le Webstancy web desing. donc ici j'ai un premier document html classique, je vais prendre mon css designer, je vais lier une source qui est déjà existante, je vais parcourir cette source, c'est le css numéro 1 et je vais pouvoir la lier ici de manière directe. Je m'aperçois que cette prise en couleur ici est affectée quelque soit la dimension de ma page, je vais toujours avoir cette couleur d'arrière plan. Je pourrais souhaiter que cette couleur mourtarde n'appraisse que pour les périphériques qui sont situés en deça de 300 pixels de large. Alors je vais sélectionner ma feuille de style ici, je vais pouvoir venir au niveau du global ici dire non je vais rajouter une requête média. Donc qui ne va affecter que les écrans. Je vais ajouter un petit plus et je vais dire dont la largeur maximum serait par exemple de 300 pixels. Et je vais dire ok. Et là maintenant, puisque j'ai défini cette valeur-là, quelles sont les règles qui sont définies à l'intérieur. Ici pour l'instant je vois que je n'ai aucune règle puique mon body, ma couleur d'arrière plan est définie à l'extérieur de cette règle. Donc je vais venir déplacer cette règle ici et la placer à l'intérieur de cette requête multimédia. Si j'enregistre, ici regardez la couleur n'est plus affectée, il va falloir que je descende en deça de 300 pixels pour que la couleur puisse être affectée. Ce que je vous invite à faire pour pouvoir mieux viualiser le redimensionnement d'un navigateur, c'est de donner un peu plus d'espace à la fenêtre et d'utiliser ce curseur ici qui est beaucoup plus tard en réel que l'autre. D'accord ? donc vous voyez que la requête multimédia à partir d'une certaine dimension, va pouvoir jouer. Alors on aurait pu faire ça de manière différente. Vous voyez dans la partie haute j'ai ce qu'on appelle un éditeur de requête et cet éditeur je vais pouvoir le faire bouger vous voyez interactivement je vais pouvoir revenir sur des valeurs qui seront définies par cette palette glisser déposer que je vais pouvoir utiliser. Cette palette n'apprait que si je suis en mode en direct. Si je passe en mode création, la palette n'existe pas. Donc il faut vraiment être en mode de rendu en direct pour l'avoir, et ici vous avez une petite icône sur le côté qui va vous permettre de la faire appraître ou de la masquer. On va pouvoir faire différemment. C'est-à-dire qu'ici j'ai placé une requête multimédia au sein d'une page html. Parfait, je vais enregistrer tout ça donc je fais fichier enregistrer tout. Je vais maintenant créer une deuxième feuille de style ,et je vais créer un nouveau fichier parcourir, je vais aller dans mon document numéro 6 ici et je vais enregistrer une feuille de style numéro 2. Au moment où je vais vouloir importer, enfin, lier plutôt cette feuille de style dans mon code, ce que je vais faire je vais lui dire attention je vais utiliser une requête multimédia cette fois-ci mais non pas dans la feuille de style mais à la manière de la gérer. C'est-à-dire que tu ne chargeras cette feuille de style que dans le cas où tu corresponds et donc ici je vais lui dire ici si je suis en 259 je vais lui dire. Et dans le cas où le minimum de largeur sera de 260. Ne mettez pas un conflit qui serait... admettons si vous mettiez 259 que se passe-t-il si on se trouve à 259 ? Bien on changerait à la fois cette feuille de style et à la fois cette feuille-là donc faites attention. si c'est le cas, très bien mais si ce n'est pas le cas c'est-à-dire ou c'est vert, ou c'est bleu, pensez à avoir un pixel d'écart pour être sûr de pouvoir affecter la feuille de style dans le sens où vous le souhaitez. Alors vous pouvez rajouter autant de requête que vous souhaitez dans la complexité. d'adéquation c'est-à-dire qu'ici toutes ces conditions devront être remplies pour pouvoir valider le cas. Regardez justement tout ce qu'on a sous le capot, on a maximum de largeur,largeur, minimum de hauteur, maximum de hauteur, hauteur minimum de résolution donc la résolution donc écran retina, écran hdmi, la résolution tout court, l'aspect ratio que vous allez avoir entre si c'est un écran 16/9e, si c'est un écran 4:3 eccetera. Les largeurs minimums de l'écran, les minimums de l'écran eccetera donc vous avez et surtout l'orientation ici qui va pouvoir dire si vous êtes en mode portrait ou en mode paysage. Voilà donc ici , on va rester sur ces deux requêtes et je vais dire ok. donc quelle va être la différence cette fois-ci avec la première position de requête, c'est que cette fois-ci, cette requête n'existera qu'au niveau du chargement de la page donc ça n'apparaitra pas dans la partie ici des requêtes multimédia puisque c'est uniquement au niveau du code source du html qu'on lui dit si le device rentre dans ces conditons, alors charge la page. Charge ce truc sinon il ne le chargera pas. Donc le gros intérêt est que maintenant, puisque ça s'adresse à des appareils qui sont superieurs à des appareils mobiles, on ne va pas consommer de la bande pasante pour lui dire charge le. Parce que si je prends la feuille numéro 1 ici, c'est chargé, est-ce que ça s'applique ou pas, c'est une chose mais les octets qui sont définis ici, sont chargés, sont récupérés par la bande passante. donc, pensez à cette stratégie-là. Qu'est-ce que je vais faire maintenant? Je vais lui dire je vais venir dans mon élément de body, je vais le sélectionner. Je vais dire que cette fois-ci je l'affecte à la feuille de style n° css2. Je suis dans le global pas de souci. Et je vais rajouter le body ici et sur ce body-là, je vais venir maintenant définir une couleur d'arrière plan, qui sera par exemple ce cyan ici. Je sais, j'ai très bon goût dans les couleurs. Je ferme l'outil d'aide à la découverte des fonctionnalités de Dreamweaver. J'enregistre et regardez maintenant ici je suis bien en cyan et quand je passe dans l'autre partie, je change de couleur entre les deux éléments. Bien que cela ne soit pas représenté par cette autre partie-là. Alors maintenant dans ma partie de feuille de style on va dire numéro 2 ici, je vais pouvoir venir rajouter, alors je vais positionner mon curseur. Je vais le positionner exactement au démarrage de ce cyan. Et si je fais un petit plus sur ce plus ici, alors il me dit est-ce que tu veux utiliser un min width ? Je vais lui dire non je pourais prendre par exemple un max width ou carrément un min max c'est-à-dire, utiliser une valeur minimum et une valeur maximum pour conenir cette requête. donc on peut affiner très précisément par exemple ici de 260 à 300 pixels, l'affecter à la feuille de style numéro 2, et venir définir des propriétés. Alors ici on va dire on sera de cette couleur bleu cyan et l'arrière plan, et maintenant, on va repositionner notre curseur ailleurs. Je vais rajouter un nouvel élément et je vais dire non c'est un min width et là je serais en 302 par exemple. Je vais toujours le placer dans mon feuille de style numéro 2 et je vais dire ok et là mon background couleur va devenir par exemple un bleu plus soutenu. Je vais le valider dans ce sens-là. Ce qui fait que regardez. Cette feuille de style qui est la seconde va utiliser elle-même à l'intérieur d'autres média query qui vont permettre de définir ces couleurs. Alors pour être sûr quand même de bien assurer mon chagement, je vais récupérer ce body, je vais le placer à l'intérieur, ici. Voilà. Et, pour récupérer cette partie-là, je vais la mettre dans cette partie-là. Là, je vais pouvoir revenir sur une autre couleur. Alors on pourrait revenir même simplement sur l'alpha, en disant que ici, je vais apsser à 0,2 pour avoir cette valeur-là. Regardez ce qui se passe quand je redéfinis ma page, ici je suis dans cette partie. ici j'arrive sur une couleur très fade, et puis là j'arrive sur une autre couleur. Par contre, ces deux parties de feuille de style ici puisqu'elles font partie de la feuille de style numéro 2, ne seront chargées que pour les appareils ad hoc. Voilà donc vous pouvez imbriquer comme ça des éléments de requête multimédia de manière à pouvoir affiner vraiment, faire des break points, qu'on appelle, qui sont majeurs, et des break point qui sont mineurs mais qui vont permettre de bien affiner les réglages. Petit dernier d"tail c'est que chaque fois que vous allez utiliser...alors là je suis sur la feuille de style numéro 2. Mais dès l'instant où j'arrive sur une feuille de style ici vous avez les couleurs qui vont correspondre chacune ici voilà si je viens sur toutes les sources. Voilà, ici vous avez la bleue qui correspond à celle-là, la mauve qui correspond à celle-là, et la verte qui correpond à celle-là donc c'est beaucoup plus souple, et encore une fois, vous pouvez à tout moment en cliquant sur l'élément, venir réajuster quelque soit les éléments, vous pouvez venir réajuster et faire ordre au moment où vous voulez. Soit de manière visuelle, soit de manière très précise en double cliquant dans les produits ici et en venant modifier à la main les valeurs pour être très précis.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !