Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 31:

Стилевое оформление страниц

Наполнение содержимым контекстных страниц

Теперь необходимо скорректировать заготовки контекстных страниц Satellite?. Но прежде всего нужно завершить корректировку мастер-страницы Title.master, определив ссылки в левой ячейке таблицы на только что созданные контекстные страницы, чтобы они были на всех контекстных страницах как содержимое самого шаблона.

  • Выполните команду Window/Close All Documents, чтобы закрыть все редактируемые на текущий момент файлы
  • В панели Solution Explorer щелкните правой кнопкой мыши на файле ~/MasterPages/Title.master и выполните команду View Designer, чтобы открыть мастер-страницу сразу в режиме Design
  • Поочередно выделяя элементы гиперссылок, установите их свойство NavigateUrl на соответствующие контекстные страницы Satellite1.aspx, Satellite2.aspx, Satellite3.aspx, Satellite4.aspx. Сохраните и закройте мастер-страницу Title.master

Отредактируем страницы содержимого, начнем с Satellite.aspx.

  • В панели Solution Explorer назначьте страницу Satellite.aspx стартовой и откройте ее на редактирование в режиме Design

Что мы видим на данном этапе времени проектирования:

  1. Мы видим сквозь контекстную страницу просвечивающуюся мастер-страницу. Причем заполнители (элементы вне контейнеров-шаблонов) мастер-страницы просвечиваются тускло. Это говорит о том, что они находятся на нижнем слое и их редактирование недоступно из контекстной страницы, но тем не менее они полностью отобразятся и будут доступны на этапе выполнения.
  2. Места, где на мастер-странице расположены контейнеры-шаблоны, показаны ярко, но закрыты пустыми контейнерами контекста, сгенерированными оболочкой при создании контекстной страницы по готовым шаблонам. Причем закрыто только содержимое шаблонов мастер-страницы, а ее фон полность просвечивается.
  • Удалите в режиме Design командой контекстного меню Default to Master's Content все контейнеры контекста <asp:Content></asp:Content> из страницы Satellite.aspx

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

  • Убедитесь, что после удаления закрепленных блоков контекстной страницы проявился нижний слой - содержимое шаблонов мастер-страницы. Это содержимое и будет отображаться при выполнении на своих зарезервированных местах, если контекстная страница не имеет для них прикрепленных контейнеров с содержимым
  • Исполните страницу Satellite.aspx, получится ожидаемый результат

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

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

Приведем окончательный вариант дескрипторного кода для всех страниц данного примера:

Интерфейсный код мастер-страницы Title.master

Обратите внимание, что все контейнеры ContentPlaceHolder должны находиться внутри дескриптора <form></form>.

<%@ Master Language="C#" %>
    
<script runat="server">
    
</script>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center">
            &nbsp;<asp:Image ID="ImageBanner" runat="server" ImageUrl="~/MasterPages/Banner.png" /><br />
            &nbsp;<h1 style="color: green">
                Мы приветствуем Вас на нашем сайте!!!
            </h1>
            <table>
                <tr>
                    <td colspan="2">
                        <asp:Panel ID="Panel1" runat="server" BackImageUrl="~/MasterPages/BackTitle.jpg"
                            Height="100%">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                &nbsp;<div style="font-weight: bold; font-size: xx-large; color: red; text-align: center">
                                    Сведения об автошколе в целом</div>
                            </asp:ContentPlaceHolder>
                        </asp:Panel>
                    </td>
                </tr>
                <tr>
                    <td style="width: 25%; background-color: #9DFF7E">
                        <strong style="color: Blue">Наши филиалы:</strong><br />
                        <br />
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Satellite1.aspx">Ленинский район
                                </asp:HyperLink><br />
                        <br />
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Satellite2.aspx">Центральный район
                                </asp:HyperLink><br />
                        <br />
                        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Satellite3.aspx">Свердловский район
                                </asp:HyperLink><br />
                        <br />
                        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Satellite4.aspx">Октябрьский район
                                </asp:HyperLink>
                    </td>
                    <td style="background-color: #FFB8FF">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
    <p>Вот уже более 15 лет мы занимаемся подготовкой водителей
категории "B" в г.Красноярске и всегда занимали первые места
в сводках МРЭО ГИБДД по качеству обучения. Автошкола всегда нацелена
на успех наших клиентов в сдаче экзаменов ГАИ с первого раза
и своевременном получении водительского удостоверения.</p>
<p>Мы обеспечиваем максимальные удобства своим клиентам. Для
этого существуют вечерняя и воскресная формы обучения.
Наши курсанты имеют возможность бесплатно и неограниченно пользоваться
компьютерным классом. Учебные автомобили прибывают по заявке
клиента к назначенному им месту. Развивается сеть филиалов автошколы
в г.Красноярске.</p>
   <p> Наша компьютерная экзаменационная программа успешно используется
в ГИБДД г.Красноярска, Железногорска, Назарово, Емельяново, Шарыпово
для государственной аттестации кандидатов в водители. Мы неоднократно
выпускали цветные учебно-методические пособия по Правилам дорожного
движения, которыми постоянно пользуются большинство автошкол
города и края. </p>
   <p> Лекционные занятия в автошколе ведут квалифицированные преподаватели
с учеными степенями и званиями с применением современных компьютерных
технологий. Комплексный подход к обучению и разнообразие форм
позволяют максимально сократить усилия наших клиентов и сроки
усвоения ими учебного материала. Парк учебных автомобилей насчитывает
более 30 штук, включая иномарки.</p>
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr style="background-color: #FFFF92">
                    <td colspan="2">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                            <strong>Автошкола Диалог-Сервис в целом работает без перерыва на обед и выходных с 8
                                часов утра до 9 часов вечера!!! </strong>
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
            </table>
            <p style="text-align: right; color: Blue; font-family: 'Courier New'; font: bold italic">
                <img id="IMG1" runat="server" src="LIGHT.ICO" />
                &nbsp;Copyright &copy 2009
            </p>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
                <strong><em>Вы уж, пожалуйста, наведывайтесь к нам почаще!</em></strong>
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Запускающая контекстная страница Satellite.aspx

Все контейнеры <asp:Content> уничтожены, поэтому страница используется только как запускающая и не добавляет к мастер-странице своего содержимого. В ней осталась только строка с директивой @Page и привязкой к мастер-странице

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" 
    Title="Untitled Page" %>

Контекстная страница Satellite1.aspx

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

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Title.master" Title="Untitled Page" %>
  
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="font-weight: bold; font-size: xx-large; color: red; text-align: center">
        Сведения о филиале в Ленинском районе
    </div>
</asp:Content>
  
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    Филиал в Ленинском районе такой хороший!<br />
    ..........................<br />
    и т.д.
</asp:Content>
  
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
    <strong>Филиал в Ленинском районе работает без перерыва на обед и выходных с 8
        часов утра до 9 часов вечера!!! 
    </strong>
</asp:Content>
  
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
    <strong><em>Вы уж, пожалуйста, наведывайтесь к нам почаще в филиал Ленинского района!</em></strong>
</asp:Content>
Иван Циферблат
Иван Циферблат
Россия, Таганрог, 36, 2000