Naviguer avec la vue Code

La vue Code vous permet de consulter les fichiers d'autres projets, d'accéder à d'autres emplacements de votre document et de rechercher du texte dans le code.

Parcourir les fichiers

Lorsque Google Web Designer est en vue Code, le panneau Fichiers situé à gauche affiche la liste des fichiers et sous-dossiers contenus dans le dossier de votre projet. Le panneau est automatiquement mis à jour pour intégrer les modifications apportées à la liste.

Ouvrir des fichiers

Sélectionnez un fichier dans le panneau pour l'ouvrir dans un nouvel onglet. Vous pouvez ouvrir les types de fichiers suivants :

• Fichiers sources .html créés par Web Designer
• Autres fichiers .html*
• .css*
• .js*
• .json*
• .svg*
• .xml*

^{* Pour modification en vue Code uniquement.}

Vous pouvez également consulter des fichiers image (.jpg/.jpeg, .png, .gif). Passez la souris sur le nom de fichier d'une image dans le panneau "Fichiers" pour afficher une miniature de l'image.

Les fichiers que Web Designer ne peut pas ouvrir sont grisés.

La commande de menu Fichier > Ouvrir vous permet d'ouvrir des fichiers d'autres projets ou dans d'autres dossiers.

Filtrer la liste de fichiers

Saisissez une partie du nom d'un fichier dans le champ Filtrer des fichiers  pour n'afficher que les fichiers correspondants.

Masquer le panneau "Fichiers"

Cliquez sur le bouton Réduire  dans l'angle supérieur droit du panneau "Fichiers" pour masquer la liste de fichiers. Cliquez sur le bouton Développer  pour rouvrir le panneau.

Parcourir votre document

Si vous sélectionnez un élément dans la vue Conception et que vous passez à la vue Code, votre curseur est positionné au niveau du code correspondant à l'élément sélectionné.

Accéder à une ligne

Cliquez sur le numéro de ligne ou de colonne dans la barre en pied de page pour saisir une nouvelle valeur, puis appuyez sur Entrée.

Utiliser la mini-carte

La mini-carte située du côté droit de la fenêtre affiche une version miniature de la totalité de votre document en vue Code. La partie de code visible dans l'éditeur est mise en surbrillance dans la mini-carte.

Cliquez sur la mini-carte pour accéder à la partie correspondante du document, ou faites glisser la souris vers le haut ou vers le bas pour faire défiler le document.

Vous pouvez désactiver la mini-carte dans vos préférences.

Effectuer une recherche dans le code

Pour rechercher du texte dans le code, procédez comme suit :

1. Accédez à Modifier > Rechercher, ou appuyez sur Ctrl+F (Windows) ou ⌘+F (Mac) pour ouvrir la barre de recherche en bas de la fenêtre.
2. Saisissez le terme de recherche dans le champ Rechercher.
3. Activez les options de recherche de votre choix :
   • Expressions régulières (.*)
   • Sensible à la casse (Aa)
   • Mots entiers ()
   • Limiter à la sélection ()
4. Google Web Designer affiche le nombre total de correspondances et met en évidence la première d'entre elles à côté de la position de votre curseur.
   • Pour accéder à la correspondance suivante, cliquez sur ou appuyez sur Ctrl+G (Windows) ou ⌘+G (Mac).
   • Pour accéder à la correspondance précédente, cliquez sur ou appuyez sur Maj+Ctrl+G (Windows) ou Maj+⌘+G (Mac)
   • Pour sélectionner toutes les correspondances afin de les modifier simultanément, cliquez sur Tout rechercher.

Appuyez sur Échap ou cliquez sur le bouton X pour fermer la barre de recherche.

Pour rechercher et remplacer du texte dans le code, procédez comme suit :

1. Accédez à Modifier > Rechercher/Remplacer, ou appuyez sur Ctrl+Maj+F (Windows) ou ⌘+Maj+F (Mac) pour ouvrir la barre de recherche et remplacement en bas de la fenêtre.
2. Saisissez le terme de recherche dans le champ Rechercher et le texte de remplacement dans le champ Remplacer.
3. Vous pouvez utiliser les mêmes options que lorsque vous recherchez du texte (voir ci-dessus), en plus d'en remplacer :
   • Pour remplacer la correspondance active et afficher la suivante, cliquez sur Remplacer.
   • Pour remplacer toutes les correspondances, cliquez sur Tout remplacer.

Passer à la vue Conception

Cliquez sur le bouton Vue Conception  dans l'angle supérieur droit de la fenêtre.