Ćwiczenie — konfigurowanie struktury aplikacji internetowej

Ukończone

Istnieją różne sposoby tworzenia projektów witryn internetowych i zarządzania nimi. Niektóre z tych różnic zależą od konkretnych narzędzi i preferencji organizacji. Podczas tworzenia witryny internetowej nie jest rzadkością, aby struktura projektu zmieniała się wraz z upływem czasu, ponieważ staje się bardziej skomplikowana. Duże projekty często wymagają wyższego stopnia opieki i uwagi, dzięki czemu wiele osób może zachować wszystko zorganizowane. Kluczem jest utrzymanie pozorów organizacji i istnieją typowe strategie, które pomogą Ci.

W tej lekcji utworzysz małą strukturę projektu przy użyciu programu Visual Studio Code. Projekt ma trzy pliki: plik HTML, plik CSS i plik JavaScript. Dodasz również rozszerzenie programu Visual Studio Code, aby uprościć uruchamianie witryny internetowej w przeglądarce.

Tworzenie nowego folderu dla witryny internetowej

1. Otwórz Visual Studio Code.

   Po otwarciu programu Visual Studio Code zostanie otwarta strona powitalna . Zwróć uwagę, że możesz utworzyć nowy plik lub otworzyć folder na liście Start .

   

   Jeśli strona powitalna nie jest widoczna, możesz ją wyświetlić, wybierając pozycję Pomoc > powitalna w menu. (Alternatywnie możesz wyświetlić stronę Welcome, otwierając Paletę poleceń przy użyciu skrótu klawiaturowego Shift+Ctrl+P na komputerze z systemem Windows lub Shift+Cmd+P w systemie macOS lub wybierając pozycję Widok > Paleta poleceń z menu programu Visual Studio Code. Kiedy Paleta poleceń zostanie wyświetlona, wprowadź >Pomoc: Welcome w polu wyszukiwania, aby otworzyć stronę Welcome.)

2. Wybierz pozycję Otwórz folder na liście Start strony powitalnej lub wybierz pozycję Plik > Otwórz folder z menu programu Visual Studio Code.

   

   Po otwarciu folderu system operacyjny ma opcję menu, aby utworzyć nowy folder.

3. Przejdź do lokalizacji, w której chcesz utworzyć nowy folder dla witryny internetowej, a następnie wybierz pozycję Nowy folder.

4. Nadaj folderowi nazwę simple-website, a następnie wybierz pozycję Wybierz folder.

   Ważne

   Jeśli zostanie wyświetlone okno dialogowe programu Visual Studio Code, wybierz pozycję Ufaj autorom wszystkich plików w folderze nadrzędnym...; jest to funkcja Zaufania obszaru roboczego, która pozwala określić, czy foldery projektu powinny zezwalać na automatyczne wykonywanie kodu, czy ograniczyć je. Właśnie utworzono folder, więc jest bezpieczny.

Tworzenie niektórych plików

1. Utwórz nowy plik, wybierając pozycję Plik > nowy plik z menu lub za pomocą kontrolki+N w systemie Windows lub Command+N w systemie macOS.

2. Zapisz plik, wybierając pozycję Control+S w systemie Windows lub Command+S w systemie macOS.

3. Wprowadź index.html nazwę pliku, a następnie wybierz pozycję Zapisz.

4. Powtórz powyższe kroki, aby utworzyć jeszcze dwa pliki: main.css i app.js. Po zakończeniu folder projektu simple-website w Eksploratorze programu Visual Studio Code powinien zawierać następujące pliki:

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

   

Witrynę internetową można utworzyć, uwzględniając wszystkie style HTML, CSS i kod JavaScript w jednym pliku. Jednak w tym ćwiczeniu używasz pliku HTML dla zawartości, pliku CSS dla stylu i pliku JavaScript na potrzeby interakcyjności.

Skonfigurowanie trzech plików ułatwia organizowanie projektu witryny internetowej. Separacja zawartości, stylów i logiki jest przykładem progresywnego ulepszenia. Jeśli język JavaScript nie jest włączony lub obsługiwany przez klientów, twoje pliki CSS i HTML będą nadal działać. Jeśli jednak arkusz CSS nie jest obsługiwany przez klientów, zostanie wyświetlona co najmniej zawartość HTML.

Instalowanie rozszerzeń lub pakietów

Funkcjonalność programu Visual Studio Code można rozszerzyć przy użyciu platformy handlowej rozszerzeń. Należy pamiętać, że te rozszerzenia są zasobami opracowanymi przez społeczność i często istnieje kilka rozwiązań tego samego typu funkcji. Rozszerzenia można instalować indywidualnie w edytorze lub kilka jednocześnie przy użyciu wiersza polecenia.

W przypadku tworzenia stron internetowych wszystko, czego potrzebujesz teraz, to otwórz w przeglądarce. To rozszerzenie pomaga szybko otworzyć witrynę internetową w domyślnej przeglądarce, zamiast kopiować i wklejać adres URL pliku w przeglądarce.

Aby zainstalować to rozszerzenie, wykonaj następujące kroki:

1. Wybierz ikonę Rozszerzenia na pionowym pasku działań (okienko po lewej stronie).

2. Wprowadź otwórz w w polu wyszukiwania, a następnie wybierz rozszerzenie otwórz w przeglądarce opublikowane przez TechER.

3. Wybierz pozycję Zainstaluj, a program Visual Studio Code zainstaluje rozszerzenie.

   

4. Przejdź z powrotem do Eksploratora , klikając górną ikonę na pasku działań lub użyj polecenia Control+Shift-E w systemie Windows lub Command+Shift-E w systemie macOS.

Droga do zrobienia! Instalacja i instalacja zajmują trochę dodatkowego czasu, ale wystarczy zainstalować i skonfigurować tylko raz. Teraz możesz utworzyć witrynę internetową.