Gyakorlat – A webalkalmazás szerkezetének beállítása

Befejeződött

A webhelyprojektek létrehozásának és kezelésének különböző módjai vannak. Ezen különbségek némelyike a saját eszközeitől és a szervezet preferenciáitól függ. Webhely létrehozásakor nem ritka, hogy a projektstruktúra idővel megváltozik, mivel az bonyolultabbá válik. A nagy projektek gyakran magasabb szintű gondoskodást és figyelmet igényelnek, hogy sok ember mindent rendezetten tartson. A legfontosabb, hogy fenntartsa a szervezet szemblance, és vannak gyakori stratégiák, amelyek segítenek.

Ebben a leckében egy kis projektstruktúrát hoz létre a Visual Studio Code használatával. A projekt három fájlból áll: egy HTML-fájlból, egy CSS-fájlból és egy JavaScript-fájlból. Egy Visual Studio Code-bővítményt is hozzáad, hogy egyszerűbb legyen a webhely futtatása a böngészőben.

Új mappa létrehozása a webhelyhez

1. Nyissa meg a Visual Studio Code-ot.

   A Visual Studio Code megnyitásakor megnyílik az üdvözlőlap . Figyelje meg, hogy létrehozhat egy új fájlt, vagy megnyithat egy mappát a Start listában.

   

   Ha az üdvözlőlap nem látható, a menü Súgó > üdvözli elemét választva jelenítheti meg. (Másik lehetőségként megjelenítheti a Üdvözlőlap: nyissa meg a Parancskatalógust a Windows rendszerű számítógépen a Shift+Ctrl+P billentyűparanccsal, macOS rendszeren a Shift+Cmd+P billentyűkombinációval, vagy válassza > megtekintése lehetőséget a Visual Studio Code menüjében. Amikor megjelenik a parancskatalógus, írja be >a Súgó: Üdvözli a keresőmezőbe az üdvözlőoldal megnyitásához.)

2. Válassza a Mappa megnyitása lehetőséget az üdvözlőlap Start listájában, vagy válassza a Fájl > megnyitása mappát a Visual Studio Code menüjében.

   

   Amikor megnyit egy mappát, az operációs rendszer egy új mappa létrehozását lehetővé tévő menüvel rendelkezik.

3. Lépjen arra a helyre, ahol létre szeretné hozni a webhely új mappáját, és válassza az Új mappa lehetőséget.

4. Nevezze el a mappát egyszerű webhelynek, majd válassza a Mappa kiválasztása lehetőséget.

   Fontos

   Ha megjelenik egy Visual Studio Code-párbeszédpanel, válassza a Szülőmappa összes fájljának szerzőinek megbízhatósága...; ez a Munkaterület megbízhatósága funkció, amellyel eldöntheti, hogy a projektmappák engedélyezik-e vagy korlátozzák-e az automatikus kódvégrehajtást. Most hozta létre a mappát, így biztonságos.

Fájlok létrehozása

1. Hozzon létre egy új fájlt úgy, hogy kiválasztja az Új fájl fájlt > a menüből, vagy a Windowson a Control+N, macOS rendszeren pedig a Command+N használatával.

2. Mentse a fájlt a Control+S windowsos, macOS rendszeren pedig a Command+S billentyűkombinációval.

3. Adja meg index.html a fájl nevét, majd válassza a Mentés lehetőséget.

4. Ismételje meg az előző lépéseket két további fájl létrehozásához: main.css és app.js. Ha végzett, a Visual Studio Code Explorer egyszerű webhely projektmappájának a következő fájlokat kell tartalmaznia:

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

   

Egy webhelyet úgy hozhat létre, hogy az összes HTML-, CSS-stílust és JavaScript-kódot egyetlen fájlban tartalmazza. Ebben a gyakorlatban azonban egy HTML-fájlt használ a tartalomhoz, egy CSS-fájlt a stílushoz, és egy JavaScript-fájlt az interaktivitáshoz.

Három fájl beállítása segít a webhelyprojekt rendszerezésében. A tartalom, a stílusok és a logika elkülönítése példa a fokozatos fejlesztésre. Ha az ügyfelek nem engedélyezik vagy támogatják a JavaScriptet, a CSS és a HTML továbbra is működni fog. Ha azonban az ügyfelek nem támogatják a CSS-t, legalább a HTML-tartalom megjelenik.

Bővítmények vagy csomagok telepítése

A Visual Studio Code funkcióit a bővítmények piacterén bővítheti. Ne feledje, hogy ezek a bővítmények közösségi fejlesztésű erőforrások, és gyakran több megoldás is létezik ugyanahhoz a funkcióhoz. A bővítményeket egyenként is telepítheti a szerkesztőben, vagy egyszerre több bővítményt is a parancssor használatával.

A webfejlesztéshez most csak a böngészőben kell megnyitnia. Ezzel a bővítménysel gyorsan megnyithatja a webhelyet az alapértelmezett böngészőben a fájl URL-címének másolása és beillesztése helyett a böngészőbe.

A bővítmény telepítéséhez kövesse az alábbi lépéseket:

1. Válassza a Bővítmények ikont a függőleges tevékenységsávon (a bal oldali panelen).

2. Írja be a megnyitást a keresőmezőbe, majd válassza ki a TechER által közzétett böngészőbővítmény megnyitását.

3. Válassza a Telepítés lehetőséget, és a Visual Studio Code telepíti a bővítményt.

   

4. Váltson vissza az Explorerre a tevékenységsáv felső ikonra kattintva, vagy a Windowson a Control+Shift-E, macOS rendszeren pedig a Command+Shift-E billentyűkombinációval.

Szép volt! A telepítés és a telepítés egy kis időt vesz igénybe, de csak egyszer kell telepítenie és beállítania. Most már készen áll egy webhely létrehozására.