Exerciții - Configurarea structurii aplicației web

  • 5 minute

Există diferite modalități de a crea și a gestiona proiecte de site web. Unele dintre aceste diferențe depind de instrumentele specifice pe care le aveți și de preferințele organizației dvs. Atunci când creați un site web, nu este neobișnuit ca structura proiectului să se modifice în timp, deoarece devine mai complicată. Proiectele mari necesită adesea un grad mai mare de îngrijire și atenție, astfel încât multe persoane să poată păstra totul organizat. Cheia este să mențineți o semblență a organizației și există strategii comune care să vă ajute.

În această unitate, creați o structură mică de proiect utilizând Visual Studio Code. Proiectul are trei fișiere: un fișier HTML, un fișier CSS și un fișier JavaScript. De asemenea, adăugați o extensie Visual Studio Code pentru a simplifica rularea site-ului web în browser.

Creați un folder nou pentru site-ul web

  1. Deschideți Visual Studio Code.

    Atunci când deschideți Visual Studio Code, se deschide pagina Bun venit. Observați că puteți să creați un fișier nou sau să deschideți un folder în lista de Începeți.

    Captură de ecran a paginii Introducere a codului Visual Studio.

    Dacă pagina de de bun venit nu este vizibilă, o puteți afișa selectând Ajutor > Bun venit din meniu. (Alternativ, puteți afișa pagina de bun venit deschizând paletă de comenzi utilizând comanda rapidă de la tastatură Shift+Ctrl+P pe un computer Windows sau Shift+Cmd+P pe un macOS sau selectând Vizualizare > Paletă de comenzi din meniul Visual Studio Code. Atunci când se afișează paleta de comenzi, introduceți >Ajutor: Bun venit în câmpul de căutare pentru a deschide pagina de bun venit.)

  2. Selectați Deschideți folderul în lista de Start a paginii de bun venit sau selectați Fișier > Deschidere folder din meniul Visual Studio Code.

    Captură de ecran a casetei de dialog Deschidere folder din sistemul de operare Windows.

    Atunci când deschideți un folder, sistemul de operare are o opțiune de meniu pentru a crea un Folder nou.

  3. Navigați la locația unde doriți să creați noul folder pentru site-ul web și selectați Folder nou.

  4. Denumiți folderul simplu-site web , apoi selectați Selectați folderul.

    Important

    Dacă apare o casetă de dialog Cod Visual Studio, selectați Acordați încredere autorilor tuturor fișierelor din folderul părinte...; aceasta este caracteristica Trust spațiu de lucru care vă permite să decideți dacă folderele de proiect ar trebui să permită sau să restricționeze executarea automată a codului. Tocmai ați creat folderul, deci este sigur.

Creați câteva fișiere

  1. Creați un fișier nou selectând Fișier > Fișier nou din meniu sau utilizând Control+N în Windows sau Command+N pe macOS.

  2. Salvați fișierul selectând Control+S în Windows sau Command+S pe macOS.

  3. Introduceți index.html pentru numele fișierului, apoi selectați Salvare.

  4. Repetați pașii precedenți pentru a crea două fișiere suplimentare: main.css și app.js. După ce ați terminat, folderul de proiect al site-ului web simplu din Visual Studio Code Explorer ar trebui să conțină următoarele fișiere:

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

    Captură de ecran a fișierelor în vizualizarea Visual Studio Code Explorer.

Puteți construi un site web prin includerea tuturor stilurilor HTML, CSS și a codului JavaScript într-un singur fișier. Cu toate acestea, în acest exercițiu utilizați un fișier HTML pentru conținut, un fișier CSS pentru stil și un fișier JavaScript pentru interactivitate.

Configurarea a trei fișiere vă ajută să vă organizați proiectul de site web. Separarea conținutului, stilurilor și logicii este un exemplu de îmbunătățire progresivă. Dacă JavaScript nu este activat sau acceptat de clienții dvs., CSS și HTML vor funcționa în continuare. Totuși, dacă CSS nu este acceptat de clienții dvs., va apărea cel puțin conținutul HTML.

Instalarea extensiilor sau pachetelor

Puteți extinde funcționalitatea Visual Studio Code utilizând piața extensiilor. Rețineți că aceste extensii sunt resurse dezvoltate de comunitate și există adesea mai multe soluții pentru același tip de caracteristică. Puteți instala extensii individual în editor sau mai multe simultan utilizând linia de comandă.

Pentru dezvoltare web, tot ce vă trebuie acum este deschis în browser. Această extensie vă ajută să deschideți rapid site-ul web în browserul implicit, în loc să copiați și să lipiți adresa URL a fișierului în browser.

Pentru a instala această extensie, urmați acești pași:

  1. Selectați pictograma extensii de pe bara de activități verticală (panoul din stânga).

  2. Introduceți deschis în în caseta de căutare, apoi selectați deschis în browser extensie publicată de TechER.

  3. Selectați Instalareși Visual Studio Code instalează extensia.

    Screenshot showing the Visual Studio Code extension sidebar with the words 'open in' in in the search field and a list of matching extensions.

  4. Comutați înapoi la Explorer făcând clic pe pictograma de sus din bara de activități sau utilizați Control+Shift-E în Windows sau Command+Shift-E pe macOS.

O modalitate de a pleca! Instalarea și instalarea durează puțin timp suplimentar, dar trebuie să instalați și să configurați o singură dată. Acum sunteți gata să creați un site web.