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

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

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

Примечание.
Вводную информацию о редактировании HTML см. в разделе Пошаговое руководство. Базовое редактирование HTML в Visual Web Developer.

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

• указание параметров, определяющих, как редактор HTML форматирует элементы на странице;

• выбор параметров таким образом, чтобы создаваемый редактор HTML был совместим с определенными обозревателями;

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

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

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

• Основные сведения о работе в Visual Web Developer.

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

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

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

Создание файлового веб-узла

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

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

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

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

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

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

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

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

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

   Примечание.
   По умолчанию Visual Web Developer создает веб-страницы ASP.NET, используя модель выделенного кода. Дополнительные сведения см. в разделе Модель кода веб-страниц ASP.NET. В данном руководстве страницы с выделенным кодом не используются.

Разметка форматирования

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

• Используются ли в именах тегов и атрибутов прописные или строчные буквы. Этот параметр можно настроить отдельно для тегов HTML и серверных веб-элементов управления ASP.NET.

• Происходит ли при добавлении атрибутов их заключение в кавычки.

• Создаются ли закрывающие элементы автоматически редактором. Доступные параметры: создание самозакрывающихся тегов (например, <br />), создание открывающих и закрывающих тегов (<p></p>) и автоматическое создание закрывающих тегов.

• Как отделяются отступами дочерние элементы тега.

• Где разрывы строк располагаются вокруг тегов.

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

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

Примечание.

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

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

Добавление элементов HTML, имеющих параметры форматирования по умолчанию

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

2. В меню Таблица выберите пункт Вставить таблицу и нажмите кнопку ОК.

   Не изменяйте параметры по умолчанию в диалоговом окне.

   Конструктор создаст таблицу HTML с двумя столбцами и двумя строками.

3. Щелкните пустую область страницы под таблицей.

4. Нажмите клавишу ВВОД несколько раз для создания пустых строк и из группы HTML в панели элементов перетащите элемент управления Image на страницу.

5. Перейдите в представление исходного кода.

   Как можно заметить, элементы <table> и <img> были вставлены на страницу.

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

Теперь можно изменить параметры форматирования.

Изменение параметров форматирования и проверки

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

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

3. В списке Цель выберите пункт XHTML 1.0 Transitional.

4. Выберите пункт Формат.

   Некоторые параметры можно определить отдельно для тегов сервера (серверные элементы управления ASP.NET) и клиентских тегов (элементы HTML), нажав кнопку Параметры для тегов.

5. В списке Клиентский тег выберите пункт Прописные буквы.

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

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

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

Теперь можно добавить новые элементы.

Добавление элементов HTML, используя новые параметры форматирования

1. В представлении исходного кода прокрутите страницу вниз до конца.

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

   В этот раз теги в элементе <TABLE> написаны прописными буквами.

3. Расположите точку вставки под только что созданной таблицей и введите правую угловую скобку (<), чтобы начать новый тег.

   Появится список, в котором все имена тегов имеют прописные буквы, согласно установленному параметру форматирования.

4. В списке дважды щелкните IMG и затем нажмите клавишу ПРОБЕЛ.

   Появится список атрибутов для тега <img>. Атрибуты имеют нижний регистр, поскольку при задании параметров форматирования для параметра Клиентские атрибуты было оставлено значение по умолчанию Строчные буквы.

5. В "Свойствах" задайте для параметра Src значение graphic.gif, которое является именем созданного графического файла, и убедитесь, что теперь тег выглядит следующим образом:

   <IMG src=graphic.gif 
   

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

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

6. Введите косую черту (/) и правую угловую скобку (>), чтобы закрыть тег <img>.

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

Применение форматирования к существующим элементам

1. В представлении исходного кода выделите первую созданную таблицу.

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

   Имена тегов изменят регистр на прописной.

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

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

Задание параметров форматирования тегов

Параметры форматирования, с которыми производилась работа вплоть до этого момента, влияют на все элементы страницы. Если нужно, то можно задать параметры форматирования также и для отдельных тегов. Это полезно, если часто используются некоторые теги и хотелось бы использовать форматирование не по умолчанию для этих тегов. Форматирование для каждого тега позволяет задать следующее:

• как закрываются теги, а именно: без закрытия, самозакрывающиеся или отдельным закрывающим тегом;

• как разрывы строк используются вокруг и внутри тегов;

• как отделяются отступами дочерние элементы тега.

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

В данной части пошагового руководства будет задан ряд параметров форматирования для тегов и будет показано, как редактор работает с ними. Вплоть до этого момента работа велась с элементами HTML, такими как элемент <table>. Теперь работа будет осуществляться с некоторыми серверными элементами управления ASP.NET, что позволит увидеть, что параметры форматирования одинаково применяются к элементам управления и элементам HTML.

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

• элементы HTML, которые не имеют содержимого, такие как br и input;

• элементы HTML, которые имеют содержимое, такие как table и span;

• серверные элементы (asp:), которые не могут иметь содержимое, такие как asp:image;

• серверные элементы, которые могут иметь содержимое, такие как asp:textbox.

Примечание о безопасности.
Элемент управления TextBox допускает пользовательский ввод, что является потенциальной угрозой безопасности. По умолчанию веб-страницы ASP.NET проверяют введенные пользователем данные на наличие сценариев и элементов HTML. Дополнительные сведения см. в разделе Общие сведения об использовании сценариев.

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

Задание правил форматирования тегов для таблицы HTML

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

   Появится диалоговое окно Параметры, содержащее параметры форматирования, заданные в предыдущем разделе.

2. В списке Клиентский тег выберите пункт Строчные буквы, чтобы сбросить форматирование для клиентских тегов.

3. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Параметры.

4. Из группы HTML панели элементов перетащите на страницу элемент управления Table.

   Редактор создаст элемент <table>, имеющий две строки (элементы <tr>) и по две ячейки (элементы <td>) в каждой строке. Каждый тег расположен на отдельной строке:

   <table>
       <tr>
           <td>
          </td>
       </tr>
   

5. Щелкните правой кнопкой мыши в пустой части окна, затем выберите пункт Форматирование и проверка.

6. Нажмите кнопку Параметры для тегов.

7. Разверните узел Параметры по умолчанию.

   Появится список типов тегов, начинающийся с пункта Клиентский тег не поддерживает содержимое. Выбрав элемент в списке, можно задавать различные параметры для клиентских и серверных элементов, для элементов, имеющих содержимое (таких как элемент table) и для элементов, не имеющих содержимого (таких как элемент img).

8. Выберите Клиентский тег поддерживает содержимое.

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

9. Разверните узел Клиентские HTML-теги.

10. Выберите td.

    Далее будут заданы параметры, определяющие форматирование тегов td.

11. В списке Разрывы строк выберите пункт Нет.

12. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Параметры для тегов, а затем еще раз нажмите кнопку ОК, чтобы закрыть диалоговое окно Параметры.

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

    Документ будет повторно отформатирован. Теги <td> в добавленной таблице теперь размещаются на одной строке:

    <table>
        <tr>
            <td></td><td></td><td></td>
    

Можно работать с параметрами тегов для серверных элементов управления ASP.NET.

Задание параметров форматирования для серверного элемента управления ASP.NET

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

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

3. В диалоговом окне Задачи ListBox выберите пункт Правка элементов.

   Откроется диалоговое окно Редактор коллекции ListItem.

4. Два раза нажмите кнопку Добавить для добавления двух элементов.

5. В меню Члены выберите первый элемент ListItem, а затем в меню Свойства ListItem задайте для пункта Текст значение Item 1.

6. В меню Члены выберите второй элемент ListItem, а затем в меню Свойства ListItem задайте для пункта Текст значение Item 2.

7. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Редактор коллекции ListItem.

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

   Обратите внимание, что элемент управления был отформатирован следующим образом:

   <asp:Listbox ID="ListBox1" runat="server">
      <asp:ListItem>Item 1</asp:Listitem>
      <asp:ListItem>Item 2</asp:Listitem>
   </asp:Listbox>
   

9. Щелкните правой кнопкой мыши в пустой части окна, затем выберите пункт Форматирование и проверка.

10. Нажмите кнопку Параметры для тегов.

11. В диалоговом окне Параметры для тегов выберите Элементы управления ASP.NET, затем нажмите Создать тег.

12. В поле Имя тега введите asp:listitem.

    Не используйте правые и левые угловые скобки (< и >) в имени тега.

    Параметры задаются для элемента asp:ListItem, который используется внутри элемента управления ListBox. Параметры не задаются для элемента asp:ListBox, потому что желательно контролировать, как форматируется содержимое (дочернее) элемента asp:ListBox.

13. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Создание тега.

14. В списке Разрывы строк выберите пункт Нет.

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

15. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Параметры для тегов, а затем еще раз нажмите кнопку ОК, чтобы закрыть диалоговое окно Параметры. Теперь можно увидеть эффект новых параметров форматирования.

Добавление серверного элемента управления ASP.NET, используя новые параметры форматирования

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

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

3. В меню Задачи ListBox выберите пункт Правка элементов.

4. Для элемента управления ListBox создайте два элемента, как в предыдущей процедуре.

5. Перейдите в представление исходного кода.

   Обратите внимание, что все элементы <asp:ListItem> расположены на одной строке. Элемент </asp:ListBox> появляется на следующей строке, поскольку перенос тегов установлен на 80-м символе. Это значение можно изменить в диалоговом окне Параметры. Хотя работа велась только с двумя элементами управления и был изменен только один параметр форматирования (разрывы строк), на их примере можно понять, каким образом можно применить параметры к любому элементу, с которым обычно производится работа.

Структурирование элементов

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

Структурирование элементов

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

2. Выберите одну из таблиц, которая была добавлена ранее.

   • Если по тем или иным причинам таблицы отсутствуют, перетащите на страницу таблицу из группы HTML панели элементов.

3. В меню Правка перейдите к пункту Структура и выберите команду Скрыть выделенный фрагмент.

   Тег <table> сворачивается и на границе появляется знак плюса (+).

4. Нажмите знак плюса, чтобы развернуть элемент таблицы. Элементы также можно настроить так, чтобы знаки плюс (+) и минус (-) автоматически появлялись на границе при превышении элементом определенного размера.

Настройка автоматического структурирования элементов

1. Щелкните правой кнопкой мыши страницу, выберите пункт Форматирование и проверка, выберите пункт Формат и нажмите кнопку Параметры для тегов.

2. В диалоговом окне Параметры для тегов разверните узел Клиентские теги HTML и выберите тег table.

3. В разделе Структурирование в редакторе кода в поле Минимальное число строк введите 5.

4. Нажмите кнопку ОК, а затем нажмите кнопку ОК еще раз.

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

Проверка HTML

Редактор HTML может проверить HTML или убедиться, что он соответствует правилам для определенных обозревателей и определенным стандартам, таким как XHTML. Например, редактор может найти теги и атрибуты, которые не поддерживаются обозревателем Netscape Navigator 4.0 или не соответствуют стандарту XHTML. В данной части пошагового руководства будет проводиться работа с разными схемами (типами обозревателей или стандартами) и будут сделаны разные типы мелких ошибок, чтобы увидеть, как редактор отмечает ошибки.

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

1. В представлении исходного кода откройте или перейдите к странице Default.aspx.

2. В панели инструментов редактирования исходного кода HTML в списке выберите пункт Internet Explorer 3.02/Netscape Navigator 3.0.

3. Прокрутите страницу вниз до конца.

4. Внутри тега </form> введите следующий HTML-код:

   <font face=arial>
   <a href=Default.aspx >Default Page </a>
   </font>
   

   По мере ввода тегов технология Microsoft IntelliSense предлагает варианты их завершения.

5. В панели инструментов редактирования исходного кода HTML в списке выберите пункт XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6).

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

6. В теге <font> наведите указатель мыши на слово font.

   Всплывающая подсказка проинформирует, что элемент font считается устаревшим. Действующие стандарты рекомендуют использование стилей CSS для форматирования текста. Например, <span style="font-name:Arial;">.

7. В атрибуте href тега <a> наведите указатель мыши на Default.aspx.

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

8. Заключите Default.aspx в кавычки.

   Значение атрибута href больше не подчеркивается. Если используются относительные ссылки для тегов привязки или других тегов, требующих URL-адреса, проверка определит, доступен ли целевой элемент.

9. На строке под HTML-кодом, с которым производится работа, введите правую угловую скобку (<).

   Появится раскрывающийся список IntelliSense, но в этот раз он не предлагает font, поскольку элемент font недопустим в схемах XHTML.

10. Удалите правую угловую скобку (<).

Задание параметров проверки

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

Задание параметров проверки

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

   Примечание.
   Команда Форматирование и проверка доступна только в представлении исходного кода.

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

   Обратите внимание, что независимо от того, установлен или снят ли флажок Показывать ошибки, вывод ошибок для флажков недоступен. Это происходит из-за того, что текущей схемой является XHTML, которая уже показывает все возможные ошибки проверки.

3. В списке Цель выберите пункт Internet Explorer 6.

4. Убедитесь, что установлен флажок Показывать ошибки, и установите все вложенные флажки флажка Показывать ошибки.

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

6. Выберите HTML-код, который был введен в предыдущей процедуре, и затем в меню Правка выберите пункт Все прописные.

   После короткой паузы имена тегов будут подчеркнуты. При наведении указателя мыши на имя тега, всплывающая подсказка проинформирует, что имя содержит прописные буквы. Обычно Internet Explorer 6 разрешает использовать прописные имена тегов, но эта ошибка проверки видна, потому что были изменены параметры проверки для данной схемы.

Также проверка может обнаружить много других типов ошибок, таких как повторяющиеся идентификаторы элементов управления, пересекающиеся открывающие и закрывающие теги (например, <b><i></b></i>) и так далее. Тем не менее проверка в редакторе не является непреодолимой преградой при создании желаемого HTML-кода. Проверка просто находит разметку, которая не соответствует правилам для соответствующего обозревателя.

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

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

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

См. также

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

XHTML в Visual Web Developer

Проверка разметки в Visual Web Developer

Другие ресурсы

Редактирование текста, кода и разметки

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