Пошаговое руководство. Базовое редактирование HTML в Visual Web Developer

Обновлен: Ноябрь 2007

Средство веб-разработки Microsoft Visual Web Developer предоставляет множество возможностей для редактирования HTML, которые позволяют работать в режиме WYSIWYG при выполнении визуализации веб-страниц, а также работать непосредственно с разметкой HTML, обеспечивая более точный контроль. Данное пошаговое руководство содержит описание возможностей редактирования HTML в Visual Web Developer.

В данном пошаговом руководстве представлены следующие задачи:

• Создание и редактирование HTML в представлении конструирования.

• Создание и редактирование HTML в представлении исходного кода.

• Использование представления с разделением.

• Использование средств навигации для быстрого перемещения по HTML-тегам.

Обязательные компоненты

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

• Основные сведения о Visual Web Developer.

Общие сведения о создании веб-страниц в Visual Web Developer см. в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer.

В данном пошаговом руководстве используется веб-узел и отдельная веб-страница ASP.NET, похожая на ту, которая была создана в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer. Если вы выполнили это пошаговое руководство, вы может использовать этот веб-узел и страницу.

Создание веб-узла и страницы

Если веб-узел уже создан в Visual Web Developer (например, посредством Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), можно использовать этот веб-узел и перейти к следующему разделу. В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

Создание веб-узла на базе файловой системы

1. Откройте Visual Web Developer.

2. В меню Файл выберите пункт Создать веб-узел.

   Откроется диалоговое окно Создать веб-узел.

3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

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

   Например, введите имя папки C:\WebSites.

5. В списке Язык выберите язык программирования, с которым вы предпочитаете работать.

6. Нажмите кнопку ОК.

   Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Работа в представлении конструирования

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

В представлении конструирования страница выглядит почти так же, как и в обозревателе, но существуют некоторые отличия. Первое отличие заключается в том, что текст и элементы в представлении конструирования можно изменять. Второе отличие заключается в том, что для облегчения изменения страниц в представлении конструирования отображаются некоторые элементы и элементы управления, невидимые в обозревателе. Кроме того, некоторые элементы, например таблицы HTML, имеют в представлении конструирования особую отрисовку, позволяющую освободить место для редактора. В результате представление конструирования облегчает визуализацию страницы, но не является точным представлением того, как страница будет выглядеть в обозревателе.

Добавление и форматирование статического текста HTML в представлении конструирования

1. Если представление конструирования не включено, щелкните элемент Конструктор, расположенный в нижнем левом углу окна.

2. В верхней части страницы введите Веб-страница ASP.NET.

3. Выделите текст, который необходимо отформатировать, затем на панели инструментов Применение стиля щелкните Заголовок 1.

4. Расположите указатель вставки под надписью Веб-страница ASP.NET, а затем введите Данная страница создана на платформе ASP.NET.

5. Выделите текст и затем в меню Формат выберите пункт Создать стиль.

   Появится диалоговое окно Создание стиля.

6. Установите флажок Применить новый стиль к выделенному фрагменту.

7. Выберите шрифт из раскрывающегося списка font-family и нажмите кнопку Применить.

   Семейство шрифтов будет применено к выбранному тексту.

8. В области Категория щелкните Блок и затем выберите (значение) из раскрывающегося списка line-height. Введите значение высоты строки.

9. Выберите (значение) из раскрывающегося списка letter-spacing. Введите значение межбуквенного интервала. Нажмите кнопку Применить, чтобы увидеть, как выглядит выбранный текст после применения значений.

10. Нажмите кнопку ОК.

Просмотр сведений о тегах

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

Просмотр тегов рабочей области конструирования HTML в представлении конструирования

• В меню Вид выберите пункт Визуальные средства и затем Невизуальные элементы управления.

  Конструктор отображает символы абзацев, разрывы строк и другие теги, которые не относятся к отрисовке текста.

Добавление элементов управления и элементов

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

Добавление элементов управления и таблицы

1. Расположите указатель вставки справа от метки конца абзаца для надписи Данная страница создана на платформе ASP.NET. и нажмите клавишу ВВОД.

2. Из группы Стандартные в панели элементов перетащите на страницу элемент управления TextBox.

   Примечание.
   Элемент управления также можно выбрать с помощью двойного щелчка.

3. Перетащите на страницу элемент управления Button.

   Элементы управления TextBox и Button являются серверными веб-элементами управления ASP.NET, а не элементами HTML.

4. В меню Таблица выберите команду Вставить таблицу.

   Откроется диалоговое окно Вставить таблицу.

5. Нажмите кнопку OК.

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

Создание гиперссылок

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

Создание гиперссылки

1. В тексте Данная страница создана на платформе ASP.NET. выберите фрагмент ASP.NET, выделив его.

2. В меню Формат выберите команду Преобразовать в гиперссылку.

   Откроется диалоговое окно Гиперссылка.

3. В поле URL-адрес введите https://www.asp.net.

4. Нажмите кнопку OК.

Установка значений свойств в окне "Свойства"

Для изменения внешнего вида и режима работы элементов на странице можно задать значения в окне "Свойства".

Установка свойств при помощи окна "Свойства"

1. Щелкните элемент управления Button, добавленный ранее в подразделе "Добавление элементов управления и элементов" данного пошагового руководства.

2. В окне "Свойства" для свойства Text установите значение Click Here, для свойства ForeColor установите другой цвет, а для свойства Bold установите значение true.

3. Поместите указатель вставки в гиперссылку ASP.NET, созданную в предыдущем подразделе.

   Обратите внимание на то, что в окне "Свойства" свойству HRef для элемента a присваивается URL-адрес, указанный для гиперссылки.

Проверка страницы

Результаты внесенных изменений можно просмотреть, открыв страницу в обозревателе.

Внешнее открытие страницы в обозревателе

• Щелкните страницу правой кнопкой мыши и выберите команду Просмотреть в обозревателе.

  • При отображении запроса на сохранение изменений нажмите кнопку Да.

  Visual Web Developer запускает веб-сервер Visual Web Developer — локальный веб-сервер, который можно использовать для проверки страниц без применения служб IIS.

Изменение в представлении по умолчанию

По умолчанию Visual Web Developer открывает новые страницы в представлении исходного кода.

Изменение представления страниц по умолчанию в представлении конструирования

1. В меню Сервис выберите Параметры.

2. В диалоговом окне "Параметры" в категории "Конструктор HTML" выберите Общие и затем в области Начинать создание страниц установите флажок в конструкторе.

Примечание.

Страницы можно запускать несколькими способами. Если нажать сочетание клавиш CTRL+F5, Visual Web Developer выполняет операцию запуска, заданную на странице свойств для параметра Параметры запуска. По умолчанию для сочетания клавиш CTRL+F5 используется запуск текущей страницы, то есть страницы, которая в данный момент активна в представлении исходного кода или конструирования. Страницы можно также запускать в отладчике. Дополнительные сведения см. в разделе Пошаговое руководство. Отладка веб-страниц в Visual Web Developer.

Работа в представлении исходного кода

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

Добавление элементов в представлении исходного кода

1. Переключитесь в представление исходного кода, щелкнув элемент Исходный код, расположенный в нижней левой части окна.

   Добавленные элементы управления создаются как элементы <asp:>. Например, элемент управления Button является элементом <asp:button>. Заданные значения свойств сохраняются в виде параметров атрибутов в теге <asp:button>.

2. Из группы HTML в панели элементов (не группы Стандартные) Перетащите элемент управления Table на страницу и поместите его непосредственно над закрывающим тегом </form>.

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

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

1. Расположите точку вставки над закрывающим тегом </form>, а затем введите левую угловую скобку (<).

   Обратите внимание на то, что редактор предлагает список тегов, допустимых в данном контексте.

2. Выделите a и нажмите пробел.

   Редактор отображает список атрибутов, допустимых для тега привязки.

3. В списке щелкните href, а затем введите знак равенства и знак двойных кавычек (=").

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

4. В списке файлов дважды щелкните Default.aspx, нажмите пробел, а затем введите правую угловую скобку (>), чтобы закрыть тег.

   Редактор вставляет закрывающий тег </a>.

5. Завершите элемент привязки, чтобы он ссылался на страницу Default.aspx с помощью текста ссылки Home и выглядел следующим образом:

   <a href="Default.aspx">Home</a>
   

6. Расположите точку вставки в теге a.

   Обратите внимание, что в окне "Свойства" отображаются атрибуты для тега.

7. В окне "Свойства" нажмите кнопку с многоточием (…) для свойства HRef.

   Отображается диалоговое окно Выбор элемента проекта.

   Теперь можно выбрать страницу на текущем веб-узле в качестве целевой. Если другие страницы на веб-узле отсутствуют, закройте диалоговое окно Выбор элемента проекта и введите в поле Href окна Свойства какой-либо URL-адрес.

8. Поместите точку вставки непосредственно над закрывающим тегом </form>, а затем введите <недействительный>.

   В редакторе этот тег подчеркивается волнистой линией, указывающей на то, что он не распознан как HTML-тег.

9. Удалите тег, созданный в предыдущем шаге.

Просмотр форматирования HTML

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

Просмотр форматирования HTML

1. Повторно выполните форматирование атрибутов элемента управления Button, выровняв эти атрибуты таким образом, чтобы декларативный синтаксис имел следующий вид:

   <asp:Button
       id="Button1"    runat="server"    Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
   

   Обратите внимание на то, что, если после отступа первого атрибута в теге нажата клавиша ВВОД, отступ применяется и к последующим строкам.

2. Перейдите в представление конструирования.

3. Щелкните правой кнопкой мыши новый элемент управления Button и выберите пункт Копировать.

4. Расположите точку вставки под новым элементом управления Button, щелкните правой кнопкой мыши и выберите пункт Вставить.

   При этом создается кнопка, для которой ID имеет значение Button2.

5. Из группы Стандартные в панели элементов перетащите на веб-страницу третий элемент управления Button, для создания <Button3>.

6. Перейдите в представление Исходный код.

   Обратите внимание на то, что <Button2> форматируется точно так же, как был отформатирован элемент <Button1>. С другой стороны для <Button3> используется форматирование по умолчанию для элементов asp:button.

   Примечание.
   Дополнительные сведения о настройке форматирования отдельных элементов см. в разделе Пошаговое руководство. Расширенное редактирование HTML в Visual Web Developer.

7. Измените документ таким образом, чтобы <Button1> и <Button2> находились на одной строке и между ними не было пробела:

   <asp:Button ID="Button1" runat="server" Font-Bold="True" 
   ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
   runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
   

   Для элементов может использоваться перенос, но за концом <Button1> (то есть />) должно сразу же следовать начало <Button2> (то есть <asp:Button ID=).

8. Перейдите в представление конструирования.

   Обратите внимание на то, что <Button1> и <Button2> находятся рядом друг с другом и не разделены пробелом.

9. Перейдите в режим исходного кода.

10. В меню Редактирование выберите пункт Форматировать документ.

    Выполняется повторное форматирование документа, но <Button1> и <Button2> остаются на той же строке. Если бы редактор намеревался разделить кнопки, он бы вставил между ними пробел. Это значит, что редактор не изменяет созданное пользователем форматирование.

Работа в представлении с разделением

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

Просмотр страницы в представлении с разделением

• Перейдите к представлению Разделить, щелкнув элемент Разделить, расположенный в нижней левой части окна.

Переходы между элементами

Из-за увеличения размеров и сложности страниц удобно иметь возможность быстрого поиска тегов и уменьшения перегруженности страницы. Visual Web Developer содержит следующие средства, которые позволяют выполнить эти задачи при работе в представлении исходного кода:

• "Структура документа" — полное представление документа.

• "Навигатор по тегам" — сведения о том, какой тег выбран в данный момент времени и где он находится в иерархии страниц.

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

Добавление элементов

1. Перейдите в режим Конструктор.

2. Перетащите элемент управления Table из группы HTML в панели элементов в ячейку таблицы, созданной в подразделе "Работа в представлении исходного кода" данного пошагового руководства.

3. Перетащите элемент управления Button из группы Стандартные в панели элементов в среднюю ячейку вложенной таблицы.

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

Переходы с использованием окна "Структура документа"

1. Перейдите в представление Исходный код.

2. В меню Вид выберите Структура документа.

3. В окне "Структура документа" щелкните Button4.

   В редакторе выбирается элемент управления <Button4>,добавленный при выполнении предыдущей процедуры.

Навигатор по тегам предоставляет сведения о том, какой тег выбран в данный момент времени и где он находится в иерархии страниц.

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

1. Расположите точку вставки в теге <asp:button>.

   Обратите внимание на навигатор по тегам в нижней части окна, отображающий тег <asp:button> и его родительские теги. Навигатор по тегам содержит идентификатор элемента (если есть), по которому можно определить, какой элемент отображается в данный момент. Навигатор по тегам также отображает назначенную каскадную таблицу стилей (если есть), которая была задана с помощью атрибута Class.

2. В навигаторе тегов щелкните тег <table>, ближайший к тегу <asp:button#Button4>.

   Навигатор по тегам перемещается во внутренний элемент <table> и выбирает его.

3. В навигаторе по тегам щелкните тег <td>, расположенный слева от выбранного тега <table>.

   Выбирается вся ячейка, содержащая вложенную таблицу.

   Примечание.
   Можно щелкнуть для выбора тега или его содержимого с помощью раскрывающегося списка в теге навигатора по тегам. По умолчанию при щелчке тега в навигаторе по тегам выбирается этот тег и его содержимое.

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

Перемещение или копирование элементов с помощью навигатора по тегам

1. С помощью навигатора по тегам выберите тег <tr>, содержащий <Button4>.

2. Нажмите сочетание клавиш CTRL+C, чтобы скопировать тег.

3. Воспользуйтесь навигатором по тегам для перемещения в охватывающую таблицу.

4. В представлении исходного кода расположите указатель вставки между тегом <table> и первым тегом <tr>.

5. Нажмите сочетание клавиш CTRL+V для вставки скопированной строки в таблицу.

6. Перейдите в режим конструирования.

   Обратите внимание на то, что создана новая строка, включая элемент управления Button.

Форматирование текста

• Панель инструментов Форматирование применяет встроенные стили для большинства параметров. Форматирование полужирным шрифтом или курсивом применяется с использованием тегов b и i. форматирование абзаца применяется с помощью бок-тега, например p (без форматирования), pre (с форматированием) и т. д. Выравнивание абзацев применяется с помощью встроенных стилей, что обеспечивает соответствие стандартам XHTML 1.1.

• Конструктор также позволяет создать блок style и ссылку на каскадную таблицу стилей. Дополнительные сведения см. в разделе Пошаговое руководство. Создание и изменение CSS-файла.

• По умолчанию редактор создает разметку, совместимую со стандартом XHTML 1.1, и преобразует имена всех HTML-тегов в нижний регистр, даже если они были введены в верхнем регистре. Кроме того, редактор заключает значения атрибутов (свойств) в кавычки. Дополнительные сведения см. в разделе Пошаговое руководство. Расширенное редактирование HTML в Visual Web Developer.

Изменение проверки разметки по умолчанию

1. В представлении исходного кода щелкните страницу правой кнопкой мыши, а затем выберите пункт Форматирование и проверка.

2. В диалоговом окне Параметры разверните узлы Текстовый редактор и HTML, затем щелкните Проверка.

3. В списке Объект проверки введите тип проверки.

Следующие действия

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

• Изучите дополнительные возможности редактора HTML, включая настраиваемые параметры форматирования, структуризацию и проверку HTML. Дополнительные сведения см. в разделе Пошаговое руководство. Расширенное редактирование HTML в Visual Web Developer.

• Изучите работу со стилями из каскадной таблицы стилей. Дополнительные сведения см. в разделе Пошаговое руководство. Создание и изменение CSS-файла.

См. также

Задачи

Пошаговое руководство. Расширенное редактирование HTML в Visual Web Developer

Основные понятия

Представление конструктора

Ссылки

Представление исходного кода