L'essentiel de Dreamweaver CC 2017

Créer et lier une feuille de style

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à utiliser des feuilles de style et à les lier à votre document HTML. Pour cela, vous disposez de plusieurs méthodes et de nombreux paramètres. Néanmoins, même si l'architecture est complexe, vous verrez que le fonctionnement reste simple.
06:36

Transcription

Voyons comment travailler les css et les lier à css designer. On peut très bien créer un nouveau document css et puis le remplir à notre guise donc par exemple ici placer une couleur d'arrière plan sur le body avec un background color et vous voyez que lors de l'écriture du code à la main, l'ensemble des descriptions ici se présente. Il suffit que je les sélectionne avec les flèches du clavier pour pouvoir ensuite voir apparaître ici la description, la partie qui est on va dire, qui est explicative, sur la nature de cette propriété. Vous pouvez à tout moment cliquer sur cette partie-là, pour vous rendre directement sur Mozilla et avoir toutes les informations nécessaires sur la syntaxe d'écriture et les éléments que vous voulez récupérer. donc ici même je vais m'amuser à copier coller cette partie-là et puis retourner maintenant dans mon code. Alors je vais finir d'écrire background color, j'en étais là. Si je valide avec la touche retour, entrée, je vais pouvoir directement valdier et vous voyez que ici au niveau du sélecteur de couleur vous avez diverses parties qui vont vous permettre de récupérer toutes les couleurs que vous souhaitez. Soit depuis le creative cloud, avec toutes les bibliothèques qui vous appartiennent soit directement par les mots clés ici concernant aux couleurs prédéfinies par le W3C. Voilà donc ici on a pris une couleur hsla, ça me va très bien. Je fais Ctrl S, j'enregistre. Je ferme ce document. Maintenant, je vais ouvrir un document HTML sur lequel je travaille. Je vais pouvoir venir décrire des feuilles de style, ici à l'intérieur de ce document. Là je vais commencer à appeler le css designer, pour travailler avec le css designer. Donc soit je décide de rajouter comme je le disais une balise css sur la page, je vais pouvoir venir et finir sur la page, ici, une balise style. Vous voyez qu'instantanément une balise style est apparue ici. De manière globale, je vais définir ici un sélecteur par exemple h1 et une fois que j'ai défini ce sélecteur h1, qui n'existe pas sur ma page ici, je vais pouvoir lui donner toutes les propriétés que je souhaite. Ce sélecteur je peux le supprimer également par le petit moins ici. Si je souhaite, ici maintenant, travailler dans le code et mettre un h1 avec un titre, de la page, j'ai un h1 qui est défini au sein de ma page, qui existe dans ma page et je vais pouvoir même venir ici entourer cet élément-là par un header par exemple. Dès l'instant où je valide un header autour, on voit bien que j'ai 2 balises imbriquées. Alors je vais venir dans le code ici. demandé à appliquer le format source, voilà. Si je place mon curseur à l'intérieur du h1, et que je place mon style, pensez à venir toujours sélectionner où vous voulez venir attribuer l'accrochage de votre description. Je le veux dans un modèle globale. Quand je vais faire plus ici par défaut Dreamweaver me dit mais attention tu as une balise dont son sélecteur ce serait body header h1. Est-ce que tu souhaites ça ? Là vous allez pouvoir soit accepter cette balise-là, soit venir l'éditer. Mais vous avez vu que vous pouvez utiliser les flèches qui montent et qui descendent pour ajuster la précision du sélecteur. Regardez si je monte, comme ça je descend et si je vais dans l'autre sens, voilà si je monte je réduis la précision, le poids du sélecteur, si je descends avec des flèches, je le valide. Donc moi je me dis, un header h1 me suffit largement, c'est très bien. Maintenant que ce header h1 est sélectionné, je vais pouvoir définir toutes les propriétés quie je souhaite ici directement dans l'éditeur de palette. Alors ici je vais pouvoir définir une couleur. Je vais prendreune RGBA, je vais prendre une couleur légèrement orangée et je vais la valider. Maintenant je vais pouvoir venir rajouter d'autres sélecteurs, d'autres descriptions et je vais venir ajouter ici d'autres feuilles de style. je vais pouvoir dire que je vais utiliser un fichier css qui est déjà existant. Ce fichier css je vais pouvoir parcourir pour venir le chercher, et je vais récupérer cet élément-là, ici. Donc, si je fais ok, je peux soit le lier auquel cas j'aurai une balise link qui va apparaître. Voilà, soit tu peux l'importer. Alors, il est préférable de ne pas importer parce que si vous importez le document, vous allez perdre en terme d'optimisation. Si l'import était très intéressant il fut un temps, pour pouvoir filtrer les navigateurs de type netscape qui ne les comprenaient pas, mais maintenant, à part certains cas exceptionnels, je vous déconseille d'uitiliser une importation. donc on va utiliser ici un lien vers cette feuille. Ici vous avez quelques possibilités facultatives de liaison c'est-à-dire d'utiliser des médias query non pas au sein de la feuille css mais au sein de la balise d'importation. Là je vais lui dire que moi je veux que ça soit pour media screen, dont le maximum de largeur sera, par exemple 300 pixels. voilà donc ici quand je vais faire ok, vous allez avoir un link href, avec un media query ici à cet endroit-là. Donc cette feuille de style ne sera liée que dans le cas où on est sur un écran et que la largeur maximum est de 300 pixels. donc là c'est le temps de passer en fraction cet élément-là, et là sur cette feuille de style css, vous voyez que je suis au-delà de 300 pixels, je n'ai pas de prise en compte. dès que je descends de 300 pixels, la prise en compte se fait, voilà. Enfin, 3ème élément, c'est de pouvoir dire je vais créer un nouveau fichier style css, on me demande de parcourir et ici, je me retrouve donc à l'intérieur du dossier qui m'intéresse. Je vais pouvoir cette fois-ci que j'enregistre. Vous voyez le bouton est en,registrer, ce n'est pas ouvrir. Ici je vais enregistrer une 2ème feuille de style css, je l'enregistre, je l'importe liée pareil je peux avoir une feuille de style qui sera facultative bien entendu. Là je vais dire ok et j'importe ma 2ème feuille de style. Maintenant, dans le document source, je peux appliquer mes styles, soit à la balise style interne, soit à une feuille de style qui possède une requête multimédia de liaison soit à une seconde feuille de style css sur laquelle je pourrai appliquer une requête multimédia si souhaitée et appliquer mes sélecteurs.

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 !