Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 25.09.2008 | Доступ: свободный | Студентов: 3223 / 516 | Оценка: 4.32 / 3.98 | Длительность: 18:50:00
ISBN: 978-5-94774-991-5
Специальности: Программист, Разработчик интернет-проектов
Теги:
Лекция 5:
Принципы разработки пользовательского интерфейса интернет-приложения
Как известно, существует три основных способа описания стилей:
- Стили самих HTML-элементов (таких как <p>, <body>, <table> и т. д.).
- Стили HTML-элементов, которым присвоены имена классов.
- Стили элементов, которым присвоены идентификаторы (ID).
Внутри Web-страницы может существовать несколько элементов с одинаковыми именами классов, но идентификаторы всегда являются уникальными.
Создадим новый класс, внутри которого опишем оформление таблицы. Для этого щелкнем правой кнопкой в области окна редактора документа стиля и в контекстном меню выберем пункт Add Style Rule, как показано на рис. 5.11.
В открывшемся окне необходимо установить переключатель Class name, т. к. мы создаем стиль на основе класса, и ввести имя класса, в данном случае mytable ( рис. 5.12).
Затем необходимо нажать кнопку
для включения созданного класса в иерархию стилей и нажать OK.
Внутри созданного стиля класса щелкнуть правой кнопкой мыши и в открывшемся контекстном меню выбрать пункт Build Style ( рис. 5.14). При этом открывается окно Style Builder, с помощью которого можно задавать значения практически любым доступным свойствам данного элемента.
В нашем примере необходимо задать значения для следующих свойств.
В разделе Edges указать параметры для контуров таблицы, как показано на рис. 5.15.
В разделе Other указать значения для размещения ячеек друг относительно друга, как показано на рис. 5.16.
В результате проделанных действий в редактируемый стиль mytable будут добавлены следующие параметры ( рис. 5.17).
Для применения созданного стиля к таблице необходимо в свойстве CssClass таблицы указать имя класса стиля, который необходимо применить. В данном случае это mytable. После того как эти манипуляции будут проделаны, таблица будет выглядеть следующим образом ( рис. 5.18).
Видно, что данный стиль был применен только к рамке таблицы. Для настройки ячеек таблицы необходимо создать отдельный стиль. Вообще, для каждой ячейки таблицы возможно создавать отдельное оформление - для этого необходимо создать отдельный стиль для каждой группы ячеек, имеющих одинаковые параметры оформления, либо произвести настройки оформления непосредственно в самой таблице. На практике чаще всего ячейки таблицы оформляются одинаково за исключением ячеек заголовка таблицы, поэтому необходимо создать стиль, который можно было бы легко применить ко всем ячейкам таблицы примера. Для этого нужно вспомнить, как в языке HTML описываются таблицы. Несмотря на то, что мы используем серверный элемент управления, в конечном счете он будет представлен в виде стандартных тегов языка HTML, в котором для описания строк используется тег <tr>, для описания обычных ячеек в рамках строки - <td>, ячеек строки заголовка - <th>. Исходя из этого, создадим стиль для обычных ячеек таблицы. Для этого необходимо выполнить следующие операции:
- Щелкнуть правой кнопкой внутри окна редактора стилей, в открывшемся контекстном меню выбрать пункт Add Style Rule.
- В окне Add Style Rule выбрать переключатель Class name и ввести имя уже существующего класса mytable, после чего добавить его к иерархии стилей.
- Выбрать переключатель Element и в активизировавшемся выпадающем списке выбрать тэг, отвечающий за описание обычных ячеек - <td>, после чего добавить его к иерархии стилей, как показано на
рис.
5.19. Нажать OK.
В результате этой операции в файл стиля будет добавлен стиль
.mytable TD { }. - Щелкнуть правой кнопкой мыши внутри только что созданного стиля и выбрать пункт Build Style.
- В окне Style Builder установить параметры Borders в разделе Edges аналогично параметрам, установленным ранее для класса mytable.
В результате проделанных действий будет получена таблица, внешний вид которой аналогичен предыдущей. Более того, теперь для каждой вновь создаваемой таблицы можно настроить такое же оформление, просто указав в ее свойстве CssClass значение mytable. При необходимости что-то поменять в оформлении таблицы необходимо изменить соответствующие настройки стилей.
Аналогичным образом, добавив соответствующий стиль для строки заголовка таблицы и установив свойство TableSection=TableHeader первой строки таблицы, получим результат, изображенный на рис. 5.20.
Добавленный стиль выглядит следующим образом:
.mytable THEAD
{
font-weight: bold;
color: white;
font-family: Arial;
background-color: black;
}