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

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

Для того чтобы шаблон оформления можно было просмотреть в Галерее шаблонов оформления (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></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.

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

Объекты шаблонов оформления
Токен Элемент управления Описание
[BANNER] < dnn:Banner runat="server" id="dnnBanner"> Отображает случайный рекламный баннер.
[BREADCRUMB] < dnn:Breadcrumb runat="server" id="dnnBreadcrumb"> Отображает путь к выбранной странице в виде Название страницы1 > Название страницы2 > Название страницы3
[CONTENTPANE] <div runat="server" id="ContentPane"> Добавляет заполнитель для контента модуля.
[COPYRIGHT] < dnn:Copyright runat="server" id="dnnCopyright"> Отображение информации о правах интеллектуальной собственности (Copyright).
[CURRENTDATE] < dnn:CurrentDate runat="server" id="dnnCurrentDate"> Отображает текущую дату.
[DOTNETNUKE] < dnn:DotNetNuke runat="server" id="dnnDotnetNuke"> Отображение информации о правах интеллектуальной собственности DNN.
[HELP] < dnn:Help runat="server" id="dnnHelp"> Отображает ссылку с просьбой о помощи. При ее выборе у клиента открывается почтовый клиент с заполненным электронным адресом администратора портала DNN.
[HOSTNAME] < dnn:HostName runat="server" id="dnnHostName"> Отображает заголовок узла, связанный с URL узла.
[LANGUAGE] <dnn:Language runat="server" id="dnnLanguage" /> Отображает раскрывающийся список, позволяющий выбрать используемый язык.
[LINKS] < dnn:Links runat="server" id="dnnLinks"> Отображает плоское меню ссылок, связанное с текущей страницей и родительским узлом. Полезно для поисковых машин.
[LOGIN] < dnn:Login runat="server" id="dnnLogin"> Элемент управления с двумя состояниями. Отображает "Вход" для анонимных пользователей и "Выход" для аутентифицированных.
[LOGO] < dnn:Logo runat="server" id="dnnLogo"> Отображает логотип портала.
[PRIVACY] < dnn:Privacy runat="server" id="dnnPrivacy"> Выводит ссылку на страницу о собственнике портала.
[SEARCH] < dnn:Search runat="server" id="dnnSearch"> Отображает строку поиска по порталу.
[SIGNIN] < dnn:Signin runat="server" id="dnnSignin"> Отображает элемент управления, предназначенный для ввода имени пользователя и пароля.
[SOLPARTMENU] < dnn:SolPartMenu runat="server" id="dnnSolPartMenu"> Отображает иерархическое навигационное меню.
[TERMS] < dnn:Terms runat="server" id="dnnTerms"> Выводит ссылку на соглашение об использовании портала.
[TREEVIEWMENU] < dnn:TreeViewMenu runat="server" id="dnnTreeViewMenu"> Отображает иерархическое навигационное меню с использованием элемента управления Treeview.
[USER] < dnn:User runat="server" id="dnnUser"> Элемент управления с двумя состояниями. Отображает "Регистрация" для анонимных пользователей и имя пользователя для аутентифицированных.

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

Атрибуты шаблона оформления
Токен Атрибут Значение по умолчанию Описание
[BANNER] BorderWidth 0 Ширина границы вокруг баннера
[BREADCRUMB] Separator breadcrumb.gif Разделитель между ссылками в меню. Может включать ссылки на пользовательские изображения, текст или HTML (например, <!CDATA[&nbsp;<img src="file.gif">&nbsp;]>)
  CssClass SelectedTab Имя таблицы стилей для ссылок в меню.
  RootLevel 1 Корневой уровень отображения ссылок в меню. Возможные значения: "-1" - отображает слово "Root" и далее - все ссылки на страницы; "0" - отображает все ссылки; "n" - отображает n>0 ссылок на страницы перед текущей.
[CONTENTPANE] ID ContentPane Идентификатор панели контента, которая будет отображаться в пользовательском интерфейсе и храниться в БД.
[COPYRIGHT] CssClass SelectedTab Имя таблицы стилей для ссылки на страницу с информацией о правах интеллектуальной собственности.
[CURRENTDATE] CssClass SelectedTab Имя таблицы стилей для ссылки для отображения текущей даты.
  DateFormat MMMM dd, yyyy Формат текущей даты.
[DOTNETNUKE] CssClass Normal Имя таблицы стилей для ссылки на страницу с информацией о правах интеллектуальной собственности DNN.
[HELP] CssClass OtherTabs Имя таблицы стилей для ссылки на помощь.
[HOSTNAME] CssClass OtherTabs Имя таблицы стилей ссылки Host (Powered By xxxxxxxxx)
[LANGUAGE] CssClass   Имя таблицы стилей для раскрывающегося списка выбора языка.
[LINKS] CssClass CommandButton Имя таблицы стилей для ссылок.
  Separator &nbsp;&nbsp; Разделитель между ссылками. Может включать ссылки на пользовательские изображения, текст или HTML (например, <!CDATA[&nbsp;<img src="file.gif">&nbsp;]>)
  Alignment Horizontal Стиль меню "Ссылки" ("Horizontal" или "Vertical")
  Level Same Определяет отображаемый уровень меню ("Same" - тот же, "Child" - дочерний, "Parent" - родительский, "Root" - корневой)
[LOGIN] Text Login Текст ссылки "Вход".
  CssClass OtherTabs Имя таблицы стилей для ссылки "Вход".
  LogoffText Logoff Текст ссылки "Выход".
[LOGO] BorderWidth 0 Ширина границы вокруг логотипа сайта.
[PRIVACY] Text Privacy Statement Текст ссылки о собственнике портала.
  CssClass OtherTabs Имя таблицы стилей для ссылки о собственнике портала.
[SEARCH] Submit Submit HTML-разметка для активации поиска (например, "Найти" или <img src="mybutton.gif">
  CssClass   Имя таблицы стилей для элемента управления "Поиск".
[SOLPARTMENU] separatecss true Использовать CSS, определенный в таблице стилей (true, false).
  backcolor #333333 Цвет фона.
  forecolor white Цвет элемента меню.
  highlightcolor white Цвет левой и верхней границы, дающий эффект подсвечивания.
  iconbackgroundcolor #333333 Цвет фона в области отображения иконки.
  selectedbordercolor   Цвет границы, окружающий выбранный элемент меню.
  selectedcolor #CCCCCC Цвет фона выбранного элемента меню.
  selectedforecolor white Цвет выбранного элемента меню.
  display horizontal Способ отображения элементов меню (vertical, horizontal).
  menubarheight 16 Высота прямоугольника меню в пикселях.
  menuborderwidth 1 Ширина границы меню в пикселях.
  menuitemheight 21 Высота элемента меню в пикселях.
  forcedownlevel false Полное отображение вложенных пунктов меню.
  moveable false Возможность перемещения меню.
  iconwidth 0 Ширина колонки с иконкой в пикселях.
  menueffectsshadowcolor dimgray Цвет тени.
  menueffectsmouseouthidedelay 500 Количество миллисекунд анимации эффекта сворачивания меню (0-отключить).
  mouseouthidedelay 1 Количество миллисекунд ожидания, после которого меню сворачивается при уводе мыши с него (0-отключить).
  menueffectsmouseoverdisplay Highlight Настройка визуального эффекта при наведении мыши на элемент меню (Outset - Выдвигание, Highlight - Подсветка, None - Нет).
  menueffectsmouseoverexpand true Задает необходимость разворачивания меню при наведении на него мыши.
  fontnames Arial Шрифт
  fontsize 12 Размер шрифта
  fontbold false Жирность шрифта
  menueffectsshadowstrength 3 Ширина эффекта "тень" в пикселях.
  menueffectsmenutransition None Способ исчезания тени (Значения: None, AlphaFade, AlphaFadeBottomRight, Barn, Blinds, Checkerboard, ConstantWave, Fade, GradientWipe, Inset, Iris, RadialWipe, Random, RandomBars, Slide, Spiral, Stretch, Strips, Wave, Wheel, Zigzag).
  menueffectsmenutransitionlength 0.3 Количество миллисекунд, требуемое на преобразование.
  menueffectsshadowdirection Lower Right Направление, в котором будет исчезать тень (Значения: None, Top, Upper Right, Right, Lower Right, Bottom, Lower Left, Left, Upper Left).
  menucontainercssclass MainMenu_MenuContainer CSS-класс для контейнера меню.
  menubarcssclass MainMenu_MenuBar CSS-класс для прямоугольника меню.
  menuitemcssclass MainMenu_MenuItem CSS-класс для элемента меню.
  menuiconcssclass MainMenu_MenuIcon CSS-класс для иконки меню.
  menuitemselcssclass MainMenu_MenuItemSel CSS-класс для элемента меню, на который наведена мышь.
  menubreakcssclass MainMenu_MenuBreak CSS-класс для разрыва в меню.
  submenucssclass MainMenu_SubMenu CSS-класс для подменю.
  menuarrowcssclass MainMenu_MenuArrow CSS-класс для стрелки в меню.
… остальные атрибуты элемента [SOLPARTMENU] описаны в документации по DNN.
[TERMS] Text Terms of Use Текст ссылки соглашения об использовании.
  CssClass OtherTabs CSS-класс для ссылки соглашения об использовании.
[USER] Text Register Текст ссылки "Регистрация"
  CssClass OtherTabs CSS-класс для ссылки "Регистрация".

 

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



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

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

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