L'essentiel de Dreamweaver CC 2017

S'initier à CSS Designer

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La palette CSS Designer est une palette très complète et assez volumineuse. Avec votre formateur, faites-en le tour pour comprendre le fonctionnement, et décryptez chacun de ses onglets.
04:39

Transcription

Prenons quelques instants pour regarder la palette du css designer, c'est une palette un peu particulière et il est bon de bien comprendre sa composition et son mode de fonctionnement pour mieux la prendre en main. Déjà elle ne s'active que lorsque vous avez un document HTML qui va être ouvert. Vous voyez par défaut il se présente sur une palette verticale qui tient pas mal de hauteur mais si vous ouvrez cette palette elle va psser sur un mode de palette à deux colonnes donc si vous avez un écran large ne vous privez pas, prévoyez ici d'enregistrer un espace de travail spécial. Préparation css de façon à travailler avec un css designer qui soit le plus développé possible. La palette du css designer n'est pas manipulable. C'est-à-dire qu'on ne va pas pouvoir réorganiser les 4 espaces principaux qu'elle contient de manière personnelle. Vous allez juste pouvoir éventuellement redimensionner les hauteurs de chacun mais vous aurez trois palettes sur la partie gauche et la palette des propriétés sur la partie droite. La 1ère partie ici va concerner les sources. C'est là où vous allez gérer l'intégralité des fichiers sources et css existants ou à lier ou qui pourront être défini sur la page c'est-à-dire au sein d'une balise ici style. Il suffit de venir créer une balise style à cet effet ici tout simplement pour la voir appraître à cet endroit-là. Donc, à partir de quelle source de document vous allez travailler. Ici, les requêtes multimdias vont pouvoir permetre de travailler tout ce qui va être, comme son nom l'indique, média query, requêtes multimédias. Donc si vous êtes dans la partie mode en direct vous allez pouvoir créer un nouveau fichier css ou utiliser la balise style qui est déjà existante c'est pas gênant, vous allez pouvoir créer une requête multimédia. Dès lors que vous aurez créé une requête multimédia, celle-ci va apparaître ici dans la partie médiane de la palette. Vous pourrez créer autant de requête multimédia ou les étiqueter tout simplement en double cliquant sur cette partie-là. On reviendra bien en détails sur l'ensemble de ces éléments. Enfin vous avez la partie des sélecteurs, là où vous allez pouvoir définir l'ensemble des sélecteurs qui vont être affectés donc à l'intérieur de cette requête multimédia si elle est sélectionnée soit sur la partie globale c'est-à-dire s'adresser à tout cas de figure. Bien entendu, vous pouvez intéragir avec l'intégralité de ces sélections à tout moment. Là vous allez pouvoir créer un nouveau sélecteur par exemple body, tout simplement et une fois que l'élément body va être sélectionné, donc il se trouve à l'intérieur de la requête qui elle-même est à l'intérieur de la balise style. Vous pouvez le suivre ici en direct. Vous allez pouvoir affecter les propriétés des descriptions à ce sélecteur, à cette règle. Soit vous utilisez simplement l'inspecteur ici qui va vous permettre de créer toutes les propriétés que vous souhaitez, de manière manuelle et définie, soit vous utilisez l'ensemble des propriétés et vous bénéficiez pleinement de la pleine hauteur de cette palette pour pouvoir venir régler tous les éléments un par un. Ces éléments sont classés par catégories. La première c'est tout ce qui concerne la géométrie on va dire, la dispostion dans l'espace, largeur, hauteur, minimum de largeur eccetera, marge, padding. Soit la partie textuelle, font, couleur d'écriture font size, text align, text decoration eccetera. Soit les bordures qui vont encadrer le bloc d'écriture, soit la partie de l'arrière plan qu'il s'agisse d'une image, d'une couleur ou d'un dégradé. plus tout ce qui va considérer les ombres portées de boite eccetera, et enfin tous les éléments qui sont inclassables qui pouirraient être comme le curseur par exemple ou certaines propriétés de cet acabit-là. Voilà donc un css designer qui est extrêmement complet, très précis, qui va nous aider à aller très vite puisqu'il gère à la fois les requêtes multimédias, il est interconnecté avec les palettes pour chacun de ces éléments-là qui sont concernés et on va pouvoir venir décrire tous les sélecteurs et toutes les propriétés que l'on souhaite. Dernière information et pas des moindres, tout le système, lecteur de code ou d'aperçu visuel est interconnecté avec le css designer c'est-à-dire que dès que vous allez sélectionner un élément dans votre page ou dans le code, toutes les requêtes affectées à cet élément vont venir se refléter ici alors soit vous aurez toutes les feuilles de style qui seront toujours présentes soit que les feuilles de l'élément sélectionné, actuel, comme par le passé dans les anciennes boites de dialogue. Voilà, il suffit que là je sélectionne l'élément body et vous voyez le body est sélectionné puisqu'il fait partie de cet élément actuel. Tout me permettra d'avoir tous les styles.

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 !