Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
outils:vscode:web [2021/08/11 12:30] – [Outils - Préparer un projet de site Web avec l'IDE VSCode] phil | outils:vscode:web [2023/09/12 16:05] (Version actuelle) – phil |
---|
[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] | [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] |
| |
==== Outils - Préparer un projet de site Web avec l'IDE VSCode ==== | ==== IDE VSCode - Préparer un projet de site Web ==== |
[Mise à jour le 4/9/2020] | [Mise à jour le 12/9/2023] |
| |
* **Lien** | * **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** | * **Lecture connexe** |
**L'interface utilisateur** | **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 |}} | {{ :arduino:uivscode.jpg?nolink |}} |
| |
* **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez. | * **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 === | === 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 : | 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> |
| |
---- | ---- |
| |
== Étape 1 : créer un dossier == | == É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 == | == É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 == | == Étape 3 : créer les sous-dossiers == |
| |
== Étape 6 : Positionner les fenêtres dans l'éditeur == | == É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. | //Exemple// : travail simultané sur les fichiers index.html et style.css. |