Как писать сайт в visual studio code

Начало работы с веб-разработкой с помощью Visual Studio Code

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

Цели обучения

В этом модуле вы узнаете, как:

Создавать базовую веб-страницу с помощью HTML.
Применять стили к элементам страницы с помощью CSS.
Создавать темы с помощью CSS.
Добавление возможности переключения между темами с помощью JavaScript
Проверять веб-сайт с помощью средств разработчика браузера.

Предварительные требования

Microsoft Visual Studio Code
Опыт работы с одним или несколькими языками программирования и языком разметки, например HTML
Компьютер под управлением одной из следующих операционных систем:
- Windows: Windows 10 или 11
- Mac: macOS 10.15 или более поздней версии
- Linux: Ubuntu, Debian, Red Hat, Fedora или SUSE
Пошаговое руководство. Создание базового проекта определения сайта

В этом пошаговом руководстве показано, как создать базовое определение сайта, содержащее визуальную веб-часть с некоторыми элементами управления. Для ясности визуальная веб-часть, которую вы создаете, имеет только несколько элементов управления. Однако можно создать более сложные определения сайтов SharePoint, которые включают дополнительные функциональные возможности.

В этом пошаговом руководстве демонстрируются следующие задачи:
- Создание определения сайта с помощью шаблона проекта Visual Studio.
- Создание сайта SharePoint с помощью определения сайта в SharePoint.
- Добавление визуальной веб-части в решение.
- Настройка страницы default.aspx сайта путем добавления в нее новой визуальной веб-части.
Примечание. Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.

Необходимые компоненты

Для выполнения этого пошагового руководства требуются следующие компоненты:
- Поддерживаемые редакции Microsoft Windows и SharePoint. Дополнительные сведения см. в разделе «Требования к разработке решений SharePoint».
- Visual Studio.
Создание решения определения сайта

Сначала создайте проект определения сайта в Visual Studio.

Создание проекта определения сайта
1. В строке меню выберите Файл >Создать >Проект. Если интегрированная среда разработки настроена для использования параметров разработки Visual Basic, в строке меню выберите «Файл >нового проекта». Откроется диалоговое окно Создание проекта .
2. Разверните узел Visual C# или узел Visual Basic, разверните узел SharePoint и выберите узел 2010.
3. В списке шаблонов выберите шаблон проекта SharePoint 2010.
4. В поле «Имя» введите TestSiteDef и нажмите кнопку «ОК«. Откроется мастер настройки SharePoint.
5. На странице «Указание сайта и уровня безопасности для отладки» введите URL-адрес для сайта SharePoint, в котором требуется выполнить отладку определения сайта, или используйте расположение по умолчанию (http:// System Name/).
6. В разделе » Что такое уровень доверия для этого решения SharePoint?» , нажмите кнопку «Развернуть как решение фермы». Все проекты определения сайта должны быть развернуты в качестве решений фермы. Дополнительные сведения об изолированных решениях и решениях фермы см. в разделе «Изолированные решения».
7. Нажмите кнопку Готово . Проект отображается в Обозреватель решений.
8. В Обозреватель решений выберите узел проекта, а затем в строке меню выберите «Добавить новый элемент проекта>«.
9. В разделе Visual C# или Visual Basic разверните узел SharePoint и выберите узел 2010.
10. В области «Шаблоны» выберите шаблон определения сайта, оставьте имя в качестве SiteDefinition1 и нажмите кнопку «Добавить«.
Создание визуальной веб-части

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

Создание визуальной веб-части
1. В Обозреватель решений нажмите кнопку «Показать все файлы«.
2. Выберите узел проекта SiteDefinition1, а затем в строке меню выберите «Добавить новый элемент проекта>«. Откроется диалоговое окно Добавление нового элемента.
3. Разверните узел Visual C# или узел Visual Basic, разверните узел SharePoint и выберите узел 2010.
4. В списке шаблонов выберите шаблон визуальной веб-части , сохраните имя VisualWebPart1 по умолчанию и нажмите кнопку «Добавить «. Откроется файл VisualWebPart1.ascx .
5. В нижней части VisualWebPart1.ascx добавьте следующую разметку, чтобы добавить три элемента управления в форму: текстовое поле, кнопку и метку:
```
protected void btnSubmit_Click(object sender, EventArgs e)
```
```
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) lblName.Text = tbName.Text End Sub 
```
Этот код добавляет функциональные возможности для нажатия кнопки веб-части.

Добавление визуальной веб-части на страницу ASPX по умолчанию

Затем добавьте визуальную веб-часть на страницу ASPX по умолчанию определения сайта.

Добавление визуальной веб-части на страницу ASPX по умолчанию
1. Откройте страницу default.aspx и добавьте следующую строку после тега WebPartPages :
Развертывание и запуск решения определения сайта

Далее, разверните проект в SharePoint, а затем запустите проект.

Развертывание и запуск определения сайта
- В строке меню выберите «Сборка >deploy TestSiteDef».
- Нажмите клавишу F5. Visual Studio скомпилирует код, добавит его компоненты, поместит все его файлы в WSP-файл пакета и развернет этот WSP-файл на сервере SharePoint. Затем SharePoint устанавливает файлы, а затем активирует компоненты.
Создание сайта на основе определения сайта

Затем создайте сайт с помощью нового определения сайта.

Создание сайта с помощью определения сайта
1. На сайте SharePoint появится страница «Новый сайт SharePoint».
2. В разделе «Название и описание» введите «Мой новый сайт» для заголовка и описания сайта.
3. В разделе «Адрес веб-сайта» введите mynewsite в поле имени URL-адреса.
4. В разделе «Шаблон» выберите вкладку «Настройки SharePoint».
5. В списке «Выбор шаблона » выберите SiteDefinition1.
6. Оставьте другие параметры по умолчанию и нажмите кнопку «Создать «. Появится новый сайт.
Тестирование нового сайта

Теперь необходимо протестировать работу созданного сайта.

Тестирование нового сайта
- На странице ASPX по умолчанию введите текст и нажмите кнопку «Изменить текст метки» рядом с текстовым полем. Текст отобразится на метке справа от кнопки.
Связанный контент
- Практическое руководство. Создание приемника событий
- Разработка решений SharePoint
Используем VS Code для Веб-разработки

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.

React и JSX

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:

Последний, впрочем, может быть заменен на XO.

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете
- Dart — популярный в среде AngularJS язык программирования
- Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.
- Handlebars — поддержка шаблонов handlebars
- HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь http://htmlhint.com/
- Smarty — старый добрый шаблонизатор для PHP
- Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint
- Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS
- Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.
- XML Tools —полезный для XML/XSLT разработчиков набор плагинов
Сниппеты

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Полезные расширения

Align

Beautify

Интерфейс к http://jsbeautifier.org/. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Dash

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Seti

Бинды (сочетания клавиш)

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Нет нужного расширения?

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц

В процессе выполнения всех уроков, вами будет создан полноценный веб-сайт юридической конторы.

Структура веб-страниц представлена на рисунке 1.

1 — Структура итогового веб-сайта

Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.

– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):

Рисунок 1.1 — Предварительный просмотр веб-страницы

Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)

Для создания проекта «Юридическая контора «Советник»» нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера.

Для реализации проекта в качестве редактора вы будете использовать современный инструмент — Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.

– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.

– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).

1.2 — Боковая панель

– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.

1.3 — Боковая панель. Выбранная папка

– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html

1.4 — Создан файл design.html

Наполнение папки Sovetnik

Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.

– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.

1.5 — Папка Sovetnik

– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.

1.6 — Название страницы

Создание дизайна сайта.

Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.

– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:

1.7 — Стандартная структура

– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).

1.8 — Название страницы

– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):

1.9 — Добавлены meta и link данные

Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name=»viewport» для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.

– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.

1.10 — Выделеные области нужно добавить на свою страницу.

– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).

1.11 — Код добавления логотипа на страницу.

1.12 — Логотип технологии SVG и формата PNG.

– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix — метод отмены действия float без изменения структуры HTML-документа (рисунок 1.13).

1.13 — Код ссылок для вставки навигации

– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).

1.14 — Добавлены meta и link данные

– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.

1.15 — Выделеные области нужно добавить на свою страницу.

Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).

1.16 — Предварительный просмотр веб-страницы

Контрольные вопросы

1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов ?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?

Создание сайта на HTML5
- Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц
- Урок 2. Создание главной страницы сайта
- Урок 3. Создание страницы «Услуги и цены»
- Урок 4. Создание страниц «Гражданам», «Юридическим лицам»
- Урок 5. Создание страницы «Вопросы-ответы»
- Урок 6. Создание страницы «Контакты»
- Установка Visual Studio Code
Похожие публикации: