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

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

  • Статья

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

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

dyxa0hhe.alert_note(ru-ru,VS.90).gifПримечание.

Средства редактирования таблиц, описанные в данном руководстве, относятся к таблицам HTML, а не к серверному веб-элементу управления Table (элемент управления <asp:Table> и его дочерние элементы управления).

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

  • Добавление таблицы.

  • Выбор таблицы, строк и столбцов.

  • Изменение размера элементов.

  • Добавление и удаление элементов таблицы.

  • Настройка характеристик ячейки, например цвета фона и выравнивания.

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

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

  • Visual Web Developer и платформа .NET Framework.

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

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

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

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

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

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

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

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

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

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

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

Создание разметки страницы с помощью таблицы

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

Добавление таблицы макета страницы

  1. Если в конструкторе еще не открыта страница, добавьте к веб-узлу новую страницу.

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

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

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

  4. Выберите Шаблон.

    Шаблоны таблиц являются предопределенными табличными макетами.

  5. В списке Шаблон выберите Заголовок и сторона.

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

    Таблица из двух колонок добавлена к странице и занимает по высоте и ширине всю страницу. Сверху одна ячейка объединяет столбцы, создавая место для заголовка. Левая ячейка под заголовком предназначена для навигации или указания дополнительных сведений. Правая ячейка под заголовком — это основная область отображения для страницы.

    dyxa0hhe.alert_note(ru-ru,VS.90).gifПримечание.

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

Создание разметки формы с помощью таблицы

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

Добавление таблицы для разметки формы

  1. Из группы HTMLПанели элементов перетащите элемент Таблица в правую (главную) ячейку.

    При перетаскивании таблицы из Панели элементов Visual Web Developer создаст пустую таблицу из трех столбцов и трех строк. Требуется только два столбца, в данном случае надо удалить один из столбцов.

    dyxa0hhe.alert_note(ru-ru,VS.90).gifПримечание.

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

  2. Перемещайте указатель мыши по таблице, пока он не примет форму четырехсторонней стрелки и щелкните, чтобы выбрать таблицу.

  3. Перетащите правую границу, расширяя таблицу так, чтобы она заняла основную часть страницы.

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

  4. Щелкните правой кнопкой мыши одну из ячеек в левом столбце. Из подменю Удалить выберите команду Столбцы для удаления всего столбца выбранной ячейки.

    Столбец будет удален из таблицы.

    dyxa0hhe.alert_note(ru-ru,VS.90).gifПримечание.

    Если команда Удалить не имеет подменю, это означает, что фокус не находится на ячейке. Щелкните правой кнопкой ячейку в левом столбце.

  5. Щелкните нижнюю правую ячейку и нажмите клавишу TAB для добавления четвертой строки к таблице.

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

Установка характеристик таблицы разметки страницы

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

Чтобы задать характеристики таблицы разметки страницы

  1. В таблице разметки страницы щелкните верхнюю ячейку.

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

  2. В окне «Свойства» нажмите кнопку в поле Стиль.

    Появится диалоговое окно Построитель стилей.

  3. На вкладке Текст щелкните в списке По горизонтали элемент По центру.

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

    Установленные параметры определяют стиль ячейки в верхней части макетной таблицы.

  5. Введите в качестве заголовка Веб-узел компании Contoso.

  6. Выделите текст и в панели инструментов Форматирование в списке Формат блока выберите Заголовок 1 <H1>.

  7. Повторите шаги с 1 по 6 для крайней левой ячейки таблицы со следующими изменениями:

    • Изменить текст на Данный веб-узел поддерживается Contoso, Incorporated.

    • Не форматируйте этот текст как «Заголовок 1».

    • На вкладке Текст диалогового окна Построитель стилей в списке По вертикали выберите элемент По нижнему краю.

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

Создание формы

Теперь можно создать форму.

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

  1. В таблице макета формы (это таблица внутри таблицы макета страницы) щелкните верхнюю левую ячейку и введите Имя:.

  2. Щелкните левую ячейку второй строки и введите Год рождения:.

  3. Из группы СтандартныеПанели элементов перетащите элемент управления TextBox в верхнюю правую ячейку.

  4. Присвойте свойству ID элемента управления TextBox значение textName.

  5. Перетащите другой элемент TextBox в правую ячейку второй строки и установите его свойство ID в textBirthYear.

  6. Перетащите элемент управления Button в третью ячейку справа и присвойте его свойству Text значение Отправить.

  7. Перетащите элемент управления Label в нижнюю правую ячейку, установите его свойство ID в labelDisplay и очистите его свойство Text.

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

    Левый столбец будет выбран.

  9. В окне «Свойства» нажмите кнопку в поле Стиль для отображения диалогового окна Построитель стилей.

  10. На вкладке Текст в списке По горизонтали выберите Справа.

    Надписи в форме будут выровнены по правому краю.

  11. Нажмите кнопку ОК, чтобы закрыть построитель стилей.

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

  13. Щелкните правой кнопкой мыши ячейку таблицы макета вне таблицы макета формы и выберите команду Стиль.

    Контекстное меню предоставляет альтернативный способ открыть диалоговое окно Построитель стилей.

  14. На вкладке Текст в списке По вертикали выберите элемент По верхнему краю.

    Макетная таблица формы будет выровнена по верхнему краю ячейки.

Программирование элементов управления формы

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

Чтобы запрограммировать элементы управления формы

  1. Дважды щелкните элемент управления Button на форме.

    Редактор создаст обработчик событий Click.

  2. Добавьте следующий выделенный код.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) _
    Handles Button1.Click 
    Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
End Sub

    protected void Button1_Click(Object sender, EventArgs e)
{
    int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
}

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

Теперь можно проверить страницу.

Тестирование страницы

  1. Нажмите CTRL+F5 для запуска страницы.

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

  2. В поле Имя введите свое имя.

  3. В поле Год рождения введите год своего рождения и нажмите кнопку Отправить.

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

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

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

См. также

Задачи

Пошаговое руководство. Создание и использование главных страниц ASP.NET в Visual Web Developer

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

Навигация по тегам в редакторе HTML в Visual Web Developer

Форматирование элементов в редакторе HTML в Visual Web Developer