Упражнение. Настройка структуры веб-приложения

Завершено

Создавать проекты веб-сайтов и управлять ими можно различными способами. Некоторые отличия обусловлены имеющимися у вас средствами и предпочтениями организации. Структура проекта веб-сайта нередко со временем меняется по мере его усложнения. Крупные проекты часто требуют более продуманного подхода, чтобы все участники процесса могли упорядочивать все необходимое. Ключ заключается в поддержании видимости организации, и есть распространенные стратегии, которые помогут вам.

В этом уроке создается небольшая структура проекта с помощью Visual Studio Code. Проект содержит три файла: HTML-файл, CSS-файл и файл JavaScript. Вы также добавите расширение Visual Studio Code, чтобы упростить запуск веб-сайта в браузере.

Создание новой папки для веб-сайта

1. Откройте Visual Studio Code.

   При запуске Visual Studio Code открывается страница приветствия. Обратите внимание, что создать новый файл или открыть папку можно в списке Запуск.

   

   Если страница Приветствие не отображается, ее можно отобразить, выбрав в меню Справка > Приветствие. (Другим способом отобразить страницу Приветствие можно, открыв Палитру команд с помощью сочетания клавиш Shift + Ctrl + P на компьютере с Windows или Shift + Cmd + P на компьютере с macOS либо выбрав команду Вид > Палитра команд в меню Visual Studio Code. После отображения палитры команд введите >Справка: приветствие в поле поиска, чтобы открыть страницу приветствия.)

2. Выберите Открыть папку в списке Запуск на странице Приветствие или в меню Visual Studio выберите Файл > Открыть папку.

   

   При открытии папки операционная система имеет параметр меню для создания новой папки.

3. Перейдите в расположение, в котором нужно создать новую папку для веб-сайта, и выберите Создать папку.

4. Присвойте папке имя simple-website, а затем щелкните Выбрать папку.

   Внимание

   Если появится диалоговое окно Visual Studio Code, выберите " Доверять авторам всех файлов в родительской папке...", это функция "Доверие рабочей области", которая позволяет определить, должны ли папки проекта разрешать или ограничивать автоматическое выполнение кода. Вы только что создали папку, поэтому она безопасна.

Создание определенных файлов

1. Создайте новый файл, выбрав Файл > Создать файл в меню либо нажав клавиши CTRL+N в Windows или CMD+N в macOS.

2. Сохраните файл, нажав сочетание клавиш CTRL+S в Windows или CMD+S в macOS.

3. Введите index.html в качестве имени файла и выберите Сохранить.

4. Повторите предыдущие шаги, чтобы создать еще два файла: main.css и app.js. По завершении папка проекта простого веб-сайта в обозревателе Visual Studio Code должна содержать следующие файлы:

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

   

Вы можете создать веб-сайт, включив в один файл весь код HTML, CSS и JavaScript. Однако в этом упражнении используются три файла: файл HTML для определения содержимого, файл CSS для определения стиля и файл JavaScript для определения интерактивных функций.

С помощью этих трех файлов организуется весь проект. Разделение содержимого, стилей и логики является примером последовательного расширения. Если клиенты не используют или не поддерживают JavaScript, код CSS и HTML все равно будет работать. Если же клиенты не поддерживают CSS, будет отображаться как минимум содержимое HTML.

Установка расширений или пакетов

Вы можете расширить функциональные возможности Visual Studio Code с помощью расширений на Extensions Marketplace. Имейте в виду, что эти расширения являются ресурсами, разработанными сообществом, и часто существует несколько решений для одного и того же типа функции. Вы можете устанавливать расширения по одному в редакторе или сразу по нескольку с помощью командной строки.

Для веб-разработки все, что вам нужно сейчас, открыто в браузере. Это расширение позволяет быстро открывать веб-сайт в браузере по умолчанию, вместо того чтобы копировать и вставлять URL-адрес файла в браузер.

Чтобы установить это расширение, сделайте следующее:

1. Щелкните значок Расширения на панели действий (область слева).

2. Введите его в поле поиска, а затем выберите его в расширении браузера, опубликованном TechER.

3. Выберите " Установить" и Visual Studio Code устанавливает расширение.

   

4. Вернитесь в Проводник, щелкнув верхний значок на панели действий либо нажав клавиши CTRL+SHIFT+Е в Windows или CMD+SHIFT+E в macOS.

Пора в путь! Установка и настройка занимает некоторое время, но повторять этот процесс больше не нужно. Теперь можно создать веб-сайт.