2013-05-06 3 views
22

Я ищу достойный учебник по созданию скинов для DotNetNuke 7. Я не смог найти что-либо для самой последней версии dnn, и хотя у меня был некоторый успех, изменяя существующие скинов, было бы намного легче уметь строить их с нуля.DotNetNuke 7 учебник по скинированию

Любые предложения?

+8

К сожалению, для скинов DNN трудно получить учебники –

+1

Я не уверен, как скоро вам это понадобится, но я попытаюсь написать блог об этом. – Greg

+0

эй .. сделал и нашел что-нибудь полезное .. Мне также нужно разработать скин с начала – shashwat

ответ

41

Я не собираюсь вдаваться в подробности, но я определю некоторые ключевые элементы около DotNetNuke Skinning и некоторые потенциальные проблемы, с которыми вы можете столкнуться.

Кожа может быть написана одним из двух способов: html или ascx. Самый распространенный способ - через ascx.

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

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

Теперь, самый простой способ представить DotNetNuke структуру через Panes и Containers. По существу Pane всегда будет обернут в пределах Container.

Но как мне создать кожу?

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

Так с картинке вы видите несколько ключевых элементов, таких как:

  1. Logo
  2. Поиск
  3. Войти
  4. Меню
  5. Баннер
  6. Группировка трех C ontent.
  7. Группировка четырех материалов.
  8. Другие части содержания.
  9. Нижний колонтитул, который также сгруппирован по четыре.

По существу, у нас довольно простая структура данных. Который обычно включал бы некоторую довольно основную организацию. Но мой вопрос, как вы объясняете или мобильные устройства или различные макеты страниц, такие как:

Social Profile

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

В каждом DotNetNuke кожи вы увидите эти:

<%@ Control language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 

Что это? Ну, первый определяет наш ascx. Главное - второе. По существу DotNetNuke имеет доступные токены, эти жетоны позволят коже отражать изменения, сделанные в пределах DotNetNuke в его интерфейсе.

Итак, когда мы ссылаемся на основное местоположение, а не на статический объект. Это позволяет интерфейсу DotNetNuke автоматически вводить логотип в местоположение.

Whoa, вы потеряли меня. Если это только ссылка, как мы укажем местоположение?

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 

Будет ссылаться на наш объект. Чтобы указать местоположение в пределах нашего сайта вы могли бы сделать это:

<div class = "example_logo"> 
    <dnn:LOGO runat="server" id="dnnLOGO" BorderWidth="0" /> 
</div> 

Таким образом, мы, по существу, обернув наш маркер объекта в div элемента. Тогда мы на самом деле вызываем наш токен. Это физически разместит логотип с сайта DotNetNuke на вашем сайте.

Это по существу устраняет статический подход и позволяет ему стать динамичным.

Так что это важно, но как мне создать структуру?

<div id="Origin"> 
    <div class="Wrapper"> 
     <div id="Origin-Header"> 
      <div class="origin-header clearfix"> 

       <!-- Header Elements --> 
       <div class=origin-logo> 
         <dnn:LOGO runat=server" id="dnnLOGO" BorderWidth="0" /> 
       </div> 
       <div class="origin-login"> 
         <dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="false" showLinks="true" /> 
         <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="login" /> |      <dnn:USER runat="server" id="dnnUSER" CssClass="user" /> 
         <dnn:SEARCH runat="server" id="dnnSEARCH" UseDropDownList="true" ShowSite="false" ShowWeb="false" /> 
        </div> 
      </div> 
     </div> 

     !-- Banner --> 
     <div id = "Origin-Banner"> 
       <div class = "origin-banner-pane" id="origin-banner-pane" runat="server" /> 
     </div> 

Так выше пример, чтобы вы начали. Как вы видите, что используете свои основные знания для создания сайта-структуры. Ваше просто заполнение DotNetNuke Tokens в ваш дизайн. Затем, где вы хотите, чтобы модули DotNetNuke заполняли ваши сайты, данные с интерфейса DotNetNuke находятся в пределах этих Panes.

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

Вы можете получить более подробную информацию от http://www.dotnetnuclear.com и http://www.dnnchat.com

Надеемся, что это обеспечивает основы, чтобы вы начали. Что оставляет упаковку и проявляется влево.

Надеюсь, это указывает на то, что вы в правильном направлении и помогаете.

Не стесняйтесь задавать вопросы или следовать этим сайтам, чтобы попытаться получить дополнительную информацию по этому вопросу.

+0

Вы также можете проверить видеотеку DotNetNuke. – Greg

+0

В основном потому, что я не помню, добавил ли я его, но 'DotNetNuke' требует, чтобы' ContentPane' определялся в * скин *. – Greg

3

Ваш лучший выбор - это, вероятно, посмотреть на существующие скины, которые отправляются с DotNetNuke в качестве стартового. Чтобы создать новый скин, просто перейдите в область/Portals/_default/skins и скопируйте один из этих каталогов и переименуйте его в нечто уникальное. Теперь это должно появиться в вашем селекторе. 90% файлов .ascx skin - это просто HTML/CSS. Затем вы можете изменить файл skin.css и файлы ASCX, чтобы получить желаемый вид. Чтобы создать новый скин, просто создайте новый .ascx-файл.

Вы также можете приобрести кожу или два и посмотреть, как они были разработаны.

+0

Я думаю, что это путь. Однако вы должны быть знакомы с базовым модулем для DNN. – tatigo

2

Как подчеркивает Крис Хэммонд в первом комментарии, эти учебники трудно найти. @Chris - Спасибо, что написал шаблон модуля. Сообщество и я ценю это.

Я сам пытался узнать о оболочке DNN и наткнулся на сайт DNN Hero, где есть хороший базовый видеоурок о том, как создать скин для сайта.

Его можно найти здесь: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1-6.aspx

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

Смежные вопросы