Разработка шаблонов оформления (skins) для DNN

Публикация шаблона оформления

Для того чтобы шаблон оформления можно было просмотреть в Галерее шаблонов оформления (Skin Gallery), необходимо создать его высококачественную экранную копию, которая должна храниться в формате JPEG с расширением .jpg и иметь то же имя файла, что и шаблон оформления (например, если шаблон оформления называется skin.htm, то экранная копия должна называться skin.jpg ).

Упаковка шаблона оформления

Все файлы, относящиеся к шаблону оформления, упаковываются в ZIP -архив skin.zip, а файлы контейнера - в архив container.zip. Далее оба архива упаковываются в общий архив с требуемым названием. Это позволит установить шаблон оформления и соответствующие ему контейнеры при помощи единственного файла, используя инструмент Skin Uploader.

Создание контейнеров

Контейнеры являются определениями шаблонов оформления, которые применяются к модулям. Контейнер создается точно так же, как и шаблон оформления, за исключением используемого набора токенов. Единственным ограничением является то, что в контейнере должен содержаться элемент управления Actions. Этот элемент управления необходим для реализации функциональности модуля. Общие функции этого элемента заключаются в возможности редактировать настройки модуля и управления размещением модуля на панелях контента. Могут также реализовываться пользовательские функции, относящиеся например, к редактированию контента модуля. В DNN включен набор элементов управления типа Actions. Элемент управления по умолчанию - SolPartActions отвечает за всплывающее меню, которое появляется при наведении мыши на иконку в левом верхнем углу модуля. Этот элемент управления предназначен для современных браузеров. Для устаревших браузеров используется элемент управления DropDownActions, реализованный в виде раскрывающегося списка.

Несмотря на то, что шаблоны оформления и контейнеры создаются, упаковываются и распространяются независимо, дизайнер обычно создает их комбинацию, которая предназначена для совместной работы. Это реализовывается путем совместной закачки шаблона оформления и контейнера на сайт и применения их к пользовательскому интерфейсу. Чтобы упростить эту операцию и обеспечить высокий уровень модульности, используется концепция применения шаблонов оформления на уровне панелей контента. Использование шаблонов оформления для панелей может быть сконфигурировано только на этапе дизайна, при создании шаблона. Реализуется это путем использования пользовательских атрибутов, которые могут быть включены в разметку панели. Используются атрибуты ContainerType, ContainerName и ContainerSrc для идентификации контейнера, который будет использоваться для всех модулей, добавляемых на панель. В том случае, если указанный контейнер отсутствует, используется контейнер по умолчанию.

Пример определения контейнера для панели:

<Objects>
  <Object>
    <Token>[CONTENTPANE:1]</Token>
    <Settings>
      <Setting>
        <Name>ID</Name>
        <Value>LeftPane</Value>
      </Setting>
      <Setting>
        <Name>ContainerType</Name>
        <Value>G</Value>
      </Setting>
      <Setting>
        <Name>ContainerName</Name>
        <Value>DNN</Value>
      </Setting>
      <Setting>
        <Name>ContainerSrc</Name>
        <Value>standard.ascx</Value>
      </Setting>
    </Settings>
  </Object>
</Objects>

Загрузка шаблонов оформления

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

Объекты шаблонов оформления

Объекты шаблонов оформления приведены в табл. 14.1.

Атрибуты шаблонов оформления

Атрибуты шаблонов оформления, которые могут использоваться в файле skin.xml, приведены в табл.7.2

Объекты контейнеров

Описание объектов контейнеров приведены в табл. 14.3

Атрибуты объектов контейнеров

Практические задания

Разработка шаблона оформления

В данной лабораторной работе будет разработан шаблон оформления для DNN, приведенный на рис. 14.3.

Приведенный шаблон оформления следует создать в любом визуальном редакторе, таком, как MS Frontpage или MS Visual Studio. Можно использовать собственный дизайн шаблона. При создании шаблона можно использовать следующую HTML-разметку в качестве примера:

<table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" height="100%" border="0">
  <tr>
    <td valign="top">
    <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" border="0">
      <tr>
        <td background="tile_top.gif" valign="top" style="height: 10px">
        <img src="top_left.gif" height="10" width="10" border="0">
        </td>
        <td background="tile_top.gif" valign="top" align="right" colspan="2" style="height: 10px">
        <img src="top_right.gif" height="10" width="10" border="0">
        </td>
      </tr>
      <tr>
        <td valign="bottom" width="100%" colSpan="2">
        <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" border="0">
          <tr>
            <td vAlign="top" width="100%">
            <p dir="ltr">
              <img src="header_logo1.jpg" height="35" width="130" border="0">
            </p>
            </td>
            <td valign="top" nowrap width="181">
            <img src="header_metalbar_top.jpg" height="35" width="181" border="0">
            </td>
          </tr>
          <tr>
            <td colspan="2">
            <img src="header_logo2.jpg" height="13" width="243" border="0">
            </td>
          </tr>
        </table>
        </td>
        <td>
        <table style="BORDER-COLLAPSE: collapse" cellPadding="0" width="100%" border="0">
          <tr>
            <td valign="top" align="right" bgColor="#ffffff" colSpan="3">
            <img src="login_line_right.gif" height="10" width="60" border="0">
            </td>
          </tr>
          <tr>
            <td rowSpan="3">
            <img src="login_lefttop.gif" height="38" width="27" border="0">
            </td>
            <td background="tile_login_top.gif" height="7">
            <img src="spacer.gif" height="7" width="7" border="0">
            </td>
            <td rowSpan="3">
            <img src="login_righttop.gif" height="38" width="61" border="0">
            </td>
          </tr>
          <tr>
            <td noWrap bgColor="#000000" height="25">
            <p>
              <font color="#FFFFFF">
                [USER]nbsp;nbsp;
                <span class="OtherTabs">|</span>
                nbsp;nbsp;
                [LOGIN]
              </font>
            </p>
            </td>
          </tr>
          <tr>
            <td background="tile_login_bottom.gif" height="6">
            <img src="spacer.gif" height="6" width="6" border="0">
            </td>
          </tr>
        </table>
        </td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
  <td valign="top">
    <table style="BORDER-COLLAPSE: collapse" cellPadding="0" bgColor="#ae2726" border="0">
    <tr>
      <td background="tile_main.jpg" vAlign="top" width="100%">
        <img src="header_logo3.jpg" height="74" width="620" border="0">
      </td>
      <td align="right">
        <img src="header_right.jpg" height="74" width="61" border="0">
      </td>
    </tr>
   </table>
   </td>
  </tr>
  <tr>
    <td valign="top">
    <table style="BORDER-COLLAPSE: collapse" cellPadding="0" width="100%" bgColor="#000000" border="0">
      <tr>
        <td vAlign="top" noWrap width="369">
        <img src="menu_left.jpg" height="40" width="369" border="0">
        </td>
        <td background="tile_menu.jpg" nowrap width="100%">
        <font color="#FFFFFF">
          [SOLPARTMENU]
        </font>
        </td>
        <td vAlign="top" noWrap width="61">
        <img src="menu_right.jpg" height="40" width="61" border="0">
        </td>
      </tr>
      <tr>
        <td vAlign="top" noWrap width="369">
        <img src="breadcrumbs_left.jpg" height="33" width="369" border="0">
        </td>
        <td width="100%" nowrap bgColor="#000000">
        <font color="#FFFFFF">
          [BREADCRUMB]
        </font>
        </td>
        <td vAlign="top" noWrap width="61">
        <img src="breadcrumbs_right.jpg" height="33" width="61" border="0">
        </td>
      </tr>
      <tr>
        <td vAlign="top" noWrap bgColor="#FFFFFF" width="369">
        nbsp;nbsp;
        <a href="/default.aspx?tabid=125">
          <img src="download.gif" height="32" width="191" border="0" alt="Download the Code!">
        </a>
        </td>
        <td width="100%" nowrap bgColor="#FFFFFF">
        nbsp;
        </td>
        <td vAlign="top" noWrap bgColor="#FFFFFF" width="61">
        nbsp;
        </td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td height="100%" valign="top">
    <table style="BORDER-COLLAPSE: collapse" cellPadding="0" width="100%" border="0">
      <tr>
        <td vAlign="top" align="middle" colspan="3">
        [CONTENTPANE:3]
        </td>
      </tr>
      <tr>
        <td vAlign="top" align="middle">
        [CONTENTPANE:1]
        </td>
        <td vAlign="top" align="middle">
        [CONTENTPANE]
        </td>
        <td vAlign="top" align="middle">
        [CONTENTPANE:2]
        </td>
      </tr>
      <tr>
        <td vAlign="top" align="middle" colspan="3">
        [CONTENTPANE:4]
        </td>
      </tr>
    </table> <br/>
    </td>
  </tr>
  <tr>
    <td vAlign="bottom">
    <table style="BORDER-COLLAPSE: collapse" cellPadding="0" width="100%" border="0">
      <tr>
        <td align="middle" bgColor="#000000" colSpan="3" height="25">
        <font color="#FFFFFF">
          [LINKS]
        </font>
        </td>
      </tr>
      <tr>
        <td background="tile_footer.jpg" align="middle" colSpan="3" height="25">
        <font color="#FFFFFF">[HOSTNAME]nbsp;nbsp;
          <span class="OtherTabs">|</span>
          nbsp;nbsp;[TERMS]nbsp;nbsp;
          <span class="OtherTabs">|</span>
          nbsp;nbsp;[PRIVACY]
        </font>
        </td>
      </tr>
      <tr>
        <td background="tile_body_bottom.jpg" vAlign="top" align="left">
        <img src="body_corner_left_bottom.jpg" height="26" width="20" border="0">
        </td>
        <td background="tile_body_bottom.jpg" align="middle">
        <font color="#000000">[DOTNETNUKE]</font>
        </td>
        <td background="tile_body_bottom.jpg" vAlign="top" align="right">
        <img src="body_corner_right_bottom.jpg" height="26" width="20" border="0">
        </td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Соответствующий файл атрибутов ( skin.xml ):

<Objects>
  <Object>
    <Token>[LINKS]</Token>
    <Settings>
      <Setting>
        <Name>Separator</Name>
        <Value><![CDATA[nbsp;nbsp;|nbsp;nbsp;]]></Value>
      </Setting>
    </Settings>
  </Object>
  <Object>
    <Token>[CONTENTPANE:1]</Token>
    <Settings>
      <Setting>
        <Name>ID</Name>
        <Value>LeftPane</Value>
      </Setting>
    </Settings>
  </Object>
  <Object>
    <Token>[CONTENTPANE:2]</Token>
    <Settings>
      <Setting>
        <Name>ID</Name>
        <Value>RightPane</Value>
      </Setting>
    </Settings>
  </Object>
  <Object>
    <Token>[CONTENTPANE:3]</Token>
    <Settings>
      <Setting>
        <Name>ID</Name>
        <Value>TopPane</Value>
      </Setting>
    </Settings>
  </Object>
  <Object>
    <Token>[CONTENTPANE:4]</Token>
    <Settings>
      <Setting>
        <Name>ID</Name>
        <Value>BottomPane</Value>
      </Setting>
    </Settings>
  </Object>
</Objects>

Созданный HTML-файл, использованные в нем графические файлы, а также файл skin.xml следует упаковать в архив skin.zip.

Разработка контейнера

Далее следует создать контейнер, соответствующий шаблону оформления (рис. 14.4).

В качестве примера можно использовать следующую HTML-разметку:

<table style="BORDER-COLLAPSE: collapse" cellPadding="0" width="100%" border="0">
  <tr>
    <tr vAlign="top" noWrap align="middle" colSpan="9">
    <img src="spacer.gif" height="15" width="1" border="0">
    </td>
  </tr>
  <tr>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
    <td vAlign="top" noWrap width="20" colspan="2">
    <img src="body_corner_left.jpg" height="42" width="20" border="0">
    </td>
    <td background="tile_body_top.jpg" align="middle" noWrap>
    [SOLPARTACTIONS]
    </td>
    <td background="tile_body_top.jpg" align="middle" width="100%" nowrap>
    [TITLE]
    </td>
    <td background="tile_body_top.jpg" align="middle" noWrap>
    [VISIBILITY]
    </td>
    <td vAlign="top" noWrap align="right" width="20" colspan="2">
    <img src="body_corner_right.jpg" height="42" width="20" border="0">
    </td>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
  </tr>
  <tr>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
    <td vAlign="top" noWrap width="1" bgColor="#c0c0c0">
    <img src="spacer.gif" height="1" width="1" border="0">
    </td>
    <td vAlign="top" noWrap width="19">
    nbsp;
    </td>
    <td colspan="3" align="middle">
    <br/>[CONTENTPANE]
    </td>
    <td vAlign="top" noWrap width="19">
    nbsp;
    </td>
    <td vAlign="top" noWrap width="1" bgColor="#c0c0c0">
    <img src="spacer.gif" height="1" width="1" border="0">
    </td>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
  </tr>
  <tr>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
    <td vAlign="top" noWrap width="1" bgColor="#c0c0c0">
    <img src="spacer.gif" height="1" width="1" border="0">
    </td>
    <td colspan="5">
    nbsp;
    </td>
    <td vAlign="top" noWrap width="1" bgColor="#c0c0c0">
    <img src="spacer.gif" height="1" width="1" border="0">
    </td>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
  </tr>
  <tr>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif" height="1" width="10" border="0">
    </td>
    <td vAlign="top" noWrap width="20" colspan="2">
    <img src="body_corner_left_bottom.jpg" height="26" width="20" border="0">
    </td>
    <td background="tile_body_bottom.jpg" colspan="3" align="right">
    [PRINTMODULE]
    </td>
    <td vAlign="top" noWrap align="right" width="20" colspan="2">
    <img src="body_corner_right_bottom.jpg" height="26" width="20" border="0">
    </td>
    <td vAlign="top" noWrap width="10">
    <img src="spacer.gif"height="1" width="10" border="0">
    </td>
  </tr>
</table>

После создания контейнера соответствующий HTML-код и графику следует упаковать в архив container.zip.

Контрольные вопросы