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 [2020/09/04 10:31] – [2.2 Préparation de VS Code à un projet de site Web] admin | outils:vscode:web [2023/09/12 15:54] – [2. Projet de site Web] phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | |||
+ | ==== IDE VSCode - Préparer un projet de site Web ==== | ||
+ | [Mise à jour le 13/9/2022] | ||
+ | |||
+ | * **Lien** | ||
+ | * **Site** < | ||
+ | |||
+ | * **Lecture connexe** | ||
+ | * Installation du logiciel : voir les **généralités** sur le [[outils: | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | === 1. Visual Studio Code === | ||
+ | **Visual Studio Code** est un **éditeur de code source** léger, mais puissant, disponible pour **Windows**, | ||
+ | |||
+ | **L' | ||
+ | |||
+ | <callout type=" | ||
+ | {{ : | ||
+ | |||
+ | Cette interface est divisée en cinq zones : | ||
+ | * **La barre d' | ||
+ | * **La barre latérale** (Side Bar) contient des vues différentes comme l' | ||
+ | * **L’éditeur** (Editor Groups) – C’est la zone principale pour éditer vos fichiers. Vous pouvez ouvrir jusqu' | ||
+ | * **Les panneaux** (Pannels) permettent d’afficher différents panneaux sous la zone de l' | ||
+ | * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez. | ||
+ | |||
+ | <callout type=" | ||
+ | |||
+ | === 2. Projet de site Web === | ||
+ | Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l' | ||
+ | |||
+ | <callout type=" | ||
+ | |||
+ | ---- | ||
+ | |||
+ | **Cahier des charges** | ||
+ | |||
+ | On souhaite organiser les dossiers du projet comme sur la copie d' | ||
+ | {{ : | ||
+ | |||
+ | ---- | ||
+ | |||
+ | == Étape 1 : créer un dossier == | ||
+ | * 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 **// | ||
+ | <callout type=" | ||
+ | |||
+ | == Étape 2 : placer le dossier dans Visual Studio Code == | ||
+ | * Ouvrez **VSCode** en cliquant sur l' | ||
+ | * Dans le menu, sélectionnez **Fichier -> Ouvrir le dossier** et entrez le chemin d' | ||
+ | * __Exemple__ | ||
+ | * Le dossier doit s' | ||
+ | |||
+ | == Étape 3 : créer les sous-dossiers == | ||
+ | * Dans la **barre d' | ||
+ | |||
+ | * Cliquez sur l' | ||
+ | {{ : | ||
+ | |||
+ | * La fenêtre de l' | ||
+ | {{ : | ||
+ | |||
+ | * Répétez l' | ||
+ | |||
+ | == Étape 4 : Créer les fichiers == | ||
+ | * Cliquez sur l' | ||
+ | {{ : | ||
+ | |||
+ | * Ajoutez le fichier // | ||
+ | |||
+ | * La fenêtre de l' | ||
+ | {{ : | ||
+ | |||
+ | == Étape 5 : Créer la structure de la page Web == | ||
+ | * Sélectionnez le fichier **index.html** dans l' | ||
+ | |||
+ | * Entrez le texte " | ||
+ | {{ : | ||
+ | |||
+ | * La page // | ||
+ | <code html *.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Vous êtes prêt à créer votre page. Modifiez ce code comme ci-dessous. Faites un clic-droit dans la page et sélectionnez "// | ||
+ | |||
+ | <code html *.html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | == Étape 6 : Positionner les fenêtres dans l' | ||
+ | <callout type=" | ||
+ | |||
+ | //Exemple// : travail simultané sur les fichiers index.html et style.css. | ||
+ | * Cliquez sur l' | ||
+ | |||
+ | * Faites glisser les fichiers index.html et style.css pour que votre écran ressemble à la copie ci-dessous | ||
+ | {{ : | ||
+ | |||
+ | * Ajoutez le code suivant dans style.css | ||
+ | <code css *.css> | ||
+ | body { | ||
+ | color: blue; | ||
+ | font-family: | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: large; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: medium; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * Faites un clic droit dans la page CSS et sélectionnez "// | ||
+ | {{ : | ||
+ | |||
+ | * Faites un clic droit dans la page HTML et sélectionnez "// | ||
+ | {{ : | ||
+ | |||