Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes | ||
outils:vscode:web [2022/06/13 11:02] – [Outils - Préparer un projet de site Web avec l'IDE VSCode] phil | outils:vscode:web [2023/09/12 15:54] – [2. Projet de site Web] phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
[[web: | [[web: | ||
- | ==== IDE VSCode | + | ==== IDE VSCode - Préparer un projet de site Web ==== |
- | [Mise à jour le 4/9/2020] | + | [Mise à jour le 13/9/2022] |
* **Lien** | * **Lien** | ||
- | * **Site** | + | * **Site** < |
* **Lecture connexe** | * **Lecture connexe** | ||
Ligne 18: | Ligne 18: | ||
**L' | **L' | ||
- | <note>Comme beaucoup d' | + | <callout type=" |
{{ : | {{ : | ||
Ligne 28: | Ligne 28: | ||
* **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.</ | + | <callout type=" |
=== 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' | Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l' | ||
- | <note warning> | + | <callout type="warning" icon=" |
---- | ---- | ||
Ligne 45: | Ligne 45: | ||
== É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 **// | + | * Effectuez un clic droit dans le dossier **www** de votre compte |
- | <note>Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</ | + | <callout type=" |
== Étape 2 : placer le dossier dans Visual Studio Code == | == Étape 2 : placer le dossier dans Visual Studio Code == | ||
* Ouvrez **VSCode** en cliquant sur l' | * Ouvrez **VSCode** en cliquant sur l' | ||
- | * Faites glisser | + | * Dans le menu, sélectionnez **Fichier -> Ouvrir |
+ | * __Exemple__ | ||
+ | * Le dossier doit s' | ||
== Étape 3 : créer les sous-dossiers == | == Étape 3 : créer les sous-dossiers == | ||
Ligne 111: | Ligne 113: | ||
== Étape 6 : Positionner les fenêtres dans l' | == Étape 6 : Positionner les fenêtres dans l' | ||
- | <note tip> | + | <callout type="tip" icon=" |
//Exemple// : travail simultané sur les fichiers index.html et style.css. | //Exemple// : travail simultané sur les fichiers index.html et style.css. |