INTUIT.ru: Курс: Введение в технологии ..: Лекция №14: Разработка шаблонов оформления (skins) для DNN

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

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

Таблица 14.3. Объекты контейнеров
Токен	Элемент управления	Описание
[ACTIONBUTTON]	<dnn: ActionButton runat="server" id="dnnActionButton">	Кнопка, используемая в модуле для вызова определенных действий .
[CONTENTPANE]	<div runat="server" id="ContentPane">	Вставляет заполнитель для контента модулей .
[DROPDOWNACTIONS]	< dnn: DropDownActions runat="server" id="dnnDropDownActions">	Раскрывающийся список для выбора определенных действий в модуле .
[ICON]	< dnn: Icon runat="server" id="dnnIcon">	Отображает иконку, связанную с модулем .
[LINKACTIONS]	< dnn: LinkActions runat="server" id="dnnLinkActions">	Список ссылок на действия в модуле .
[SOLPARTACTIONS]	< dnn: SolPartActions runat="server" id="dnnSolPartActions">	Всплывающее меню действий с модулем .
[TITLE]	< dnn: Title runat="server" id="dnnTitle">	Отображает заголовок модуля .
[VISIBILITY]	< dnn: Visibility runat="server" id="dnnVisibility">	Отображает иконку, означающую, свернут модуль или развернут .

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

Токен	Атрибут	Значение по умолчанию	Описание
[ACTIONBUTTON]	CommandName		Тип предпринимаемого с модулем действия ( AddContent \| EditContent \| ContentOptions \| SyndicateModule \| ImportModule \| ExportModule \| OnlineHelp \| ModuleHelp \| HelpText \| PrintModule \| ModuleSettings \| DeleteModule \| ClearCache \| MoveTop \| MoveUp \| MoveDown \| MoveBottom \| MovePane \| MoveRoot )
	CssClass	CommandButton	CSS-класс для кнопки
	DisplayLink	True	Необходимость отображения локализованного текста команды ( True \| False )
	DisplayIcon	False	Необходимость отображения иконок для команд ( True \| False ) .
	IconFile		Файл, используемый в качестве иконки .
[CONTENTPANE]	ID	ContentPane	Ключевой идентификатор панели конента .
[ICON]	BorderWidth	0	Ширина границы вокруг иконки .
[TITLE]	CssClass	Head	CSS-класс для заголовка .

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

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

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

Рис. 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>

Пример 14.1. (html, txt)

Соответствующий файл атрибутов ( 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.

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

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

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

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

Вопросы и Ответы