web-dev-qa-db-ja.com

DotNetNuke 7スキニングチュートリアル

DotNetNuke 7のスキンを作成するための適切なチュートリアルを探しています。最新バージョンのdnnについて何も見つけることができませんでした。既存のスキンの変更にはある程度成功しましたが、多くのことになります。最初から作成する方が簡単です。

助言がありますか？

c#asp.netwebformsdotnetnuke
22
HuwD

ここでは詳しく説明しませんが、DotNetNuke Skinningの重要な要素と発生する可能性のある問題のいくつかを定義します。

スキンは、htmlまたはascxの2つの方法のいずれかで記述できます。最も一般的な方法は、ascxを使用する方法です。

  • html：この方法を使用すると、スキン内で行った変更は、DotNetNukeがスキンを解析するまで適用されません。 DotNetNukeがこの解析を行うと、マニフェストを参照してすべての値を正しく解析し、表示されるようにします。

  • ascx：この方法で解析する必要はありません。加えた変更は即座に反映されます。操作が簡単になります。ただし、これにはコンテンツを定義するマニフェストも含まれます。

DotNetNuke構造を想像する最も簡単な方法は、PanesとContainersを使用することです。基本的に、Paneは常にContainer内にラップされます。

しかし、どうやってスキンをデザインするのですか？

注意すべきいくつかの点として、DotNetNukeを使用すると、正確にそのページのサイトを設計しない傾向があります。より一般的な意味で使用できる、より複雑な構造を作成します。例えば：

Image of Web-Site

上の画像では、次のようないくつかの重要な要素が表示されています。

  1. ロゴ
  2. 探す
  3. ログインする
  4. メニュー
  5. バナー
  6. 3つのコンテンツのグループ化。
  7. 4つのコンテンツのグループ化。
  8. 別のコンテンツ。
  9. 4つにグループ化されたフッター。

したがって、基本的にはかなり簡単なデータ構造です。これには通常、かなり基本的な組織が含まれます。しかし、私の質問は、どのようにアカウントやモバイルデバイス、または次のようなさまざまなページレイアウトを行うかです。

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を定義することです。重要なのは2番目です。基本的にDotNetNukeには使用可能なトークンがあり、これらのトークンにより、スキンはそのインターフェースのDotNetNuke内で行われた変更を反映できます。

したがって、静的オブジェクトではなく、コアの場所を参照している場合。これにより、DotNetNukeインターフェイスが場所にロゴを自動的に入力できるようになります。

ええと、あなたは私を失いました-それが単なる参照である場合、どのように場所を指定しますか？

<%@ 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 から取得できます。

うまくいけば、これはあなたが始めるための基本を提供します。これにより、パッケージとマニフェストが残ります。

うまくいけば、これはあなたを正しい方向に向け、助けます。

自由に質問したり、これらのサイトをフォローして、このテーマに関する詳細情報を入手してください。

41
Greg

あなたの最善の策は、最初にDotNetNukeに同梱されている既存のスキンを確認することです。新しいスキンを作成するには、/ Portals/_default/skins領域に移動し、これらのディレクトリの1つをコピーして、一意の名前に貼り付け、名前を変更します。これはスキンセレクタに表示されます。 .ascxスキンファイルの90％は単なるHTML/CSSです。その後、必要に応じてskin.cssファイルとASCXファイルを変更して、目的の外観にすることができます。新しいスキンオプションを作成するには、新しい.ascxファイルを作成するだけです。

また、スキンを1つか2つ購入して、それらがどのように開発されたかを確認することもできます。

3
Ryan Doom

Chris Hammondが最初のコメントで指摘しているように、これらのチュートリアルを入手するのは困難です。 @Chris-モジュールテンプレートを作成していただきありがとうございます。コミュニティと私は感謝しています。

私は自分でDNNスキンについて学ぼうとしていて、サイトのスキンを作成する方法に関する優れた基本的なビデオチュートリアルがあるDNNヒーローのWebサイトに出くわしました。

それはここにあります： http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke- Part-1-6.aspx

このシリーズは無料の動画セットではないので、チャンネル登録していただく必要があるかもしれません。私は加入者であり、失望していません。スキンやその他のDNNの紹介が必要な場合、このサイトは非常に有益です。

2
RacerNerd