Créer un site web avec Dreamweaver CC

Ajouter la balise meta viewport

Testez gratuitement nos 1330 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Initiez-vous à la balise meta viewport et à son utilisation. Ainsi, vous configurerez correctement la mise en page de votre site, en fonction des navigateurs Internet et des périphériques.
03:55

Transcription

Dès que l'on travaillait à un Responsive Web design, par le passé Dreamweaver a intégré pour nous de manière très transparente une balise méta qui informait les périphériques d'utilisation mobile de justement ses caractères un peu spécifique aux feuilles de style. Aujourd'hui ce n'est plus le cas et si je regarde dans le code, j'ai utilisé des média query et ici au niveau du header rien n'est informé. Donc il va me falloir venir manuellement rentrer une balise méta tout simplement et dans cette balise méta je vais utiliser, alors pour ceux d'entre vous qui ne connaissent pas les balises méta, les balises méta fonctionnent avec deux propriétés « name » et « content ». La première « name » va définir la propriété, le « content » va définir la nature de cette propriété. Donc ici au niveau du « name », on va définir le « viewport » et si vous regardez avec Ctrl+Espace ou Commande+Espace si vous n'avez pas l'aide à l'écriture, vous avez la possibilité d'utiliser ce « viewport » ici tout simplement. Au niveau de « viewport » vous avez plusieurs possibilités de contenu et la possibilité majeure qu'on va utiliser c'est largeur est égale et on va définir la largeur du viewport. Tous les appareils mobiles, qu'ils s'agissent de tablette, de phablette, de smartphone etcetera ont des capacités d'affichage qui sont assez remarquable. Et si vous envoyez une image à 1000 pixels, mais même pas peur, je peux afficher une image à 1000 pixels il n'y a pas de souci. Le problème c'est que l'écran lui ne fait pas 1000 pixels forcément. Donc on va lui dire que sa largeur ne doit pas être la largeur qu'il est capable de pouvoir afficher mais va être la largeur de son écran. Et ici on va venir dire « device-width ». Alors que je vous disais, une des premières valeurs du content c'était cette valeur-là, il existe une autre propriété qu'il va falloir définir, ça va être « l'initial-scale ». Parce qu'il y a pas mal d'utilisateurs qui vont pouvoir zoomer dans leur appareil dans leur navigation et à ce moment-là quand vous vous allez charger votre lien va être cliqué, vous avez chargé votre page, on va rester à ce niveau de zoom que le navigateur ait. Et donc il va falloir lui dire non non, tu te remets à une initial-scale de 1 pour lui dire de le bloquer à cette hauteur-là. Donc ça c'est la première chose à faire au niveau des balises méta. Il existe la même chose, alors là je ne vais pas l'enregistrer sur finalisation mais je vais l'enregistrer sous « finalisation-2 » ici directement pour avoir ce document en parallèle. Donc il existe une autre approche qui va consister maintenant à dire dans cette finalisation. Je vais reprendre le CSS de finalisation. On va pouvoir le définir de manière CSS. Le souci qu'il y a c'est que tous les périphériques n'interprètent pas cette chose-là pour l'instant de manière commune et donc il va falloir quand même le coupler pour certain type de navigateur avec la balise méta. Donc ici « @viewport », et sur le « @viewport » qu'est-ce qu'on va dire ? On va dire que le « width » cette fois-ci c'est deux points, ce n'est pas égale puisqu'on est dans une propriété, et on va pouvoir définir deux valeurs : la valeur minimum et la valeur maximum. Si vous n'en définissez qu'une, à ce moment-là ça s'appliquera sur les deux c'est-à-dire que ce sera au minimum ou au maximum ce « device-width ». On va définir maintenant la propriété zoom initiale à 1. Ici c'est côté CSS, voilà comment on pourrait venir enseigner pour les périphériques de navigateur qu'il faut qu'ils prennent en compte la largeur du device côté CSS, mais on peut le faire également côté source ici avec la balise méta. Là je vais le laisser que sur finalisation-2. Mais si vous souhaitiez l'apporter à l'intégralité des fichiers de ce travail préalable qu'on a fait dans les documents HTML il faudrait copier cette partie-là, supprimer cette partie-là, rechercher uniquement ça et de faire un rechercher-remplacer en disant tu vas me rechercher tout ça et tu vas me le remplacer par tout ça sur l'ensemble des documents HTML ici afin de pouvoir apporter la balise méta dans chacun des documents HTML.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 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 !