Академия Microsoft:

Введение в технологии создания Интернет-узлов
[+]
Волгоградский государственный университет
Опубликован: 02.03.2009 | Доступ: свободный | Студентов: 1519 / 187 | Оценка: 4.20 / 4.03 | Длительность: 16:55:00
Темы: Интернет-технологии, Программирование
Специальности: Разработчик интернет-проектов
Теги: .net, activex, asp, cgi, cms, content management, cookie, css, frontpage, html, ISAPI, javascript, microsoft word, skinning, баннер, браузеры, приложения, провайдеры, серверы, форматирование, цвета, шаблон оформления, шрифты, электронная почта, элементы
Лекция 14:

Разработка шаблонов оформления (skins) для DNN
A
|
версия для печати
< Лекция 13 || Лекция 14: 1234 || Лекция 15 >

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

Описание объектов контейнеров приведены в табл. 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.

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

Дальше >>
< Лекция 13 || Лекция 14: 1234 || Лекция 15 >

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

вопросов: 1
шамиль Сулипов
шамиль Сулипов
ответить