Cette vidéo explique le fonctionnement de CSS Designer et montre à quel point il est facile de gérer des styles CSS dans Dreamweaver.
Nous utiliserons la page Cowboy Concept pour explorer l'espace de travail de Dreamweaver.
Cette page web toute simple contient une image d'arrière-plan qui occupe tout l'écran, un en-tête avec la marque, un menu de navigation, ainsi que des balises headline et body.
Si je redimensionne la fenêtre du mode En direct, la mise en page s'adapte automatiquement aux différentes tailles d'écran.
Vous allez découvrir comment utiliser les requêtes multimédias pour obtenir cet effet.
Allons-y.
Créez un site et faites-le pointer sur le dossier style-web-page-css.
Ouvrez le fichier index.html et examinez le code.
Le fichier inclut la structure HTML de la page, mais aucun style CSS n'est appliqué pour l'instant.
Vous allez utiliser CSS Designer pour appliquer des styles sur la page.
Par défaut, le panneau CSS Designer est ancré à droite de l'espace de travail.
Vous pouvez également l'ouvrir via le menu Fenêtre ou en réinitialisant l'espace de travail en haut à droite de l'interface.
Je déplace le panneau CSS Designer pour qu'il soit plus visible, et je réduis les panneaux à droite.
Vous pouvez aussi redimensionner le panneau pour modifier plus facilement les propriétés.
Vous allez maintenant ajouter le fichier CSS fourni pour l'examiner de plus près.
Cliquez sur le signe plus en regard de la section Sources du panneau CSS Designer.
Vous pouvez appliquer des styles CSS de trois façons : vous pouvez créer un fichier CSS, joindre un fichier CSS existant ou définir des styles directement sur la page.
Choisissez Joindre un fichier CSS existant, sélectionnez le fichier main.css dans le dossier CSS, puis cliquez sur OK.
Dans le mode Code, on voit que le fichier est joint à la page HTML dans la balise head.
Dans le mode En direct, la page affiche désormais une image d'arrière-plan et du texte mis en forme.
Explorons les styles CSS à l'origine de ces changements.
Dans CSS Designer, vous pouvez localiser et examiner le code via les boutons Tout et Actuel en haut du panneau.
Cliquez sur Tout pour afficher tous les styles joints à la page HTML.
Vous obtenez ainsi une vue d'ensemble de leur organisation.
Vous pouvez afficher les styles calculés en sélectionnant un élément, puis en cliquant sur le bouton Actuel.
Les styles calculés affichent les propriétés et sélecteurs de la sélection active dans Dreamweaver, notamment les styles hérités et ceux directement joints à l'élément sélectionné.
Cliquez sur le bouton Tout pour afficher de nouveau tous les styles.
La section @Requêtes multimédias permet de définir les zones des requêtes multimédias.
Ces requêtes permettent de modifier la mise en page selon certains critères, notamment la taille de l'écran.
Le fichier CSS joint comporte deux requêtes multimédias.
Il est très facile d'ajouter des styles.
Ajoutons une classe pour mettre en forme le texte H1.
Sélectionnez la balise H1 en mode En direct, cliquez sur le bouton +, puis ajoutez une classe .headline.
Appuyez sur Entrée, sélectionnez la source main.css, puis appuyez de nouveau sur Entrée pour créer la classe.
Cliquez avec le bouton droit sur la classe dans le mode En direct, puis sélectionnez l'option Passer en mode Code pour parcourir le contenu CSS dans la fenêtre de code.
La classe apparaît tout en bas.
Je la place au-dessus des requêtes multimédias pour la regrouper avec le code par défaut en haut de la page.
Ajoutez ensuite des propriétés pour mettre en forme l'élément.
Sélectionnez l'élément H1 en mode En direct, puis la classe .headline dans CSS Designer.
Elle se trouve sous GLOBAL, en bas dans la liste des sélecteurs.
Sous Propriétés, vous pouvez filtrer les propriétés par catégorie.
Cliquez sur le bouton Texte pour afficher uniquement les propriétés de texte.
Définissez la propriété font-size sur 64 pixels et la propriété line-height sur 0,95 em.
Cliquez sur le bouton Disposition, puis définissez la propriété margin-bottom sur 10 pixels.
Cochez la case Ensemble pour afficher uniquement les propriétés que vous venez d'ajouter.
À présent, actualisez la classe dans les requêtes multimédias.
Cliquez avec le bouton droit sur la classe .headline, puis choisissez Dupliquer en requête multimédia.
Choisissez la requête de 768 pixels.
Le code est maintenant copié.
Sélectionnez la requête de 768 pixels sous @Requêtes multimédias, puis le sélecteur .headline sous Sélecteurs.
Seules les propriétés définies s'affichent, car la case Ensemble est toujours cochée.
Définissez la propriété font-size sur 90 pixels, la propriété line-height sur 0,85 em et la propriété margin-bottom sur 30 pixels.
Répétez l'opération pour actualiser la taille de la police dans la requête multimédia de 1 024 pixels.
Cliquez avec le bouton droit sur le sélecteur .headline, et dupliquez-le dans cette requête.
Sélectionnez la requête sous @Requêtes multimédias, puis le sélecteur .headline.
Définissez la propriété font-size sur 120 et la propriété line-height sur 0,9.
Définissez ensuite la propriété margin-bottom sur 20 pixels.
En mode Code, la classe a été mise à jour pour augmenter la taille du texte sur les grands écrans, et des copies de la classe .headline ont été créées dans les deux requêtes multimédias. et des copies de la classe .headline ont été créées dans les deux requêtes multimédias.
L'intégration de CSS Designer dans l'espace de travail de Dreamweaver facilite considérablement l'utilisation des mises en page CSS.
Vous pouvez aisément créer des sélecteurs en sélectionnant un élément dans le mode En direct ou le panneau DOM.
Essayons par exemple d'utiliser le panneau DOM pour créer un sélecteur pour la balise paragraph.
Cliquez sur Code source pour afficher le panneau DOM, puis sélectionnez la balise paragraph dans le panneau DOM.
Vous pouvez facilement parcourir la structure du code de la page.
Réduisez le panneau DOM puis, dans le panneau CSS Designer, sélectionnez main.css sous Sources, sélectionnez GLOBAL sous @Requêtes multimédias, puis cliquez sur le signe + sous Sélecteurs.
Dreamweaver génère le sélecteur avec deux niveaux de spécificité : body et paragraph.
Vous pouvez maintenant utiliser les flèches Haut et Bas pour modifier le niveau de spécificité.
Les règles avec des sélecteurs plus spécifiques sont prioritaires.
Décochez la case Ensemble pour afficher toutes les options disponibles pour le nouveau sélecteur, cliquez sur le bouton Texte, puis définissez la propriété font-size sur 15 pixels et la propriété line-height sur 1,75 em.
Dupliquez le style dans la requête multimédia de 768 pixels, sélectionnez la requête et le sélecteur paragraph pour afficher ses propriétés, puis définissez la propriété font-size sur 18 et la propriété line-height sur 1,5. sur 1,5.
Dupliquez le sélecteur paragraph dans la requête multimédia de 1 024 pixels.
Sélectionnez la requête multimédia, puis le sélecteur.
Définissez la propriété font-size sur 24 pixels, puis cliquez sur l'icône de corbeille pour supprimer la propriété line-height.
Comme nous allons utiliser les mêmes paramètres que ceux de la requête multimédia de 768 pixels, il est inutile de dupliquer la propriété line-height de nouveau.
En mode En direct, les styles de texte s'adaptent aux différentes tailles d'écran lorsque je redimensionne la fenêtre.
Le mode En direct permet aussi de parcourir facilement le code des différents éléments.
Par exemple, sélectionnez de nouveau la balise H1, et cliquez avec le bouton droit sur la classe .headline.
Sélectionnez Passer en mode Code.
Vous pouvez alors accéder au sélecteur .headline d'origine ou à ses variantes dans les requêtes multimédias.
Si vous choisissez une requête, le mode Code dans CSS Designer change en conséquence.
Vous pouvez aussi passer en mode Code en cliquant avec le bouton droit sur la requête dans la barre visuelle.
Par exemple, cliquez avec le bouton droit sur la requête de 768 pixels.
Les numéros de ligne s'affichent pour faciliter l'identification des requêtes multimédias et l'accès au code.
Vous pouvez aussi localiser les styles appliqués aux éléments via le mode Inspection.
Cliquez sur le bouton correspondant, puis survolez les éléments pour les mettre en évidence et afficher leur code dans CSS Designer.
Double-cliquez sur un élément pour quitter le mode Inspection.
Double-cliquez sur un élément pour quitter le mode Inspection.
Comme vous le voyez, il est très facile de mettre en forme une page web.
Accédez au code en affichant simultanément tous les sélecteurs, ou utilisez la modification contextuelle pour ajuster les styles appliqués aux éléments sélectionnés. pour ajuster les styles appliqués aux éléments sélectionnés.
Avec CSS Designer, il n'a jamais été aussi simple de gérer du code et de comprendre comment tout s'organise.
Testez-le sans plus attendre.
Testez-le sans plus attendre.
