Apprenez à réduire et développer du code sous Dreamweaver pour visualiser des parties de votre document sans avoir recours au défilement.

Vous pouvez réduire ou développer des fragments de code afin de visualiser différentes sections de votre document sans besoin d’utiliser la barre de défilement.

Par exemple, pour afficher toutes les règles CSS dans la balise head qui s’appliquent à une balise div plus loin sur la page, vous pouvez réduire tout le code situé entre les balises head et div, de manière à voir les deux sections de code en même temps.

Vous pouvez sélectionner une partie de code afin de le réduire. Vous pouvez également réduire du code dans des fichiers HTML, PHP, XML et SVG sur la base de blocs de balise. Dans les fichiers CSS, Less, Sass, SCSS et JS, vous pouvez réduire le code sur la base des accolades.

  • Fichiers HTML : Dreamweaver réduit le code placé entre des balises HTML d’ouverture et de fermeture, et les attributs initiaux, le cas échéant, s’affichent dans le code réduit. Dreamweaver se développe automatiquement lorsque le code situé dans le bloc est mis en évidence par le biais du sélecteur de balises, ou des options Rechercher et remplacer, Atteindre la ligne, Affichage rapide des éléments, mode En direct ou Annuler/Rétablir.

En cas de changement de la sélection, le code est automatiquement réduit à nouveau.

  • Fichiers CSS, Less, Sass, SCSS et JS : le code placé entre accolades est réduit et l’aperçu s’affiche sous la forme {...}.
  • Fichiers PHP : outre les blocs de code PHP, les éléments HTML ainsi que les blocs de code CSS et JS sont réduits. 

Remarque :

Le code des fichiers créés à partir de modèles Dreamweaver est toujours affiché en mode développé, même si le modèle (*.dwt) contient des fragments de code réduits.

Définition des préférences de taille de pliage de code

La taille de pliage de code par défaut est deux lignes. Par ce paramètre par défaut, lorsque vous réduisez le code, tous les fragments de code qui contiennent au moins deux lignes de code sont réduits. Les fragments de code qui sont inférieurs à deux lignes s’affichent en mode développé.

Pour modifier le nombre minimal de lignes du pliage de code :

  1. Cliquez sur Edition > Préférences (Windows) ou Dreamweaver > Préférences (Mac).

  2. Cliquez sur Format de code dans la liste Catégorie et spécifiez la taille de réduction minimum de code.

Réduction et développement de fragments de code

Par défaut, tout le code en mode Code est en mode développé.

Toutefois, vous pouvez réduire le code en sélectionnant plusieurs lignes et en les réduisant. Vous pouvez également réduire du code sur la base de la syntaxe : blocs de balise ou accolades.

Remarque :

Les états réduits ou développés des blocs de code sont conservés dans les différentes sessions de Dreamweaver.

Réduction de code en fonction de blocs de balise ou d’accolades

Pour réduire du code en fonction de blocs de balise ou d’accolades :

  1. En mode Code, passez la souris sur la colonne de numéro de ligne qui correspond au bloc de code que vous souhaitez réduire ou développer. Un petit triangle s’affiche en regard des numéros de ligne.

  2. Cliquez sur le triangle pour réduire ou développer le code.

    Remarque :

    Pour développer tout le code réduit dans le document, vous pouvez utiliser le raccourci clavier Ctrl+Alt+E (Windows) ou Cmd+Alt+E (Mac).

    Réduction de code à partir de blocs de balise
    Réduction de code à l’aide de blocs de balises (besoin de mettre à jour la capture d’écran)

Réduction de code en fonction de la sélection

Pour réduire du code en fonction de la sélection :

  1. En mode Code, sélectionnez le fragment de code que vous souhaitez réduire.

    Lorsque vous sélectionnez du code, une icône de réduction s’affiche dans la colonne de numéro de ligne.

  2. Cliquez sur l’icône pour réduire ou développer la sélection.

    Lorsque le code est réduit, l’icône de réduction se transforme en une icône de développement ().

    Réduction du code sélectionné
    Réduction du code sélectionné (besoin de mettre à jour la capture d’écran)

    Développement du code (besoin de mettre à jour la capture d’écran)
    Développement du code (besoin de mettre à jour la capture d’écran)

Utilisation de raccourcis clavier pour réduire et développer du code

Commande

Windows

Macintosh

Réduire la sélection

Ctrl+Maj+C

Cmd+Maj+C

Réduire à l’extérieur de la sélection

Ctrl+Alt+C

Cmd+Alt+C

Développer la sélection

Ctrl+Maj+E

Cmd+Maj+E

Réduire balise entière

Ctrl+Maj+J

Cmd+Maj+J

Réduire balise entière extérieure

Ctrl+Alt+J

Cmd+Alt+J

Développer tout

Ctrl+Alt+E

Cmd+Alt+E

Copie et collage d’un fragment de code réduit

  1. Cliquez sur le fragment de code réduit pour le sélectionner.

  2. Sélectionnez Édition > Copier.
  3. Placez le curseur à l’endroit où vous voulez coller le code.

  4. Sélectionnez Édition > Coller.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne