Сообщество русскоговорящих пользователей
CMS DotNetNuke
   Вы здесь:  База знаний » Статья
17.11.2009 9:20:01, Administrator
Создание скинов

Создаем свои шкурки в DotNetNuke.

Шкурка (Skin)

Панели.

Стандартные элементы..

Планировка дизайна.

Прежде чем начать.

Создаем панели.

Что у нас вышло?.

Украшаем шкурку.

Обработка нюковских элементов.

Настройка меню..

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

Стандартные элементы контейнеров.

Сборка и упаковка.

 

Мы не будем особо углубляться в веб-дизайн и ограничимся лишь поверхностными объяснениями теории украшения сайта.

Главной-же нашей задачей будет создание собственных шкурок, так как то что вы найдёте бесплатно в сети, никогда вас не устроит, а платные стоят очень дорого. Если вы обделены дизайнерскими способностями и художественным даром подборки цветов, не отчаивайтесь, в этом случае тоже бывают выходы из положения, и некоторые из них мы вам покажем.

Вы должны уже быть знакомы с языком раметки HTML, а также иметь базовые знания работы со стилями - CSS. В принципе, - это всё что нам нужно. Программировать за нас будет сам DotNetNuke.

 

Шкурка (Skin)

Шкурка состоит из HTML и CSS.

HTML располагает элементы на странице, тогда как CSS заставляет принимать эти элементы тот или иной вид и цвет.

На рисунке приведена главная страница сайта.

Здесь мы легко можем различить отдельные составляющие элементы: логотип, меню, поиск, итд.

Можно также заметить различные зоны самой страницы или панели, в которых находятся основные элементы.

При установке нового портала, по умолчанию также устанавливается шкурка DotNetNuke. Во время написания данной статьи, шкуркой по умолчанию в установочном пакете была MinimalExtropy. К последней лучше не притрагиваться, так она является основной и единственной до тех пор, пока вы не установили дополнительных шкурок, а также служит резервной копией для тех случаев, если вдруг произойдет сбой в работе портала. По этой причине никогда не стоит эксперементировать с этой шкуркой, если вдруг вы решили что вас что либо в ней не устраивает. Лучше создать свою собственную шкурку, чем мы сейчас и займемся.

 

Панели

Обычная веб-страница может быть разбита на определенные зоны состоящие из слоев, клеток, колонок, итп. Для удобства навигации, элементы страницы такие как кнопки, поля, текст, меню и прочее расставляются по этим зонам, четко следуя нашей планировке.

Например, мы создали страницу состоящую из 5-ти зон: верхняя панель, левая, правая, средняя и нижняя. В верхнюю мы поместим логотип, в левую - меню, в правую - рекламу, в середину - текст, а внизу поставим копирайт.

Шкурка в DotNetNuke действует точно таким-же образом. Для наглядного примера, зайдите на свой сайт с администраторскими правами, далее, перйдите на главную страницу. В административной панели сверху, перейдите в режим планировки – Layout.

Вы заметите, что вам стали видны все зоны шкурки. Таким образом легче сориентироваться в размещении объектов на странице.

Система шкурок в DotNetNuke очень пластична и позволяет создать любой, даже самый сложный дизайн страницы, но самое главное - у вас есть прекрасная возможность расставлять элементы(модули) так, как вам вздумается.

Стандартная шкурка DotNetNuke состоит из зон, называемых панелями.

Вот список основных панелей:

  • [TopPane] - Верхняя панель
  • [LeftPane] - Левая панель
  • [ContentPane] - Средняя или главная панель
  • [RightPane] - Правая панель
  • [BottomPane] - Нижняя панель

При создании вами шкурки, эти основные 5 панелей должны присутствовать всегда!

Они не обязательно должны быть использованы вами, и также не будут видны в случае невостребованности, но если вдруг у вас на странице использовалась всего одна колонка, а вы решили добавить еще 2 по бокам, то вы легко сможете это сделать, заполнив пустые панели которые всегда окажутся под рукой, дополнительными модулями. Следовательно, не придется переделывать шкурку.

 

Стандартные элементы

Помимо панелей и модулей, в шкурках также присутствуют дополнительные элементы, назовём их условно - стандартными.

Стандартные элементы - это модули, которые являются неотъемлемой частью порталов DotNetNuke.

Вот наиболее часто используемые из них:

  • LOGO
  • BANNER
  • SEARCH
  • LANGUAGE
  • CURRENTDATE
  • BREADCRUMB
  • USER
  • LOGIN
  • MENU
  • COPYRIGHT
  • TERMS
  • PRIVACY

Планировка дизайна

После краткого ознакомления со шкурками и присущими им элементами, перейдем к главной задаче - планировке дизайна.

Независимо от того, как бы вы хотели чтобы выглядел ваш сайт, начинать нужно всегда с основы, или скелета.

Скелет нюковской шкурки состоит из 5-ти основных панелей, с которыми мы уже познакомились выше.

Вспомните скелет шкурки по умолчанию, которую вы видели в режиме планировки(LAYOUT).

Именно так и в таком порядке должны быть расставлены главные панели. Но метод расстановки к которому вы прибегните не имеет особого значения, т.е. вы можете использовать HTML таблицы или же прибегнуть только к стилям CSS, а можете скомбинировать эти 2 методики.

Когда скелет готов, тогда можно переходить к добавлению стандартных элементов или нюковских модулей, разукрасить шкурку и придать ее элементам особую форму, а затем собрать всё в единый установочный пакет.

О том как это сделать, мы объясним ниже.

 

Прежде чем начать

Вы никогда не должны эксперементировать в живую со своим основным рабочим сайтом, поэтому у вас в локалке должен быть установлен тестовый сайт.

Зайдите в папку с сайтом, и откройте файл [НазваниеСайта].sln в Visual Studio или в его бесплатном аналоге - Express.

В Solution Explorer, разворачиваем папки: ~/Portal/_default/Skins.

В папке Skins создаем новую папку, и называем её названием своей будущей шкурки.

Затем, в созданной нами папке создаем 2 новых файла: Skin.css и Skin.htm. Как вы уже успели догадаться, файл Skin.css будет содержать стили присущие будущей шкурке, когда как файл Skin.htm станет нашим рабочим файлом.

 

Создаем панели

Сейчас нам нужно будет открыть файл Skin.htm и стереть всё что в нём есть.

Этот файл, несмотря на своё расширение (HTM) не является простой веб-страницей; это наш рабочий шаблон, который в будущем будет интерпретирован для создания полноценной шкурки.

Нашей первой задачей будет создание скелета из главных панелей. О самом расположении панелей мы уже говорили, но способов добиться нужного результата очень много и здесь всё будет зависеть от сложности самой шкурки.

Что если вы не художник и не дизайнер?

Тогда можно воспользоваться готовыми идеями и макетами.

Можно найти в сети понравившийся вам дизайн какого-либо сайта и перенять опыт. Для этого, зайдя на одну из страниц сайта, нужно будет ее сохранить на жесткий диск. К примеру, в FireFox можно сделать так: File>Save Page As...>[Web Page Complete]. Таким образом вы сохраните не только страницу html, но из все файлы имеющие к ней непосредственное отношение(графика, стили и скрипты).

Однако, надо заметить что навигатор не всегда сможет выполнить свою задачу на 100%, так как всё зависит от сложности самой страницы. Поэтому мы вас советуем прибегнуть к специальному ПО - качалки сайтов. Одна из таких качалок, которая проста, удобна и к тому-же совершенно бесплатна - HTTrack Website Copier. Скачать можно здесь: http://www.httrack.com/.

Главные панели являются обычными объектами HTML, с той лишь разницей, что каждому приписан ID и атрибут runat="server".

Предположим, что вы решили создать панели из элементов DIV. Тогда это будет выглядеть таким образом:

<div id="TopPane" runat="server">div>

Учтите, что идентификатор(ID) регистрозависим.

Вот список идентификаторов: TopPane, LeftPane, ContentPane, RightPane, BottomPane.

Когда скелет готов, можно заняться расстановкой дополнительных элементов, или как мы их назвали раннее - стандартными нюковскими.

Нюковские панели составляющие скелет служат для вмещения модулей при заполнении уже готового сайта содержимым. Поэтому мы оставляем их пустыми при создании шкурки.

Для всего прочего, можно создать дополнительные панели и разбросать их по странице как вам вздумается. Такие панели послужат нам для вмещения стандартных нюковских элементов, таких как: меню, число и дата, поиск, логотип, итд.

Вставить подобные элементы проще простого.

Делается это так:

Выбираем место, куда хотим вставить нюковский элемент и записываем его название, большими буквами, в квадратных скобках.

Пример:

<table>
<tr>
<td>
[LOGO]td>
<td>
[BANNER]td>
tr>
table>
<table class="MenuContainer">
<tr>
<td>
[NAV]td>
<td align="right">
[SEARCH][LANGUAGE]td>
tr>
table>

Здесь мы вставили: логотип, баннер, меню, поиск и язык. Список дополнительных элементов называемых TOKENS может быть найден на сайте http://dotnetnuke.com.

 

Что у нас вышло?

До того как перейти к украшению шкурки цветами и рисунками стоит прикинуть как всё это будет выглядеть, а заодно и проверить нашу работу. Для этого мы наденем нашу новую шкурку на тестовый сайт.

Заходим на сайт с администраторскими правами.

Admin>Skins.

Перед нами список имеющихся шкурок. До этого здесь была единственная шкурка которая была установлена по умолчанию. Теперь в списке присутствует и наша шкурка - ее название, так как она не совсем готова.

Выбираем из списка нашу шкурку, затем, внизу страницы нажимаем Parse Skin Package. Это для того, чтобы DotNetNuke создал полноценную шкурку из нашего шаблона.

Шкурка готова, и в папке Skins>[Наша_Шкурка] появился новый файл с расширением ASCX.

Теперь нужно одеть сайт в новую шкурку. Нажимаем на Apply.

Убедитесь в том, что всё стоит по местам. Если всё в порядке, можно переходить к следующему этапу - украшению.

Можете вернуться к прежней шкурке, выбрав ее из списка и нажав Apply. Готовую шкурку парсить(PARSE) не нужно! Парсить надо только шаблон, после каждой его обработки.

Если на данном этапе произошел сбой

Если после того, как вы применили новую шкурку, в которой были страшные глюки, у вас исчезли все кнопки и панели и пользоваться сайтом стало невозможно, не переживайте. Всё что надо сделать, это переименовать папку с глючной шкуркой, тогда DotNetNuke не найдет её и применит шкурку по умолчанию.

 

Украшаем шкурку

Итак, после того как все элементы расставлены по своим местам, можно перейти к украшению шкурки. Её можно разукрасить различными цветами, а также графикой - картинка заднего плана, закругленные углы, итп. Идеи можно найти в сети, и мы приведём кое-какие ссылки в конце статьи.

Все стили помещаем в файл Skin.css, а к нужным элементам на шаблонной странице - Skin.htm, добавляем аттрибут class.

Пример:

Skin.htm

<table class="MenuContainer">

Skin.css

.MenuContainer
{
background-color:#dddddd;
width:100%;
}

 

Обработка нюковских элементов

Мы навели относительный порядок со шкуркой. Однако, пока еще не всё идеально. Нюковские элементы могут вести себя не так, как хотелось-бы.

У каждого такого элемента есть свои настройки и сейчас пора ими заняться. Для этих целей, создаем в папке с нашей шкуркой новый файл: Skin.xml.

Сотрите всё что видите в этом файле.

Теперь, на совершенно чистой странице Skin.xml создаем коренную ветвь с объектами, называемую Objects.

Каждый нюковский элемент в шкурке называется объектом(Object) , и имеет своё обозначение(Token) и настройки(Settings).

Обратите внимание на объект с поиском. По умолчанию, он состоит из 2-х радио-кнопок (Site/Web), пустого поля и кнопки Search.

Допустим, вы хотите его немного переделать. Уберем к примеру радио-кнопки, и переименуем кнопку поиска.

<Objects>
<Object>
<Token>[SEARCH]Token>
<Settings>
<Setting>
<Name>showWebName>
<Value>FalseValue>
Setting>
<Setting>
<Name>ShowSiteName>
<Value>FalseValue>
Setting>
<Setting>
<Name>SubmitName>
<Value>FindValue>
Setting>
Settings>
Object>
Objects>

Теперь зайдите на свой сайт, выберите вашу шкурку, нажмите на Parse Skin Package, затем на Apply и полюбуйтесь на результат.

Что касается стилей CSS

Нюковские объекты уже настроены на использование определенного класса стилей, название которому - SkinObject.

Поэтому, в файле Skin.css создайте класс SkinObject и отполируйте его по вашему усмотрению. Заметьте, что не надо приписывать атрибут class нюковским объектам в файле htm!


Настройка меню

На момент написание данной статьи, наиболее распространенным провайдером для меню сайта является - SolPartMenu.

Однако, этот провайдер хоть и делает своё дело, но морально устарел. Рекомендуется использовать наиболее новый и продвинутый провайдер - DNNMenuNavigationProvider.

Провайдер по умолчанию прописан в файле web.config. Чтобы его изменить в соответсвии с нашей шкуркой, мы добавим кое-что в файл Skin.xml.

<Object>
<Token>[NAV]Token>
<Settings>
<Setting>
<Name>ProviderNameName>
<Value>DNNMenuNavigationProviderValue>
Setting>
Settings>
Object>

Меню состоит из основных элементов и под-элементов. Пока мы ничего не настроили, наше меню прозрачно и ничем не примечательно. Всё это можно исправить, задав стили CSS.

Итак, сейчас нам понадобятся файлы: Skin.css и Skin.xml.

Открываем файл Skin.xml. В узле объекта нашего меню, создаем дополнительные настройки(Settings), где указываем название стиль, который должен быть задействован в отображении.

Это пример настройки нашего меню:

<Setting>
<Name>CSSContainerSubName>
<Value>Main_DNNMenu_ContainerSubValue>
Setting>
<Setting>
<Name>CSSNodeRootName>
<Value>Main_DNNMenu_NodeRootValue>
Setting>
<Setting>
<Name>CSSNodeHoverName>
<Value>Main_DNNMenu_NodeHoverValue>
Setting>

Дальше, мы создадим классы стилей в файле Skin.css: Main_DNNMenu_ContainerSub, Main_DNNMenu_NodeRoot, Main_DNNMenu_NodeHover соответственно.

Классы со стилями вы заполните по вашему вкусу. А дополнительные настройки меню найдете на сайте http://dotnetnuke.com

 

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

Если вы раньше уже имели дело со скинами(шкурками), то знаете что такое контейнеры. Контейнеры - это такие коробочки, квадратные, с закругленными краями, без бордюров, с фоновом светом, без фона... Будет легче взглянуть на картинку:

Сейчас, мы точно-также, как когда-то было со шкурками, создадим новую папку для контейнеров.

В Visual Studio, в Solution Explorer, переходим сюда: ~/Portals/_default/Containers

Создаем новую папку и называем ее именем нашей шкурки.

Дальше, как и в случае со шкуркой, создаем в новой папке 3 файла: Container.htm, Container.css и Container.xml

Не обязательно называть их Container, это так, для простоты объяснения.

 

Стандартные элементы контейнеров

У контейнеров, также как и у шкурок есть свои нюковские причиндалы. Вот их список:

Actions

Title

Icon

 

Visibility

ContentPane

 

LINKACTIONS
PRINTMODULE

ACTIONBUTTON

В принципе, выше-перечисленные элементы не требуют дополнительного описания. А вставляются они точно таким-же образом как и элементы шкурки - большими буквами в квадратных скобках. Небольшое исключение составляют лишь ACTIONBUTTON, но это потому, что их много и каждой из них следует присвоить номерок. Вот как это делается.

Container.htm

<td>td>
<td>td>
<td>td>

 

Container.xml

<Objects>
<Object>
<Token>Token>
<Settings>
<Setting>
<Name>CommandNameName>
<Value>AddContent.ActionValue>
Setting>
<Setting>
<Name>DisplayIconName>
<Value>TrueValue>
Setting>
<Setting>
<Name>DisplayLinkName>
<Value>TrueValue>
Setting>
Settings>
Object>
<Object>
<Token>Token>


Значения элементов типа ACTIONBUTTON:

  • AddContent.Action
  • SyndicateModule.Action
  • PrintModule.Action
  • ModuleSettings.Action
  • ModuleHelp.Action

Осталось начертить планировку контейнера и расставить элементы по местам.

Вот пример готового файла Container.htm:

<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerMainTable">
<tr>
<td style="padding:5px;">
<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerHeader">
<tr>
<td style="width:5px;">[ACTIONS]td>
<td style="width:5px;">[ICON]td>
<td align="left">Создание скиновtd>
<td style="width:5px;padding-right:5px;"
valign="top">[VISIBILITY]td>
<td style="width:5px;">td>
tr>
table>
td>
tr>
<tr>
<td class="ContainerContent">
[CONTENTPANE]
td>
tr>
<tr>
<td style="padding:5px;">
<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerFooter">
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
<td style="width:10px;">[PRINTMODULE]td>
tr>
table>
td>
tr>
table>

В файле Container.xml, нужно также, как и вслучае с меню в шкурке, указать провайдер, для того чтобы использовать самый новый и лучший.

Делается это так:

<Object>
<Token>[ACTIONS]Token>
<Settings>
<Setting>
<Name>ProviderNameName>
<Value>DNNMenuNavigationProviderValue>
Setting>
<Setting>
<Name>ExpandDepthName>
<Value>1Value>
Setting>
<Setting>
<Name>PopulateNodesFromClientName>
<Value>TrueValue>
Setting>
Settings>
Object>

Дополняем файлы Container.xml и Container.css затем сохраняем нашу работу, заходим на сайт, парсим и проверяем.

 

Сборка и упаковка

У нас есть шкурка и контейнер. Мы проверили их работу на испытательном сайте. Осталось собрать всё это воедино, в установочный пакет, и положить в архив, установить на рабочий сайт, или поделиться с товарищем.

Сейчас на нужно будет создать 2 картинки: одну для шкурки, а другую - для контейнера.

Они послужат для предварительного просмотра перед установкой. Как здесь:

Для этих целей можно воспользоваться кнопкой PrintScreen, либо специальной программой для создания снимков экрана(screenshot).

Затем уменьшите размеры картинки в любом графическом редакторе, и сохраните в формате JPEG с расширением JPG!

Назовите картинку в соответствии с ее функцией и сохраните картинку со шкуркой в папке со шкуркой, а картинку с контейнером, в папке с контейнером.

После всех этих манипуляций, нужно будет физически зайти в папку со шкуркой. Там, мы выделяем все файлы и папки, кроме ASCX, и пакуем в единый ZIP архив, который называем Skin.

В результате у нас получился файл Skin.zip.

Теперь то-же самое проделываем с контейнером. Складываем в архив всё кроме файла ASCX!

Назывaем его Container.zip.

Теперь нам осталось взять 2 архива и упаковать их вместе в единый архив, который мы назовём в честь своей шкурки.

В итоге, мы получим [Моя_Шкурка].zip, внутри которого будут находиться Skin.zip и Container.zip.

Таким образом шкурку можно теперь установить стандартными средствами через административную часть любого нюковского сайта.

PS:

Как вы уже догадались, можно не ограничиваться одной единственной шкуркой и одним контейнером в установочном пакете. Можно создать шкурку зеленую, красную, голубую, розовую, положить в единый пакет. С контейнерами дело обстоит точно так-же.

Где взять идеи?

http://www.dnnskin.net/

Этот сайт посвящен коммерческим шкуркам. Но вам не надо ничего покупать. Выберите понравишуюся вам шкурку и кликайте на DEMO. Остальное вам уже известно.

Удачи!

 

Автор: codexomega

powered by metaPost
print



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

14.12.2009 4:22:49, codexomega
небольшое дополнение
Советую использовать для работы Firebug - plugin для браузера Firefox. Очень полезная вещь для отслеживания любого элемента на странице.
Второе. Техника упаковки скина немного устарела. Начиная с 5-й версии DNN, нужно создавать файл манифест с расширением .dnn содержащий список всех элементов скина и контейнеров.
И еще, свойства объектов, таких как [BREADCRUMB], [LOGIN], итд, можно найти в файлах XML : ~/admin/skins/
05.12.2009 18:26:01, Shiningman
Грамотная статья
Спасибо за статью на русском!

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