Øvelse – Konfigurer strukturen i din webapp

  • 5 minutter

Der er forskellige måder at oprette og administrere webstedsprojekter på. Nogle af disse forskelle afhænger af de specifikke værktøjer, du har, og organisationens præferencer. Når du opretter et websted, er det ikke ualmindeligt, at din projektstruktur ændres over tid, da det bliver mere kompliceret. Store projekter kræver ofte en højere grad af omhu og opmærksomhed, så mange mennesker kan holde alt organiseret. Nøglen er at bevare en stor del af organisationen, og der er fælles strategier, der kan hjælpe dig.

I dette undermodul opretter du en lille projektstruktur ved hjælp af Visual Studio Code. Projektet har tre filer: en HTML-fil, en CSS-fil og en JavaScript-fil. Du kan også tilføje en Visual Studio Code-udvidelse for at forenkle kørslen af webstedet i din browser.

Opret en ny mappe til dit websted

  1. Åbn Visual Studio Code.

    Når du åbner Visual Studio Code, åbnes siden Welcome. Bemærk, at du kan oprette en ny fil eller åbne en mappe på listen Start.

    Skærmbillede af siden Introduktion til Visual Studio Code.

    Hvis siden Velkomst ikke er synlig, kan du få den vist ved at vælge Hjælp > Velkomst i menuen. Du kan også få vist siden Velkommen ved at åbne Kommandopalet ved hjælp af tastaturgenvejen Skift+Ctrl+P på en Windows-computer eller Skift+Cmd+P- på en macOS eller ved at vælge Vis > kommandopalet i menuen Visual Studio Code. Når kommandopalet vises, skal du angive >Hjælp: Velkommen i søgefeltet for at åbne siden Velkommen.)

  2. Vælg Åbn mappe på listen Start på siden velkommen , eller vælg Fil > Åbn mappe i menuen Visual Studio Code.

    Skærmbillede af dialogboksen Åbn mappe i Windows-operativsystemet.

    Når du åbner en mappe, har operativsystemet en menuindstilling til at oprette en Ny mappe.

  3. Gå til den placering, hvor du vil oprette den nye mappe til webstedet, og vælg Ny mappe.

  4. Navngiv mappen på et simpelt websted , og vælg derefter Vælg mappe.

    Vigtig

    Hvis dialogboksen Visual Studio Code vises, skal du vælge Hav tillid til forfatterne til alle filer i den overordnede mappe...; Dette er funktionen Tillid til arbejdsområde, der giver dig mulighed for at beslutte, om dine projektmapper skal tillade eller begrænse automatisk udførelse af kode. Du har lige oprettet mappen, så det er sikkert.

Opret nogle filer

  1. Opret en ny fil ved at vælge Filer > Ny fil i menuen eller ved hjælp af Control+N- i Windows eller Command+N- på macOS.

  2. Gem filen ved at vælge Control+S- på Windows, eller Command+S på macOS.

  3. Angiv index.html til filnavnet, og vælg derefter Gem.

  4. Gentag de foregående trin for at oprette to filer mere: main.css og app.js. Når du er færdig, skal enkel webstedsmappe projektmappe i Visual Studio Code Explorer indeholde følgende filer:

    • index.html
    • main.css
    • app.js

    Skærmbillede af dine filer i visningen Visual Studio Code Explorer.

Du kan oprette et websted ved at inkludere alle dine HTML-, CSS-typografier og JavaScript-kode i en enkelt fil. I denne øvelse bruger du dog en HTML-fil til dit indhold, en CSS-fil til din formatering og en JavaScript-fil til din interaktivitet.

Konfiguration af tre filer hjælper med at holde dit webstedsprojekt organiseret. Adskillelsen af indhold, typografier og logik er et eksempel på gradvis forbedring. Hvis JavaScript ikke er aktiveret eller understøttet af dine kunder, fungerer din CSS og HTML stadig. Men hvis CSS ikke understøttes af dine kunder, vises i det mindste dit HTML-indhold.

Installér udvidelser eller pakker

Du kan udvide funktionaliteten i Visual Studio Code ved hjælp af markedspladsen for udvidelser. Husk, at disse udvidelser er communityudviklede ressourcer, og der er ofte flere løsninger til den samme type funktion. Du kan installere udvidelser individuelt i editoren eller flere på én gang ved hjælp af kommandolinjen.

I forbindelse med webudvikling skal du bare åbne i browser. Denne udvidelse hjælper dig med hurtigt at åbne webstedet i din standardbrowser i stedet for at kopiere og indsætte url-adressen til filen i din browser.

Hvis du vil installere denne udvidelse, skal du benytte følgende fremgangsmåde:

  1. Vælg ikonet for udvidelser på den lodrette aktivitetslinje (venstre rude).

  2. Angiv åbn i i søgefeltet, og vælg derefter den , der er åbnet i webbrowseren, udvidelse, der udgives af TechER.

  3. Vælg Installér, hvorefter Visual Studio Code installerer udvidelsen.

    Skærmbillede, der viser margenteksten for Visual Studio Code-udvidelsen med ordene

  4. Skift tilbage til Explorer ved at klikke på det øverste ikon på aktivitetslinjen, eller brug Control+Shift-E- på Windows eller Command+Shift-E på macOS.

Sådan! Installation og konfiguration tager lidt ekstra tid, men du behøver kun at installere og konfigurere én gang. Nu er du klar til at oprette et websted.