2013-05-06 12 views
22

Szukam przyzwoitego samouczka na temat tworzenia skórek dla DotNetNuke 7. Nie udało mi się znaleźć niczego dla najnowszej wersji dnn i chociaż odniosłem sukces modyfikując istniejące skórki, o wiele łatwiej byłoby móc je budować od zera.Samouczek DotNetNuke 7

Wszelkie sugestie?

+8

Niestety dla skórek DNN trudno jest znaleźć tutoriale –

+1

Nie jestem pewien, jak szybko to zrobisz, ale postaram się napisać o tym blog. – Greg

+0

hej .. znalazłeś coś przydatnego .. Potrzebuję również zaprojektować skórkę od początku – shashwat

Odpowiedz

41

Nie zamierzam wdawać się w szczegóły, ale zdefiniuję niektóre kluczowe elementy związane z DotNetNuke Skinning i niektórymi potencjalnymi problemami, jakie możesz napotkać.

Skórę można zapisać na jeden z dwóch sposobów: html lub ascx. Najpopularniejszy sposób to ascx.

  • html: Podczas korzystania z tej metody, wszelkie zmiany wprowadzone w skórze nie będzie stosowana aż DotNetNuke analizuje skórę. Kiedy DotNetNuke robi to analizowanie, odwoła się do twojego manifestu, aby poprawnie przeanalizować wszystkie wartości, które zostaną wyświetlone.

  • ascx: W ten sposób nie trzeba analizować, zmiany, które wprowadzisz, zostaną natychmiast uruchomione. Co ułatwia manipulację. Jednak w dalszym ciągu będzie to manifest, który będzie również określał twoje treści.

Teraz najprostszy sposób sobie wyobrazić DotNetNuke struktury jest przez Panes i Containers. Zasadniczo Pane zawsze będzie zawijany w ramach Container.

Ale jak zaprojektować skórkę?

Kilka rzeczy do zapamiętania, z DotNetNuke masz tendencję do nie projektowania witryny dla tej strony - Tworzysz bardziej rozbudowane struktury, które mogą być używane w bardziej ogólnym sensie. Na przykład:

Więc z powyższej ilustracji widać kilka kluczowych elementów, takich jak:

  1. Logo
  2. Szukaj
  3. Logowanie
  4. Menu
  5. Banner
  6. Grupowanie trzech C często.
  7. Grupowanie czterech treści.
  8. Kolejny fragment treści.
  9. Stopka, która jest zgrupowana również przez cztery.

Zasadniczo mamy dość łatwą strukturę danych. Który zwykle zawiera pewną dość podstawową organizację. Ale moje pytanie jest, jak można uwzględnić lub urządzenia oraz różne układy stron, takich jak:

Social Profile

Teraz mają nieco bardziej złożony problem. Cóż, DotNetNuke naprawdę zachował kilka uwag. Deweloper powinien zostać deweloperem, a projektant - projektantem. Co pozwala dużym grupom pracować z witryną na elastyczność bez niszczenia siebie nawzajem.

W każdym DotNetNuke skóry zobaczysz te:

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

Co to jest? Cóż, pierwszym jest zdefiniowanie naszego ascx. Ważną rzeczą jest druga. Zasadniczo dostępne są tokeny, które umożliwiają skórze odzwierciedlenie zmian wprowadzonych w interfejsie użytkownika w zakresie DotNetNuke.

Kiedy odwołujemy się do lokalizacji głównej, a nie statycznego obiektu. Dzięki temu interfejs DotNetNuke automatycznie wprowadza logo w miejscu.

Whoa, straciłeś mnie - Jeśli to tylko referencja, jak możemy określić lokalizację?

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

Odwołuje się do naszego obiektu. Aby określić lokalizację w obrębie naszej strony byłoby to zrobić:

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

Więc zasadniczo owijania naszego obiektu tokenu w elemencie div. Wtedy wzywamy nasz token. Spowoduje to fizyczne umieszczenie logo z interfejsu DotNetNuke w Twojej witrynie.

To zasadniczo eliminuje statyczne podejście i pozwala mu stać się dynamicznym.

A więc są one ważne, ale jak utworzyć strukturę?

<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> 

Powyższy przykład stanowi dobry początek. Jak widzisz, używając swojej niezbędnej wiedzy do budowy struktury strony. Właśnie wkleiłeś DotNetNuke Tokens do swojego projektu. Następnie, jeśli chcesz, aby moduły DotNetNuke wypełniały dane witryn z interfejsu DotNetNuke, mieszczą się w zakresie Panes.

Następnym ważnym aspektem będzie podstawowe opakowanie Twojej skóry. To faktycznie zapewni, że działa poprawnie po zainstalowaniu.

Możesz uzyskać więcej informacji z http://www.dotnetnuclear.com i http://www.dnnchat.com

Mam nadzieję, że to daje podstawy, aby zacząć grę. Co pozostawia opakowanie i zamienia się w lewo.

Mam nadzieję, że to cię w odpowiednim kierunku i pomaga.

Możesz zadawać pytania lub śledzić te witryny, aby uzyskać więcej informacji na ten temat.

+0

Można również sprawdzić bibliotekę wideo DotNetNuke. – Greg

+0

Głównie dlatego, że nie pamiętam, czy dodałem go, ale 'DotNetNuke' wymaga zdefiniowania' ContentPane' wewnątrz * skóry *. – Greg

3

Najlepszym rozwiązaniem jest prawdopodobnie spojrzenie na istniejące skórki dostarczane z DotNetNuke jako początek. Aby utworzyć nową skórkę, przejdź do obszaru/Portale/_default/skórki i skopiuj jeden z tych katalogów wklej i zmień nazwę na coś unikatowego. Powinno to teraz pojawić się w selektorze twojej skóry. 90% plików skór .ascx to po prostu HTML/CSS. Następnie można zmodyfikować plik skin.css i pliki ASCX, aby uzyskać pożądany wygląd. Aby utworzyć nową opcję karnacji, wystarczy utworzyć nowy plik .ascx.

Można również kupić skórkę lub dwie i sprawdzić, jak zostały opracowane.

+0

Myślę, że to jest droga. Musisz jednak znać podstawowe tworzenie modułów dla DNN. – tatigo

2

Jak zauważa Chris Hammond w pierwszym komentarzu, trudno jest znaleźć te tutoriale. @Chris - Dziękuję za napisanie szablonu modułu. Społeczność i doceniam to.

Próbowałem dowiedzieć się o skórze DNN osobiście i natknąłem się na stronę DNN Hero, która ma dobry podstawowy samouczek wideo o tym, jak stworzyć skórkę dla strony.

to można znaleźć tutaj: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1-6.aspx

nie sądzę, ta seria jest w wolnej zestawu filmów, więc być może trzeba będzie zapisać się do niego dostać. Jestem subskrybentem i nie zawiodłem się. Jeśli potrzebujesz wprowadzenia do karnacji lub czegokolwiek innego, DNN, strona jest naprawdę pouczająca.