Сообщество русскоговорящих пользователей
CMS DotNetNuke
   Вы здесь:  База знаний » Статья
24.12.2009 13:23:29, Administrator
Разработка шаблонов оформления (skins) для DNN 4 – Часть 3

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

Объекты контейнеров
Токен Элемент управления Описание
[ACTIONBUTTON] :ActionButton runat="server" id="dnnActionButton"> Кнопка, используемая в модуле для вызова определенных действий.
[CONTENTPANE] 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-класс для заголовка.

 

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

Шаблон оформления

Шаблон оформления

Приведенный шаблон оформления следует создать в любом визуальном редакторе, таком, как 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]  
<span class="OtherTabs">|span>
  
[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">
  
<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">
 
td>
<td vAlign="top" noWrap bgColor="#FFFFFF" width="61">
 
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">

td>
tr>
<tr>
<td vAlign="top" align="middle">

td>
<td vAlign="top" align="middle">
[CONTENTPANE]
td>
<td vAlign="top" align="middle">

td>
tr>
<tr>
<td vAlign="top" align="middle" colspan="3">

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]  
<span class="OtherTabs">|span>
  [TERMS]  
<span class="OtherTabs">|span>
  [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>SeparatorName>
<Value>CDATA>Value>
Setting>
Settings>
Object>
<Object>
<Token>Token>
<Settings>
<Setting>
<Name>IDName>
<Value>LeftPaneValue>
Setting>
Settings>
Object>
<Object>
<Token>Token>
<Settings>
<Setting>
<Name>IDName>
<Value>RightPaneValue>
Setting>
Settings>
Object>
<Object>
<Token>Token>
<Settings>
<Setting>
<Name>IDName>
<Value>TopPaneValue>
Setting>
Settings>
Object>
<Object>
<Token>Token>
<Settings>
<Setting>
<Name>IDName>
<Value>BottomPaneValue>
Setting>
Settings>
Object>
Objects>

 

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

Автор: В.В. Полубояров Источник: www.intuit.ru
powered by metaPost
print



rating
  Комментарии

Нет комментариев.

 
OpenedBorderBoxed Small width layoutMedium width layoutMaximum width layout Small textMedium textMaximum text