Без темы
<<  Оформление предметного содержания функциональный модуль в доу Оформление тарелок блюд соусами  >>
Лекция 10
Лекция 10
Структура и оформление web страниц
Структура и оформление web страниц
Темы и управляющие страницы (Themes and Master Pages)
Темы и управляющие страницы (Themes and Master Pages)
После изучения создания отдельных web страниц, необходимо учиться
После изучения создания отдельных web страниц, необходимо учиться
Каскадные таблицы стилей (Cascading Style Sheets)
Каскадные таблицы стилей (Cascading Style Sheets)
В web-приложениях форматирование применяется на трех уровнях
В web-приложениях форматирование применяется на трех уровнях
Пример использования стилей
Пример использования стилей
Фрагмент из таблицы стилей Style
Фрагмент из таблицы стилей Style
Создание таблицы стилей
Создание таблицы стилей
Правила таблицы стилей
Правила таблицы стилей
Формирование стилей
Формирование стилей
Диалоговые окна построения таблицы стилей
Диалоговые окна построения таблицы стилей
Графическое представление таблицы стилей
Графическое представление таблицы стилей
Применение правил стилей
Применение правил стилей
Окна для работы со стилями в Visual Studio
Окна для работы со стилями в Visual Studio
Заключение по CSS
Заключение по CSS
Темы
Темы
Описание темы
Описание темы
Описание skin файла
Описание skin файла
Темы и skin
Темы и skin
Глобальные темы
Глобальные темы
Создание и использование темы
Создание и использование темы
Описание темы: <asp:ListBox runat="server" ForeColor="White"
Описание темы: <asp:ListBox runat="server" ForeColor="White"
Использование CSS в темах
Использование CSS в темах
Пример описания ЭУ Calendar
Пример описания ЭУ Calendar
Неформатированный Calendar на странице без темы
Неформатированный Calendar на странице без темы
Skin с изображениями
Skin с изображениями
Применение тем с помощью конфигурационного файла web
Применение тем с помощью конфигурационного файла web
Динамическое применение тем
Динамическое применение тем
Стандартизация структуры страниц web приложения
Стандартизация структуры страниц web приложения
Страницы шаблонов (master pages)
Страницы шаблонов (master pages)
Требования к шаблонам
Требования к шаблонам
Основы Master Pages
Основы Master Pages
Использование Master Pages
Использование Master Pages
Создание страницы шаблона (master page)
Создание страницы шаблона (master page)
Создание master pages
Создание master pages
Master page после создания
Master page после создания
Описание Master page
Описание Master page
Создание страницы содержания (content page)
Создание страницы содержания (content page)
Создание web-формы на основе master page
Создание web-формы на основе master page
Страница содержания (content page)
Страница содержания (content page)
Форматирование Master Pages с использованием таблиц и CSS
Форматирование Master Pages с использованием таблиц и CSS
Разметка на основе таблиц
Разметка на основе таблиц
Задание таблицы в Master Page
Задание таблицы в Master Page
Content Page
Content Page
Метод в TableMaster
Метод в TableMaster
Описание шаблона с использованием CSS для <div> элементов
Описание шаблона с использованием CSS для <div> элементов
Позиционирование: гибкое «потоковое» позиционирование и абсолютное
Позиционирование: гибкое «потоковое» позиционирование и абсолютное
Использование CSS позиционирования
Использование CSS позиционирования
Вложение Master Pages
Вложение Master Pages
Вложенные master pages
Вложенные master pages
Шаблон верхнего уровня
Шаблон верхнего уровня
Шаблон второго уровня
Шаблон второго уровня
Контент файл
Контент файл
Результат
Результат
Основные группы навигационных ЭУ
Основные группы навигационных ЭУ
Потребность в страницах с наборов видов (Multiple Views)
Потребность в страницах с наборов видов (Multiple Views)
ЭУ multiview
ЭУ multiview
Пример
Пример
В среде разработки
В среде разработки
В браузере
В браузере
Программирование MultiView
Программирование MultiView
Распознаваемые имена команды MultiView
Распознаваемые имена команды MultiView
Элемент управления Wizard
Элемент управления Wizard
Пример описания Wizard
Пример описания Wizard
WizardStep Properties
WizardStep Properties
Wizard Events
Wizard Events
Модели программирования Wizard
Модели программирования Wizard
Навигация по web сайту
Навигация по web сайту
Сокращенная карта сайта Amazon
Сокращенная карта сайта Amazon
Использование карты сайта (Site map)
Использование карты сайта (Site map)
Лекция 10
Лекция 10
Как создать XML карту сайта
Как создать XML карту сайта
Структура описания карты сайта
Структура описания карты сайта
Пример карты сайта
Пример карты сайта
Лекция 10
Лекция 10
TreeView
TreeView
Класс SiteMap
Класс SiteMap
Создание собственных ЭУ
Создание собственных ЭУ
Пользовательские ЭУ (user controls)
Пользовательские ЭУ (user controls)
Создание пользовательского ЭУ
Создание пользовательского ЭУ
Пример описания пользовательского ЭУ
Пример описания пользовательского ЭУ
Пример использования пользовательского ЭУ
Пример использования пользовательского ЭУ
Обработка событий в пользовательском ЭУ
Обработка событий в пользовательском ЭУ
Добавление свойств к пользовательскому ЭУ
Добавление свойств к пользовательскому ЭУ
Задание свойств пользовательского ЭУ
Задание свойств пользовательского ЭУ
Лекция 10
Лекция 10

Презентация на тему: «Оформление страниц web-приложения». Автор: Tuzovsky Anatoly Fedorovich. Файл: «Оформление страниц web-приложения.pptx». Размер zip-архива: 2060 КБ.

Оформление страниц web-приложения

содержание презентации «Оформление страниц web-приложения.pptx»
СлайдТекст
1 Лекция 10

Лекция 10

Оформление страниц web-приложения

2 Структура и оформление web страниц

Структура и оформление web страниц

Заголовок (header, красным) Область навигации (коричневым) Центральная область содержания (center content area, зеленым) Последние новости (recent news, пурпурный)

3 Темы и управляющие страницы (Themes and Master Pages)

Темы и управляющие страницы (Themes and Master Pages)

Стандартизация внешнего вида страниц Cascading Style Sheets Themes и skins Стандартизация структуры страниц HTML Frames Master pages

4 После изучения создания отдельных web страниц, необходимо учиться

После изучения создания отдельных web страниц, необходимо учиться

группировать вместе большое количество web страниц, для формирования согласованного целостного web сайта. Темы (themes) позволяют описать особенности (специальные свойства) разных типов ЭУ и легко использовать эти форматы во множестве страниц сайта. Темы упрощают создание единого стандартного вида всех страниц и облегчают его изменение. Если тема создана, то она может быть применена ко всем страницам web сайта путем изменения в них используемой темы. Главные страницы (master pages) позволяют создать многократно используемые шаблоны структуры страниц сайта. Используя главные страницы можно описать схему расположения элементов на страницах web сайта, указав размещение на странице таких обычных элементов, как заголовки, меню, баннеры и т.п. Задав один раз такую структуру (главную страницу) можно многократно использовать для описания структуры страниц web сайта, гарантируя, что все страницы имеют одинаковый вид.

5 Каскадные таблицы стилей (Cascading Style Sheets)

Каскадные таблицы стилей (Cascading Style Sheets)

Первый шаг к созданию согласованного, единообразного web приложения заключается в создании согласованного визуального представления web страниц (шрифты, форма кнопок, и т.п.). Основным инструментом согласования деталей оформления страниц являются CSS (каскадные таблицы стилей). Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это средство хранения и упорядочения сведений о форматировании HTML-элементов, составляющих Web-формы. Благодаря централизованному хранению этих сведений использование таблиц стилей облегчает изменение облика Web-приложений.

6 В web-приложениях форматирование применяется на трех уровнях

В web-приложениях форматирование применяется на трех уровнях

Уровень

Где определяется

На что действует

Глобальный (global)

В файле таблицы стилей

Все страницы, ссылающиеся на эту таблицу стилей

Страничный (page)

В страничном элементе head

Все элементы текущей страницы

Локальный (inline)

Внутри HTML-элемента

Только текущий элемент

Иерархия этих уровней напоминает иерархию уровней области видимости. Формат, определенный внутри элемента (локально), имеет приоритет перед форматом, заданным на уровне страницы, а тот — перед форматом, определенным глобально (в таблице стилей). Эти правила и дали имя таблицам стилей, которые называются каскадными.

7 Пример использования стилей

Пример использования стилей

<НТМL> <HEAD> <title>WebForm</title> <!- (1) Ссылка на таблицу стилей. -> <LINK REL="stylesheet" TYPE="text/css" HREF="Styles.css"> <!- (2) Определение стиля на уровне страницы. -> <style> Р { font-family: 'Comic Sans MS', Lucida Sans, sans-serif; font-size: medium: } </style> </HEAD> <body> <p>The alignment is from the style sheet. </p> <p>The font is from the style in the page's head element, <!- (3) Определение стиля, встроенное в элемент -> <р style="FONT-SIZE: large; FONT-STYLE: italic">The italic is from the inline style. </p> </body> </HTML>

8 Фрагмент из таблицы стилей Style

Фрагмент из таблицы стилей Style

css

P { font-size: small; text-align: center; }

9 Создание таблицы стилей

Создание таблицы стилей

Выполните команду «Website ? Add New Item» и выберите Style Sheet. Создайте правило. Задайте атрибуты описания правила.

10 Правила таблицы стилей

Правила таблицы стилей

.heading1 { } .heading1 { font-weight: bold; font-size: large; color: lime; font-family: Verdana, Arial, Sans-Serif; } h2 { ... }

Таблица стилей состоит из правил (rules). Каждое правило определяет, как будет форматироваться один элемент web приложения. Например, для задания формата заголовка нужно начать определять правила с именем heading1. Каждое правило имеет две части. Часть до точки указывает HTML элемент, к которому это правило применяется. В этом примере ничего не задано перед точкой, что означает, что это правило может применяться к любому тэгу. Часть после точки это уникальное имя (имя CSS класса), которое задается для идентификации правила (не чувствительно к регистру). В правиле можно задать подходящую информацию по форматированию. Например, для задания large, bold текста с зеленым foreground цветом. Выбран шрифт Verdana (если доступен), Arial (если нет) или sans-serif (если ни Verdana ни Arial не установлены). Можно задать правила, которые применяются к HTML тэгам автоматически. Например, для описания всех заголовков второго уровня (<h2> тэгов) на странице, которая использует данный stylesheet создаем правило:

11 Формирование стилей

Формирование стилей

Обычный stylesheet описывает множество правил. Фактически stylesheets часто используются для формального описания формата всех элементов интерфейса пользователя web приложения Например, следующий stylesheet описывает пять правил. Первое правило описывает элемент <body>. Другие правила являются CSS И требуется явно их применить к тому элементу, который их будет использовать

.heading2 { font-weight: bold; font-size: medium; font-style: italic; color: #C0BA72; } .blockText { padding: 10px; background-color: #FFFFD9; border-style: solid; border-width: thin; }

body { font-family: Verdana,Arial, Sans-Serif; font-size: small; } .heading1 { font-weight: bold; font-size: large; color: lime; }

12 Диалоговые окна построения таблицы стилей

Диалоговые окна построения таблицы стилей

Диалоговые окна для формирования правил и их описание Add Style Rule…(добавление правил) Build Style… (Modify Style dialog box – изменение описания правил)

13 Графическое представление таблицы стилей

Графическое представление таблицы стилей

Synchronize Document Outline

14 Применение правил стилей

Применение правил стилей

Для использования правила на web странице нужно связать страницу с нужной таблицей с помощью элемента <link> в разделе <head> Например: <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> Статический HTML элемент можно связать с правилом с помощью атрибута class. Например: <div class="blockText" id="paragraph" runat="server" > <p>This paragraph uses the blockText style.</p> </div> ЭУ можно связать с правилом с помощью ЭУ свойства CssClass. Например <asp:Label ID="Label1" runat="server" Text="This Label uses the heading1 style." CssClass="heading1"></asp:Label>

15 Окна для работы со стилями в Visual Studio

Окна для работы со стилями в Visual Studio

Окно Apply Styles – выбрать элемент на web страницу и выбрать правило в этом окне. Manage Styles – показывает одним списком сразу все стили которые доступны на данной странице. Можно перейти к описанию и редактированию правил. CSS Properties – для выбранного элемента показывает полное описание его стилей. Style Sheet toolbar – набор инструментов для работы с CSS.

16 Заключение по CSS

Заключение по CSS

Использование таблиц стилей позволяет решить две задачи Во первых, быстро стандартизировать стиль элементов страниц, уменьшив количество ошибок и пропуск задания стилей. Во-вторых, выделить информацию о форматировании, так чтобы ее совсем не было на web страницах, что позволяет изменять ее без изменения каждой страницы и перекомпиляции кода. Хотя CSS не является особенностью платформы .NET, Visual Studio предоставляет большой набор средств для упрощения работы с таблицами стилей. Таблицы стилей позволяют задавать такие элементы форматирования, как fonts, borders, foreground и background colors и т.п, но они не могут задавать свойства ЭУ ASP.NET. Например, ЭУ CheckBoxList включает свойства, которые управляют тем, как организовать элементы в строках и столбцах. Хотя эти свойства влияют на внешний вид, но они не управляются с помощью CSS, поэтому их надо задавать в ручную. Кроме этого возникает необходимость описать поведение ЭУ вместе с форматированием. Например, желательно стандартизировать режим выбора (selection mode) в ЭУ Calendar или перенос текста в TextBox. Это не возможно сделать с помощью CSS.

17 Темы

Темы

Темы позволяют описать набор атрибутов стиля, которые можно применить к ЭУ в разных страницах. В отличие от таблиц стилей (CSS), которые используются браузером, темы являются особенностью ASP.NET и реализуются на сервере. Темы не заменяют Стили, они имеют некоторые особенности, которые CSS не может реализовать, такие, как: Темы основываются на ЭУ, а не на HTML элементах: таким образом темы позволяют описывать и повторно использовать почти любые свойства ЭУ. Например, они позволяют задать набор общих картинок для вершин и использовать их в различных TreeView ЭУ или набор шаблонов для набора ЭУ GridView. CSS ограничен наборами атрибутов стилей, которые применимы только к HTML элементам. Темы применяются на сервере: когда тема применяется к странице, то полностью сформированная страница отправляется пользователю. При использовании таблиц стилей, браузер получает как страницу, так и информацию о стилях и затем объединяет их на стороне клиента. Темы могут применяться с помощью конфигурационных файлов: это позволяет применять ко всей папке или всему web приложению, без изменения одной web страницы. Темы не используются каскадно, как используются CSS: фактически, если задано свойство в теме и в конкретном ЭУ, то значение свойства в теме перекроет значение свойства ЭУ. Однако можно изменить такое поведение и задать предпочтение свойств страницы, что более походит на работу таблиц стилей.

18 Описание темы

Описание темы

Все темы являются специфичными (специально заданными) для web приложения. Для использования темы в web приложении необходимо создать папку, которая описывает эту тему. Эту папку нужно поместить в папку с именем App_Thems, которая включается в корневую папку web приложения. Например тема FunkyTheme для приложения SuperCommerce должна располагаться в папке: SuperCommerce\App_Themes\FunkyTheme Приложении может содержать много тем, которые описываются в разных папках. Чтобы тема действительно действовала необходимо создать по крайней мере один файл с расширением .skin (обложка). ASP.Net не использует skin файлы напрямую – они используются опосредованно, для описания тем.

19 Описание skin файла

Описание skin файла

По сути skin файл это список тэгов ЭУ с некоторой особенностью. Тэги ЭУ в skin файле не должны полностью описывать ЭУ. Они должны включать только те свойства, которые требуется стандартизировать. Например, если требуется использовать согласованную цветовую схему, то нужно задать только такие свойства, как ForeColor и BackColor. <asp:ListBox runat="server" ForeColor="White" BackColor="Orange"/> Требования к описанию ЭУ в skin файле: Всегда требуется задавать свойства runat="server". Не должен задаваться атрибут id (он у каждого ЭУ уникальный). Все другие свойства не обязательны. Для описания нескольких наборов свойств одного и того же ЭУ нужно задавать уникальные значения SkinId

20 Темы и skin

Темы и skin

В описании темы можно создавать множество skin файлов или записать все тэги ЭУ в одном skin файле. Это приводит к одинаковому результату, так как ASP.Net обрабатывает все skin файлы в папке темы, как части одной и той же темы. Часто практично разделить описания тэгов по группам (тэги списочных ЭУ, тэги ЭУ по работе с данными и т.п.).

21 Глобальные темы

Глобальные темы

ASP.Net поддерживает глобальные темы (темы, которые используются всеми web приложениями). Глобальные темы хранятся в папке c:\Inetpub\wwwroot\aspnet_client\system_web\v2.0.50727\Themes Рекомендуется использовать локальные темы, так как это упрощает развертывание web приложения и дает больше возможностей настраивать их внешний вид. Если имеется локальная тема с таким же названием, как и глобальная, то она имеет предпочтение перед глобальной. Они не будут объединяться.

22 Создание и использование темы

Создание и использование темы

Выполните команду «Website ? Add New Item» и выберите Skin File. Visual Studio предложит создать подкаталог в папке App_Themes. Например, в skin файл можно записать: <asp:ListBox runat="server" ForeColor="White" BackColor="Orange"/> <asp:TextBox runat="server" ForeColor="White" BackColor="Orange"/> <asp:Button runat="server" ForeColor="White" BackColor="Orange"/ Для применения темы к web странице нужно задать атрибут Theme в директиве Page. <%@ Page Language="C#" AutoEventWireup="true" ... Theme=“ProfyTheme” %> Для этого можно задать свойство Theme для Document в окне Properties Если у ЭУ на странице будут такие же свойства, как и в описании skin файла, то они будут заменяться. Для применения именованной skin для элемента: <asp:Button ID="Button1" runat="server" ... SkinID="Dramatic" /> Для того, чтобы заданные свойства ЭУ были предпочтительными нужно использовать атрибут StyleSheetTheme: <%@ Page Language="C#" AutoEventWireup="true" ... StyleSheetTheme=" ProfyTheme" %>

23 Описание темы: <asp:ListBox runat="server" ForeColor="White"

Описание темы: <asp:ListBox runat="server" ForeColor="White"

BackColor="Orange" /> <asp:TextBox runat="server" ForeColor="White" BackColor="Orange" /> <asp:Button runat="server" ForeColor="White" BackColor="Orange" /> <asp:TextBox runat="server" ForeColor="White" BackColor="DarkOrange" Font-Bold="True" SkinID="Dramatic" /> <asp:Button runat="server" ForeColor="White" BackColor="DarkOrange" Font-Bold="True" SkinID="Dramatic" /> Применение в ЭУ: <asp:Button ID="Button1" runat="server" ... SkinID="Dramatic" />

24 Использование CSS в темах

Использование CSS в темах

ASP.Net позволяет использовать таблицы стилей в составе темы: Для задания стилей HTML элементов, которые не соответствуют серверным ЭУ. Таблицы стилей более стандартизированы и могут использоваться для форматирования статических HTML страниц. Таблицы стилей могут быть уже ранее созданы. Для использования CSS в теме нужно добавить таблицу стилей в папку темы. ASP.Net будет находить все файлы .css и динамически связывать их со страницами, которые используют эту тему. Для связывания страницы с таблицей стилей ASP.Net должен вставлять тэг <link> в раздел <head>, поэтому тэг head имел атрибут runat="server". <head runat="server"> <title>...</title> </head>

25 Пример описания ЭУ Calendar

Пример описания ЭУ Calendar

Описание формата календаря в skin файле: <asp:Calendar runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" Width="500px" NextPrevFormat="ShortMonth" SelectionMode="Day"> <SelectedDayStyle BackColor="DarkOrange" ForeColor="White" /> <DayStyle BackColor="Orange" Font-Bold="True" ForeColor="White" /> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> <TitleStyle BackColor="Firebrick" BorderStyle="None" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /> <OtherMonthDayStyle BackColor="NavajoWhite" Font-Bold="False" ForeColor="DarkGray" /> </asp:Calendar> Описание календаря в web форме: <asp:Calendar ID="Calendar1" runat="server" />

26 Неформатированный Calendar на странице без темы

Неформатированный Calendar на странице без темы

Неформатированный Calendar на странице с темой

27 Skin с изображениями

Skin с изображениями

Описание тем для ЭУ с изображениями: <asp:ImageButton runat="server" SkinID="OKButton" ImageUrl="ButtonImages/buttonOK.jpg" /> <asp:ImageButton runat="server" SkinID="CancelButton" ImageUrl="ButtonImages/buttonCancel.jpg" /> Использование ЭУ с темами, содержащими изображения: <asp:ImageButton ID="ImageButton1" runat="server" SkinID="OKButton" /> <asp:ImageButton ID="ImageButton2" runat="server" SkinID="CancelButton" />

28 Применение тем с помощью конфигурационного файла web

Применение тем с помощью конфигурационного файла web

config

Используя директиву web страницы Page можно задать тему у одной страницы. Можно задать тему ко всему web приложению. Для этого нужно задать элемент <pages> в конфигурационном файле the web.config приложения: <configuration> <system.web> <pages theme= "ProfyTheme" /> </system.web> </configuration> Для главенства свойств элементов на страницах нужно использовать <pages styleSheetTheme="ProfyTheme" />

29 Динамическое применение тем

Динамическое применение тем

Для задния темы в программном коде нужно задать значение для свойство Page.Theme или Page.StylySheet при обработки события PreInit. Например: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { // Заполняем list box с доступными темами читая папки в App_Themes. DirectoryInfo themeDir = new DirectoryInfo(Server.MapPath("App_Themes")); lstThemes.DataTextField = "Name"; lstThemes.DataSource = themeDir.GetDirectories(); lstThemes.DataBind(); } }

Protected void page_preinit(object sender, eventargs e) { if (session["theme"] == null){ // если тема не была выбрана page.Theme = ""; } else // тема была выбрана { page.Theme = (string) session ["theme"]; } }

30 Стандартизация структуры страниц web приложения

Стандартизация структуры страниц web приложения

Нужно не только задать внешний вид ЭУ и HTML элементов, но и сделать так, чтобы общие элементы, такие как заголовки (header) и элементы навигации по сайту появлялись на странице на одних и тех же местах. Задача заключается в создании простых и гибких шаблонов, которые могут использоваться для формирования набора страниц web приложения. Существует три основных подхода: Пользовательские ЭУ (user controls) – позволяют описать «pagelet» - часть web страницы с набором элементов и серверного кода, которые могут использоваться в разных web формах. HTML фреймы (frames) – основной инструмент HTML, который позволяет показать несколько страниц в одном окне браузера. Основной недостаток, что для получения каждой страницы браузер должен выполнить отдельный запрос к серверу, поэтому страницы должны быть полностью независимыми, т.е. страница в одном фрейме не может взаимодействовать со страницей в другом фрейме. Cтраницы шаблонов (Master pages) – это специальный инструмент ASP.Net, позволяют описывать фиксированный контент и объявлять части web страницы, в которые могут вставляться различный контент. При изменении master page все страницы, которые ее используют будут меняться автоматически.

31 Страницы шаблонов (master pages)

Страницы шаблонов (master pages)

32 Требования к шаблонам

Требования к шаблонам

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

33 Основы Master Pages

Основы Master Pages

Предоставляют практичный и гибкий способ для задания шаблонов страниц. В ASP.Net включены два специализированных типов страниц: master page (страница шаблона) content page (страница контента) Master page может, как любая web страница, включать статический контент, ЭУ и код. Кроме этого, она может включать content placeholders (пустое поле контента), описывающие участки страницы, которые могут изменяться. Каждая content page имеет ссылку на одну master page и имеет свою структуру и содержание. Content page может задать специфический контент (содержание) для конкретного поля контента (placeholder) в странице шаблона. Т.е. страница шаблона заполняет пустые места, которые не описаны в странице шаблона.

34 Использование Master Pages

Использование Master Pages

35 Создание страницы шаблона (master page)

Создание страницы шаблона (master page)

Для создание страницы шаблона выполните команду меню «Website ? Add New Item» и выберите «Master Page», задав подходящее имя. Создается файл с расширением . master. Эта страница сходна с обычной web страницей, но использует другую директиву. Например: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteTemplate.master.cs" Inherits="SiteTemplate" %> Страница шаблона может использовать ЭУ ContentPlaceHolder, которые нельзя использовать на обычных web страницах. Новая страница шаблона включает два поля. Одно в разделе <head> (для возможности добавлять метаданные страницы и ссылки на таблицы стилей). Второе поле задается в разделе <body>. На страницу шаблона можно добавлять новые элементы и поля (ContentPlaceHolder controls). Например: <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> Conten Pages </asp:ContentPlaceHolder>

36 Создание master pages

Создание master pages

37 Master page после создания

Master page после создания

38 Описание Master page

Описание Master page

<%@ Master language="с#" %> <script runat="server"> </script> <html> <head runat="server"> <title>untitled page</title> </head> <body> <form runat="server"> <asp:contentplaceholder runat="server"> </asp:contentplaceholder> </form> </body> </html>

39 Создание страницы содержания (content page)

Создание страницы содержания (content page)

Для использования страницы шаблона в другой web странице нужно добавить атрибут MasterPageFile к директиве Page. Например: <%@ Page Language="C#" MasterPageFile="~/SiteTemplate.master" ... %> Здесь символ ~/ указывает на корневую папку web приложения. Страница содержания не может включать такие элементы, как <html>, <head>, and <body>. Страница содержания должна включать ЭУ Control. Для этого ЭУ задается однозначная связь с ContentPlaceHolder с помощью атрибута ContentPlaceHolderID у ЭУ Content. Например: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <span style="...">…..</span> </asp:Content>

40 Создание web-формы на основе master page

Создание web-формы на основе master page

41 Страница содержания (content page)

Страница содержания (content page)

<%@ Page Language=“C#" MasterPageFile="MySite.master" %> <asp:Content ContentPlaceHolderID=“ContentPlaceHolder1” runat="server"> <asp:Button runat="server" text="Button" /> <asp:ListBox runat="server"> </asp:ListBox"> </asp:Content>

42 Форматирование Master Pages с использованием таблиц и CSS

Форматирование Master Pages с использованием таблиц и CSS

Для задания структуры полей в странице шаблона используются HTML таблицы CSS позиционирование С помощью HTML таблицы вся площадь страницы делится на колонки и строки. Затем можно добавить ContentPlaceHolder в одну ячейку. Идея CSS позиционирования состоит в разделении содержания с помощью тэгов <div> и задания положения этих <div> тэгов с помощью абсолютных координат или прикрепляя их к одной из сторон страницы. Затем ContentPlaceHolder помещается в тэг <div>.

43 Разметка на основе таблиц

Разметка на основе таблиц

44 Задание таблицы в Master Page

Задание таблицы в Master Page

<table style="width: 100%"> <tr> <td colspan="2">My Header</td> </tr> <tr> <td width="150px">Navigation Controls</td> <td> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr> <td colspan="2">My Footer</td> </tr> </table>

45 Content Page

Content Page

Master Page Вставлен элемент TreeView

46 Метод в TableMaster

Метод в TableMaster

master.cs: public bool ShowNavigationControls { set { Treeview1.Visible = value; } get { return Treeview1.Visible; } } Обработчик событий в TableContentPage.aspx.cs protected void cmdHide_Click(object sender, EventArgs e) { TableMaster master = (TableMaster)this.Master; master.ShowNavigationControls = false; }

47 Описание шаблона с использованием CSS для <div> элементов

Описание шаблона с использованием CSS для <div> элементов

Профессиональные web разработчики предпочитают использовать более современные методы структурирования шаблона на основе CSS. Структура, основанная на CSS позволяет писать код разметки, который легче читать и легче изменять, что облегчает последующее сопровождение web приложения. Для структурирования шаблона с помощью CSS нужно поместить элемент ContentPlaceHolder в разные элементы <div>. Затем применить к каждому <div> таблицу стилей с заданными атрибутами position, left, right, top и bottom.

48 Позиционирование: гибкое «потоковое» позиционирование и абсолютное

Позиционирование: гибкое «потоковое» позиционирование и абсолютное

позиционирование Задаются в атрибуте элемента style: <asp:Button id="cmd" style="POSITION: absolute; left: 100px; top: 50px;" runat="server" ... /> <div> контейнер для других элементов HTML страницы. Фактически это плавающая прямоугольная часть экрана. <div style="POSITION: absolute; left: 100px; top: 50px; width:200px"> ... <div/>

49 Использование CSS позиционирования

Использование CSS позиционирования

Например, для разделения страницы на три колонки, из которых две крайние имеют фиксированный размер, а средняя колонка занимает оставшееся место. Для это можно использовать простую таблицу стилей, которая описывает две 150-пиксельные панели и одну панель переменного размера. Пример использования CSS <div class="leftPanel">...</div> <div class="centerPanel"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="rightPanel">...</div>

Таблица стилей:

.leftPanel { position: absolute; top: 70px; left: 10px; width: 150px; } .rightPanel { position: absolute; top: 70px; right: 10px; width: 150px; } .centerPanel { margin-left: 151px; margin-right: 151px; padding-left: 12px; padding-right: 12px; }

50 Вложение Master Pages

Вложение Master Pages

Один шаблон можно вставлять в другой.

51 Вложенные master pages

Вложенные master pages

52 Шаблон верхнего уровня

Шаблон верхнего уровня

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="NestedMasterRoot.master.cs" Inherits="NestedMasterRoot" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body style="background: #ccffff"> <form id="form1" runat="server"> <div> <h1>The Root</h1> <asp:ContentPlaceHolder id="RootContent" runat="server"> </asp:ContentPlaceHolder > </div> </form> </body> </html> При создании другого шаблона Master Page второго уровня можно использовать при его создании Select Master Page check box, точно также, как и при создании новой web страници с использованием master page.

53 Шаблон второго уровня

Шаблон второго уровня

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="NestedMasterSecondLevel.master.cs" Inherits="NestedMasterSecondLevel" MasterPageFile="~/NestedMasterRoot.master"%> <asp:Content ID="Content1" ContentPlaceHolderID="RootContent" Runat="Server"> <table style="background: #ccff00; width: 100%"> <tr> <td colspan="2"> <h2>The Second Level</h2> </td> </tr> <tr> <td style="width: 200px"></td> <td style="background: white"> <asp:ContentPlaceHolder id="NestedContent" runat="server"> </asp:ContentPlaceHolder> </td> </tr> </table> </asp:Content>

54 Контент файл

Контент файл

<%@ Page Language="C#« MasterPageFile="~/NestedMasterSecondLevel.master" AutoEventWireup="true" CodeFile="NestedContentPage.aspx.cs" Inherits="NestedContentPage" Title="Nested Content Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="NestedContent" Runat="Server"> <br />This is the nested content!<br /> </asp:Content>

55 Результат

Результат

56 Основные группы навигационных ЭУ

Основные группы навигационных ЭУ

ЭУ MultiView и Wizard: позволяют объединить набор шагов в одну страницу; с помощью этих ЭУ можно объединить несколько страниц работы в одно место уменьшая потребность в навигации. Модель карты сайта (site map) : позволяет описать навигационную структуру webcfqnf и связать ее напрямую со сложным ЭУ. Такую модель (framework) можно расширить для поддержки различных типов ЭУ и разных систем хранения карты сайта. Сложные навигационные ЭУ: к ним относятся TreeView и Menu. Хотя эти ЭУ не ограничиваются только навигацией, они очень хорошо подходят для этого. Используя эти ЭУ, модели карты сайта и шаблоны (master pages), можно построить полную систему навигации с минимальными усилиями. ASP.NET четко разделяет данные (информацию о структуре web сайта) от реализации навигации (навигационных ЭУ). Это означает, что можно реорганизовывать, заменять, или переименовывать web страницы без нарушения работы web сайта и редактирования кода. Все, что требуется сделать, это внести нужные изменения в файл с картой сайта (site map file).

57 Потребность в страницах с наборов видов (Multiple Views)

Потребность в страницах с наборов видов (Multiple Views)

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

58 ЭУ multiview

ЭУ multiview

Это наиболее простой из ЭУ с набором видов (представлений страницы). Он позволяет описать набор страниц, но показывать их по одной. <asp:MultiView ID="MultiView1" runat="server"> <asp:View ID="View1" runat="server">...</asp:View> <asp:View ID="View2" runat="server">...</asp:View> <asp:View ID="View3" runat="server">...</asp:View> </asp:MultiView> Внутрь тэга <asp:View> можно добавлять HTML и web ЭУ для данного представления (view).

59 Пример

Пример

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <b>Showing View #1<br /> <br /> <asp:Image ID="Image1" runat="server" ImageUrl="~/cookies.jpg" /></b> </asp:View> <asp:View ID="View2" runat="server"> <b>Showing View #2</b><br /> <br /> Text content. </asp:View> <asp:View ID="View3" runat="server"> <b>Showing View #3</b><br /> <br /> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </asp:View> </asp:MultiView>

60 В среде разработки

В среде разработки

61 В браузере

В браузере

62 Программирование MultiView

Программирование MultiView

Свойство ЭУ MultiView.ActiveViewIndex определяет, какой вид будет показываться. Только этот вид будет выполнять рендеринг (формировать HTML jndtn). По умолчанию ActiveViewIndex равно -1, что означает, что никакой вид не показывается. Можно использовать ЭУ list, который позволяет пользователю выбирать нужный вид из всего списка видов. Например: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DropDownList1.DataSource = MultiView1.Views; DropDownList1.DataTextField = "ID"; DropDownList1.DataBind(); } } А это обработчик события выбора элемента списка: protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex; }

63 Распознаваемые имена команды MultiView

Распознаваемые имена команды MultiView

Command Name MultiView Field Description PrevView PreviousViewCommandName Moves to the previous view. NextView NextViewCommandName Moves to the next view. SwitchViewByID SwitchViewByIDCommandName Moves to the view with a specific ID (string name). The ID is taken from the CommandArgument property of the button control. SwitchViewByIndex SwitchViewByIndexCommandName Moves to the view with a specific numeric index. The index is taken from the CommandArgument property of the button control.

64 Элемент управления Wizard

Элемент управления Wizard

The Wizard control is a more glamorous version of the MultiView control. It also supports showing one of several views at a time, but it includes a fair bit of built-in yet customizable behavior, including navigation buttons, a sidebar with step links, styles, and templates. Usually, wizards represent a single task, and the user moves linearly through them, moving from the current step to the one immediately following it (or the one immediately preceding it in the case of a correction). The ASP.NET Wizard control also supports nonlinear navigation, which means it allows you to decide to ignore a step based on the information the user supplies. By default, the Wizard control supplies navigation buttons and a sidebar with links for each step on the left. You can hide the sidebar by setting the Wizard.DisplaySideBar property to false. Usually, you’ll take this step if you want to enforce strict step-by-step navigation and prevent the user from jumping out of sequence. You supply the content for each step using any HTML or ASP.NET controls. Figure 17-4 shows the region where you can add content to an out-of-the-box Wizard instance.

65 Пример описания Wizard

Пример описания Wizard

<asp:Wizard ID="Wizard1" runat="server" Width="467px“ BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderWidth="1px"> <WizardSteps> <asp:WizardStep ID="WizardStep1" runat="server" Title="Personal"> <h3>Personal Profile</h3> Preferred Programming Language: <asp:DropDownList ID="lstLanguage" runat="server"> <asp:ListItem>C#</asp:ListItem> <asp:ListItem>VB</asp:ListItem> <asp:ListItem>J#</asp:ListItem> </asp:DropDownList> <br /> </asp:WizardStep> <asp:WizardStep ID="WizardStep2" runat="server" Title="Company"> <h3>Company Profile</h3> Number of Employees: <asp:TextBox ID="txtEmpCount" runat="server"/> Number of Locations: <asp:TextBox ID="txtLocCount" runat="server"/> </asp:WizardStep> <asp:WizardStep ID="WizardStep3" runat="server" Title="Software"> <h3>Software Profile</h3> Licenses Required: <asp:CheckBoxList ID="lstTools" runat="server"> <asp:ListItem>Visual Studio 2008</asp:ListItem> <asp:ListItem>Office 2007</asp:ListItem> <asp:ListItem>Windows Server 2008</asp:ListItem> </asp:CheckBoxList> </asp:WizardStep> <asp:WizardStep ID="Complete" runat="server" Title="Complete“ StepType="Complete"> <br /> Thank you for completing this survey.<br /> Your products will be delivered shortly.<br /> </asp:WizardStep> </WizardSteps> </asp:Wizard>

66 WizardStep Properties

WizardStep Properties

Property Description Title The descriptive name of the step. This name is used for the text of the links in the sidebar. StepType The type of step, as a value from the WizardStepType enumeration. This value determines the type of navigation buttons that will be shown for this step. Choices include Start (shows a Next button), Step (shows Next and Previous buttons), Finish (shows a Finish and Previous button), Complete (show no buttons and hides the sidebar, if it’s enabled), and Auto (the step type is inferred from the position in the collection). The default is Auto, which means that the first step is Start, the last step is Finish, and all other steps are Step. AllowReturn Indicates whether the user can return to this step. If false, once the user has passed this step, the user will not be able to return. The sidebar link for this step will have no effect, and the Previous button of the following step will either skip this step or be hidden completely (depending on the AllowReturn value of the preceding steps).

67 Wizard Events

Wizard Events

Event Description ActiveStepChanged Occurs when the control switches to a new step (either because the user has clicked a navigation button or your code has changed the ActiveStepIndex property). CancelButtonClick Occurs when the Cancel button is clicked. The cancel button is not shown by default, but you can add it to every step by setting the Wizard.DisplayCancelButton property. Usually, a cancel button exits the wizard. If you don’t have any cleanup code to perform, just set the CancelDestinationPageUrl property, and the wizard will take care of the redirection automatically. FinishButtonClick Occurs when the Finish button is clicked. NextButtonClick and PreviousButtonClick Occurs when the Next or Previous button is clicked on any step. However, because there is more than one way to move from one step to the next, it’s better to handle the ActiveStepChanged event. SideBarButtonClick Occurs when a button in the sidebar area is clicked.

68 Модели программирования Wizard

Модели программирования Wizard

Commit-as-you-go: This makes sense if each wizard step wraps an atomic operation that can’t be reversed. For example, if you’re processing an order that involves a credit card authorization followed by a final purchase, you can’t allow the user to step back and edit the credit card number. To support this model, you set the AllowReturn property to false on some or all steps, and you respond to the ActiveStepChanged event to commit changes for each step. Commit-at-the-end: This makes sense if each wizard step is collecting information for an operation that’s performed only at the end. For example, if you’re collecting user information and plan to generate a new account once you have all the information, you’ll probably allow a user to make changes midway through the process. You execute your code for generating the new account when the wizard is finished by reacting to the FinishButtonClick event.

69 Навигация по web сайту

Навигация по web сайту

The TreeView Control The Menu Control SiteMapPath Site Maps

70 Сокращенная карта сайта Amazon

Сокращенная карта сайта Amazon

com

71 Использование карты сайта (Site map)

Использование карты сайта (Site map)

ASP.NET 2.0 включает средства для описания структуры сайта и набор элементов упр. Для выполнения переходов в соответствии с этой структурой и ее отображения. XML файл с именем - web.sitemap, размещенный в корневом каталоге сайта Элементы управления для отображения карты сайта Menu - TreeView - SiteMapPath – Элемент управления SiteMapDataSource

72 Лекция 10
73 Как создать XML карту сайта

Как создать XML карту сайта

Выполнить в контекстном меню Solution Explorer команду Add New Item и затем выбрать значок Site Map. Имя файла Web.sitemap менять нельзя. Созданный файл имеет несколько XML элементов <siteMapNode>.

74 Структура описания карты сайта

Структура описания карты сайта

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap>

75 Пример карты сайта

Пример карты сайта

<?xml version="1.0" encoding="utf-8" ?> <siteMap> <siteMapNode title="Home" description="Home" url="default.aspx" > <siteMapNode title="Products" description="Our products" url="Products.aspx"> <siteMapNode title="Hardware" description="Hardware choices" url="navigation1.aspx" /> <siteMapNode title="Software" description="Software choices" url="Software.aspx" /> </siteMapNode> <siteMapNode title="Services" description="Services we offer" url="Services.aspx"> <siteMapNode title="Training" description="Training classes" url="Training.aspx" /> <siteMapNode title="Consulting" description="Consulting services" url="Consulting.aspx" /> <siteMapNode title="Support" description="Supports plans" url="Support.aspx" /> </siteMapNode> </siteMapNode> </siteMap>

76 Лекция 10
77 TreeView

TreeView

Разместить новый ЭУ TreeView в нужном месте страницы Master Page. Выбрать команду Connect To DataSource из списка задач и создать новый источник типа SiteMapDataSource. Задать свойство InitialExpandDepth ЭУ TreeView равным 2. Запустить web site нажав F5.

78 Класс SiteMap

Класс SiteMap

Свойства SiteMap: RootNode CurrentNode Класс SiteMapNode Title Url Description Дополнительные свойства ParentNode ChildNodes NextSibling PreviousSibling

79 Создание собственных ЭУ

Создание собственных ЭУ

Пользовательские ЭУ (user control) Специализированные ЭУ (custom control)

80 Пользовательские ЭУ (user controls)

Пользовательские ЭУ (user controls)

Пользовательский ЭУ это небольшая часть страницы, которая может включать статический HTML код и серверные ЭУ. Преимущество пользовательских состоит в том, что создав один раз их можно использовать многократно на разных страницах web приложения. К ним можно также добавить собственные свойства, события и методы. Пользовательские ЭУ во многом сходна с web страницами. Отличие пользовательского ЭУ от web страницы: Начинается с директивы Control, а не Page Файл имеет расширение .ascx, а не .aspx и их code-behind файлы наследуются от класса System.Web.UI.UserControl. Пользовательские ЭУ не могут запрашиваться напрямую браузером.

81 Создание пользовательского ЭУ

Создание пользовательского ЭУ

Выполнить команду меню «Website ? Add New Item» и выбрать шаблон Web User Control. Задайте имя нового ЭУ. Для использования пользовательского ЭУ на web странице его надо зарегистрировать. Пример: <%@ Register TagPrefix="apress" TagName="Header" Src="Header.ascx" %> TagPrefix имя префикса TagName – имя элемента Полное название ЭУ – <TagPrefix:TagName …> Для размещения пользовательского ЭУ на web странице, его надо просто перетащить из окна Solution Explorer в окно Design web страницы.

82 Пример описания пользовательского ЭУ

Пример описания пользовательского ЭУ

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Header.ascx.cs" Inherits="Header" %> <table width="100%" border="0" style="background-color: Blue"> <tr> <td style="..."> <b>User Control Test Page</b></font> </td> </tr> <tr> <td align="right" style="..."> <b>An Apress Creation © 2008</b> </td> </tr> </table>

83 Пример использования пользовательского ЭУ

Пример использования пользовательского ЭУ

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HeaderTest.aspx.cs" Inherits="HeaderTest" %> <%@ Register TagPrefix="apress" TagName="Header" Src="Header.ascx" %> <html mlns="http://www.w3.org/1999/xhtml"> <head> <title>HeaderHost</title> </head> <body> <form id="Form1" method="post" runat="server"> <apress:Header id="Header1" runat="server"></apress:Header> </form> </body> </html>

84 Обработка событий в пользовательском ЭУ

Обработка событий в пользовательском ЭУ

Пример пользовательского ЭУ: <%@ Control Language="c#" AutoEventWireup="true" CodeFile="TimeDisplay.ascx.cs" Inherits="TimeDisplay" %> <asp:LinkButton id="lnkTime" runat="server" OnClick="lnkTime_Click" /> Программный код (code-behind): public partial class TimeDisplay : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) RefreshTime(); } protected void lnkTime_Click(object sender, EventArgs e) { RefreshTime(); } public void RefreshTime() { lnkTime.Text = DateTime.Now.ToLongTimeString(); } }

85 Добавление свойств к пользовательскому ЭУ

Добавление свойств к пользовательскому ЭУ

public class TimeDisplay : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) RefreshTime(); } private string format; public string Format { get { return format; } set { format = value; } } protected void lnkTime_Click(object sender, EventArgs e) { RefreshTime(); } public void RefreshTime() { if (format == null) { lnkTime.Text = DateTime.Now.ToLongTimeString(); } else { lnkTime.Text = DateTime.Now.ToString(format); } } }

86 Задание свойств пользовательского ЭУ

Задание свойств пользовательского ЭУ

TimeDisplay1.Format = "dddd, dd MMMM yyyy HH:mm:ss tt (GMT z)"; Можно задать свойства пользовательского ЭУ в тэге <apress:TimeDisplay id="TimeDisplay1" Format= "dddd, dd MMMM yyyy HH:mm:ss tt (GMT z)" runat="server" /> <hr /> <apress:TimeDisplay id="TimeDisplay2" runat="server" />

87 Лекция 10
«Оформление страниц web-приложения»
http://900igr.net/prezentacija/bez_uroka/oformlenie-stranits-web-prilozhenija-168949.html
cсылка на страницу

Без темы

23688 презентаций
Урок

Без урока

1 тема
Слайды
900igr.net > Презентации по > Без темы > Оформление страниц web-приложения