Différences

Ci-dessous, les différences entre deux révisions de la page.

--- outils:vscode:web [2022/06/13 11:02] – [IDE VSCode - - Préparer un projet de site Web] phil
+++ outils:vscode:web [2023/09/12 16:05] (Version actuelle) – phil
@@ Ligne 2: / Ligne 2: @@
 ==== IDE VSCode - Préparer un projet de site Web ====
-[Mise à jour le 4/9/2020]
+[Mise à jour le 12/9/2023]
   * **Lien**
-    * **Site** Visual Studio Code : <html><a href="https://code.visualstudio.com/" target="_blank">lien</a></html>
+    * **Site** <html><a href="https://code.visualstudio.com/" target="_blank"> Visual Studio Code</a></html>
   * **Lecture connexe**
@@ Ligne 18: / Ligne 18: @@
 **L'interface utilisateur**
-<note>Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</note>
+<callout type="primary" icon="true">Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</callout>
 {{ :arduino:uivscode.jpg?nolink |}}
@@ Ligne 28: / Ligne 28: @@
   * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez.
-<note>Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</note>
+<callout type="primary" icon="true">Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</callout>
 === 2. Projet de site Web ===
 Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l'activité développée dans la suite du document. Nous nous fixons l'objectif suivant :
-<note warning>Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</note>
+<callout type="warning" icon="true">Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</callout>
 ----
@@ Ligne 45: / Ligne 45: @@
 == Étape 1 : créer un dossier ==
-    * Effectuez un clic droit sur le bureau du PC et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**.
+    * Effectuez un clic droit dans le dossier **www** de votre compte sur le NAS_SIN et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**.
-<note>Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</note>
+<callout type="primary" icon="true">Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</callout>
 == Étape 2 : placer le dossier dans Visual Studio Code ==
-    * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau.
+  * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau.
-    * Faites glisser le dossier **//MonSitedeTest//** dans VSCode.
+  * Dans le menu, sélectionnez **Fichier -> Ouvrir le dossier** et entrez le chemin d'accès à **//MonSitedeTest//**.
+    * __Exemple__
+{{ :outils:vscode:bdialoguedossier.png?nolink |}}
+  * Sélectionez **//MonSitedeTest//** et cliquez sur {{:outils:vscode:bpselec.png?nolink|}} et autoriser un éventuel message de sécurité
+  * Le dossier doit apparaître dans VSCode comme ci-dessous.
 == Étape 3 : créer les sous-dossiers ==
@@ Ligne 111: / Ligne 115: @@
 == Étape 6 : Positionner les fenêtres dans l'éditeur ==
-<note tip>Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</note>
+<callout type="tip" icon="true">Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</callout>
 //Exemple// : travail simultané sur les fichiers index.html et style.css.