Verwenden von Dreamweaver und dem Entwurfs-Manager mit SharePoint 2013

Veröffentlichung des Originalartikels: 28.07.2012

SharePoint 2013 umfasst eine Reihe neuer Features, die es leichter als je zuvor machen, Websites zu gestalten und zu veröffentlichen Eines dieser Features ist der Entwurfs-Manager. Hiermit können Sie beispielsweise unterschiedliche Kanäle für Ihre Inhalte erstellen – z. B. einen Satz Seiten für Browser in Normalgröße, einen Satz für Mobilgeräte, einen weiteren Satz für Tablet-PCs usw. Jedem Kanal können Sie eine andere Gestaltungsvorlage zuordnen. Und eine der wirklich interessanten Features ist, dass Sie eine Seite in jedem normalen HTML-Editor, z. B. Dreamweaver, erstellen, nach SharePoint hochladen und als Gestaltungsvorlage verwenden können. SharePoint erstellt automatisch eine ASPX-Datei und hält sie synchron mit Ihrer HTML-Datei. Nach dieser Umwandlung müssen Sie die HTML-Datei nicht in einem anderen Tool bearbeiten, sondern können weiterhin Ihren bevorzugten Editor verwenden. Jedes Mal, wenn Sie die Datei speichern, synchronisiert SharePoint sie mit der ASPX-Datei, mit der Ihre Gestaltungsvorlage gerendert wird. 

Außerdem stellen wir so genannte Codeabschnitte bereit, mit denen Sie nützliche SharePoint-Funktionen in Ihre Gestaltungsvorlage einsetzen können. Sie wählen lediglich aus, welchen Typ von Codeabschnitt Sie benötigen, z. B. ein Suchfeld oder Schnellnavigation usw., kopieren den automatisch generierten Code für das Feature und fügen ihn in Ihrer Gestaltungsvorlage ein. Leider ist es dann doch nicht ganz so einfach. Sie müssen immer noch einige Eigenheiten von SharePoint beachten, damit Sie Ihre reguläre HTML-Seite in eine SharePoint-Gestaltungsvorlage umwandeln können.

In diesem Beitrag werde ich die Webseite, die Sie im Dreamweaver-Lernprogramm (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) erstellen, in eine SharePoint-Gestaltungsvorlage und Homepage für meine Website umwandeln. Hier ist zunächst einmal eine Abbildung der fertigen Dreamweaver-Website:

Wenn Sie die Seite genauer anschauen, werden stellen Sie feststellen, dass es einige speziell für SharePoint relevanten Aspekte gibt, um die wir uns kümmern müssen:

• Bilder für die Kopfzeile, den Hintergrund für die Hauptansicht der Seite und für die einzelnen Artikel
• Inhalt für den Hauptabschnitt der Seite und drei Artikelbereiche
• Zusätzliche SharePoint-Features, die wir wahrscheinlich hinzufügen wollen. Das wären z. B. ein Suchfeld und Navigationsmöglichkeiten.

Betrachten Sie das Ganze zunächst von einem inhaltlichen Standpunkt. Die Inhaltstypen, die bereits im Lieferumfang enthalten sind, decken den Hauptinhalt ab, aber wir benötigen angepasste Typen für die Artikelanrisse am unteren Rand der Seite. Davon ausgehend erarbeiten wir einen neuen Inhaltstyp. Da die Bilder zu den Inhalten gehören, fügen wir sowohl Websitespalten für die Bilder als auch Websitespalten für den Text selbst hinzu. Der Inhaltstyp „Homepage“ (Welcome Page) eignet sich wahrscheinlich gut als Basisklasse für diese Art von Seite, daher habe ich einen neuen Inhaltstyp auf der Basis von „Homepage“ (Welcome Page) erstellt und mit „DW Layout“ benannt. Damit ich mein Layout verwirklichen kann, habe ich die folgenden Spalten hinzugefügt:

• LeftStoryImage
• LeftStoryText
• CenterStoryImage
• CenterStoryText
• RightStoryImage
• RightStoryText

Die Bildspalten sind als Bild mit Formatierung und Einschränkungen für die Veröffentlichung (Image with formatting and constraints for publishing) und die Textspalten als Vollständiger HTML-Inhalt mit Formatierung und Einschränkungen für die Veröffentlichung (Full HTML content with formatting and constraints for publishing) definiert.

Jetzt können wir den ersten Schritt mit dem Entwurfs-Manager vornehmen. Wir laden die Dreamweaver-HTML-Seite mit dem Stylesheet hoch, damit sie in eine Gestaltungsvorlage umgewandelt wird. 

Öffnen Sie nun auf dem Computer, auf dem Dreamweaver (oder Ihr bevorzugter HTML-Editor) installiert ist, den Browser, und navigieren Sie zu Ihrer SharePoint-Website. Klicken Sie auf das Menü „Websiteaktionen“ (Site Actions), und wählen Sie „Entwurfs-Manager“ (Design Manager) aus. Klicken Sie in der Aufgabenliste auf der linken Seite auf Nr. 3, „Entwurfsdateien hochladen“ (Upload Design Files). Klicken Sie auf den Link, um dem SharePoint-Ordner, in dem Ihre Gestaltungsvorlage und das Stylesheet gespeichert werden, ein lokales Laufwerk zuzuordnen. Dadurch sollte eine Explorer-Ansicht der SharePoint-Website geöffnet werden, sodass Sie Dateien direkt aus SharePoint ziehen und in Dreamweaver ablegen können. Falls dies aus irgendeinem Grund nicht funktionieren sollte, können Sie immer noch in Explorer zur Gestaltungsvorlagenbibliothek navigieren und sie Bibliothek in Explorer öffnen.

Kopieren Sie als nächstes die Gestaltungsvorlage „index.html“ von Ihrem lokalen Laufwerk in die SharePoint-Bibliothek, die in der Explorer-Ansicht geöffnet ist. Im Dreamweaver-Lernprogramm wird angenommen, dass sich das Stylesheet in einem Unterordner mit dem Namen „styles“ befindet. Erstellen Sie also diesen Ordner, und kopieren Sie das Stylesheet dorthin.

Klicken Sie jetzt im Browser in der Aufgabenliste des Entwurfs-Managers auf Nr. 4, „Gestaltungsvorlagen bearbeiten“ (Edit Master Pages). Klicken Sie auf den Link „HTML-Datei in eine SharePoint-Gestaltungsvorlage umwandeln“ (Convert an HTML file to a SharePoint master page). Ein SharePoint-Dialogfeld zur Dateiauswahl wird geöffnet, und Sie sehen die Datei „index.html“, die in den Gestaltungsvorlagenkatalog kopiert wurde. Klicken Sie darauf, um sie auszuwählen, und klicken Sie dann auf die Schaltfläche „Einfügen“ (Insert). Die Umwandlung wird durchgeführt, und anschließend wird die Datei auf der Seite des Entwurfs-Managers in der Liste der Gestaltungsvorlagen zusammen mit einer Meldung angezeigt, die die erfolgreiche Umwandlung bestätigt. Wenn Sie jetzt die Explorer-Ansicht des Gestaltungsvorlagenkatalogs aktualisieren, wird eine neue Datei mit dem Namen „index.master“ angezeigt. Dies ist das Gegenstück zu der Datei „index.html“, die Sie auf die Website hochgeladen haben. Von jetzt ab übernimmt es SharePoint, diese Gestaltungsvorlage zu aktualisieren – Sie müssen lediglich mit der HTML-Datei arbeiten.

Sie sollten sich Ihre neue Gestaltungsvorlage jetzt kurz anschauen, damit Sie sehen, womit Sie arbeiten. Klicken Sie dazu im Entwurfs-Manager auf den Link „index.html“. Die Seite wird im Vorschaumodus geöffnet, sodass Sie sich Ihre Gestaltungsvorlage ansehen können. Sie ist ganz interessant – so sieht sie nach der ersten Umwandlung aus:

 Beachten Sie Folgendes:

• Das Stylesheet scheint zu funktionieren. Die Schriftarten und Formatierungen werden so angezeigt, wie es zu erwarten ist.
• Die Bilder werden nicht angezeigt, das müssen wir also noch reparieren. Allerdings sind einige Bilder Teil der Inhalte und einige Teil der Gestaltungsvorlage selbst, und das muss in der weiteren Bearbeitung der Gestaltungsvorlage berücksichtigt werden.
• Der gezeigte Text sollte nicht Teil der Gestaltungsvorlage sein. Daher müssen wir diesen Text entfernen und dann als Teil der Inhalte für die Homepage wieder einsetzen.

Betrachten wir also zunächst die notwendigen Reparaturen. Wir müssen das Bild hochladen, das als Hintergrund für den Hauptabschnitt verwendet werden soll, und den Link darauf in der Gestaltungsvorlage korrigieren. Alle anderen Bilder im unteren Bereich der Seite müssen gelöscht werden. Außerdem müssen wir den gesamten Text auf der Seite löschen, da es sich um Inhalt handelt, der zu einer einzelnen Seite, aber nicht zur Gestaltungsvorlage gehört. Um dies zu bearbeiten, ziehen Sie die HTML- und die CSS-Datei aus der Explorer-Ansicht des SharePoint-Gestaltungsvorlagenkatalogs, und legen Sie die Dateien in Dreamweaver ab. Sie werden feststellen, dass die HTML-Seite jetzt viel mehr SharePoint-Code enthält. Daran werden Sie sich gewöhnen müssen. Obwohl Sie jetzt Ihren eigenen HTML-Editor verwenden können, müssen Sie trotzdem die Steuerelemente und Tags von SharePoint verwenden, auf deren Grundlage das Ganze funktioniert.

Während wir die HTML-Datei durchblättern, finden sich die Bilder an, die gefehlt hatten, aber Teil der Gestaltungsvorlage sein sollen. Es sind „banner.gif“ (aus der HTML-Datei) und „main.jpg“ (aus dem Stylesheet, als Hintergrund für den DIV-Abschnitt „main_image“). Die werden wir als erstes reparieren.

Kehren Sie zum Browser zurück, und klicken Sie auf das Menü „Websiteaktionen“ (Site Actions). Klicken Sie anschließend auf das Menü „Websiteinhalte anzeigen“ (View Site Contents). Klicken Sie auf den Link „Bilder der Websitesammlung“ (Site Collection Images), um diese Dokumentbibliothek zu öffnen. Wir werden jetzt die beiden Bilder in diese Bibliothek hochladen. Die Bibliotheks-URL lautet „/sitecollectionimages“, und wir ändern jetzt in Dreamweaver den Pfad beider Bilder, damit er auf diese Bibiothek verweist. Wenn Sie die Ansicht der Vorschauseite aktualisieren, werden Sie sehen, dass wir vorankommen:

Ihnen wird wahrscheinlich ein Element, auffallen, das im vorigen Bild nicht gezeigt wurde: der gelbe DIV-Abschnitt am unteren Seitenrand. Er war tatsächlich schon vorhanden, aber das Browserfenster war zu klein, und so konnten Sie ihn nicht sehen. Dieser DIV-Abschnitt ist wichtig. Er wurde bei der Umwandlung durch SharePoint eingefügt, und er enthält den Platzhalter für den Hauptseiteninhalt. Als nächstes werden wir die Inhalte löschen, die Teil einer Inhaltsseite und nicht der Gestaltungsvorlage sein sollen. Wir werden also den Text im Hauptabschnitt entfernen und die Bilder, die nicht angezeigt werden, und den Text darunter löschen. Wir werden außerdem den DIV-Platzhalterabschnitt (ohne die gelbe Farbe) in den Hauptabschnitt der Seite verschieben. Darüber hinaus fügen wir drei Platzhalter-Steuerelemente für die drei Bereiche ein, an denen Bilder und Text stehen sollen. Wir bringen das Ganze dann zusammen, wenn wir das Seitenlayout erstellen.

Das der nun vorhandene HTML-Code besteht aus einer Kombination aus Kommentaren, speziellen SharePoint-Verarbeitungstags und Platzhaltern, an deren Stelle Inhalte eingesetzt werden. Die einzelnen Abschnitte sehen folgendermaßen aus:

Hauptabschnitt:

Linke Spalte:

Mittlere Spalte:

Rechte Spalte:

Die Seite selbst sieht etwas leer aus. Das ist aber in Ordnung, so muss eine Gestaltungsvorlage sein:

Die Gestaltungsvorlage ist nun schon fast fertig. Es sollen noch einige Menüs und ein Suchfeld eingebaut werden, aber das erledigen wir etwas später. Als Nächstes erstellen wir ein Seitenlayout. In einem Seitenlayout werden die Datenfelder mit deren Layout auf der Seite „verbunden“. Dazu öffne ich „Websiteeinstellungen…“ (Site Settings) > „Gestaltungsvorlagen und Seitenlayouts“ (Master pages and page layouts). Im Menüband klicke ich auf die Schaltfläche „Neu“ (New) und wähle „Seitenlayout“ (Page Layout). Im daraufhin geöffneten Fenster „Neues Seitenlayout“ (New Page Layout) kann ich den Inhaltstyp auswählen, der diesem Seitenlayout zugeordnet werden soll. Sie werden sich erinnern: Weiter oben habe ich beschrieben, dass ich einen benutzerdefinierten Inhaltstyp erstellt und mit „DW Layout“ benannt habe. Im Feld „Zugeordneter Inhaltstyp“ (Associated Content Type) kann ich also meinen Inhaltstyp „DW Layout“ auswählen. Ich gebe eine URL, einen Titel und eine Beschreibung an, und das war's – ich kann mein Seitenlayout erstellen. Im vorliegenden Beispiel habe ich als URL für die Seite „DWLayoutPage.aspx“ ausgewählt, der Titel lautet Dreamweaver Layout Page, und als Beschreibung habe ich Layout page based on Dreamweaver tutorial site eingegeben. 

Das Seitenlayout wurde erstellt, aber es enthält noch keine Steuerelemente. Wir müssen der Seite die Steuerelemente hinzufügen und sie an die benutzerdefinierten Felder des Inhaltstyps binden, den ich weiter oben beschrieben habe: LeftStoryImage, LeftStoryText usw. Außerdem muss ich ASP.NET-Platzhaltersteuerelemente hinzufügen, die den Platzhaltercontainern entsprechen, die ich der Gestaltungsvorlage hinzugefügt habe. So werden die Daten in jedem Feld einem Container zugeordnet, und dieser Container wird in dem entsprechenden Containerplatzhalter in der Gestaltungsvorlage ausgegeben – so gelangen die Daten an die richtige Stelle auf der Gestaltungsvorlage.

Wenn Sie sich die Details der Gestaltungsvorlage anschauen, sehen Sie, dass ich vier Inhaltsplatzhalter hinzugefügt habe: PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter und PlaceHolderRight. Ich muss diese Platzhalter zu meinem Seitenlayout hinzufügen und in jeden Platzhalter ein Feld für den passenden Inhaltstyp platzieren. Dazu ziehe mein neues Seitenlayout, „DWLayoutPage.aspx“, aus der Explorer-Ansicht des Gestaltungsvorlagenkatalogs und lege es auf Dreamweaver ab. In der Standardeinstellung enthält das Seitenlayout bereits ein Platzhaltersteuerelement mit dem Namen „PlaceHolderMain“, sodass ich dieses Steuerelement nicht hinzufügen muss. Den Rest füge ich mit regulärem Markup für ASP.NET-Steuerelemente wie diesem ein:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

Wie Sie sehen, habe ich als ID „PlaceHolderLeft“ eingegeben. Dann habe ich zwei weitere mit den IDs „PlaceHolderCenter“ und „PlaceHolderRight“ eingefügt.

Jetzt zu den Feldern im Seitenlayout. Es werden tatsächlich nur recht wenige benötigt. Zunächst brauchen wir ein Feld für den Hauptinhalt, das von der Basisklasse stammt, von dem unser benutzerdefinierter Inhaltstyp erbt. Dieses Feld heißt einfach „PublishingPageContent“. Da es in den Hauptabschnitt der Seite gehört, habe ich dem Abschnitt „PlaceHolderMain“ ein Veröffentlichungssteuerelement dafür hinzugefügt, sodass dieser Abschnitt jetzt so aussieht:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

                <PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Für jeden der anderen drei Platzhalter sind zwei Felder erforderlich: ein Bildfeld und ein Rich-Text-Feld. Ich füge sie also hinzu, und dabei verwende ich im FieldName-Attribut des Markups wieder den Feldnamen des Inhaltstyps. Das Steuerelement „PlaceHolderLeft“ sieht jetzt beispielsweise folgendermaßen aus (die Steuerelemente für die Mitte und rechts sind sehr ähnlich):

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

    <PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

    <PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Jetzt haben wir die Gestaltungsvorlage und das Seitenlayout so gut wie fertig (mit Ausnahme der Menüs und des Suchfelds, die ich oben bereits erwähnt habe). Also ist der nächste Schritt, auf der Grundlage des neuen Seitenlayouts eine neue Seite zu erstellen.

Hierzu öffnen wir die Bibliothek für Seiten. Ich klicke im Menüband auf „Neu“ (New) und wähle „DW Layout“ aus. Das Layout wird im Menü „Neu“ (New) angezeigt, weil es auf einem Inhaltstyp basiert, der vom Inhaltstyp „Homepage“ (Welcome Page) erbt:

Ich fülle die erforderlichen Eigenschaften aus, und dann sieht es ungefähr so aus:

OK, jetzt können wir es ausprobieren! Zunächst kehre ich zurück zum Gestaltungsvorlagenkatalog und veröffentliche meine Gestaltungsvorlage („index.html“). Erst wenn ich das erledigt habe, kann ich sie als Gestaltungsvorlage für meine Website auswählen. Als Nächstes öffne ich noch einmal die „Websiteeinstellungen“ (Site Settings) und anschließend die „Einstellungen für die Gestaltungsvorlage der Website“ (Site Master Page Settings) und wähle dann meine Gestaltungsvorlage als Gestaltungsvorlage der Website aus. Ich lege Sie nie gleich am Anfang als Systemgestaltungsvorlage fest, damit ich sicherstellen kann, dass alles funktioniert. Falls sich ein Fehler in der Gestaltungsvorlage eingeschlichen hat und Sie sie als Systemgestaltungsvorlage festlegen, kann es schwierig werden, dies rückgängig zu machen.

Jetzt kann ich zur Bibliothek für Seiten zurückkehren und auf die Seite „dwhome.aspx“ klicken, die ich gerade erstellt habe. Dadurch wird sie im Browser geöffnet, damit ich sie bearbeiten kann. Wie Sie sehen, sieht es so langsam ziemlich gut aus:

Jetzt werde ich die Daten aus der ursprünglichen Dreamweaver-Website übernehmen. Da alle Textfelder Rich-HTML-Felder sind, kann ich einfach den unbearbeiteten HTML-Code aus der Dreamweaver-Seite kopieren und im HTML-Modus in die Felder einfügen. 

Die Bilder sind ein wenig komplizierter. Zuerst lade ich sie von meinem lokalen Laufwerk in den Ordner „Images“ in SharePoint hoch. Sobald sie dort vorliegen, kann ich ein weiteres neues Veröffentlichungsfeature von SharePoint 2013 nutzen: „Bildwiedergaben“ (Image Renditions). Hiermit können Sie eine benutzerdefinierte Größe angeben, in der ein Bild wiedergegeben werden soll. In diesem Beispiel weisen alle Bilder aus dem Dreamweaver-Lernprogramm dieselbe Größe auf: 316 Pixel breit und 130 Pixel hoch. Um dieses Verhalten nachzubilden, öffne ich „Websiteeinstellungen…“ (Site Settings) > „Bildwiedergaben“ (Image Renditions) (im Abschnitt „Aussehen und Verhalten“ (Look and Feel)). Sie sehen drei unterschiedliche Wiedergaben, die im Lieferumfang enthalten sind. Ich habe einfach auf den Link geklickt, mit dem ein neues Element hinzugefügt wird, und eine neue Wiedergabe mit den angeführten Abmessungen und dem Namen Column Image erstellt. Beim Hinzufügen des Bilds zur Seite konnte ich auswählen, welche Bildwiedergabe zum Darstellen des Bilds auf der Seite verwendet werden soll. Ich wählte die Wiedergabe Column Image; dies ist alles, damit alle Abschnitte wie in der Dreamweaver-Website ausgerichtet werden.

Nach all diesen Schritten war dies mein Ergebnis – fast genau wie die Dreamweaver-Website; zum Vergleich finden Sie oben ein Bild des Originals und darunter die SharePoint-Version:

Dreamweaver-Website:

SharePoint-Website:

Es sieht wirklich ziemlich gut aus. Der größte Unterschied, der ins Auge springt, ist die Farbe und Schriftart einiger integrierter Tags wie H2 und H3. Ich werde das reparieren, indem ich die entsprechenden Bereiche in meinem Stylesheet anpasse. Sie können sich entscheiden, ob Sie dies individuell oder für alle H2, H3 usw. ändern.

Nach diesen kleinen CSS-Korrekturen ist die Seite quasi nicht mehr von der ursprünglichen Dreamweaver -Website zu unterscheiden. Ich werde die Seite „dwhome.aspx“ einchecken und als Homepage für meine Website festlegen. Als Letztes möchte ich meiner Gestaltungsvorlage noch einige der SharePoint-Features hinzufügen, die ich bereits oben erwähnt habe: die Navigation am oberen Rand und das Suchfeld.

Zunächst ziehe ich meine Gestaltungsvorlage aus der Explorer-Ansicht auf Dreamweaver. Im Browser klicke ich im Menü „Websiteaktionen“ (Site Actions) auf „Entwurfs-Manager“ (Design Manager). Ich klicke auf die Option Nr. 4, „Gestaltungsvorlagen bearbeiten“ (Edit Master Pages), und dann auf „index.html“, die Gestaltungsvorlage in diesem Beispiel. In der oberen rechten Ecke der angezeigten Vorschau klicke ich auf das Menü „Codeabschnitte“. Damit kann ich das hervorragende neue Feature nutzen, mit dem ich verschiedene SharePoint-Standardseitenelemente auswählen kann, beispielsweise Navigation am oberen oder vertikalen Seitenrand, Websitetitel und -logo, Suchfeld, Webparts usw. Um dieses Beispiel ein wenig aufzupeppen, habe ich die Website