DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Welcome DotNetNuke Skinning Instructions More than 500 Customers in over 39 Countries

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Was ist ein Skin? Es muss hier generell zwischen CMS-System bzw. Inhalten und Design unterschieden werden! CMS-System und Inhalte  CMS-System  Datenbanksystem  Verwaltungsbereiche  Webseiteninhalte wie Texte und Bilder Skin & Container  Design des Portals und der einzelnen Seiten  Positionierung von Standardelementen wie Login, Datum, Logo und weitere.  Formatierung von Texten wie Farbe usw. Warum die Trennung von Inhalten und Design Vorteile der Trennung  Designer und Redaktionen bzw. Inhaltsverantwortliche können unabhängig voneinander arbeiten.  Änderungen am Design verändern nicht die Inhalte und umgekehrt.  Designs können schnell abgeändert werden ohne die Inhalte ebenfalls ändern zu müssen.  Seiten können verschiedene Designs mit einen Mausklick zugewiesen werden  Ein neues Design kann auf versteckten Seiten vorbereitet und getestet werden.  Die Umstellung eines ganzen Portals erfolgt mit einen Mausklick.

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Was ist Skin-Tokens Was sind Skin-Tokens Skin-Tokens sind Platzhalter bzw. Variablen an deren Position bei der Darstellung der Webseite bestimmte Inhalte angezeigt bzw. Funktionalitäten zur Verfügung gestellt werden. Beispiel aus dem Leben Man könnte ein Skin-Token mit einen Scheinwerfer oder einer Windschutzscheibe bei einem Auto vergleichen. Es ist nicht relevant wie diese Teile aussehen wir wissen jedoch welchen Zweck diese Gegenstände erfüllen und wo sich diese immer befinden. Welche Skin-Tokens gibt es ? Skin-TokenBeschreibung LogoZeigt an dieser Stelle das definierte Logo an SearchZeigt an dieser Stelle den Suchdialog an CurrentDateZeigt das aktuelle Datum an UserZeigt den aktuellen Benutzernamen an LoginZeigt den Link Anmelden bzw. Registrieren an CopyrightZeigt das im Portal definierte Copyright an TermsZeigt einen Link zu den Nutzungsbestimmungeneingesehen an PrivacyZeigt einen Link zu den Datenschutzrichtlinien an. DotNetNukeZeigt Informationen über die DotNetNuke Version an HostnameZeigt den Namen des Hosting-System an SolpartmenuZeigt das heraus klappbare Menu bei den Modulen an BreadcrumbsZeigt die Brotkrümel an ContentPaneZeigt den Inhaltsbereich an in dem Module angezeigt werden

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Bestandteile eines Skin-Paketes Skin-Paket Bestandteile Ein Skin-Paket ist immer ein Zip-Archiv dessen Name später im Portal als Skin angezeigt wird. Zur leichteren Übersicht sollte dieser jedoch kurz gehalten werden.das folgende Dateien beinhaltet.  Skin.css (Diese Datei beinhaltet alle CSS-Definitionen für alle Layouts in dem Paket  Design.ascx (Eigentliche Design-Datei)  Design.jpg (Vorschau-Bild für das Design) Der Name Design bei der ASCX- und JPG-Datei ist rein exemplarisch da hier ein beliebiger Name verwendet werden kann der in der Skin-Auswahl später angezeigt wird. Zusätzliche Dateien im Skin-Paket Natürlich müssen oft bereits im Skin-Paket Bilder mit eingepackt werden um so permanente Grafiken wie Hintergründe im Skin bereitzustellen. Die Namen dieser zusätzlichen Grafiken können frei gewählt werden es sollten jedoch Leerzeichen und Umlaute vermieden werden. Skin-Paket Beispiel Zusatzdateien Designdatei Skin-Archiv CSS-Stylesheet

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Bestandteile eines Skin-Design Skin-Design Bestandteile (Deklarationen) Der Kopf mit den Deklarationen der verschiedenen Skin-Tokens muss immer im Kopf vorhanden sein und sieht wie nachfolgend dargestellt aus. Erst diese Deklaration der Skin-Tokens ermöglicht dem CMS-System diese im Design zu erkennen und zu verarbeiten Skin-Design Bestandteile (Kommentar) Gleich anschließend an den Deklarationen kann ein Kommentar in das Design eingefügt werden, welches bei jeder Seite die dieses Design verwendet im Quelltext anzeigt. Hierbei ist jedoch darauf zu achten dieses Kurz zu halten um die Ladezeit der Seite nicht zu beeinträchtigen. <!-- Hitched Style Skin for DotNetNuke 3.x and 4.x DNN Skin Makers & ITP - Business IT Power & Inet : & -->

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Bestandteile eines Skin-Design Skin-Design Bestandteile (Design-Bereich) Der Design-Bereich eines Skins besteht aus HTML-Code wie bei einer herkömmlichen Webseite bei dem jedoch die bereits genannten Skin-Tokens platziert werden können. Beispiel: <table class=„pagemaster“ width=„100%“ border=„0“ align=„center“ cellpadding=„0“ cellspacing=„0“. Skin-Design Bestandteile (Pagemaster & Skinmaster) Da im Text/HTML-Editor ein Iframe verwendet wird das den Body als Hintergrund verwendet ist es nicht möglich bei einen einheitlichen Hintergrund für die gesamte Seite eine dunkle Farbe oder gar Bilder zu verwenden da diese dann auch im Editor angezeigt würden wodurch der eigentliche Text nicht mehr lesbar währe. Aus diesem Grund wird als Ersatz für den Body eine Tabelle mit der CSS- Klasse Pagemaster verwendet. Der Skin-Master ist wie auch der Pagemaster eine Tabelle die dann für die eigentliche Seite verwendet wird, aus der Kombination dieser Tabellen wird es möglich zentrierte Designs zu erstellen die links und rechts einen ausfüllenden Hintergrund aufweisen. Pagemaster Skinmaster Darstellung Skinmaster Veränderung des Layouts durch unterschiedliche Positionierung des Skinmasters im Pagemaster Pagemaster

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Skin-Design Skin-Design (Generell) Bei diesen Instruktionen wird bewusst nicht auf das High-Quality Design in bezug auf Grafiken eingegangen da dies den Zeitlichen Rahmen sprengen würde und dies nur in einen separaten Workshop möglich ist wenn bereits Skinning-Erfahrungen bestehen. Kurz gesagt es wird hier nicht demonstriert wie auf Grund von einer Kunden Vorgabe aus einen Screenshot ein Ski erstellt wird, wenn dies erwünscht ist kann dies in einen separaten Workshop gemacht werden. Skin-Design (Layout Nachfolgend ist das vorgegebene Beispiel-Layout zu sehen. Skinmaster Pagemaster Footer Copyright | Terms | Privacy Leftpane Contentpane Rightpane Datum Login | User Logo Menu

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Skin-Design Skin-Design (Panes) Was sind panes eigentlich? Panes sind bei diesem CMS-System Bereiche in denen Module platziert werden können, die Anzahl der verschiedenen Panes ist nicht begrenzt es muss jedoch immer zu mindestens die contentpane mi t den gleichlautenden Namen und ID geben da in dieser auch die im CMS-System integrierten Module dargestellt werden. Nachfolgend sind verschiedene Pane-Layouts zu sehen Simples Pane-LayoutKomplexes Pane-Layout Skinmaster Pagemaster Footer Copyright | Terms | Privacy Login | User Logo Menu Leftpane Contentpane Rightpane Datum Pagemaster Footer Copyright | Terms | Privacy Login | User Logo Menu Leftpane Contentpane Rightpane Datum toppane bottompane leftpane2rightpane2

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Skin-Design Übungs-Quellen Auf der Schulseite wurden auf der Portal-Seite „Skinning Learning“ verschiedene Übungsteile wie auch Tools bereitgestellt. Tools Niemand kommt ganz ohne Tools aus darum zeigen wir nachfolgend welche Tools wir außer Photoshop zur Skin-Erstellung noch selbst verwenden. Microsoft internet Explorer Developer Toolbar (Frei) Mit diesem Zusatz ist es möglich online viele EIgenschaften von Webseiten anzuzeigen, Farbcodes, Stile, Tabellen oder viele andere Parameter auszulesen. Proton Editor (Frei) Proton ist ein leicht zu handhabbarer Editor für verschiedene Einsatzbereiche der ohne Installation überall einfach und schnell verwendet werden kann. Skin-Quellen Auf der Seite sind auch nachfolgende Übungsdateien für die Skin-Erstellung zu finden.  Index.ascx  Skin.css  Ts.gif

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Online-Erstellung

DNN Skin Makers The DotNetNuke Design Company Copyright 2007 © by DNN Skin Makers and ITP – Business IT PowerWe realize your thinks and dreams Skinning Instructions Kunden More than 500 Customers in over 39 Countries Zum aktuellen Zeitpunkt weist unser Skinning-Kundenstamm eine Gesamtanzahl von 563 Kunden auf von denen jedoch einige Design Agenturen sind die bei uns die Dienstleistungen zukaufen und als eigene weiter verkaufen. Mit einigen Agenturen und Dienstleistern haben wir bereits Generalverträge abgeschlossen wodurch für uns sicher gestellt ist dass nur wir die Skins für deren Kunden erstellen. Größter Kunde: Notary Software L.L.C (20.000) Kunden Branchen EDV-Vertrieb, Lampen-Vertrieb, Innenaustattungen, Gasthöfe, Sängergruppen, Motoradrennteam, Schlittenhunde Rennteam, Kosmetik, Design, Marketing, Saatgut-Vertrieb, Notare, Hotlines, Gartengestaltungen, Galerien, Community-Systeme, Anhänger- Hersteller, Generalvertretungen, Feuerwehr uvm.