Поделиться через

Практическое лабораторное занятие. Веб-инструменты Visual Studio 2013

  • Статья

по команде веб-лагерей

Скачивание комплекта обучения для веб-лагерей

Visual Studio — это отличная среда разработки для . Windows и веб-проекты на основе NET. Он включает мощный текстовый редактор, который можно легко использовать для редактирования автономных файлов без проекта.

Visual Studio поддерживает полнофункциональный анализ дерева при редактировании каждого файла. Это позволяет Visual Studio предоставлять беспрецедентное автозавершение и действия на основе документов, делая процесс разработки гораздо быстрее и приятнее. Эти функции особенно эффективны в документах HTML и CSS.

Все эти возможности также доступны для расширений, что упрощает расширение редакторов новыми мощными функциями в соответствии с вашими потребностями. Web Essentials — это набор (в основном) веб-улучшений Visual Studio. Он включает множество новых завершений IntelliSense (особенно для CSS), новые функции ссылки на браузер, автоматический JSHint для файлов JavaScript, новые предупреждения для HTML и CSS и многие другие функции, необходимые для современной веб-разработки.

Все примеры кода и фрагменты кода включены в комплект для обучения веб-лагерей, доступный по адресу https://aka.ms/webcamps-training-kit.

Общие сведения

Задачи

В этом практическом задании вы узнаете, как:

  • Использование новых функций редактора HTML, включенных в Web Essentials, таких как многофункциональные фрагменты кода HTML5 и кодирование Zen
  • Использование новых функций редактора CSS, включенных в Web Essentials, таких как средство выбора цвета и подсказка матрицы браузера
  • Использование новых функций редактора JavaScript, включенных в Web Essentials, таких как Извлечение в файл и IntelliSense, для всех элементов HTML
  • Обмен данными между браузером и Visual Studio с помощью ссылки на браузер

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

Для выполнения этого практического задания требуется следующее:

Настройка

Чтобы выполнить упражнения в этом практическом задании, сначала необходимо настроить среду.

  1. Откройте окно windows Обозреватель и перейдите в папку Source лаборатории.
  2. Щелкните правой кнопкой мыши Setup.cmd и выберите Запуск от имени администратора , чтобы запустить процесс установки, который настроит среду и установит фрагменты кода Visual Studio для этой лаборатории.
  3. Если отображается диалоговое окно Контроль учетных записей, подтвердите действие для продолжения.

Примечание

Перед запуском программы установки убедитесь, что вы проверили все зависимости для этой лаборатории.

Использование фрагментов кода

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

Примечание

Каждое упражнение сопровождается начальным решением, расположенным в папке Begin упражнения, которое позволяет выполнять каждое упражнение независимо от других. Имейте в виду, что фрагменты кода, добавленные во время упражнения, отсутствуют в этих начальных решениях и могут не работать, пока вы не завершите упражнение. В исходном коде упражнения вы также найдете папку End , содержащую решение Visual Studio с кодом, который является результатом выполнения шагов в соответствующем упражнении. Эти решения можно использовать в качестве руководства, если вам нужна дополнительная помощь при работе с этим практическим занятием.

Упражнения

Это практическое занятие включает в себя следующие упражнения:

  1. Работа с браузером Link и Web Essentials
  2. Использование фрагментов кода и IntelliSense

Примечание

При первом запуске Visual Studio необходимо выбрать одну из стандартных коллекций параметров. Каждая предопределенная коллекция предназначена для соответствия определенному стилю разработки и определяет макеты окон, поведение редактора, фрагменты кода IntelliSense и параметры диалоговых окон. Процедуры в этом задании описывают действия, необходимые для выполнения данной задачи в Visual Studio при использовании коллекции Общих параметров разработки . Если выбрать другую коллекцию параметров для среды разработки, возможны различия в действиях, которые следует учитывать.

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

Ссылка на браузер — это новая функция, включенная в Visual Studio 2013, которая предоставляет канал между интегрированной областью разработки Visual Studio и любым открытым браузером для обмена данными между веб-приложением и Visual Studio. Web Essentials расширяет browser Link средствами для управления объектной моделью DOM и стилями CSS веб-страниц непосредственно из браузера.

В этом упражнении вы изучите некоторые функции, поддерживаемые Web Essentials и Browser Link , чтобы улучшить простую страницу теста.

Задача 1. Запуск проекта в нескольких браузерах

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

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

  2. В меню Файл выберите Открыть | Проект или решение... и перейдите к Ex1-WorkingwithBrowserLinkandWebEssentials\Begin в папке Source лаборатории (C:\WebCampsTK\HOL\VSWebTooling\Source). Выберите Begin.sln и нажмите кнопку Открыть.

  3. На панели инструментов Visual Studio разверните меню браузера и выберите команду Обзор с помощью....

    Обзор с параметром меню

    Пункт меню "Обзор с"

  4. В диалоговом окне Обзор с помощью выберите Google Chrome и Интернет Обозреватель, удерживая нажатой клавишу CTRL, и щелкните По умолчанию.

    Диалоговое окно

    Выбор нескольких браузеров по умолчанию

  5. Google Chrome и Интернет-Обозреватель теперь должны отображаться в качестве браузеров по умолчанию. Нажмите кнопку Отмена, чтобы закрыть диалоговое окно.

    Google Chrome и Интернет Обозреватель в качестве браузеров по умолчанию

    Google Chrome и интернет-Обозреватель в качестве браузеров по умолчанию

    Примечание

    После настройки браузеров по умолчанию в меню браузера будет выбран параметр Несколько браузеров .

    Несколько браузеров Несколько

  6. Нажмите клавиши CTRL + F5 , чтобы запустить приложение без отладки.

  7. При открытии обоих окон браузера поместите одно из них над другим, чтобы просматривать обновления в обоих браузерах одновременно. В браузерах должна отображаться веб-страница со светло-синим прямоугольником.

    Размещение одного браузера над другим

    Размещение одного браузера над другим

  8. Не закрывайте браузеры. Вы будете использовать их в следующей задаче.

Задача 2. Использование кода Zen для создания элементов HTML

Кодирование Zen — это подключаемый модуль редактора для высокоскоростного написания и редактирования HTML, XML, XSL (или любого другого структурированного формата кода). Ядром этого подключаемого модуля является мощный механизм аббревиаций, который позволяет развертывать выражения, аналогичные селекторам CSS, в HTML-код. Кодирование дзен — это быстрый способ написания HTML с помощью синтаксиса селектора стилей CSS.

В этом упражнении вы будете использовать функцию кодирования Zen, предоставляемую Web Essentials, для создания кнопок HTML, представляющих варианты вопроса.

  1. Вернитесь в Visual Studio.

  2. Откройте файл Index.cshtml, расположенныйв домашней папке Views | .

  3. Замените <!-- TODO: add options here (Добавить здесь параметры) —> закомментируйте приведенный ниже код и нажмите клавишу TAB.

    button.btn.btn-info.btn-lg.option{Answer $}*4

  4. Код должен быть развернут до HTML.

    Развернутый HTML

    Развернутый HTML-код

    Примечание

    Дополнительные сведения о синтаксисе кода Zen см. в следующей статье.

  5. Нажмите кнопку Обновить связанные браузеры , чтобы обновить оба браузера.

    Обновление связанных браузеров

    Обновление связанных браузеров

    Интернет-Обозреватель — страница обновлена с четырьмя кнопками

    Интернет-Обозреватель — страница обновлена с четырьмя кнопками

    Google Chrome — страница обновлена с четырьмя кнопками

    Google Chrome — страница обновлена с четырьмя кнопками

  6. Вернитесь в Visual Studio.

  7. Вы добавили кнопки на страницу, но вам все равно нужно добавить шаблонный вопрос. Для этого вы будете использовать новую функцию в Web Essentials под названием Генератор Lorem Ipsum. Найдите элемент div с атрибутом класса спереди.

  8. Добавьте следующий код в качестве первого дочернего элемента div и нажмите клавишу TAB.

    p.lead>lorem5

  9. Код должен быть развернут до HTML.

    Lorem Ipsum автоматически создано

    Lorem Ipsum создано автоматически

    Примечание

    В рамках программирования Zen теперь можно создавать код Lorem Ipsum непосредственно в редакторе HTML. Просто введите lorem и нажмите tab , и будет вставлен текст Lorem Ipsum из 30 слов. Например , lorem10 вставляет 10 слов Lorem Ipsum.

  10. Вы добавите логотип в верхней части вопроса, используя другую новую функцию в Web Essentials под названием Генератор Пикселей Lorem. Добавьте следующий код в качестве первого дочернего элемента элемента div с контейнером в качестве значения класса и нажмите клавишу TAB.

    div.row.header>pix-436x185-abstract

  11. Код должен развернуться до HTML.

    Lorem Pixel autogenerated

    Lorem Pixel autogenerated

    Примечание

    В рамках программирования Zen вы также можете создавать код Lorem Pixel непосредственно в редакторе HTML. Просто введите pix-200x200-animals и нажмите tab и будет вставлен тег img с изображением животного 200x200.

  12. Нажмите кнопку Обновить связанные браузеры , чтобы обновить оба браузера.

    Интернет-Обозреватель — автоматически созданные изображения и текст

    Интернет-Обозреватель — автоматически созданные изображения и текст

    Google Chrome — автоматически созданное изображение и текст

    Google Chrome — автоматически созданное изображение и текст

    Примечание

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

  13. Не закрывайте браузеры. Вы будете использовать их в следующей задаче.

Задача 3. Обновление свойства стиля

В этой задаче вы будете использовать функцию Проверки режима ссылки на браузер, чтобы определить точное расположение, в котором создается определенный элемент DOM, а затем обновить свойство color этого элемента с помощью средства выбора цвета, предоставляемого Web Essentials.

  1. В браузере internet Обозреватель нажмите клавиши CTRL + ALT + I, чтобы включить режим проверки.

  2. Наведите указатель мыши на светло-синюю границу и щелкните его.

    Перемещение указателя на светло-синюю границу

    Перемещение указателя на светло-синюю границу

  3. Вернитесь в Visual Studio. Обратите внимание, что элемент HTML, выбранный в браузере, также выбирается в редакторе HTML Visual Studio.

    Элемент HTML, выбранный в HTML-элементе редактора Visual Studio HTML

    Элемент HTML, выбранный в редакторе HTML Visual Studio

  4. Теперь вы обновите интерфейсный класс CSS, чтобы изменить стили выбранного элемента. Для этого нажмите клавиши CTRL + , чтобы открыть поле поиска Перейти к . Введите site.css и нажмите клавишу ВВОД , чтобы открыть файл.

    Открытие файла Site.css

    Открытие файла Site.css

  5. Нажмите клавиши CTRL + F и введите .flip-container .front , чтобы найти селектор CSS.

  6. Щелкните светло-синий квадрат в свойстве border класса , чтобы открыть средство выбора цвета.

    Открытие средства выбора цвета

    Открытие средства выбора цвета

  7. Разверните средство выбора цвета, нажав кнопку шеврона, и выберите новый цвет.

    Развертывание средства выбора цвета

    Развертывание средства выбора цвета

  8. Нажмите клавиши CTRL + ALT + ВВОД , чтобы обновить связанные браузеры.

  9. Перейдите в Интернет Обозреватель и обратите внимание на изменение цвета границы.

    Internet Обозреватель — обновленный цвет границы

    Интернет-Обозреватель — обновлен цвет границы

  10. Перейдите в Google Chrome и обратите внимание, как изменился цвет границы.

    Google Chrome — обновлен цвет границы

    Google Chrome — обновлен цвет границы

  11. Вернитесь в Visual Studio.

  12. Перейдите в конец файла Site.css и нажмите клавиши CTRL + F , чтобы найти селектор .btn .

  13. Обратите внимание, что свойство -webkit-border-radius подчеркнут зеленым цветом.

    -webkit-border-radius property of the btn

    Свойство -webkit-border-radius селектора btn

  14. Поместите курсор в свойство -webkit-border-radius . Под первой буквой первого слова свойства должна появиться синяя линия. Это смарт-тег.

  15. Нажмите клавиши CTRL + , чтобы открыть меню предложений, и выберите команду Добавить отсутствующие стандартные свойства (border-radius).

    Добавление предложения отсутствующих стандартных свойств

    Добавление предложения отсутствующих стандартных свойств

  16. Свойство border-radius автоматически добавляется в правило CSS.

    Отсутствует стандартное свойство добавлено Отсутствует

    Отсутствует стандартное свойство добавлено

  17. Наведите указатель на свойство border-radius , чтобы отобразить подсказку матрицы браузера. Подсказка матрицы браузера показывает доступность свойства в каждом браузере.

    Подсказка по матрице браузера.

    Подсказка матрицы браузера

  18. Обратите внимание, что значение свойства border-radius по-прежнему подчеркивается. Наведите указатель на значение, чтобы увидеть предупреждающее сообщение.

    Предупреждение о значении свойства border-radius

    Предупреждение о значении свойства border-radius

  19. Удалите единицу значения свойства border-radius , как показано в подсказке.

  20. Так как border-radius является стандартным свойством для определения скругления углов границы, можно удалить свойство и значение -webkit-border-radius из правила CSS.

  21. Поместите курсор в свойство переноса по словам и обратите внимание, что смарт-тег также отображается ниже.

  22. Откройте меню и щелкните Добавить отсутствующие сведения о поставщике.

    Добавление предложения по отсутствующим сведениям о поставщике

    Добавление предложения по отсутствующим поставщикам

  23. Свойство -ms-word-wrap автоматически добавляется в правило CSS.

    Добавлено свойство конкретного поставщика Добавлено

    Добавлено свойство конкретного поставщика

Задача 4. Обновление HTML-кода из браузера

В этой задаче вы будете использовать режим конструктора ссылки на браузер для изменения объекта DOM из браузера и передачи изменений в исходный HTML-файл в Visual Studio.

  1. В Google Chrome нажмите клавиши CTRL + ALT + D , чтобы включить режим конструктора.

  2. Наведите указатель мыши на метку Lorem Ipsum dolor sit amet и щелкните.

    Редактирование вопроса

    Изменение вопроса

  3. Должен появиться курсор. Замените исходный текст на Как он выглядит при написании более длинного вопроса?, а затем нажмите клавишу ESC , чтобы выйти из режима конструктора.

    Вопрос изменен вопрос

    Измененный вопрос

  4. Вернитесь в Visual Studio и откройте файл Index.cshtml, если он еще не открыт. Обратите внимание, что внутренний <текст элемента p> обновлен.

    Обновленный вопрос на HTML-странице

    Обновленный вопрос на HTML-странице

Задача 5. Просмотр предупреждений, связанных с SEO

Оптимизация поисковой системы (SEO) — это процесс повышения ранга веб-сайта в списке результатов поисковой системы. Чем выше ранги сайта и более последовательно он указан, тем больше посетителей сайт будет получать от этой поисковой системы. Web Essentials включает в себя аналитическое средство, которое изучает HTML, сообщает об обнаруженных проблемах и предоставляет помощь в их устранении.

  1. Перейдите в меню Вид и выберите пункт Список ошибок , чтобы открыть окно Список ошибок .

    Список ошибок в меню

    Список ошибок в меню "Вид"

  2. Обратите внимание, что есть предупреждение SEO, уведомляющее о том, что <метатег> для описания страницы отсутствует. Дважды щелкните запись предупреждения SEO, чтобы исправить ее.

    Окно

    Окно "Список ошибок"

  3. В диалоговом окне Web Essentials нажмите кнопку Да, чтобы вставить метатэг> описания<.

    Диалоговое окно

    Диалоговое окно "Основные веб-компоненты"

  4. Откроется редактор для _Layout.cshtml , и <метатег> автоматически добавляется в раздел head HTML-файла.

    Метатэг автоматически добавляется в _Layout странице

    Метатэг автоматически добавляется на страницу _Layout

  5. Измените значение атрибута содержимого на GeekQuiz и сохраните файл.

Упражнение 2. Использование фрагментов кода и IntelliSense

В Web Essentials редактор HTML был расширен с помощью дополнительных функций. В этом упражнении вы увидите некоторые новые функции, которые полезны при разработке веб-приложений.

Задача 1. Использование IntelliSense в документах HTML

Первая новая функция, которую вы увидите в этой задаче, называется Dynamic IntelliSense. Динамическая технология IntelliSense считывает другие теги и атрибуты, чтобы определить возможные идентификаторы, которые вы будете использовать.

В этой задаче вы создадите новый элемент формы HTML, содержащий метку и поле ввода. Затем вы добавите атрибут for в метку, чтобы привязать его к входным данным, и вы увидите предложения IntelliSense на основе идентификаторов входных данных в область.

  1. Откройте Visual Studio Express 2013 для Интернета и решение Begin.sln, расположенное в папке Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin. Кроме того, можно продолжить работу с решением, полученным в предыдущем упражнении.

  2. В Обозреватель решений откройте файл Index.cshtml, расположенный в папке Views | Home.

  3. Добавьте следующую форму в <элемент section> .

    (Фрагмент кода — VisualStudio2013WebTooling - Ex2 - Форма)

    <form>
     <input type="text" id="name" />
</form>

  4. Входному тегу должна предшествовать метка с описанием поля. Добавьте следующую метку перед входным тегом.

    <form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>

  5. Атрибут <for метки> указывает, к какому элементу формы привязана метка. Значение атрибута должно быть равно идентификатору связанного элемента. Добавьте атрибут for в <элемент label> . Как показано на следующем рисунке, значение name отображается в поле IntelliSense на основе идентификатора элементов в той же область (включающая <форма>).

    Отображение идентификатора в IntelliSense

    Отображение идентификатора в IntelliSense

  6. Удалите недавно добавленный <элемент формы> и его содержимое.

Задача 2. Использование фрагментов кода HTML

HTML5 представил более 25 новых семантических тегов. В Visual Studio уже есть поддержка IntelliSense для этих тегов, но Visual Studio 2013 позволяет быстрее и проще писать разметку, добавляя новые фрагменты кода. Хотя эти теги не являются сложными, они имеют несколько небольших тонкостей, таких как добавление правильных резервных кодека для тега audio . В этой задаче вы увидите фрагменты кода HTML для звукового тега.

  1. В файле Index.cshtml введите <aud внутри <элемента section> , как показано на следующем рисунке.

    Вставка звукового элемента

    Вставка звукового элемента

  2. Дважды нажмите клавишу TAB и обратите внимание, как следующий код добавляется на страницу, а курсор помещается в атрибут src первого источника.

    <audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>

    Примечание

    При двойном нажатии клавиши TAB вставляется фрагмент кода. В фрагменте аудио показано стандартное использование звукового тега с двумя исходными файлами для улучшенной поддержки.

  3. Удалите вторую строку и обновите источник первой строки, указав следующую ссылку на ASP.NET and Web Tools установки: https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Полученный код показан ниже.

    <audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>

    Примечание

    В качестве примера используется исходный файл. При желании можно использовать другой источник.

  4. Нажмите клавиши CTRL + S , чтобы сохранить файл.

  5. Нажмите клавиши CTRL + F5 , чтобы запустить приложение.

  6. Обратите внимание, что в приложение добавлен аудиопроигрыватель.

    Аудиопроигрыватель в Интернете Обозреватель

    Аудиопроигрыватель в интернет-Обозреватель

    Аудиопроигрыватель в Google Chrome

    Аудиопроигрыватель в Google Chrome

  7. Не закрывайте браузеры. Вы будете использовать их в следующей задаче.

Задача 3. Использование IntelliSense в документах JavaScript

В Web Essentials 2013 таблицы стилей и HTML-страницы создают список идентификаторов и имен классов. В этой задаче вы узнаете, как эти списки улучшают поддержку JavaScript IntelliSense в Web Essentials 2013.

  1. В файле Index.cshtml добавьте следующий код, чтобы определить тег скрипта для кода JavaScript.

    ...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}

  2. Добавьте следующий код в тег скрипта , чтобы определить готовую функцию обратного вызова.

    (Фрагмент кода — VisualStudio2013WebTooling - Ex2 - ReadyFunction)

    (function () {
    $(document).ready(function () {

    });
}());

  3. Поместите курсор в тег скрипта и нажмите клавиши CTRL + , чтобы открыть меню предложений.

  4. Щелкните Извлечь в файл.

    Предложение по извлечению из JavaScript в файл

    Предложение по извлечению из JavaScript в файл

  5. В окне Сохранить как выберите папку Скрипты , присвойте файлу имяinit.js и нажмите кнопку Сохранить.

    Окно

    Окно "Сохранить как"

    Примечание

    Создается файлinit.js , а содержимое скрипта перемещается в файл .

    Init.js файла, созданного с содержимымInit.js

    Init.js файла, созданного с включенным содержимым

  6. Откройте файл Index.cshtml и проверка, что тег скрипта заменен ссылкой на файлinit.js.

    справочник по htmlInit.js

    Справочник по htmlInit.js

  7. Перейдите к Обозреватель решений и обратите внимание, что файлinit.js был автоматически включен в решение.

    Init.js файл, включенный вInit.js решения

    Init.js файл, включенный в решение

  8. Вернитесь к файлуinit.js , чтобы обновить готовый обратный вызов функции.

  9. В определении обратного вызова функции, которое передается в ready, добавьте следующий код, чтобы получить все элементы по определенному атрибуту класса.

    (function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());

  10. Нажмите клавиши CTRL + ПРОБЕЛ между кавычками внутри вызова функции getElementsByClassName .

    Отображение IntelliSense для функции getElementsByClassName

    Отображение IntelliSense для функции getElementsByClassName

    Примечание

    Обратите внимание, что IntelliSense отображает классы, определенные в таблицах стилей проекта.

  11. Замените созданную строку приведенным ниже кодом.

    (function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

  12. Поместите курсор после au внутри кавычек в функции getElementsByTagName и нажмите клавиши CTRL + ПРОБЕЛ.

    Отображение IntelliSense для метода getElementByTagName

    Отображение IntelliSense для метода getElementsByTagName

  13. Выберите "audio" в списке и нажмите клавишу ВВОД. Результат показан на примере ниже.

    Получение звуковых элементов

    Получение звуковых элементов

  14. В Обозреватель решений щелкните правой кнопкой мыши файл init.js в папке Скрипты и выберите в меню Web Essentialsпункт Минифицировать файлы JavaScript.

    Minify JavaScript file(s)

    Минифицировать файлы JavaScript

  15. При появлении запроса на включение автоматического минификации при изменении исходного файла нажмите кнопку Да.

    Включение предупреждения автоматического минификации

    Включение предупреждения об автоматическом минификации

    Примечание

    Создается init.min.js и добавляется как зависимость файлаinit.js .

    Init.min.js файл создан

    файлInit.min.js создан

  16. Откройте файлinit.min.js и обратите внимание, что файл миниифицирован.

    содержимое файлаInit.min.js

    содержимое файлаInit.min.js

  17. В файлеinit.js добавьте следующий код под вызовом функции getElementsByTagName , чтобы воспроизвести все звуковые элементы.

    (Фрагмент кода — VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

    var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}

  18. Нажмите клавиши CTRL + S , чтобы сохранить файл. Так как минифицированный файл уже открыт, появится диалоговое окно с сообщением о том, что файл был изменен за пределами исходного редактора. Нажмите кнопку Да.

    Предупреждение Microsoft Visual Studio Предупреждение

    Предупреждение Microsoft Visual Studio

  19. Вернитесь к файлуinit.min.js , чтобы убедиться, что файл был обновлен с помощью нового кода.

    Init.min.js файл обновлен

    Init.min.js файл обновлен

  20. Нажмите кнопку Обновить ссылку браузера .

  21. После обновления обоих браузеров аудиоплееры, которые вы видели в предыдущей задаче, начнут воспроизводиться автоматически.

    Аудиопроигрыватель, включенный в представление

    Аудиопроигрыватель, включенный в представление

Сводка

Завершив это практическое занятие, вы узнали, как:

  • Использование новых функций редактора HTML, включенных в Web Essentials, таких как многофункциональные фрагменты кода HTML5 и кодирование Zen
  • Использование новых функций редактора CSS, включенных в Web Essentials, таких как средство выбора цвета и подсказка матрицы браузера
  • Использование новых функций редактора JavaScript, включенных в Web Essentials, таких как Извлечение в файл и IntelliSense, для всех элементов HTML
  • Обмен данными между браузером и Visual Studio с помощью ссылки на браузер