Master Pages и Content Pages

Лабораторная работа №2
Эталонные страницы и страницы содержимого
1. Цель работы
Целью лабораторной работы является теоретическое и практическое ознакомление с
созданием эталонных страниц и страниц содержимого.
2. Состав рабочего места
2.1. Оборудование: IBM-совместимый персональный компьютер (ПК).
2.2. Программное обеспечение: операционная система Windows, интегрированная
оболочка Visual Studio 2008.
3. Краткие теоретические сведения
Шаблоны дизайна
Шаблоны дизайна – это визуальное наследование страниц, впервые появившееся в
ASP.NET 2.0. Вы можете создавать основу для любого количества страниц приложения.
Шаблоны позволяют легче создавать и поддерживать приложения. Visual Studio включает
поддержку создания и редактирования шаблонов страниц. Эта лекция рассматривает
использование шаблонов дизайна страниц в приложении и начинается с объяснения их
преимуществ.
Шаблоны дизайна страниц нужны для простого пользователя для того, чтобы
определить отличие одного сайта от другого, – в разнообразном дизайне страниц.
Большинство веб-сайтов сегодня имеют узнаваемый дизайн, который достигается
использованием одних и тех же элементов в тех же самых местах в разных страницах сайта.
Поэтому дизайн страниц является едва ли менее важным, чем общая функциональность.
Например, взгляните на главную страницу сайта газеты «Комсомольская правда».
Каждый день там появляются разные статьи, но оформление их остается единым. Это
логотип газеты, верхние, правые, левые навигационные панели, рейтинг статей справа,
формы для поиска, подписки и входа в почту. Внизу страницы находится юридическая
информация.
Некоторые разработчики копируют и вставляют повторяющиеся элементы во все
страницы сайта. Это неэффективно, так как если нужно изменить одну деталь в этих общих
элементах, изменения придется вводить во все страницы сайта. Можно помещать
повторяющиеся куски кода во включаемые файлы с помощью команды HTML include. Но
так трудно увидеть окончательный вид страницы в среде разработки. В ASP.NET 1.1 стало
1
возможным создавать пользовательские элементы управления. Можно создать такой элемент
с нужным содержанием и помещать его на все страницы. Развитием этой идеи стало
создание шаблонов страниц. Это тоже пользовательский элемент управления, только он
находится не в странице, а вне ее.
Основы эталонных страниц
С помощью шаблонов страниц определяется некоторое общее содержание, которое
помещается в страницу с расширением .master. Естественно, таких страниц в приложении
может быть несколько. Этой шаблон могут использовать любое количество дочерних
страниц, которые, как и обычные страницы, имеют расширение .aspx.
В эталонные страницы также включают общие заголовки и нижние колонтитулы.
Это единственный тип страниц, где возможно разместить специальные элементы
управления ContentPlaceHolder. Эти элементы управления определяют места, в которые
страницы содержимого, использующие данную страницу в качестве эталонной страницы,
могут помещать свое собственное содержание. Когда ASP.NET получает запрос отобразить
страницу содержимого, она соединяет ее код с кодом главной страницы, в результате
генерируется итоговый HTML.
Когда страница содержимого редактируется в среде разработки, на вкладке Design
видна страница вместе с элементами из эталонной страницы, но они показаны серым цветом.
Их редактировать нельзя. Можно редактировать то, что находится в элементах Content.
В диалоге Add New Item выберите тип страницы Master Page. Как и обычные страницы,
их можно создавать с отделенным программным кодом или кодом, встроенным в страницу.
Это никак не влияет на модель разделения кода дочерних страниц. Кроме того, главная и
дочерняя страницы могут разрабатываться на разных языках.
Чтобы получить четкое разделение страницы на логические части, иногда используют
табличную разметку. Построим таблицу с 3 строками, где в верхней строке находится
заголовок всех страниц, во второй произвольное содержание, она состоит из двух ячеек, в
каждой из которых по одному ContentPlaceHolder. В нижнем ряду находится правовая
информация. Таблица создается очень просто из меню Layout-Insert Table. Создадим таблицу
2 на 3. После этого объедините ячейки верхней и нижней строк, а в среднюю вставим
ContentPlaceHolder. Создайдим содержание заголовка и подвала. Должна получиться
подобная страница:
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Привет!</title>
</head>
<body>
<form id="form1" runat="server">
<div>
2
<table>
<tr bgcolor="#6699cc">
<td colspan="2" style="vertical-align: middle;
color: white;
text-align: center;">Школа программирования ASP.NET 2.0
</td>
</tr>
<tr>
<td style="width: 100px" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
<td style="width: 100px" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
<span style="font-size: 8pt">Copyright © 2006 - Школа
ASP.NET 2.0</span></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Первое отличие этой страницы от страницы содержимого в том, что она начинается с
директивы Master, а не Page. Класс эталонной страницы определен в файле
MasterPage.master.cs.
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
Класс эталонной страницы – наслідник класса System.Web.UI.MasterPage, который в
свою очередь наследует от System.Web.UI.UserControl.
3
В нём могут находиться любые элементы управления, в том числе и HTML-код. В нём
также могут обрабатываться и события страницы. 2 элемента управления ContentPlaceHolder
обозначают места, куда вставляется содержание страницы-наследницы.
Теперь нужно создать страницу содержимого (Content Page). Она создается как обычно,
только отмечается флажок с надписью Select Master Page. Появляется диалог, в котором
необходимо выбрать эталонную страницу.
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="MainSchool.aspx.cs" Inherits="MainSchool"
Title="Untitled Page" %>
Атрибут MasterPage директивы Page определяет эталонную страницу для данной
страницы содержимого.
Возможно настроить приложение так, чтобы все его страницы содержимого
использовали одну эталонную страницу. В конфигурационном файле в секцию web.config
для этогонужно вставить элемент:
<pages masterPageFile="~/ MasterPage.master " />
Но и в этом случае назначение главной страницы в директиве Page имеет приоритет
над назначением на уровне приложения. Установка web.config действует на тех страницах, в
которых MasterPageFile не указан, но определены элементы управления Content. Эта
установка не действует на обычные aspx-страницы.
Шаблон можно назначить не всем страницам, а выборочно, например, расположенным
в определенной папке приложения.
<location path="Lections">
<system.web>
<pages masterPageFile="~/Lections.master" />
</system.web>
Элемент location вставляется в главный узел configuration. Здесь указано, что все
страницы из папки Lections используют эталонную страницу Lections.master.
На странице содержимого могут быть объявлены только элементы управления Content,
каждый из которых соответствует одному элементу управления ContentPlaceHolder
эталонной страницы. Нельзя вставлять разметку вне этих элементов, иначе ASP.NET не
сможет объединить главную страницу со страницей содержания. Идентификатор элемента
управления ContentPlaceHolder должен совпадать с атрибутом ContentPlaceHolderID
соответствующего элемента управления Content.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
</asp:Content>
4
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
</asp:Content>
Итак, создана страница содержимого с 2 элементами управления Content. Если
переключиться на вкладку Design, эти два элемента Content показаны в виде пустых
прямоугольников, расположенных рядом друг с другом, так как в эталонной странице они
находятся в двух соседних ячейках таблицы. Директива Page отличается от обычной, кроме
атрибута MasterPageFile, наличием атрибута Title. Так как теги <head>, <title>, <body>
определяются в эталонной странице, это единственная возможность переопределить
заголовок браузера. Заменим значение атрибута
Title="Главная"
Если посмотреть на результирующую страницу в браузере, увидим, что в заголовке
браузера отразилось изменение. Соответственно, в HTML-коде страницы записано
<title>
Главная
</title>
На самой странице отображается только содержание, заданное в эталонной странице.
Эталонную страницу можно в любой момент отредактировать, и изменения отразятся
на всех страницах содержимого, использующих данную эталонную страницу. Например,
добавим картинку перед текстом заголовка.
<img src=" images/ASPdotNET_logo.jpg" />
Страница содержимого в браузере теперь выглядит так:
Рисунок 1. Вид страницы содержимого
Содержание страницы должно быть строго внутри элементов Content. В один из них
можно поместить, например, картинку, а во второй текст.
5
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Image ID="Image1" runat="server" ImageUrl="Images/photo_home_01.jpg"
/>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Преимущество технологии ASP.NET перед остальными в высокой степени
абстракции, построенной над стандартным HTML кодом: использование объектноориентированной парадигмы, поддержку нескольких языков программирования, наличие
универсального основания, содержащего тысячи уже готовых для использования в проектах
решений – Microsoft .NET Framework.
<br />
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="Voting.aspx">Дальше</asp:HyperLink>
</asp:Content>
Есть еще один способ поменять заголовок браузера программно. У страницы, имеющей
шаблон, есть свойство Master. Конечно, оно есть у всех страниц, но у обычных страниц оно
равно Null. Через него можно обращаться ко всем свойствам главной страницы. Это свойство
только для чтения.
public MasterPage Master { get; }
public partial class MainSchool : System.Web.UI.Page
{
protected void Page_LoadComplete(object sender, EventArgs e)
{
Master.Page.Title = "Школа веб-программирования";
}
}
Содержание по умолчанию
В главной странице может быть определено содержание, которое будет отображаться
по умолчанию. Оно помещается в элементах ContentPlaceHolder эталонной страницы для
всех страниц содержимого, в которых не определены соответствующие элементы
управления Content. Если дочерняя страница не переопределит содержание по умолчанию,
оно будет использоваться при ее отображении. Создадим элемент управления SiteMapPath,
который поместим в ContentPlaceHolder1.
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
6
</asp:contentplaceholder>
На странице MainSchool.aspx он отображаться не будет, так как в ней определены оба
элемента Content. Однако если в следующей странице определен только один из элементов
Content:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Voting.aspx.cs"
Inherits="Voting" MasterPageFile="~/MasterPage.master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
Какой язык программирования Вы предпочитаете?<br />
asp:RadioButtonList ID="rblVoting" runat="server"
DataSourceID="SqlDataSource1"
DataTextField="variant" DataValueField="id">
</asp:RadioButtonList> <br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PollsConnectionString %>"
SelectCommand="SELECT [id], [variant] FROM [poll] ORDER BY [variant]
"></asp:SqlDataSource>
<br />
 <asp:Button ID="Button1" runat="server" Text="Выбрать" /><br />
</asp:Content>
Если посмотреть ее в браузере, увидим, что в ее левой части «хлебные крошки»
отображаются.
Программное назначение эталонной страницы
В странице содержимого можно переназначить ее эталонную страницу программно.
Для этого нужно присвоить нужное значение свойству Page.MasterPageFile. Эталонная
страница поменяется независимо от того, какая была назначена в директиве @Page или
файле web.config. Но если попробовать проделать это в теле обработчиков событий
Page_Load или Page_Init, возникнет ошибка времени выполнения.
Это свойство можно изменить только во время обработки события Page_PreInit.
Событие Page_PreInit – самая ранняя фаза жизненного цикла страницы, к которой можно
получить доступ. Во время события Init главная и дочерняя страница уже сливаются в одну,
поэтому уже поздно менять шаблон. По этой причине событие Page_PreInit - единственное, в
обработчике которого можно работать с главной страницей отдельно от страницы
содержимого.
protected void Page_PreInit(object sender, EventArgs e)
{
Page.MasterPageFile = “~/MyMasterPage.master";
7
}
Для того, чтобы из страницы содержимого обратиться к элементам управления главной
страницы, можно воспользоваться функцией FindControl. Непосредственно обратиться к ним
нельзя, так как это защищенные члены класса System.Web.UI.MasterPage.
Label mpLabel = (Label) Master.FindControl("masterPageLabel");
if(mpLabel != null)
{
//Set content page title to master page control
Title.Text = mpLabel.Text
}
Эталонные страницы могут иметь методы и свойства. Чтобы можно было обращаться к
ним, нужно использовать директиву @MasterType. При этом становится доступен класс
эталонной страницы через строго типизированную ссылку. Атрибут TypeName задает имя
типа, а VirtualPath путь относительно корневого каталога веб-приложения к файлу эталонной
страницы.
<%@ page language="C#" masterpagefile="~/Site3.master" %>
<%@ mastertype virtualpath="~/Site3.master" %>
Свойства могут быть определены в классе главной страницы.
public String FooterText {
get {
return Footer.Text;
}
set {
Footer.Text = value;
}
}
Таким образом, эталонная страница разрешает доступ извне к свойствам своих
элементов.
Страница содержимого меняет это свойство, а элемент управления AdRotator находится
с помощью метода FindControl:
void Page_Load()
{
Master.FooterText = "This is a custom footer";
AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator");
8
if (ad != null)
{
ad.BorderColor = System.Drawing.Color.Purple;
ad.BorderWidth = 10;
}
}
Вложенные эталонные страницы
Эталонные страницы могут быть страницами содержимого для других эталонных
страниц. Например, сайт состоит из нескольких разделов. Все страницы сайта имеют общие
элементы, и все страницы раздела имеют другие общие элементы. Сайт цветочного магазина
состоит из разделов многолетних и однолетних цветов. Для них созданы эталонные
страницы, для которых определена общая эталоная страница сайта.
<%@ master language="C#" masterpagefile="~/Site4.master"%>
<asp:content contentplaceholderid="SectionContents" runat="server">
<h3>Perrenials</h3>
<asp:contentplaceholder id="FlowerText" runat="server"/>
<br /><br />
<asp:contentplaceholder id="FlowerPicture" runat="server"/>
</asp:content>
Страница, описывающая нарциссы, находится в разделе многолетних цветов и
использует эталонную страницу SectionPerrenials.
<%@ page language="C#" masterpagefile="~/SectionPerrenials.master" %>
<asp:content id="FlowerText" ContentPlaceHolderId="FlowerText" runat="server">
Daffodils bloom early in spring and welcome the growing season.
</asp:content>
<asp:content id="FlowerPicture" ContentPlaceHolderId="FlowerPicture"
runat="server">
<asp:image id="image1" runat=server imageurl="~/images/daffodil.jpg"/>
</asp:content>
Последовательность событий
Когда составная страница формируется на сервере, происходят события и эталонной
страницы, и страницы содержимого. Порядок возникновения этих событий полезно знать,
если возникает необходимость использовать их обработчики.
1. Инициализация вложенных элементов управления эталонной страницы.
2. Инициализация вложенных элементов управления страницы содержимого.
9
Инициализация эталонной страницы.
Инициализация страницы содержимого.
Загрузка(Page_Load) страницы содержимого.
Загрузка(Page_Load) главной страницы
Событие Page_LoadComplete страницы содержимого.
Загрузка дочерних элементов управления эталонной страницы.
Загрузка дочерних элементов управления страницы содержимого.
3.
4.
5.
6.
7.
8.
9.
Событие LoadComplete было введено для того, чтобы можно было обратиться из
страницы содержимого к элементам управления эталонной страницы, созданным в ее
Page_Load. Это нельзя сделать в обработчике Page_Load страницы содержимого, так как она
загружается до загрузки эталонной страницы.
Эталонные страницы для конкретных платформ
Во многих случаях приложения разрабатываются для просмотра на разных видах
браузеров. Это могут быть различные браузеры или программы просмотра веб-сайтов на
карманных компьютерах и мобильных телефонах.
Поэтому ASP.NET 2.0 позволяет в атрибуте MasterPageFile директивы Page определить
разные эталонные страницы для разных типов браузеров.
<%@ Page Language="VB" MasterPageFile="~/Main.master"
Mozilla:MasterPageFile="~/MainMozilla.master"
Opera:MasterPageFile="~/MainOpera.master" %>
4. Порядок выполнения работы
Упражнение 1
Создание эталонной страницы
1)
2)
Откройте Web-сайт
1.
В среде Visual Studio, на меню File, кликните Open Web Site.
2.
Найдите ~\LabFiles\Starter\СSharp\AdWorksWebSite, а затем нажмите Open.
Создайте эталонную страницу
1. В меню File нажмите New File.
2. В открывшемся диалоговом окне Visual Studio installed templates найдите и
выберите Master Page.
3. Измените имя файла на AdWorks.master.
4. В меню Language выберите используемый язык программирования (C#).
5. Уберите галочку Place code in separate file и нажмите Add.
10
3)
Измените шапку страницы
1. Найдите тэг <title> и измените текст на Adventure Works Intranet Portal.
Ваш код должен выглядеть примерно так:
<title>Adventure Works Intranet Portal</title>
2. Добавьте объявления таблицы стилей шрифтов после тэга < title >.
Ваш код должен выглядеть примерно так:
<link type="text/css" rel="stylesheet" href="StyleSheet.css" />
4)
Измените тело страницы
Удалите тег <div>, замените элемент управления ContentPlaceHolder, названный
ContentPlaceHolder1 таблицей с пятью строками в теле тега < div >.
Ваш код должен выглядеть примерно так:
<table cellspacing="0" cellpadding="0" border="0" width="100%" height=”100%”>
<tr height=1%>
<td>
<!-- Row One -->
</td>
</tr>
<tr>
<td>
<!-- Row Two -->
</td>
</tr>
<tr>
<td>
<!-- Row Three -->
</td>
</tr>
<tr>
<td>
<!-- Row Four -->
</td>
</tr>
<tr>
<td>
<!-- Row Five -->
</td>
</tr>
</table>
11
Прежде всего, заинтересованная сторона требует, чтобы каждый отдел имел свой
субдомен. Поэтому первая строка должна содержать ячейку, охватывающую два
столбца таблицы и содержащую семь элементов управления HyperLink. Эти элементы
управления должны ссылаться на страницы содержимого шести отделов, а также на
домашнюю страницу . Ссылки должны содержаться в получившейся ячейке и иметь
следующие заголовки:
1.
 Home
 HR
 Accounting
 Legal
 Sales
 Training
 Expenses
Добавьте код в пределах тэга <table>.
Ваш код должен выглядеть следующим образом:
<tr h eight=1%>
<td colspan="2">
<!-- Row One -->
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
<tr class="BannerFrame" >
<td class="BannerCell" >
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/default.aspx">
Home</asp:HyperLink> |
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/hr.aspx">
HR</asp:HyperLink> |
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/accounting.aspx">
Accounting</asp:HyperLink> |
<asp:HyperLink ID="HyperLink4" runat="server"
NavigateUrl="~/legal.aspx">
Legal</asp:HyperLink> |
<asp:HyperLink ID="HyperLink5" runat="server"
NavigateUrl="~/sales.aspx">
Sales</asp:HyperLink> |
<asp:HyperLink ID="HyperLink6" runat="server"
NavigateUrl="~/training.aspx">
Training</asp:HyperLink> |
12
<asp:HyperLink ID="HyperLink7" runat="server"
NavigateUrl="~/expenses.aspx">
Expenses</asp:HyperLink>
</td>
</tr>
</table>
</td>
</tr>
Примечания.
Вручную набирать содержимое всех элементы управления HyperLink не требуется. Вы
можете перетащить элементы управления из Toolbox на странице и установить свойства,
используя окно свойств (Properties).
Чтобы включить Toolbox, нажмите меню ViewToolbox. Чтобы включить окно
свойств, нажмите меню ViewProperties window.
2. Для второй строки тэга <table> должен быть определён класс HeaderFrame.
Ячейка должна отображать рисунок yellow.gif - изображение свысотой в три
пиксела.
Добавьте код в пределах тэга <tr>.
Ваш код должен выглядеть примерно так:
<tr class="HeaderFrame" height="3px">
<!-- Row Two -->
<td colspan="2" style="height: 3px"><asp:Image ID="Image1" runat="server"
Height="3px" Width="100%" ImageUrl="~/Images/yellow.GIF" /></td>
</tr>
3. Третья строка тэга <table> должна содержать изображение сайта, текущее имя
сайта, и логотип, содержащийся в двух ячейках.
Добавьте код в пределах тэга <tr>.
<tr height="49px">
<!-- Row Three -->
<td><asp:HyperLink ID="HyperLink8" runat="Server"
NavigateUrl="~/default.aspx"><asp:Image ID="Image2" runat="server" Width="49px"
ImageUrl="~/Images/home.GIF" /></asp:HyperLink></td>
<td width="99%" class="HeaderCell" nowrap><font color="#000000">Adventure
Works</font><br /><span align="left" class="HeaderTitle">Home</span></td>
</tr>
13
4. Для четвертойстроки тэга <table> должен быть определён класс HeaderFrame.
Ячейка в должна отображать рисунок yellow.gif - изображение свысотой в 1
пиксель.
Добавьте код в пределах тэга <tr>.
Ваш код должен выглядеть примерно так:
<tr class="HeaderFrame" height="1px">
<!-- Row Four -->
<td colspan="2" style="height: 1px"><asp:Image ID="Image3" runat="server"
Height="1px" Width="100%" ImageUrl="~/Images/yellow.GIF" /></td>
</tr><tr height="99%">
<!-- Row Five -->
<td colspan="2" valign="top">
<asp:contentplaceholder ID="SiteContentPlaceHolder"
runat="server"></asp:contentplaceholder>
</td>
</tr>
5)
Просмотреть внешний вид
1. Чтобы сохранить файл AdWorks.master, выберите меню File, а затем кликните Save
AdWorks.master.
2. На инструментальной панели представления, размещенной в нижней левой стороне
Visual Studio, кликните кнопку Design.
Упражнение 2
Написание вложенной эталонной страницы
В этом упражнении, вы создадите вложенные эталонные страницы для домашней
страницы сайта компанииAdventure Works.
Сценарий
Каждый сайт отдела Adventure Works на внутренней сети должен:

Содержать подменю, которое связывает со страницами каждого отдела.

Иметь тот же вид и функциональность, как и другие сайты отдела Adventure
Works.
Чтобы достичь этих требований, вы решаете создать:

Вложеные эталонные страницы, которые используют разделы содержимого со
специфическим стилем для вывода меню.

Другой раздел содержимого предназначен для вывода содержимого страницы
содержимого, использующей эталонную.страницу
14
1)
Создание вложенной эталонной страницы
1. Выберите меню FileNew File
2. Выберите среди списка Master page.
3. Измените имя файла на AdWorksPage.master.
4. Выберите используемый язык программирования (C#).
5. Уберите галочку с Place code in separate file и нажмите Add
6. Удалите весь код, кроме представленного ниже:
<%@ master language="C#" %>
<script runat="server">
</script>
2)
Добавьте ссылку на master page AdWorks.master
Добавьте директиву masterpagefile:
<%@ master language="C#" masterpagefile="~/AdWorks.master"%>
3)
Создайте элементы управления разделов содержимого
1. Ниже тэга <script>, создайте контейнер содержимого, который ассоциируется с
разделом содержимого SiteContentPlaceHolder в эталонной странице AdWorks.master.
Ваш код должен выглядеть примерно так:<asp:Content ID="SiteContentPlaceHolder"
ContentPlaceHolderID="SiteContentPlaceHolder" runat="server">
</asp:Content>
2. Внутри тэга <content>, создайте таблицу с шириной и высотой 100 %.Эта таблица
должна иметь строку, состоящую из двух ячеек.
3. Для первой ячейки таблицы должен быть определён класс LightBlueTable с шириной
180 пикселей. Ячейка должна содержать внутри элемент <div> с атрибутом стиля
font-weight: bold и классом BulletStyle .
4. Вторая ячейка таблицы должна содержать внутри элемент <div> с классом
EditorZoneBody . Обе ячейки должны иметь атрибут valign=”top”.
Чтобы удовлетворить требование заинтересованной стороны касательно области
подменю, создайте соответствующий раздел содержимого для отображения
подменю. Тэг <div> в первой строке должен содержать элемент управления
ContentPlaceHolder с идентификатором MenuContentPlaceHolder.
<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
15
<td class="LightBlueTable" width="180px" valign="top">
<div style="font-weight: bold;" class="BulletStyle">
</div>
</td>
<td valign="top">
<div class="EditorZoneBody">
</div>
</td>
</tr>
</table>
5. Далее создайте соответствующий раздел содержимого для отображения подменю.
Тэг <div class=” EditorZoneBody ”> в первой строке должен содержать элемент
управления ContentPlaceHolder с идентификатором PageContentPlaceHolder.
Ваш код должен выглядеть примерно так:
<asp:contentplaceholder ID="PageContentPlaceHolder"
runat="server"></asp:contentplaceholder>
4)
Сохраните изменения
Упражнение 3
Создание страницы содержимого
Сценарий
Как конечная задача для этой фазы проекта сайта внутренней сети, вы и ваша группа
разработчиков Веб должна создать домашнюю страницу Adventure Works .
Чтобы гарантировать, что домашняя страница согласовывается с руководствами для
корпоративного объявления, вы допустите, что домашняя страница использует вложеного
master page AdWorksPage.master.
1)
Измените заданную по умолчанию страницу
1. В окне Solution Explorer дважды кликните на файле Default.aspx.
2. Удалите весь код ниже тега <script>.
3. Добавьте директиву masterpagefile с вложенной ссылкой на главную страницу
AdWorksPage.master. Выключите SmartNavigation.
Ваш код должен выглядеть примерно так:<%@ page language="C#"
masterpagefile="~/AdWorksPage.master"SmartNavigation=
”false” %>
16
<script runat="server">
</script>
4. Добавьте контейнер содержимого, ассоциированный с разделом
MenuContentPlaceHolder во вложенной эталонной странице AdWorksPage.master.
Создайте 7 элементов управления Hyperlink в контейнере
MenuContentPlaceHolder:
5.
 Home
 HR
 Accounting
 Legal
 Sales
 Training
 Expenses
Ваш код должен выглядеть примерно так:
<asp:content ID="MenuContentPlaceHolder"
ContentPlaceHolderID="MenuContentPlaceHolder" runat="server">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/default.aspx">
Home</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/hr.aspx">
HR</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/accounting.aspx">
Acounting</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/legal.aspx">
Legal</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/sales.aspx">
Sales</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/training.aspx">
Training</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/expenses.aspx">
Expenses</asp:HyperLink>
</asp:Content>
6. Добавьте контейнер содержимого, ассоциированный с разделом содержимого
PageContentPlaceHolder во вложенной эталонной странице AdWorksPage.master.
17
7. Создайте приветственное сообщение внутри контейнера содержимого
PageContentPlaceHolder.
<asp:content id="PageContentPlaceHolder"
ContentPlaceHolderId="PageContentPlaceHolder" runat="server">
Welcome<br />
This is the Adventure Works Home page.
</asp:Content>




Убедитесь в отсутствии ошибок.
Не забывайте сохранять ваши результаты.
Посмотрите результаты работы в браузере.
Это можно сделать, например, нажав правой кнопкой мыши по файлу
default.aspx и выбрать View in Browser.
Покажите результат преподавателю.
5. Содержание отчета
В отчете должны быть представлены:


Исходный код.
Результат выполненной работы в виде скриншотов.
18