Créer un site web avec Dreamweaver CC

Adapter les médias et le contenu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver dispose d'un gestionnaire visuel de requêtes pratique et très ergonomique. Ainsi, vous aménagerez votre site de sorte qu'il soit consultable avec n'importe quel périphérique.
10:24

Transcription

Il manque une grande dimension en notre site que nous n'avons pas testé dès le début, c'est sa possibilité à être responsive. Donc ici on regarde, on s'aperçoit que toutes les unités de mesure qui ont été utilisées étant des unités proportionnelles, notre site peut s'adapter et respirer sans souci. Sauf qu'il arrive un moment vous voyez ici là, au niveau du titre devient pas lisible. Ici c'est carrément illisible. Donc on a une partie qui va devenir ici là les typos n'ont pas été respectées ici. On n'est pas du tout dans du proportionnel. Donc on a quelques réglages à faire de ce côté-là et à apporter quelques adaptations de ce côté-là. Alors je vous invite à le faire de votre côté et d'adapter cette partie-là comme vous le souhaitez. On va juste voir ensemble les outils et la manière de le faire. Ensuite ça sera à vous de pouvoir venir caler pile poil la manière dont le site va devoir réagir en fonction du device sur lequel vous allez le visualiser. On a trois choses à régler en priorité. La première c'est que ce n'est pas du tout le visuel qui va définir, de mon point de vue, la manière dont le device va devoir afficher le contenu. C'est le contenu qui va devoir définir comment elle sera affichée. C'est-à-dire qu'ici presque on se fiche de savoir comment va se représenter la barre de menu. Ce qui va être important c'est à partir de quel moment la barre de menu devient illisible ? Ici vous la voyez toujours. C'est limite donc c'est quoi ? C'est 350 pixels. À partir de 350 pixels, il va falloir dire, oups ! Attention ici ce n'est pas lisible pour lui, le reste ça reste lisible. Non ici ce n'est pas lisible en plus ça déconne un petit peu de ce côté-là. Donc jusqu'où ça devient bien ? Voilà ici on va dire que c'est bon et c'est quoi ? C'est ce pixel-là qu'il va falloir modifier c'est-à-dire 368 pixels. À partir de 368 pixels en dessus ce n'est plus bon pour lui et pour lui. Donc c'est le contenu qui doit piloter la manière dont vous allez placer votre site responsive et pas le reste. Comment va-t-on fonctionner ? Mais le plus simple c'est déjà de regarder un peu ce qu'on a. Si je regarde du côté des fichiers css ici, tous les fichiers css, sauf le premier, on ne va faire qu'un mais tous le font, tous utilisent charset utf-8 sauf base qui n'utilise pas ça. La base rappelez-vous c'était la réinitialisation. Puisque la structure header, footer, main, n'importe lesquels utilisent charset utf-8 ça me va, c'est génial. Ce que je vous propose de faire c'est de se dire, je vais ouvrir le premier fichier HTML qui correspond à cet élément-là, c'est-à-dire « structure.html », je suis dans « structure.html » et on a vu que c'était 368 pixels qui donne à réfléchir. Donc je vais venir à 370, d'accord ? Et je vais cliquer sur ce petit « + » ici. Alors j'ai deux feuilles de style. Ici quand je clique « + », il me dit qu'est-ce que tu veux faire ? Le max-width ? Oui ça me va. C'est le max-width à 370. Dès que tu atteins au maximum 370 pixels je veux que tu t'adaptes sur « structure.css », d'accord ? Et ici dans structure.css, je souhaite avoir un premier réglage. Ensuite je vais rajouter ici et je vais descendre. Je vais revenir et pour revenir l'idéal c'est de le faire dans finalisation. Donc je vais revenir dans finalisation, et je vais regarder à partir de quel moment mon site devient un peu trop volumineux, donc pour lui dire par exemple ici 850, 800, d'accord ? Je vais volontairement prendre 700 ici juste pour que ça rentre dans l'interface. Si je me mets à 700, je clique sur « + » et là il me dit max-width non je vais lui dire « min-max ». Je vais lui dire au maximum 700 pixels, et au minimum j'étais à 370. Je vais passer à 371. Évitez d'avoir des pixels qui se chevauchent parce que qu'est-ce que je ferais à 370 si je suis à la fois dans une feuille de style, à la fois dans une autre ? Et il me dit, où veux-tu le faire ? Je vais le faire dans cette fois-ci attention on revient parce que là vous avez vu, je suis dans un autre document. Moi je vais le faire dans structure.css et je vais dire OK. Et puis on pourrait se dire maintenant mais après tout qu'est-ce qui va se passer après 700 pixels ? Je vais rajouter une feuille de style, je vais dire cette fois-ci c'est « min-width », min-width le minimum 701 pixels ça me va très bien, je le rajoute toujours dans structure.css, je vais dire OK. Donc là je viens de caler trois points, trois contextes de situation. Je pourrais en caler d'autres, je pourrais me dire que par exemple ici à cet endroit-là entre 250 et 300 j'ai un cas un peu particulier, je veux le traiter. Mais vous avez vu comme il suffit de faire, il suffit de venir positionner à 250, de faire je fais un « + » ça va être un min-max, je veux entre 250 et 300 pixels un contexte un peu particulier que je vais placer également dans structure et je dis OK. Et tous ces éléments-là je vais pouvoir les caler un peu comme je veux. Bien entendu une fois que vous avez calé un élément, vous pouvez toujours le réajuster par cette palette-là et puis si vous double cliquez sur la partie ici vous pouvez venir au lieu de dire 219, ici je vais placer 220 pixels et je vais pouvoir comme cela ajuster l'intégralité de mes requêtes multimédias. Que se passe-t-il maintenant ? Je vais fermer ce document et il me dit est-ce que tu veux enregistrer 2structure? Bien sûr que je veux l'enregistrer. Je vais même fermer ce document, et ce que je vais faire c'est ré-ouvrir que structure.css. Et si je regarde mon structure.css ici j'ai quatre media query qui ont été positionnés ici. Je vais les couper et je vais venir les mettre dans la partie haute. Qu'est-ce que sont ces media query ? Vous voyez c'est Dreamweaver qui a écrit ces media query, pour moi il dit dans le maximum max-width, voilà je vais faire ceci. Donc dès que je vais être sur un smartphone voilà toutes les règles que je vais venir décrire à l'intérieur de cet élément-là. Dès que je serai sur un appareil on va dire tablette entre 371 et 700 et en fonction du contenu voilà ce que je souhaiterai avoir. Et ici dès que je serais supérieur. Et dans ce cas particulier où je serais là-dessus tu vas me changer telle typo ou telle couleur ou tel élément par rapport à un besoin spécifique sur ces valeurs-là. Donc comment faire maintenant pour agir ? Ce que je vais faire, regardez je vais copier tous ces éléments-là, je vais faire Ctrl+C et puis je vais supprimer toutes ces parties-là. Je vais faire Ctrl+S et je ferme. Donc j'ai bien sélectionné ces éléments-là. Ce que je vais faire, je vais prendre un document parce que malheureusement si je fais Ctrl+F ici il me dit il faut qu'il y ait un document ouvert pour pouvoir faire des modifications. Mais je vais passer dans un démarrage rapide, je vais ouvrir n'importe quel document HTML qui va bien s'ouvrir. Je vais sélectionner tous ces éléments structure.css ou alors ce que je peux faire c'est ouvrir un seul élément structure ici elle me les a tous ouvert. Très bien moi ça me va alors s'il a tout ouvert, je vais prendre structure.css ici maintenant et dans structure.css je vais lui demander de sélectionner uniquement cet élément charset utf-8 puisque je sais qu'il est dans tous mes documents css nécessaire. Je vais faire un Ctrl+H maintenant. Donc il a sélectionné tout ça, et je lui dis soit dans le Documents ouverts puisqu'ils sont tous ouvert maintenant, soit dans les fichiers sélectionnés dans le site puisque je les avais sélectionné ici. Donc c'est à vous de voir, je vais prendre le document ouvert et je vais lui dire tu me les remplaces par tout ça. Et si je regarde tout ça c'est quoi ? C'est le charset utf-8 plus toutes mes règles de media query complète. Et là je lui fais Remplacer tout. Dreamweaver fait exactement le job, il me montre tout ce qu'il a fait là. Et maintenant dans tous mes documents css j'ai toutes mes requêtes qui ont été placées. Je vais Fermer tout. Je vais d'abord faire Enregistrer tout, ça m'évitera de valider à chaque fois et je vais demander Fermer tout. Voilà donc tout a été préparé. Si je reprends n'importe quel document, n'importe lequel, je vais travailler sur footer. Je vais travailler sur le footer et j'ai besoin de caler quelque chose de particulier dans le footer, je ne sais pas moi, la typo où quoique ce soit. Si je viens dans le CSS Designer maintenant vous voyez j'ai toutes mes règles media query qui ont été implémentées puisqu'ils font partie de tous mes documents. Et ici je sélectionne un élément je vais lui dire c'est dans la ressource footer donc je vais venir sur la partie footer.css, ici dans footer.css dans la partie qui m'incombe, mettons je ne sais pas moi max-width 370 pixels et je vais dire, je vais rajouter un sélecteur qui est le h2 donc c'est ce fameux élément-là. Avec les flèches vous pouvez continuer bien entendu toujours à augmenter votre règle ici, n'hésitez surtout pas à vous en servir. Là je vais supprimer toutes ces parties-là et je vais dire le h2 Propriétés ici donc je vais sélectionner ma règle. Je vais dire la Propriété de texte, sa couleur ça va être Rouge et je valide sur Rouge ici Crtl+S. Et regardez ce qui va se passer maintenant. Ici je suis là, quand je reviens en arrière dès que je vais arriver dans la partie ad hoc de l'élément je vais devenir Rouge. Sauf dans le cas où la règle ne serait pas assez forte. À ce moment-là, il va falloir alourdir cette règle. Donc rajoutons deux éléments ici, Conteneur footer ul li h2 cette fois-ci et là en retournant dans la partie basse vous voyez que le titre est bien devenu rouge dans cette partie-là. Voilà donc maintenant libre à vous, vous avez compris la mécanique, vous allez pouvoir venir enrichir au niveau des requêtes directement chacun des éléments quel qu'il soit que ça soit du titre, des paragraphes, des images et en fonction des dimensions d'écran. N'hésitez pas à vous séparer de la 220 par 300 qui ne sert pas qui était juste là pour illustrer mais vous avez compris le principe. Juste un détail, c'est qu'on n'a pas fait un approche « mobile first » puisqu'on n'est pas parti depuis le mobile en partant vers l'extérieur. On est parti depuis une page standard et maintenant on va venir faire son marché pour pouvoir aménager chaque contexte et chaque situation en fonction du contenu.

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 !