DotNetNuke. Komplexe Websites erstellen und verwalten. von Daniel N. Egan, Hauser-Wenz Partnerschaftsgesellschaft. 1. Auflage. Hanser München 2005

Transkript

1 DotNetNuke Komplexe Websites erstellen und verwalten von Daniel N. Egan, Hauser-Wenz Partnerschaftsgesellschaft 1. Auflage Hanser München 2005 Verlag C.H. Beck im Internet: ISBN Zu Inhaltsverzeichnis schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG

2 DotNetNuke Daniel N. Egan Komplexe Websites erstellen und verwalten ISBN Leseprobe Weitere Informationen oder Bestellungen unter sowie im Buchhandel

3 238 8 Erstellung von Skins 8 Erstellung von Skins Einer der größten Nachteile der früheren Versionen von DotNetNuke war, dass alle Seiten immer nach DNN aussahen, obwohl Sie verschiedene Module, Farben und Icons hinzufügen konnten. Das ist jetzt nicht mehr der Fall. Mit dem Release von DotNetNuke 2.0 kam eine der aufregendsten Verbesserungen in der Entwicklung von DotNetNuke: Skins. Einfach ausgedrückt ist ein Skin die äußere Hülle einer Anwendung. Oder genauer: Es ist das, was die User sehen, wenn sie Ihr Portal besuchen. Durch die Fähigkeit, Skins für Ihr Dot- NetNuke-Portal zu erstellen, liegt es ganz an Ihnen, wie Ihre Seite aussieht. In diesem Kapitel zeigen wir Ihnen: einen generellen Überblick über die Architektur von Skins, wie man Skins im HTML-Editor erstellt, wie Sie Skin-Dateien verpacken, wie Skin-Dateien hochgeladen werden, wie Sie Skins verändern. 8.1 Was sind Skins? Wie oben bereits allgemein gesagt ist ein Skin die äußere Erscheinung Ihres Portals. Die Farben, Bilder und das Layout Ihrer Module bilden zusammen die Außenhaut Ihres Portals. In vorangegangenen Kapiteln haben wir ausführlich über die Kernfunktionalität von DotNetNuke gesprochen, über die Erklärung der Räder und Schrauben, die das Portal zum Laufen bringen. Besucher Ihres Portals werden den Mechanismus Ihres Portals nie zu sehen bekommen; sie haben nur vor Augen, wie das Portal auf einer Webseite präsentiert ist. Es gibt viele Analogien, die zu erklären versuchen, wie ein Skin funktioniert: von einem Sandwich (das Fleisch ist der Core, das Brot der Skin) über ein Auto (der Motor ist der Core, die Karosserie der Skin) bis hin zu der Trickfigur Mr. Potato Head (die Kartoffel ist der Core und die Dinge, die man darauf steckt, bilden den Skin). Während Mr. Potato Head wegen seines Unterhaltungswertes vielleicht eine gute Analogie ist, halten wir die Analogie zu einer Person für die beste: Stellen Sie sich einen normalen Menschen vor, der in einem Büro arbeitet. Wenn er zur Arbeit geht, zieht er einen Anzug und eine Krawatte an und wirkt sehr professionell. Am Wochenende fühlt sich derselbe Mensch in Sweathosen und Baseballcap wohl und sieht völlig anders aus. Der Mensch im Inneren mit allem, was er weiß und wer er ist, hat sich nicht verändert, nur die äußere Erscheinung. Ähnliches tun Skins für Ihr Portal: Sie trennen den Mechanismus Ihres Portals von der äußeren Erscheinung. Wie Sie in den vorangegangenen Kapiteln herausgefunden haben, verwendet DotNetNuke eine einzige.aspx-seite, um seinen gesamten Inhalt zu rendern. Das macht es einfacher,

4 8.2 Was sind Container? 239 dem Portal ein Skin zu geben, weil Sie sich nur darum kümmern müssen, eine einzige Seite mit einem Skin zu versehen. Zusätzlich kann jeder einzelne auf der Seite platzierte Skin selbst einen Skin erhalten. Diese Skintypen heißen Containerskins. Während Seitenskins sich um Header, Footer, Menüs, Schaltflächen und Hintergründe kümmern, decken Containerskins einzelne Module ab. Nun wissen Sie, was Skins sind. Aber was zeichnet ein DotNetNuke-Skin aus? Was sind die physischen Bestandteile, die Sie erstellen müssen, um alles zusammenzustellen? Es gibt zwei Verfahren, einen Skin für Ihr DotNetNuke-Portal zu erzeugen: Sie können einen HTML-Editor verwenden, um eine HTML-Seite zu erstellen, die sämtliche Bilder, Farben und Tokens (das werden wir später besprechen) enthält, die Ihren Skin bilden sollen. Oder Sie machen es wie wir: Weil wir in diesem Buch meistens mit Visual Studio gearbeitet haben, werden wir es ebenfalls benutzen, um unseren Skin zu erstellen. Mit diesem Verfahren generieren Sie einen Skin als.aspx-seite mit den Bildern, Farben und Steuerelementen, die Sie für Ihre Website benötigen. 8.2 Was sind Container? Skins lassen sich auf Host-, Portal-, Seiten- oder Modulebene einsetzen. Wenn sie für die Modulebene spezifiziert sind, nennt man sie Containerskins oder Container. Container geben Ihnen die Möglichkeit, das Aussehen der Module, die Sie auf Ihrer Seite anbringen, einzeln anzupassen. Unten sehen Sie ein Modul mit zwei verschiedenen Containerskins: Containerskins werden gewöhnlich zusammen mit einem Portalskin entworfen, um der Seite einen einheitlichen Look zu verleihen.

5 240 8 Erstellung von Skins 8.3 Hochladen von Skins und Containern Es sind viele freie Skins verfügbar, die Sie auf Ihrem Portal verwenden können. Die Dot- NetNuke-Hauptseite hat einen Skin-Wettbewerb veranstaltet und stellt die Gewinner des Wettbewerbs kostenlos zur Verfügung, und zwar auf der zugehörigen Website unter der URL Sie müssen sich registrieren und anmelden, wenn Sie die Skins ansehen und sie herunterladen wollen. Bitte achten Sie darauf, alle Copyrightbemerkungen zu lesen, die bei den Skins stehen. Es gibt auch großartige DotNetNuke-Seiten, die Skins gewidmet sind. Nina s Skinning Magic ( und DNNSkins ( sind zwei der vielen Seiten, die Skins kostenlos zum Download anbieten. Zusammen mit Snowcovered ( stellen diese beiden Seiten außerdem Skins zur Verfügung, die man kaufen kann. Oft besteht der Download aus einer einzigen ZIP- Datei, die einzelne ZIP-Dateien für Containerskins und Portalskins enthält. In den meisten Fällen ist es nötig, die einzelnen ZIP-Dateien zu extrahieren, bevor sie sich auf Ihre Seite hochladen lassen. Da nicht immer Containerskins mit den Portalskins mitgeliefert werden, müssen Sie in diesem Fall die Standardcontainer verwenden, die zu DotNetNuke gehören Uploaden als Host Der Vorgang des Hochladens einer neuen Skin- oder Containerdatei ist einfach, kann aber von den Möglichkeiten der Rolle abhängen, mit der Sie angemeldet sind. Die Standardimplementierung von DotNetNuke erlaubt nur Hosts, neue Skins hochzuladen. Wenn Sie als Host angemeldet sind, dürfen Sie Skins von mehr als einer Quelle hochladen. Die erste Möglichkeit ist, im Hostmenü zu Host Settings zu gehen. Im Abschnitt Basic Settings finden Sie eine Rubrik Appearance. Unten in diesem Abschnitt können Sie Ihre Skins oder Container hochladen, indem Sie den entsprechenden Link anklicken.

6 8.3 Hochladen von Skins und Containern 241 Das bringt Sie in den Abschnitt Upload Skin Package. Gehen Sie zur Adresse der ZIP- Datei, klicken Sie auf Add, um sie in der Uploadbox zu platzieren, und klicken Sie auf Upload New File, um den Skin auf Ihre Seite hochzuladen. Resource Upload Logs werden erzeugt. Lesen Sie diese Logs und stellen Sie fest, ob während des Hochladens irgendwelche Fehler passiert sind. Klicken Sie auf den Link Return, um diesen Bildschirm zu verlassen und gehen Sie zurück zur Seite mit den Host- Einstellungen (Host Settings) Uploaden als Admin Um Administratoren die Möglichkeit zu geben, Skins auf das Portal hochzuladen, melden Sie sich als Host an und navigieren zu den Host Settings im Hostmenü. Im Abschnitt Advanced Settings gibt es die Sektion Other Settings. Hier wollen wir Ihnen zeigen, wo Sie die Skin Upload Permissions einstellen können.

7 242 8 Erstellung von Skins Sie müssen Portal auswählen und auf den Link Update klicken, um Ihre Einstellungen zu speichern. Sobald Sie das getan haben, melden Sie sich als Administrator an und navigieren Sie zu Skins im Adminmenü. Von hier aus können Sie neue Skins hochladen und die Skins und Container verwalten, die Sie bereits auf Ihre Seite hochgeladen haben. Um einen Skin hochzuladen, klicken Sie einfach auf den Link Upload Skin und Ihnen wird die gleiche Dialogbox gezeigt, die Sie schon im letzten Abschnitt gesehen haben. Folgen Sie den gleichen Instruktionen, um Ihr Skin hochzuladen. 8.4 Skins anwenden Wie Sie wissen, lassen sich Skins auf Host-, Portal-, Seiten- oder Modulebene anwenden. Zusätzlich gibt es weitere Möglichkeiten, die Skins einzusetzen; in diesem Abschnitt wollen wir Ihnen einige zeigen Anwenden von Skins auf Host- und Portalebene Der gleichmäßige Anblick Ihres Portals spielt eine ausschlaggebende Rolle dabei, wie sich die Besucher Ihrer Seite fühlen, wenn sie Ihre Seite sehen. Falls alle Ihre Seiten unterschiedlich aussehen und sich beispielsweise das Menü an verschiedenen Stellen befindet, falls sich die Farben und Bilder ständig verändern, dann könnte es leicht passieren, dass die User die Orientierung verlieren. Wenn Sie dagegen Ihrer Seite ein gleichmäßiges Aussehen verleihen, findet sich der User zurecht und es untermauert sein Vertrauen in Ihre Seite. In diesem Abschnitt möchten wir Ihnen zeigen, wie Sie einen heruntergeladenen Skin auf Ihre gesamte Seite anwenden.

8 8.4 Skins anwenden Verwendung des Skins-Manager Nach dem Hochladen lassen sich die Skins aus dem Abschnitt Skins im Administratormenü verwalten. Zuerst wählen Sie den Skin, den Sie anwenden wollen, aus dem Drop- Downmenü Skins aus. Falls der Entwickler des Skins dem Skinpaket ein Bild des Skins beigelegt hat, können Sie einen Thumbnail des Skins sehen. Von diesem Bildschirm aus dürfen Sie auf eine Vorschau des Skins zugreifen und den Skin löschen oder anwenden, indem Sie auf den entsprechenden Link klicken. Die Checkboxen oben auf dem Bildschirm bestimmen, ob der Skin auf der Host- und/oder Seitenebene zum Einsatz kommt. Wenn Sie die Host- Checkbox auswählen, wird der Skin auf alle über- und untergeordneten Portale angewendet, die mit Ihrer DotNetNuke-Installation verbunden sind. Die Checkbox Site benutzt den Skin nur für die aktuelle Seite Host und Site Settings verwenden Sie können Skins auch auf Ihre Seite anwenden, indem Sie sowohl die Host Settings als auch die Site Settings einsetzen. Wenn der Skin einmal hochgeladen ist, können Sie ihn auf Ihr Portal anwenden, indem Sie sich als Host oder Administrator anmelden und im Hauptmenü zu Admin/Site Settings oder Host/Host Settings navigieren.

9 244 8 Erstellung von Skins Im Abschnitt Appearance lässt sich der Skin verändern, indem Sie ihn aus dem Drop- Downmenü auswählen. Wenn Sie als Superuser angemeldet sind, können Sie den Skin sowohl auf der Host- als auch auf der Seitenebene benutzen. Sie haben die Möglichkeit, Portal Skin/Containers und Admin Skin/Containers auf Ihr Portal anzuwenden. Der Administrations-Skin ist beim Besuch der Administrations- oder Hostseiten zu sehen, der Portalskin auf allen anderen Seiten. Sie erhalten eine Vorschau des Skins, wenn Sie auf den Link Preview klicken. Sind Sie mit Ihrer Wahl zufrieden, klicken Sie einfach auf den Link Update und wenden Sie die Veränderungen an Anwenden eines Skins auf der Seitenebene Es gibt Zeiten, da möchten Sie, dass sich eine Seite von den anderen abhebt. So soll beispielsweise eine Seite etwas komplett anderes tun als die anderen Seiten auf Ihrer Website. Ein großartiges Beispiel dafür ist die Homepage. Diese Seite begrüßt die Besucher auf Ihrer Website. Vielleicht wollen Sie einen größeren Header oder weniger Panes auf dieser Seite, um sie eher ästhetisch als funktionell zu gestalten. In einem solchen Fall verwenden Sie einen benutzerdefinierten Skin für die Seite. Um den Skin für eine einzige Seite zu modifizieren, müssen Sie sich zuerst als Administrator oder Superuser anmelden. Nach Ihrer Anmeldung erscheint die Kontrollkonsole oben auf dem Portal: Wenn Sie Ihre Kontrollkonsole als ICONBAR eingestellt haben, können Sie den Link Settings in der Page Functions Pane anklicken; wenn sie auf CLASSIC eingestellt ist, klicken Sie auf den Link Edit. Das bringt Sie zum Bedienfeld Page Management. Sie finden das Drop-Downmenü Page Skin unter Advanced Settings/Appearance. Je nachdem wie die Skins hochgeladen wurden, müssen Sie entweder Host oder Site und danach den Skin, den Sie verwenden wollen, aus dem Drop-Downmenü Page Skin auswählen. Das übersteuert den Skin auf der Host- oder Seitenebene und wendet den ausgewählten Skin auf diese Seite an.

10 8.4 Skins anwenden Anwenden eines Skins auf der Modulebene Wie vorher besprochen, wird ein Skin als Container bezeichnet, sobald er auf der Modulebene zum Einsatz kommt. Dieser Skin kann auf alle Module angewendet werden, indem man ihn auf der Host- oder Seitenebene einsetzt, so wie Sie es bei den Page Skins gemacht haben. Ein Einsatz des Skins auf der Seitenebene ist ebenfalls möglich. An all diesen Stellen gibt es ein Drop-Down für die Containerskins. Die niedrigste Ebene für die Anwendung von Containerskins ist die Modulebene. Dort wird der Containerskin für ein einziges spezifisches Modul verändert. Um den Skin für ein Modul zu modifizieren, müssen Sie sich zuerst als Administrator oder Superuser anmelden. Gehen Sie mit dem Cursor über das Icon Modulmenü und wählen Sie Settings aus: Das bringt Sie zur Seite mit den Moduleinstellungen. Sie finden das Drop-Downmenü Modulcontainer unter Page Settings/Appearance. Abhängig davon wie die Containerskins hochgeladen wurden, müssen Sie Host oder Site und dann den Containerskin, den Sie anwenden wollen, aus dem Drop-Downmenü Modulcontainer auswählen. Der Skin übersteuert den Containerskin, der auf der Host-, Websiteoder Seitenebene im Einsatz ist und wird nur auf dieses Modul angewendet.