Практическая работа №4 Тема: «Создание интерфейса пользователя»

Создаваемые Web-страницы сегодня очень редко разрабатываются "с нуля". Обычно при создании таких страниц используются уже готовые шаблоны, либо таковые создаются в процессе разработки Web-страниц приложения. Это связано с тем, что страницы Web-приложения составляют некое единое целое, объединенное едиными требованиями к оформлению, содержанию, расположению элементов управления и т. д. Таким образом, пользователь попадает в некую среду, которая должна быть максимально удобна для удовлетворения всех потребностей пользователя.

Одним из средств решения подобных задач являются мастер-страницы (master pages). Они реализуют простую модель создания шаблонов форм с возможностью их повторного использования.

Для реализации данного механизма в ASP.NET введены такие типы страниц, как мастер-страницы (master pages) и страницы содержимого (content pages). Мастер-страница представляет собой шаблон страницы, при этом она может содержать любые элементы, допустимые для обычной страницы, а также программный код. Страница содержимого включает в себя допустимые элементы управления и с помощью их определяет содержимое, которым заполняются специальные области мастер страниц. Каждая страница содержимого ссылается на одну мастер-страницу от которой получает элементы и их расположение.

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

Для демонстрации возможностей мастер-страниц рассмотрим пример создания простой мастер-страницы и страницы содержимого. Схематично структура мастер-страницы показана на рис. 6.1.

Рис. 6.1.  Типовая структура мастер-страницы

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

Создадим новый сайт с помощью Visual Studio. Как и всегда, по умолчанию он состоит из пустой страницы Default.aspx. Сейчас необходимо добавить к данному Web-приложению мастер-страницу. Для этого необходимо выполнить команду главного меню Проект/Добавить новый элемент и в открывшемся окне выбрать пункт Главная страница, как показано на рис. 6.2.

Рисунок 6.2.

При этом создается новая мастер-страница с именем Site1.master. Как видно из ее исходного кода, она подобна обычной Web-странице ASP.NET Отличие заключается в том, что Web-страницы начинаются с директивы Page, а мастер-страница - с директивы Master.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile=

"MainMasterPage.master.cs" Inherits="MainMasterPage" %>

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

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

Рисунок 6.3.

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

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

При таком подходе вся страница или ее часть разбивается на столбцы и строки. При этом содержимое страницы располагается и выравнивается на странице более или менее ровно. Кроме того, возможно использование дескрипторов <div> и применение позиционирования CSS, с помощью которого возможно позиционирование их содержимого либо с помощью абсолютных координат, либо располагая его вдоль одной из сторон страницы.

Для добавления таблицы на страницу можно воспользоваться возможностями добавления таблиц, предоставляемых Visual Studio. Для добавления ее на страницу нужно выполнить следующую команду главного меню: Таблица/Вставить таблицу. В открывшемся окне можно указать необходимое количество строк, столбцов, а также некоторые другие параметры таблицы рис. 6.4.

Рисунок 6.4.

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

Рисунок 6.5.

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

3. Для размещения логотипа страницы добавить ячейку в первую строку таблицы (в верхнем колонтитуле). Для этого необходимо щелкнуть правой кнопкой мыши в области верхней строки и в открывшемся контекстном меню выбрать пункт Insert р Cell to the Left. В созданную ячейку поместить изображение логотипа страницы.

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

Далее необходимо перетащить в режиме конструктора элемент Image на форму, установить его в нужном месте и выбрав свойство ImageUrl указать рисунок для размещения на форме. Установить выравнивание содержимого ячейки по центру.

Ввести вместо строки "верхний колонтитул" строку "Пример использования Мастер-страницы" рис. 6.7

Рисунок 6.7

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

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

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

Рисунок 6.8.

В результате будет создана страница содержимого WebForm1.aspx.

Элемент ContentPlaceHolder можно поместить в любую ячейку таблицы, допустим в нижнюю под надписью Нижний колонтитул.

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

Для демонстрации возможностей перехода между страницами произведем следующие изменения.

Добавим еще одну страницу содержимого, в которую введем текст: Это еще одна страница 2.

А в области меню создадим две ссылки на страницы содержимого.

<a href= "WebForm1.aspx">страница1</a><br />

<a href= " WebForm2.aspx">страница2</a>

Теперь при щелчке по ссылке в области ContentPlaceHolder будет загружаться соответствующая страница.

Рисунок 6.9. – результат